Refactor LayerUI (#1434)

* chore(gitignore): add .idea to gitignore

* refactor(layerui): pass named function to react.memo so that in dev tools the name shows up

This makes debugging easier as well

* refactor(layerui): break the functional component into multiple render methods

.gitignore

@@ -12,3 +12,4 @@ static
 yarn-debug.log*
 yarn-error.log*
 yarn.lock
+.idea

src/components/App.tsx

@@ -114,7 +114,7 @@ import {
   TAP_TWICE_TIMEOUT,
 } from "../time_constants";
 
-import { LayerUI } from "./LayerUI";
+import LayerUI from "./LayerUI";
 import { ScrollBars, SceneState } from "../scene/types";
 import { generateCollaborationLink, getCollaborationLinkData } from "../data";
 import { mutateElement, newElementWith } from "../element/mutateElement";

src/components/LayerUI.tsx

@@ -40,8 +40,7 @@ interface LayerUIProps {
   onLockToggle: () => void;
 }
 
-export const LayerUI = React.memo(
+const LayerUI = ({
-  ({
   actionManager,
   appState,
   setAppState,
@@ -51,10 +50,10 @@ export const LayerUI = React.memo(
   onUsernameChange,
   onRoomDestroy,
   onLockToggle,
-  }: LayerUIProps) => {
+}: LayerUIProps) => {
   const isMobile = useIsMobile();
 
-    function renderExportDialog() {
+  const renderExportDialog = () => {
     const createExporter = (type: ExportType): ExportCB => (
       exportedElements,
       scale,
@@ -92,44 +91,15 @@ export const LayerUI = React.memo(
         }}
       />
     );
-    }
+  };
 
-    return isMobile ? (
+  const renderCanvasActions = () => (
-      <MobileMenu
-        appState={appState}
-        elements={elements}
-        actionManager={actionManager}
-        exportButton={renderExportDialog()}
-        setAppState={setAppState}
-        onUsernameChange={onUsernameChange}
-        onRoomCreate={onRoomCreate}
-        onRoomDestroy={onRoomDestroy}
-        onLockToggle={onLockToggle}
-      />
-    ) : (
-      <>
-        {appState.isLoading && <LoadingMessage />}
-        {appState.errorMessage && (
-          <ErrorDialog
-            message={appState.errorMessage}
-            onClose={() => setAppState({ errorMessage: null })}
-          />
-        )}
-        {appState.showShortcutsDialog && (
-          <ShortcutsDialog
-            onClose={() => setAppState({ showShortcutsDialog: null })}
-          />
-        )}
-        <FixedSideContainer side="top">
-          <HintViewer appState={appState} elements={elements} />
-          <div className="App-menu App-menu_top">
-            <Stack.Col gap={4}>
     <Section heading="canvasActions">
       {/* the zIndex ensures this menu has higher stacking order,
          see https://github.com/excalidraw/excalidraw/pull/1445 */}
       <Island padding={4} style={{ zIndex: 1 }}>
         <Stack.Col gap={4}>
-                    <Stack.Row gap={1} justifyContent={"space-between"}>
+          <Stack.Row gap={1} justifyContent="space-between">
             {actionManager.renderAction("loadScene")}
             {actionManager.renderAction("saveScene")}
             {renderExportDialog()}
@@ -147,7 +117,9 @@ export const LayerUI = React.memo(
         </Stack.Col>
       </Island>
     </Section>
-              {showSelectedShapeActions(appState, elements) && (
+  );
+
+  const renderSelectedShapeActions = () => (
     <Section heading="selectedShapeActions">
       <Island className={CLASSES.SHAPE_ACTIONS_MENU} padding={4}>
         <SelectedShapeActions
@@ -158,7 +130,20 @@ export const LayerUI = React.memo(
         />
       </Island>
     </Section>
-              )}
+  );
+
+  const renderFixedSideContainer = () => {
+    const shouldRenderSelectedShapeActions = showSelectedShapeActions(
+      appState,
+      elements,
+    );
+    return (
+      <FixedSideContainer side="top">
+        <HintViewer appState={appState} elements={elements} />
+        <div className="App-menu App-menu_top">
+          <Stack.Col gap={4}>
+            {renderCanvasActions()}
+            {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
           <Section heading="shapes">
             {(heading) => (
@@ -197,9 +182,10 @@ export const LayerUI = React.memo(
           </Stack.Col>
         </div>
       </FixedSideContainer>
-        <aside>
+    );
-          <GitHubCorner />
+  };
-        </aside>
+
+  const renderFooter = () => (
     <footer role="contentinfo">
       <LanguageList
         onChange={(lng) => {
@@ -221,10 +207,44 @@ export const LayerUI = React.memo(
         </button>
       )}
     </footer>
+  );
+
+  return isMobile ? (
+    <MobileMenu
+      appState={appState}
+      elements={elements}
+      actionManager={actionManager}
+      exportButton={renderExportDialog()}
+      setAppState={setAppState}
+      onUsernameChange={onUsernameChange}
+      onRoomCreate={onRoomCreate}
+      onRoomDestroy={onRoomDestroy}
+      onLockToggle={onLockToggle}
+    />
+  ) : (
+    <>
+      {appState.isLoading && <LoadingMessage />}
+      {appState.errorMessage && (
+        <ErrorDialog
+          message={appState.errorMessage}
+          onClose={() => setAppState({ errorMessage: null })}
+        />
+      )}
+      {appState.showShortcutsDialog && (
+        <ShortcutsDialog
+          onClose={() => setAppState({ showShortcutsDialog: null })}
+        />
+      )}
+      {renderFixedSideContainer()}
+      <aside>
+        <GitHubCorner />
+      </aside>
+      {renderFooter()}
     </>
   );
-  },
+};
-  (prev, next) => {
+
+const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
   const getNecessaryObj = (appState: AppState): Partial<AppState> => {
     const {
       draggingElement,
@@ -247,5 +267,6 @@ export const LayerUI = React.memo(
     prev.elements === next.elements &&
     keys.every((key) => prevAppState[key] === nextAppState[key])
   );
-  },
+};
-);
+
+export default React.memo(LayerUI, areEqual);