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

@@ -14,6 +14,7 @@ import { defaultFilterset } from '~utils/defaultFilters'
 import FilterIcon from '~public/icons/Filter.svg'
 
 import './index.scss'
+import { getCookie } from 'cookies-next'
 
 interface Props {
   children: React.ReactNode
@@ -22,6 +23,40 @@ interface Props {
   raidSlug?: string
   recency?: number
   onFilter: (filters: FilterSet) => void
+    element,
+    raidSlug,
+    recency,
+  }: {
+    element?: number
+    raidSlug?: string
+    recency?: number
+  }) => 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) => {
@@ -32,7 +67,12 @@ const FilterBar = (props: Props) => {
   const [elementOpen, setElementOpen] = useState(false)
 
   const [filterModalOpen, setFilterModalOpen] = useState(false)
-  const [advancedFilters, setAdvancedFilters] = useState<FilterSet>({})
+
+  // Fetch user's advanced filters
+  const filtersCookie = getCookie('filters')
+  const advancedFilters: FilterSet = filtersCookie
+    ? JSON.parse(filtersCookie as string)
+    : DEFAULT_FILTERSET
 
   const [matchesDefaultFilters, setMatchesDefaultFilters] = useState(false)
   // Set up classes object for showing shadow on scroll
@@ -174,10 +214,10 @@ const FilterBar = (props: Props) => {
         </div>
       </div>
       <FilterModal
-        defaultFilterSet={defaultFilterset}
+        defaultFilterSet={DEFAULT_FILTERSET}
         filterSet={advancedFilters}
         open={filterModalOpen}
-      <FilterModal open={filterModalOpen} onOpenChange={setFilterModalOpen} />
+        onOpenChange={setFilterModalOpen}
         sendAdvancedFilters={handleAdvancedFiltersChanged}
       />
     </>

components/FilterModal/index.tsx

@@ -23,19 +23,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
@@ -56,8 +47,8 @@ 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 [minCharacterCount, setMinCharacterCount] = useState(3)
@@ -71,30 +62,33 @@ const FilterModal = (props: Props) => {
   const [fullAuto, setFullAuto] = useState(props.defaultFilterSet.full_auto)
   const [autoGuard, setAutoGuard] = useState(props.defaultFilterSet.auto_guard)
   const [chargeAttack, setChargeAttack] = useState(
-    props.defaultFilterSet.charge_attack
+    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(
-    props.defaultFilterSet.weapons_count
+    props.filterSet.weapons_count
+  )
+  const [minSummonCount, setMinSummonCount] = useState(
+    props.filterSet.summons_count
   )
   const [minSummonCount, setMinSummonCount] = useState(DEFAULT_MIN_SUMMONS)
     props.defaultFilterSet.summons_count
 
-  const [maxButtonsCount, setMaxButtonsCount] = useState(DEFAULT_MAX_BUTTONS)
+  const [maxButtonsCount, setMaxButtonsCount] = useState(
-    props.defaultFilterSet.button_count
+    props.filterSet.button_count
   )
-  const [maxTurnsCount, setMaxTurnsCount] = useState(DEFAULT_MAX_TURNS)
+  const [maxTurnsCount, setMaxTurnsCount] = useState(props.filterSet.turn_count)
-    props.defaultFilterSet.turn_count
 
-  const [userQuality, setUserQuality] = useState(DEFAULT_USER_QUALITY)
+  const [userQuality, setUserQuality] = useState(props.filterSet.user_quality)
     props.defaultFilterSet.user_quality
   )
-  const [nameQuality, setNameQuality] = useState(DEFAULT_NAME_QUALITY)
+  const [nameQuality, setNameQuality] = useState(props.filterSet.name_quality)
     props.defaultFilterSet.name_quality
   )
-  const [originalOnly, setOriginalOnly] = useState(DEFAULT_ORIGINAL_ONLY)
+  const [originalOnly, setOriginalOnly] = useState(props.filterSet.original)
     props.defaultFilterSet.original
   )
 
@@ -131,37 +125,40 @@ const FilterModal = (props: Props) => {
   }
 
   function saveFilters() {
-    const filters: FilterSet = {}
+    const filters = {
-    filters.full_auto = fullAuto
+      full_auto: fullAuto,
-    filters.auto_guard = autoGuard
+      auto_guard: autoGuard,
-    filters.charge_attack = chargeAttack
+      charge_attack: chargeAttack,
-    filters.characters_count = minCharacterCount
+      characters_count: minCharacterCount,
-    filters.weapons_count = minWeaponCount
+      weapons_count: minWeaponCount,
-    filters.summons_count = minSummonCount
+      summons_count: minSummonCount,
-    filters.name_quality = nameQuality
+      button_count: maxButtonsCount,
-    filters.user_quality = userQuality
+      turn_count: maxTurnsCount,
-    filters.original = originalOnly
+      name_quality: nameQuality,
+      user_quality: userQuality,
+      original: originalOnly,
+    }
 
-    if (maxButtonsCount) filters.button_count = maxButtonsCount
+    console.log(filters)
     if (maxTurnsCount) filters.turn_count = maxTurnsCount
 
     setCookie('filters', filters, { path: '/' })
     props.sendAdvancedFilters(filters)
-    openChange()
+    // 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() {