fix: more filter tweaks

WatWowMap · Jan 6, 2024 · a4c4eee · a4c4eee
1 parent cb57574
commit a4c4eee
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 37 deletions.
diff --git a/src/components/layout/dialogs/filters/FilterMenu.jsx b/src/components/layout/dialogs/filters/FilterMenu.jsx
@@ -30,7 +30,7 @@ export default function FilterMenu() {
         extraButtons={[
           {
             name: 'save',
-            action: toggleDialog(false, category, 'filters', tempFilters),
+            action: toggleDialog(false, category, 'filters'),
             icon: 'Save',
             color: 'secondary',
           },

diff --git a/src/components/layout/dialogs/filters/QuestConditions.jsx b/src/components/layout/dialogs/filters/QuestConditions.jsx
@@ -2,11 +2,9 @@
 import * as React from 'react'
 import ListItem from '@mui/material/ListItem'
 import { useTranslation } from 'react-i18next'
-import { useStatic, useStore } from '@hooks/useStore'
-import { setDeep } from '@services/functions/setDeep'
+import { useDeepStore, useStatic } from '@hooks/useStore'
 import { FormControl, InputLabel, Select, MenuItem } from '@mui/material'
 import Typography from '@mui/material/Typography'
-import dlv from 'dlv'
 import QuestTitle from '@components/layout/general/QuestTitle'
 
 /**
@@ -15,8 +13,9 @@ import QuestTitle from '@components/layout/general/QuestTitle'
  * @returns
  */
 export function QuestConditionSelector({ id }) {
-  const value = /** @type {string} */ (
-    useStore((s) => dlv(s, `filters.pokestops.filter.${id}.adv`) || '')
+  const [value, setValue] = useDeepStore(
+    `filters.pokestops.filter.${id}.adv`,
+    '',
   )
   const questConditions = useStatic((s) => s.available.questConditions[id])
   const hasQuests = useStatic((s) => s.ui.pokestops?.quests)
@@ -26,26 +25,24 @@ export function QuestConditionSelector({ id }) {
   // Provides a reset if that condition is no longer available
   React.useEffect(() => {
     if (hasQuests) {
+      // user has quest permissions
       if (!questConditions && value) {
-        useStore.setState((prev) =>
-          setDeep(prev, `filters.pokestops.filter.${id}.adv`, ''),
-        )
+        // condition is no longer available
+        setValue('')
       } else {
+        // check if the value is still valid
         const filtered = questConditions
           ? value
               .split(',')
               .filter((each) =>
                 questConditions.find(({ title }) => title === each),
               )
           : []
-        useStore.setState((prev) =>
-          setDeep(
-            prev,
-            `filters.pokestops.filter.${id}.adv`,
-            filtered.length ? filtered.join(',') : '',
-          ),
-        )
+        setValue(filtered.length ? filtered.join(',') : '')
       }
+    } else {
+      // user does not have quest permissions
+      setValue('')
     }
   }, [questConditions, id, hasQuests])
 
@@ -73,18 +70,12 @@ export function QuestConditionSelector({ id }) {
               'props' in child &&
               child.props.value === ''
             ) {
-              useStore.setState((prev) =>
-                setDeep(prev, `filters.pokestops.filter.${id}.adv`, ''),
-              )
+              setValue('')
             } else {
-              useStore.setState((prev) =>
-                setDeep(
-                  prev,
-                  `filters.pokestops.filter.${id}.adv`,
-                  Array.isArray(e.target.value)
-                    ? e.target.value.filter(Boolean).join(',')
-                    : e.target.value,
-                ),
+              setValue(
+                Array.isArray(e.target.value)
+                  ? e.target.value.filter(Boolean).join(',')
+                  : e.target.value,
               )
             }
           }}

diff --git a/src/components/layout/drawer/SelectorItem.jsx b/src/components/layout/drawer/SelectorItem.jsx
@@ -31,8 +31,9 @@ export function SelectorItem({ id, category, caption }) {
   const title = t(id)
   const url = useStatic((s) => s.Icons.getIconById(id))
   const easyMode = useStore((s) => !!s.filters[category].easyMode)
+
   const color = filter?.enabled
-    ? filter?.all || easyMode
+    ? filter?.all || easyMode || !filter?.adv
       ? 'success.main'
       : 'info.main'
     : 'error.dark'

diff --git a/src/components/layout/general/Menu.jsx b/src/components/layout/general/Menu.jsx
@@ -7,7 +7,12 @@ import Drawer from '@mui/material/Drawer'
 import { useTranslation } from 'react-i18next'
 
 import Utility from '@services/Utility'
-import { useStore, useStatic, useLayoutStore } from '@hooks/useStore'
+import {
+  useStore,
+  useStatic,
+  useLayoutStore,
+  setDeepStore,
+} from '@hooks/useStore'
 import useFilter from '@hooks/useFilter'
 import Header from '@components/layout/general/Header'
 import Footer from '@components/layout/general/Footer'
@@ -56,14 +61,28 @@ export default function Menu({
   )
 
   const selectAllOrNone = (show) => {
-    const newObj = {}
-    Object.entries(filteredObj).forEach(([key, item]) => {
-      newObj[key] = { ...item, enabled: show }
-      if (key.startsWith('t') && key.charAt(1) != 0 && !webhookCategory) {
-        Object.assign(newObj, Utility.generateSlots(key, show, tempFilters))
-      }
-    })
-    setTempFilters({ ...tempFilters, ...newObj })
+    const existing = useStore.getState().filters[category].filter ?? {}
+    const newObj = Object.fromEntries(
+      Object.entries(existing).flatMap(([key, item]) => {
+        const filters = [
+          [key, key in filteredObj ? { ...item, enabled: show } : item],
+        ]
+        if (key.startsWith('t') && key.charAt(1) != 0 && !webhookCategory) {
+          filters.push(
+            ...Object.entries(Utility.generateSlots(key, show, existing)),
+          )
+        }
+        return filters
+      }),
+    )
+    // Object.entries(filteredObj).forEach(([key, item]) => {
+    //   newObj[key] = { ...item, enabled: show }
+    //   if (key.startsWith('t') && key.charAt(1) != 0 && !webhookCategory) {
+    //     Object.assign(newObj, Utility.generateSlots(key, show, tempFilters))
+    //   }
+    // })
+    // setTempFilters({ ...tempFilters, ...newObj })
+    setDeepStore(`filters.${category}.filter`, newObj)
   }
 
   const toggleDrawer = React.useCallback(

diff --git a/src/hooks/useStore.js b/src/hooks/useStore.js
@@ -162,6 +162,16 @@ export function useGetDeepStore(field, defaultValue) {
   return useStore((s) => dlv(s, field, defaultValue))
 }
 
+/**
+ * @template {UseStorePaths} T
+ * @param {T} field
+ * @param {import('@rm/types').ConfigPathValue<UseStore, T>} value
+ * @returns {void}
+ */
+export function setDeepStore(field, value) {
+  return useStore.setState((s) => setDeep(s, field, value))
+}
+
 /**
  * @template {UseStorePaths} Paths
  * @template {import('@rm/types').ConfigPathValue<UseStore, Paths>} T