refactor: more memoizing/cleanup

WatWowMap · Jan 15, 2024 · f18f5c3 · f18f5c3
1 parent 381a940
commit f18f5c3
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 67 deletions.
diff --git a/src/components/layout/drawer/areas/AreaTable.jsx b/src/components/layout/drawer/areas/AreaTable.jsx
@@ -35,6 +35,38 @@ export function ScanAreasTable() {
     [data],
   )
 
+  const allRows = React.useMemo(
+    () =>
+      (data?.scanAreasMenu || [])
+        .map((area) => ({
+          ...area,
+          children: area.children.filter(
+            (feature) =>
+              search === '' ||
+              feature.properties?.key?.toLowerCase()?.includes(search),
+          ),
+        }))
+        .map(({ children, ...rest }) => {
+          const rows = []
+          for (let i = 0; i < children.length; i += 1) {
+            const newRow = []
+            if (children[i]) newRow.push(children[i])
+            if (
+              children[i + 1] &&
+              (children[i]?.properties?.name?.length || 0) +
+                (children[i + 1]?.properties?.name?.length || 0) <
+                40
+            )
+              // eslint-disable-next-line no-plusplus
+              newRow.push(children[++i])
+            rows.push(newRow)
+          }
+          return { ...rest, children, rows }
+        }),
+    [data, search],
+  )
+
+  console.log(allRows)
   if (loading || error) return null
 
   return (
@@ -55,55 +87,44 @@ export function ScanAreasTable() {
         })}
       >
         <TableBody>
-          {data?.scanAreasMenu
-            ?.map((area) => ({
-              ...area,
-              children: area.children.filter(
-                (feature) =>
-                  search === '' ||
-                  feature.properties?.key?.toLowerCase()?.includes(search),
-              ),
-            }))
-            .map(({ name, details, children }) => {
-              if (!children.length) return null
-              const rows = []
-              for (let i = 0; i < children.length; i += 1) {
-                const newRow = []
-                if (children[i]) newRow.push(children[i])
-                if (
-                  children[i + 1] &&
-                  (children[i]?.properties?.name?.length || 0) +
-                    (children[i + 1]?.properties?.name?.length || 0) <
-                    40
-                )
-                  // eslint-disable-next-line no-plusplus
-                  newRow.push(children[++i])
-                rows.push(newRow)
-              }
-              return (
-                <React.Fragment key={`${name}-${children.length}`}>
-                  {name && (
-                    <TableRow>
-                      <AreaChild
-                        name={name}
-                        feature={details}
-                        allAreas={allAreas}
-                        childAreas={children}
-                        colSpan={2}
-                      />
-                    </TableRow>
-                  )}
+          {allRows.map(({ name, details, children, rows }) => {
+            if (!children.length) return null
+            return (
+              <React.Fragment key={`${name}-${children.length}`}>
+                {name && (
                   <TableRow>
-                    <AreaParent
+                    <AreaChild
                       name={name}
-                      rows={rows}
+                      feature={details}
                       allAreas={allAreas}
                       childAreas={children}
+                      colSpan={2}
                     />
                   </TableRow>
-                </React.Fragment>
-              )
-            })}
+                )}
+                <TableRow>
+                  <AreaParent name={name}>
+                    {rows.map((row, i) => (
+                      <TableRow
+                        key={`${row[0]?.properties?.key}-${row[1]?.properties?.key}`}
+                      >
+                        {row.map((feature, j) => (
+                          <AreaChild
+                            key={feature?.properties?.name || `${i}${j}`}
+                            feature={feature}
+                            allAreas={allAreas}
+                            childAreas={children}
+                            borderRight={row.length === 2 && j === 0}
+                            colSpan={row.length === 1 ? 2 : 1}
+                          />
+                        ))}
+                      </TableRow>
+                    ))}
+                  </AreaParent>
+                </TableRow>
+              </React.Fragment>
+            )
+          })}
         </TableBody>
       </Table>
     </TableContainer>

diff --git a/src/components/layout/drawer/areas/Parent.jsx b/src/components/layout/drawer/areas/Parent.jsx
@@ -1,19 +1,16 @@
 // @ts-check
 import * as React from 'react'
-import { Table, TableBody, TableRow, Collapse, TableCell } from '@mui/material'
+import { Table, TableBody, Collapse, TableCell } from '@mui/material'
 import { useMemory } from '@hooks/useMemory'
 import { useStorage } from '@hooks/useStorage'
-import { AreaChild } from './Child'
 
 /**
  * @param {{
  *  name: string
- *  rows: Pick<import('@rm/types').RMFeature, "properties">[][]
- *  childAreas: Pick<import('@rm/types').RMFeature, "properties">[]
- *  allAreas: string[]
+ *  children: React.ReactNode
  * }} props
  */
-export function AreaParent({ name, rows, childAreas, allAreas }) {
+export function AreaParent({ name, children }) {
   const search = useStorage((s) => s.filters?.scanAreas?.filter?.search || '')
   const expandAllScanAreas = useMemory((s) => s.config.misc.expandAllScanAreas)
   const open = useStorage((s) => s.scanAreasMenu === name)
@@ -27,24 +24,7 @@ export function AreaParent({ name, rows, childAreas, allAreas }) {
         sx={{ width: '100%' }}
       >
         <Table sx={{ width: '100%' }}>
-          <TableBody sx={{ width: '100%' }}>
-            {rows.map((row, i) => (
-              <TableRow
-                key={`${row[0]?.properties?.key}-${row[1]?.properties?.key}`}
-              >
-                {row.map((feature, j) => (
-                  <AreaChild
-                    key={feature?.properties?.name || `${i}${j}`}
-                    feature={feature}
-                    allAreas={allAreas}
-                    childAreas={childAreas}
-                    borderRight={row.length === 2 && j === 0}
-                    colSpan={row.length === 1 ? 2 : 1}
-                  />
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
+          <TableBody sx={{ width: '100%' }}>{children}</TableBody>
         </Table>
       </Collapse>
     </TableCell>