From c110b13affc12cf6cf9443bda943caa25eb1471a Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <7019101+cwillisf@users.noreply.github.com>
Date: Wed, 9 Dec 2020 14:02:08 -0800
Subject: [PATCH] clarify HOC names and move props to match

Previously the two HOCs in app.jsx were named according to their place
in the component structure, which didn't provide any information about
their functionality or meaning. Now they are named according to the
components they wrap, which should help with future maintenance in that
it will guide which props belong in each.
---
 src/renderer/app.jsx | 36 +++++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/renderer/app.jsx b/src/renderer/app.jsx
index 4d9760d..b868198 100644
--- a/src/renderer/app.jsx
+++ b/src/renderer/app.jsx
@@ -43,14 +43,16 @@ document.body.appendChild(appTarget);
 
 GUI.setAppElement(appTarget);
 
-const ScratchDesktopOuterHOC = function (WrappedComponent) {
-    const ScratchDesktopOuterComponent = function (props) {
+/**
+ * Higher-order component to add desktop logic to AppStateHOC.
+ * @param {Component} WrappedComponent - an AppStateHOC-like component to wrap.
+ * @returns {Component} - a component similar to AppStateHOC with desktop-specific logic added.
+ */
+const ScratchDesktopAppStateHOC = function (WrappedComponent) {
+    const ScratchDesktopAppStateComponent = function (props) {
         const shouldShowTelemetryModal = (typeof ipcRenderer.sendSync('getTelemetryDidOptIn') !== 'boolean');
 
         return (<WrappedComponent
-            canEditTitle
-            canModifyCloudData={false}
-            isScratchDesktop
             showTelemetryModal={shouldShowTelemetryModal}
 
             // allow passed-in props to override any of the above
@@ -58,11 +60,16 @@ const ScratchDesktopOuterHOC = function (WrappedComponent) {
         />);
     };
 
-    return ScratchDesktopOuterComponent;
+    return ScratchDesktopAppStateComponent;
 };
 
-const ScratchDesktopInnerHOC = function (WrappedComponent) {
-    class ScratchDesktopInnerComponent extends React.Component {
+/**
+ * Higher-order component to add desktop logic to the GUI.
+ * @param {Component} WrappedComponent - a GUI-like component to wrap.
+ * @returns {Component} - a component similar to GUI with desktop-specific logic added.
+ */
+const ScratchDesktopGUIHOC = function (WrappedComponent) {
+    class ScratchDesktopGUIComponent extends React.Component {
         constructor (props) {
             super(props);
             bindAll(this, [
@@ -134,9 +141,12 @@ const ScratchDesktopInnerHOC = function (WrappedComponent) {
             this.setState({projectTitle: newTitle});
         }
         render () {
-            const childProps = omit(this.props, Object.keys(ScratchDesktopInnerComponent.propTypes));
+            const childProps = omit(this.props, Object.keys(ScratchDesktopGUIComponent.propTypes));
 
             return (<WrappedComponent
+                canEditTitle
+                canModifyCloudData={false}
+                isScratchDesktop
                 onClickLogo={this.handleClickLogo}
                 onProjectTelemetryEvent={this.handleProjectTelemetryEvent}
                 onStorageInit={this.handleStorageInit}
@@ -150,7 +160,7 @@ const ScratchDesktopInnerHOC = function (WrappedComponent) {
         }
     }
 
-    ScratchDesktopInnerComponent.propTypes = {
+    ScratchDesktopGUIComponent.propTypes = {
         loadingState: PropTypes.oneOf(LoadingStates),
         onFetchedInitialProjectData: PropTypes.func,
         onHasInitialProject: PropTypes.func,
@@ -190,16 +200,16 @@ const ScratchDesktopInnerHOC = function (WrappedComponent) {
         onRequestNewProject: () => dispatch(requestNewProject(false))
     });
 
-    return connect(mapStateToProps, mapDispatchToProps)(ScratchDesktopInnerComponent);
+    return connect(mapStateToProps, mapDispatchToProps)(ScratchDesktopGUIComponent);
 };
 
 // note that redux's 'compose' function is just being used as a general utility to make
 // the hierarchy of HOC constructor calls clearer here; it has nothing to do with redux's
 // ability to compose reducers.
 const WrappedGui = compose(
-    ScratchDesktopOuterHOC,
+    ScratchDesktopAppStateHOC,
     AppStateHOC,
-    ScratchDesktopInnerHOC
+    ScratchDesktopGUIHOC
 )(GUI);
 
 ReactDOM.render(<WrappedGui />, appTarget);