fix: search/setting filtered behavior

WatWowMap · Jan 3, 2024 · a30c286 · a30c286
1 parent 272d80d
commit a30c286
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 48 deletions.
diff --git a/packages/locales/lib/human/en.json b/packages/locales/lib/human/en.json
@@ -704,6 +704,7 @@
   "granted": "granted",
   "global_respects_selected": "Global Respects Selected",
   "set_all": "Set All",
+  "set_filtered": "Set Filtered",
   "only_show_available": "Only Show Available",
   "easy_mode": "Easy Mode"
 }
diff --git a/src/components/layout/drawer/ItemSearch.jsx b/src/components/layout/drawer/ItemSearch.jsx
@@ -2,9 +2,12 @@
 import * as React from 'react'
 import ListItem from '@mui/material/ListItem'
 import TextField from '@mui/material/TextField'
+import IconButton from '@mui/material/IconButton'
+import HighlightOffIcon from '@mui/icons-material/HighlightOff'
 import { useTranslation } from 'react-i18next'
-import { useStore } from '@hooks/useStore'
 import dlv from 'dlv'
+
+import { useStore } from '@hooks/useStore'
 import { setDeep } from '@services/functions/setDeep'
 
 /**
@@ -33,6 +36,19 @@ export function ItemSearch({ field, label = 'search', disabled }) {
             setDeep(prev, field, e.target.value || ''),
           )
         }
+        InputProps={{
+          endAdornment: (
+            <IconButton
+              size="small"
+              disabled={!value}
+              onClick={() =>
+                useStore.setState((prev) => setDeep(prev, field, ''))
+              }
+            >
+              <HighlightOffIcon fontSize="small" />
+            </IconButton>
+          ),
+        }}
       />
     </ListItem>
   )

diff --git a/src/components/layout/drawer/Pokemon.jsx b/src/components/layout/drawer/Pokemon.jsx
@@ -49,8 +49,46 @@ function AvailableSelector() {
   })
   const [open, setOpen] = React.useState(false)
 
+  const items = React.useMemo(() => {
+    const lowerCase = search.toLowerCase()
+    return (
+      filters.onlyShowAvailable
+        ? available
+        : Object.keys(filters.filter).filter((key) => key !== 'global')
+    )
+      .map((key) => {
+        const [pokemon, form] = key.split('-', 2)
+        const pokemonName = t(`poke_${pokemon}`)
+        const formName = +form ? t(`form_${form}`) : ''
+
+        return {
+          key,
+          pokemonName,
+          formName,
+          url: Icons.getPokemon(pokemon, form),
+          color: filters.filter[key]?.enabled
+            ? filters.filter[key]?.all || filters.easyMode
+              ? 'success.main'
+              : 'info.main'
+            : 'error.dark',
+        }
+      })
+      .filter(
+        ({ pokemonName, formName }) =>
+          pokemonName.toLowerCase().includes(lowerCase) ||
+          formName.toLowerCase().includes(lowerCase),
+      )
+  }, [
+    filters.onlyShowAvailable,
+    filters.easyMode,
+    filters.filter,
+    available,
+    search,
+  ])
+
   const onClose = (e, id, filter) => () => {
     if (e !== undefined) {
+      const keys = new Set(items.map((item) => item.key))
       useStore.setState((prev) => ({
         filters: {
           ...prev.filters,
@@ -59,14 +97,18 @@ function AvailableSelector() {
             filter:
               id === 'global'
                 ? Object.fromEntries(
-                    Object.entries(prev.filters.pokemon.filter).map(([key]) => [
-                      key,
-                      {
-                        ...filter,
-                        enabled: true,
-                        all: prev.filters.pokemon.easyMode,
-                      },
-                    ]),
+                    Object.entries(prev.filters.pokemon.filter).map(
+                      ([key, oldFilter]) => [
+                        key,
+                        keys.has(key)
+                          ? {
+                              ...filter,
+                              enabled: true,
+                              all: prev.filters.pokemon.easyMode,
+                            }
+                          : oldFilter,
+                      ],
+                    ),
                   )
                 : {
                     ...prev.filters.pokemon.filter,
@@ -90,6 +132,7 @@ function AvailableSelector() {
    * @param {'enable' | 'disable' | 'advanced'} action
    */
   const setAll = (action) => {
+    const keys = new Set(items.map((item) => item.key))
     useStore.setState((prev) => ({
       filters: {
         ...prev.filters,
@@ -99,51 +142,14 @@ function AvailableSelector() {
             Object.entries(prev.filters.pokemon.filter).map(([key, value]) => {
               const enabled = action !== 'disable'
               const all = action === 'enable'
-              return [key, { ...value, enabled, all }]
+              return [key, keys.has(key) ? { ...value, enabled, all } : value]
             }),
           ),
         },
       },
     }))
   }
 
-  const items = React.useMemo(() => {
-    const lowerCase = search.toLowerCase()
-    return (
-      filters.onlyShowAvailable
-        ? available
-        : Object.keys(filters.filter).filter((key) => key !== 'global')
-    )
-      .map((key) => {
-        const [pokemon, form] = key.split('-', 2)
-        const pokemonName = t(`poke_${pokemon}`)
-        const formName = +form ? t(`form_${form}`) : ''
-
-        return {
-          key,
-          pokemonName,
-          formName,
-          url: Icons.getPokemon(pokemon, form),
-          color: filters.filter[key]?.enabled
-            ? filters.filter[key]?.all || filters.easyMode
-              ? 'success.main'
-              : 'info.main'
-            : 'error.dark',
-        }
-      })
-      .filter(
-        ({ pokemonName, formName }) =>
-          pokemonName.toLowerCase().includes(lowerCase) ||
-          formName.toLowerCase().includes(lowerCase),
-      )
-  }, [
-    filters.onlyShowAvailable,
-    filters.easyMode,
-    filters.filter,
-    available,
-    search,
-  ])
-
   return (
     <List>
       <ItemSearch field="searches.pokemonQuickSelect" />
@@ -152,7 +158,7 @@ function AvailableSelector() {
         label="only_show_available"
       />
       <ListItem>
-        <ListItemText>{t('set_all')}</ListItemText>
+        <ListItemText>{t(search ? 'set_filtered' : 'set_all')}</ListItemText>
         <ButtonGroup variant="text" size="small" color="warning">
           <IconButton color="success" onClick={() => setAll('enable')}>
             <CheckIcon />