Send filtersets to FilterModal

This sends the default filterset and the user's filterset to the filter modal.

The default filterset is used when resetting all filters. The users filterset is used so that it is populated with the user's values when they open the modal

components/FilterBar/index.tsx

@@ -11,6 +11,7 @@ import Button from '~components/Button'
 import FilterIcon from '~public/icons/Filter.svg'
 
 import './index.scss'
+import { getCookie } from 'cookies-next'
 
 interface Props {
   children: React.ReactNode
@@ -29,6 +30,32 @@ interface Props {
   }) => void
 }
 
+const DEFAULT_FULL_AUTO = false
+const DEFAULT_AUTO_GUARD = false
+const DEFAULT_CHARGE_ATTACK = false
+const DEFAULT_MAX_BUTTONS = 0
+const DEFAULT_MAX_TURNS = 0
+const DEFAULT_MIN_CHARACTERS = 3
+const DEFAULT_MIN_WEAPONS = 5
+const DEFAULT_MIN_SUMMONS = 2
+const DEFAULT_NAME_QUALITY = false
+const DEFAULT_USER_QUALITY = false
+const DEFAULT_ORIGINAL_ONLY = false
+
+const DEFAULT_FILTERSET: FilterSet = {
+  full_auto: DEFAULT_FULL_AUTO,
+  auto_guard: DEFAULT_AUTO_GUARD,
+  charge_attack: DEFAULT_CHARGE_ATTACK,
+  characters_count: DEFAULT_MIN_CHARACTERS,
+  weapons_count: DEFAULT_MIN_WEAPONS,
+  summons_count: DEFAULT_MIN_SUMMONS,
+  button_count: DEFAULT_MAX_BUTTONS,
+  turn_count: DEFAULT_MAX_TURNS,
+  name_quality: DEFAULT_NAME_QUALITY,
+  user_quality: DEFAULT_USER_QUALITY,
+  original: DEFAULT_ORIGINAL_ONLY,
+}
+
 const FilterBar = (props: Props) => {
   // Set up translation
   const { t } = useTranslation('common')
@@ -38,6 +65,12 @@ const FilterBar = (props: Props) => {
 
   const [filterModalOpen, setFilterModalOpen] = useState(false)
 
+  // Fetch user's advanced filters
+  const filtersCookie = getCookie('filters')
+  const advancedFilters: FilterSet = filtersCookie
+    ? JSON.parse(filtersCookie as string)
+    : DEFAULT_FILTERSET
+
   // Set up classes object for showing shadow on scroll
   const classes = classNames({
     FilterBar: true,
@@ -155,7 +188,12 @@ const FilterBar = (props: Props) => {
           />
         </div>
       </div>
-      <FilterModal open={filterModalOpen} onOpenChange={setFilterModalOpen} />
+      <FilterModal
+        defaultFilterSet={DEFAULT_FILTERSET}
+        filterSet={advancedFilters}
+        open={filterModalOpen}
+        onOpenChange={setFilterModalOpen}
+      />
     </>
   )
 }

components/FilterModal/index.tsx

@@ -21,19 +21,10 @@ import type { DialogProps } from '@radix-ui/react-dialog'
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 
-interface Props extends DialogProps {}
+interface Props extends DialogProps {
-
+  defaultFilterSet: FilterSet
-const DEFAULT_FULL_AUTO = false
+  filterSet: FilterSet
-const DEFAULT_AUTO_GUARD = false
+}
-const DEFAULT_CHARGE_ATTACK = false
-const DEFAULT_MAX_BUTTONS = 0
-const DEFAULT_MAX_TURNS = 0
-const DEFAULT_MIN_CHARACTERS = 3
-const DEFAULT_MIN_WEAPONS = 5
-const DEFAULT_MIN_SUMMONS = 2
-const DEFAULT_NAME_QUALITY = false
-const DEFAULT_USER_QUALITY = false
-const DEFAULT_ORIGINAL_ONLY = false
 
 const MAX_CHARACTERS = 5
 const MAX_WEAPONS = 13
@@ -54,41 +45,68 @@ const FilterModal = (props: Props) => {
   // States
   const [open, setOpen] = useState(false)
 
-  const [fullAuto, setFullAuto] = useState(DEFAULT_FULL_AUTO)
+  const [fullAuto, setFullAuto] = useState(props.filterSet.full_auto)
-  const [autoGuard, setAutoGuard] = useState(DEFAULT_AUTO_GUARD)
+  const [autoGuard, setAutoGuard] = useState(props.filterSet.auto_guard)
-  const [chargeAttack, setChargeAttack] = useState(DEFAULT_CHARGE_ATTACK)
+  const [chargeAttack, setChargeAttack] = useState(
+    props.filterSet.charge_attack
+  )
 
   const [minCharacterCount, setMinCharacterCount] = useState(
-    DEFAULT_MIN_CHARACTERS
+    props.filterSet.characters_count
   )
-  const [minWeaponCount, setMinWeaponCount] = useState(DEFAULT_MIN_WEAPONS)
+  const [minWeaponCount, setMinWeaponCount] = useState(
-  const [minSummonCount, setMinSummonCount] = useState(DEFAULT_MIN_SUMMONS)
+    props.filterSet.weapons_count
+  )
+  const [minSummonCount, setMinSummonCount] = useState(
+    props.filterSet.summons_count
+  )
+  const [maxButtonsCount, setMaxButtonsCount] = useState(
+    props.filterSet.button_count
+  )
+  const [maxTurnsCount, setMaxTurnsCount] = useState(props.filterSet.turn_count)
 
-  const [maxButtonsCount, setMaxButtonsCount] = useState(DEFAULT_MAX_BUTTONS)
+  const [userQuality, setUserQuality] = useState(props.filterSet.user_quality)
-  const [maxTurnsCount, setMaxTurnsCount] = useState(DEFAULT_MAX_TURNS)
+  const [nameQuality, setNameQuality] = useState(props.filterSet.name_quality)
-
+  const [originalOnly, setOriginalOnly] = useState(props.filterSet.original)
-  const [userQuality, setUserQuality] = useState(DEFAULT_USER_QUALITY)
-  const [nameQuality, setNameQuality] = useState(DEFAULT_NAME_QUALITY)
-  const [originalOnly, setOriginalOnly] = useState(DEFAULT_ORIGINAL_ONLY)
 
   // Hooks
   useEffect(() => {
     if (props.open !== undefined) setOpen(props.open)
   })
 
+  function saveFilters() {
+    const filters = {
+      full_auto: fullAuto,
+      auto_guard: autoGuard,
+      charge_attack: chargeAttack,
+      characters_count: minCharacterCount,
+      weapons_count: minWeaponCount,
+      summons_count: minSummonCount,
+      button_count: maxButtonsCount,
+      turn_count: maxTurnsCount,
+      name_quality: nameQuality,
+      user_quality: userQuality,
+      original: originalOnly,
+    }
+
+    console.log(filters)
+
+    setCookie('filters', filters, { path: '/' })
+    // openChange()
+  }
 
   function resetFilters() {
-    setFullAuto(DEFAULT_FULL_AUTO)
+    setFullAuto(props.defaultFilterSet.full_auto)
-    setAutoGuard(DEFAULT_AUTO_GUARD)
+    setAutoGuard(props.defaultFilterSet.auto_guard)
-    setChargeAttack(DEFAULT_CHARGE_ATTACK)
+    setChargeAttack(props.defaultFilterSet.charge_attack)
-    setMinCharacterCount(DEFAULT_MIN_CHARACTERS)
+    setMinCharacterCount(props.defaultFilterSet.characters_count)
-    setMinWeaponCount(DEFAULT_MIN_WEAPONS)
+    setMinWeaponCount(props.defaultFilterSet.weapons_count)
-    setMinSummonCount(DEFAULT_MIN_SUMMONS)
+    setMinSummonCount(props.defaultFilterSet.summons_count)
-    setMaxButtonsCount(DEFAULT_MAX_BUTTONS)
+    setMaxButtonsCount(props.defaultFilterSet.button_count)
-    setMaxTurnsCount(DEFAULT_MAX_TURNS)
+    setMaxTurnsCount(props.defaultFilterSet.turn_count)
-    setUserQuality(DEFAULT_USER_QUALITY)
+    setUserQuality(props.defaultFilterSet.user_quality)
-    setNameQuality(DEFAULT_NAME_QUALITY)
+    setNameQuality(props.defaultFilterSet.name_quality)
-    setOriginalOnly(DEFAULT_ORIGINAL_ONLY)
+    setOriginalOnly(props.defaultFilterSet.original)
   }
 
   function openChange() {