refactor: move help dialog

src/components/layout/Nav.jsx

@@ -21,6 +21,7 @@ import AdvancedFilter from './dialogs/filters/Advanced'
 import BadgeSelection from './dialogs/BadgeSelection'
 import WebhookAdvanced from './dialogs/webhooks/WebhookAdv'
 import SlotSelection from './dialogs/filters/SlotSelection'
+import { HelpDialog } from './dialogs/Help'
 
 export const Nav = React.memo(
   () => {
@@ -47,6 +48,7 @@ export const Nav = React.memo(
         <BadgeSelection />
         <WebhookAdvanced />
         <SlotSelection />
+        <HelpDialog />
       </>
     )
   },

src/components/layout/dialogs/Help.jsx

@@ -0,0 +1,18 @@
+// @ts-check
+import * as React from 'react'
+
+import { useLayoutStore } from '@hooks/useStore'
+
+import Help from './tutorial/Advanced'
+import { DialogWrapper } from './DialogWrapper'
+
+export function HelpDialog() {
+  const { open, category } = useLayoutStore((s) => s.help)
+  const handleClose = () =>
+    useLayoutStore.setState({ help: { open: false, category: '' } })
+  return (
+    <DialogWrapper open={open} onClose={handleClose}>
+      <Help toggleHelp={handleClose} category={category} />
+    </DialogWrapper>
+  )
+}

src/components/layout/dialogs/tutorial/Advanced.jsx

@@ -28,16 +28,10 @@ import data from './data'
 export default function TutAdvanced({ toggleHelp, category }) {
   const { t } = useTranslation()
   const isMobile = useStatic((s) => s.isMobile)
+  const [localCategory, setLocalCategory] = useState(category)
+  const [isPokemon, setIsPokemon] = useState(localCategory === 'pokemon')
 
-  const [isPokemon, setIsPokemon] = useState(category === 'pokemon')
-
-  if (!category) {
-    category = isPokemon ? 'pokemon' : 'gyms'
-  }
-  const [tempFilters, setTempFilters] = useState({
-    ...data.filters[category].filter,
-    ...Utility.generateSlots('t3-0', true, {}),
-  })
+  const [tempFilters, setTempFilters] = useState({})
 
   const handleSwitch = () => {
     if (isPokemon) {
@@ -48,9 +42,19 @@ export default function TutAdvanced({ toggleHelp, category }) {
     } else {
       setTempFilters(data.filters.pokemon.filter)
     }
-    setIsPokemon(!isPokemon)
+    setLocalCategory(isPokemon ? 'gyms' : 'pokemon')
+    setIsPokemon((prev) => !prev)
   }
 
+  React.useEffect(() => {
+    const newCategory = category ?? isPokemon ? 'pokemon' : 'gyms'
+    setLocalCategory(newCategory)
+    setTempFilters({
+      ...data.filters[newCategory].filter,
+      ...Utility.generateSlots('t3-0', true, {}),
+    })
+  }, [category])
+
   return (
     <DialogContent>
       <Grid
@@ -68,9 +72,9 @@ export default function TutAdvanced({ toggleHelp, category }) {
         </Grid>
         <Grid item xs={12} sm={8}>
           <Box height={135}>
-            <VirtualGrid data={data.tiles[category]} xs={6}>
+            <VirtualGrid data={data.tiles[localCategory]} xs={6}>
               {(_, key) => (
-                <StandardItem id={key} category={category} caption />
+                <StandardItem id={key} category={localCategory} caption />
               )}
             </VirtualGrid>
           </Box>

src/components/layout/dialogs/tutorial/Tutorial.jsx

@@ -83,7 +83,7 @@ export default function Tutorial() {
                 0: <Welcome />,
                 1: <Sidebar />,
                 2: <Sliders />,
-                3: <Advanced />,
+                3: <Advanced category="pokemon" />,
                 4: <Popups />,
                 5: <Closing />,
               }[step]

src/components/layout/general/Menu.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import Box from '@mui/material/Box'
-import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
 import Typography from '@mui/material/Typography'
 import Drawer from '@mui/material/Drawer'
@@ -14,7 +13,6 @@ import Footer from '@components/layout/general/Footer'
 import { applyToAll } from '@services/filtering/applyToAll'
 
 import OptionsContainer from '../dialogs/filters/OptionsContainer'
-import Help from '../dialogs/tutorial/Advanced'
 import { VirtualGrid } from './VirtualGrid'
 import { GenericSearch } from '../drawer/ItemSearch'
 import { useWebhookStore } from '../dialogs/webhooks/store'
@@ -48,7 +46,6 @@ export default function Menu({
   const menus = useStore((state) => state.menus)
 
   const [filterDrawer, setFilterDrawer] = useState(false)
-  const [helpDialog, setHelpDialog] = useState(false)
 
   const { filteredObj, filteredArr, count } = useFilter(
     tempFilters,
@@ -89,7 +86,8 @@ export default function Menu({
     return [
       {
         name: 'help',
-        action: () => setHelpDialog((prev) => !prev),
+        action: () =>
+          useLayoutStore.setState({ help: { open: true, category } }),
         icon: 'HelpOutline',
       },
       {
@@ -168,13 +166,6 @@ export default function Menu({
           {Options}
         </Drawer>
       )}
-      <Dialog open={helpDialog} onClose={() => setHelpDialog(false)}>
-        <Help
-          toggleHelp={() => setHelpDialog(!helpDialog)}
-          category={category}
-          isMobile={isMobile}
-        />
-      </Dialog>
     </>
   )
 }

src/hooks/useStore.js

@@ -361,6 +361,10 @@ export const useStatic = create((set) => ({
 /**
  * @typedef {{
  *  nestSubmissions: string | number,
+ *  help: {
+ *   open: boolean,
+ *   category: string,
+ *  },
  *  motd: boolean,
  *  donorPage: boolean,
  *  search: boolean,
@@ -391,6 +395,7 @@ export const useStatic = create((set) => ({
  */
 export const useLayoutStore = create(() => ({
   nestSubmissions: '0',
+  help: { open: false, category: '' },
   motd: false,
   donorPage: false,
   search: false,