Update how we save and propagate filters

We save filterset in a local state, because the FilterBar will send it down to us from cookies.

We then set each individual property from that filter set.

We set inputs to have a placeholder, as max buttons and max turns could not be set (null). Then, we only send those fields when they have a value provided by the user.

components/FilterModal/index.tsx

@@ -26,6 +26,7 @@ import './index.scss'
 interface Props extends DialogProps {
   defaultFilterSet: FilterSet
   filterSet: FilterSet
+  sendAdvancedFilters: (filters: FilterSet) => void
 }
 
 const MAX_CHARACTERS = 5
@@ -49,13 +50,14 @@ const FilterModal = (props: Props) => {
   const [chargeAttackOpen, setChargeAttackOpen] = useState(false)
   const [fullAutoOpen, setFullAutoOpen] = useState(false)
   const [autoGuardOpen, setAutoGuardOpen] = useState(false)
+  const [filterSet, setFilterSet] = useState<FilterSet>({})
+
   // Filter states
   const [fullAuto, setFullAuto] = useState(props.defaultFilterSet.full_auto)
   const [autoGuard, setAutoGuard] = useState(props.defaultFilterSet.auto_guard)
   const [chargeAttack, setChargeAttack] = useState(
     props.defaultFilterSet.charge_attack
   )
-
   const [minCharacterCount, setMinCharacterCount] = useState(
     props.defaultFilterSet.characters_count
   )
@@ -86,30 +88,51 @@ const FilterModal = (props: Props) => {
     if (props.open !== undefined) setOpen(props.open)
   })
 
-  function saveFilters() {
+  useEffect(() => {
-    const filters = {
+    setFilterSet(props.filterSet)
-      full_auto: fullAuto,
+  }, [props.filterSet])
-      auto_guard: autoGuard,
+
-      charge_attack: chargeAttack,
+  useEffect(() => {
-      characters_count: minCharacterCount,
+    setFullAuto(filterSet.full_auto)
-      weapons_count: minWeaponCount,
+    setAutoGuard(filterSet.auto_guard)
-      summons_count: minSummonCount,
+    setChargeAttack(filterSet.charge_attack)
-      button_count: maxButtonsCount,
+
-      turn_count: maxTurnsCount,
+    setMinCharacterCount(filterSet.characters_count)
-      name_quality: nameQuality,
+    setMinSummonCount(filterSet.summons_count)
-      user_quality: userQuality,
+    setMinWeaponCount(filterSet.weapons_count)
-      original: originalOnly,
+
-    }
+    setMaxButtonsCount(filterSet.button_count)
+    setMaxTurnsCount(filterSet.turn_count)
+
+    setNameQuality(filterSet.name_quality)
+    setUserQuality(filterSet.user_quality)
+    setOriginalOnly(filterSet.original)
+  }, [filterSet])
 
-    console.log(filters)
   function openSelect(name: 'charge_attack' | 'full_auto' | 'auto_guard') {
     setChargeAttackOpen(name === 'charge_attack' ? !chargeAttackOpen : false)
     setFullAutoOpen(name === 'full_auto' ? !fullAutoOpen : false)
     setAutoGuardOpen(name === 'auto_guard' ? !autoGuardOpen : false)
   }
 
+  function saveFilters() {
+    const filters: FilterSet = {}
+    filters.full_auto = fullAuto
+    filters.auto_guard = autoGuard
+    filters.charge_attack = chargeAttack
+    filters.characters_count = minCharacterCount
+    filters.weapons_count = minWeaponCount
+    filters.summons_count = minSummonCount
+    filters.name_quality = nameQuality
+    filters.user_quality = userQuality
+    filters.original = originalOnly
+
+    if (maxButtonsCount) filters.button_count = maxButtonsCount
+    if (maxTurnsCount) filters.turn_count = maxTurnsCount
+
     setCookie('filters', filters, { path: '/' })
-    // openChange()
+    props.sendAdvancedFilters(filters)
+    openChange()
   }
 
   function resetFilters() {
@@ -336,6 +359,7 @@ const FilterModal = (props: Props) => {
     <InputTableField
       name="min_characters"
       description={t('modals.filters.descriptions.max_buttons')}
+      placeholder="0"
       label={t('modals.filters.labels.max_buttons')}
       value={maxButtonsCount}
       onValueChange={handleMaxButtonsCountValueChange}
@@ -346,6 +370,7 @@ const FilterModal = (props: Props) => {
     <InputTableField
       name="min_turns"
       description={t('modals.filters.descriptions.max_turns')}
+      placeholder="0"
       label={t('modals.filters.labels.max_turns')}
       value={maxTurnsCount}
       onValueChange={handleMaxTurnsCountValueChange}