Merge pull request #918 from WatWowMap/refactor-scan-area-menu

refactor: scan areas drawer section
WatWowMap · Jan 16, 2024 · cbbc52d · cbbc52d
2 parents a18f4a0 + 315508d
commit cbbc52d
Show file tree

Hide file tree

Showing 13 changed files with 367 additions and 337 deletions.
diff --git a/packages/types/lib/general.d.ts b/packages/types/lib/general.d.ts
@@ -15,6 +15,9 @@ export type RMFeature = Feature<
     hidden?: boolean
     parent?: string
     manual?: boolean
+    formattedName?: string
+    zoom?: number
+    center?: [number, number]
     key: string
   }
 >

diff --git a/server/src/graphql/resolvers.js b/server/src/graphql/resolvers.js
@@ -324,18 +324,18 @@ const resolvers = {
             }))
             .filter((parent) => parent.children.length)
 
-          // Adds new blanks to account for area restrictions trimming some
-          filtered.forEach(({ children }) => {
-            if (children.length % 2 === 1) {
-              children.push({
-                type: 'Feature',
-                properties: {
-                  name: '',
-                  manual: !!config.getSafe('manualAreas.length'),
-                },
-              })
-            }
-          })
+          // // Adds new blanks to account for area restrictions trimming some
+          // filtered.forEach(({ children }) => {
+          //   if (children.length % 2 === 1) {
+          //     children.push({
+          //       type: 'Feature',
+          //       properties: {
+          //         name: '',
+          //         manual: !!config.getSafe('manualAreas.length'),
+          //       },
+          //     })
+          //   }
+          // })
           return filtered
         }
         return scanAreas.filter((parent) => parent.children.length)

diff --git a/server/src/services/areas.js b/server/src/services/areas.js
@@ -255,7 +255,17 @@ const getAreas = async () => {
 
   const scanAreasMenu = Object.fromEntries(
     Object.entries(scanAreas).map(([domain, featureCollection]) => {
-      const parents = { '': { children: [], name: '' } }
+      const parents = {
+        '': {
+          children:
+            /** @type {Pick<import('@rm/types').RMFeature, 'properties'>[]} */ ([]),
+          name: '',
+          details:
+            /** @type {Pick<import('@rm/types').RMFeature, 'properties'> | null} */ (
+              null
+            ),
+        },
+      }
 
       const noHiddenFeatures = {
         ...featureCollection,

diff --git a/src/components/layout/drawer/Actions.jsx b/src/components/layout/drawer/Actions.jsx
@@ -1,13 +1,9 @@
-import React, { forwardRef } from 'react'
+import * as React from 'react'
 import List from '@mui/material/List'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemText from '@mui/material/ListItemText'
 import Divider from '@mui/material/Divider'
 import MuiLink from '@mui/material/Link'
 
 import { Link } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
 import AccountBoxIcon from '@mui/icons-material/AccountBox'
 import ExitToAppIcon from '@mui/icons-material/ExitToApp'
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
@@ -22,7 +18,9 @@ import { useMemory } from '@hooks/useMemory'
 import { useLayoutStore } from '@hooks/useLayoutStore'
 import { useStorage } from '@hooks/useStorage'
 import { I } from '../general/I'
+import { BasicListButton } from '../general/BasicListButton'
 
+/** @type {React.ChangeEventHandler<HTMLInputElement>} */
 const importSettings = (e) => {
   const file = e.target.files[0]
   if (!file) {
@@ -32,33 +30,20 @@ const importSettings = (e) => {
   reader.onload = function parse(newSettings) {
     const contents = newSettings.target.result
     localStorage.clear()
-    localStorage.setItem('local-state', contents)
+    localStorage.setItem('local-state', contents.toString())
   }
   reader.readAsText(file)
   setTimeout(() => window.location.reload(), 1500)
 }
 
-const exportSettings = () => {
-  const json = localStorage.getItem('local-state')
-  downloadJson(json, 'settings.json')
-  const el = document.createElement('a')
-  el.setAttribute(
-    'href',
-    `data:application/json;chartset=utf-8,${encodeURIComponent(json)}`,
-  )
-  el.setAttribute('download', 'settings.json')
-  el.style.display = 'none'
-  document.body.appendChild(el)
-  el.click()
-  document.body.removeChild(el)
-}
+const exportSettings = () =>
+  downloadJson(localStorage.getItem('local-state'), 'settings.json')
 
-const renderLink = forwardRef(({ to, ...itemProps }, ref) => (
+const renderLink = React.forwardRef(({ to, ...itemProps }, ref) => (
   <Link to={to} ref={ref} {...itemProps} />
 ))
 
 export default function DrawerActions() {
-  const { t } = useTranslation()
   const {
     auth: { loggedIn, methods },
     config,
@@ -67,22 +52,20 @@ export default function DrawerActions() {
   return (
     <List>
       {config.misc.enableUserProfile && (
-        <ListItemButton
+        <BasicListButton
           onClick={() => useLayoutStore.setState({ userProfile: true })}
+          label="profile"
         >
-          <ListItemIcon>
-            <AccountBoxIcon color="secondary" />
-          </ListItemIcon>
-          <ListItemText primary={t('profile')} />
-        </ListItemButton>
+          <AccountBoxIcon color="secondary" />
+        </BasicListButton>
       )}
       {config.misc.enableTutorial && (
-        <ListItemButton onClick={() => useStorage.setState({ tutorial: true })}>
-          <ListItemIcon>
-            <HelpOutlineIcon color="secondary" />
-          </ListItemIcon>
-          <ListItemText primary={t('tutorial')} />
-        </ListItemButton>
+        <BasicListButton
+          onClick={() => useStorage.setState({ tutorial: true })}
+          label="tutorial"
+        >
+          <HelpOutlineIcon color="secondary" />
+        </BasicListButton>
       )}
       <input
         accept="application/json"
@@ -91,88 +74,76 @@ export default function DrawerActions() {
         style={{ display: 'none' }}
         onChange={importSettings}
       />
-      <ListItemButton onClick={exportSettings}>
-        <ListItemIcon>
-          <ImportExportIcon color="secondary" />
-        </ListItemIcon>
-        <ListItemText primary={t('export')} />
-      </ListItemButton>
-      <ListItemButton component="label" htmlFor="contained-button-file">
-        <ListItemIcon>
-          <ImportExportIcon color="primary" />
-        </ListItemIcon>
-        <ListItemText primary={t('import')} />
-      </ListItemButton>
-      <ListItemButton
+      <BasicListButton onClick={exportSettings} label="export">
+        <ImportExportIcon color="secondary" />
+      </BasicListButton>
+
+      <BasicListButton
+        component="label"
+        htmlFor="contained-button-file"
+        onClick={exportSettings}
+        label="import"
+      >
+        <ImportExportIcon color="primary" />
+      </BasicListButton>
+
+      <BasicListButton
         onClick={() => useLayoutStore.setState({ resetFilters: true })}
+        label="reset_filters"
       >
-        <ListItemIcon>
-          <RotateLeftIcon color="primary" />
-        </ListItemIcon>
-        <ListItemText primary={t('reset_filters')} />
-      </ListItemButton>
+        <RotateLeftIcon color="primary" />
+      </BasicListButton>
+
       {!!methods.length && (
-        <ListItemButton
+        <BasicListButton
           component={loggedIn ? MuiLink : renderLink}
           to={loggedIn ? undefined : '/login'}
           href={loggedIn ? '/auth/logout' : undefined}
+          label={loggedIn ? 'logout' : 'login'}
         >
-          <ListItemIcon>
-            <ExitToAppIcon color="primary" />
-          </ListItemIcon>
-          <ListItemText primary={t(loggedIn ? 'logout' : 'login')} />
-        </ListItemButton>
+          <ExitToAppIcon color="primary" />
+        </BasicListButton>
       )}
       <Divider />
       {!config.misc.rude && (
-        <ListItemButton
+        <BasicListButton
           href="https://github.com/WatWowMap/ReactMap"
           referrerPolicy="no-referrer"
           target="_blank"
           rel="noreferrer"
+          label="contribute"
         >
-          <ListItemIcon>
-            <HeartIcon color="primary" />
-          </ListItemIcon>
-          <ListItemText primary={t('contribute')} />
-        </ListItemButton>
+          <HeartIcon color="primary" />
+        </BasicListButton>
       )}
       {config.links.statsLink && (
-        <ListItemButton
+        <BasicListButton
           component="button"
           href={config.links.statsLink}
           target="_blank"
           rel="noreferrer"
+          label="stats"
         >
-          <ListItemIcon>
-            <TrendingUpIcon color="success" />
-          </ListItemIcon>
-          <ListItemText primary={t('stats')} />
-        </ListItemButton>
+          <TrendingUpIcon color="success" />
+        </BasicListButton>
       )}
       {config.links.feedbackLink && (
-        <ListItemButton
-          component="button"
+        <BasicListButton
           onClick={() => useLayoutStore.setState({ feedback: true })}
+          label="feedback"
         >
-          <ListItemIcon>
-            <FeedbackIcon color="success" />
-          </ListItemIcon>
-          <ListItemText primary={t('feedback')} />
-        </ListItemButton>
+          <FeedbackIcon color="success" />
+        </BasicListButton>
       )}
       {config.links.discordLink && (
-        <ListItemButton
-          component="button"
+        <BasicListButton
           href={config.links.discordLink}
           target="_blank"
           rel="noreferrer"
+          label="Discord"
         >
-          <ListItemIcon>
-            <I className="fab fa-discord" color="secondary" size="small" />
-          </ListItemIcon>
-          <ListItemText primary="Discord" />
-        </ListItemButton>
+          <I className="fab fa-discord" color="secondary" size="small" />
+        </BasicListButton>
       )}
     </List>
   )