From 88e830dd78cf021f3f8c67840c37045b599ee4e8 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 18 Mar 2023 13:55:32 -0700 Subject: [PATCH] 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 | 46 +++++++++++++++- components/FilterModal/index.tsx | 95 ++++++++++++++++---------------- 2 files changed, 89 insertions(+), 52 deletions(-) diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx index c3d3b92f..24922b46 100644 --- a/components/FilterBar/index.tsx +++ b/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({}) + + // 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) => { + onOpenChange={setFilterModalOpen} sendAdvancedFilters={handleAdvancedFiltersChanged} /> diff --git a/components/FilterModal/index.tsx b/components/FilterModal/index.tsx index 0b25f533..4e5dfcb6 100644 --- a/components/FilterModal/index.tsx +++ b/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 {} - -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 +interface Props extends DialogProps { + defaultFilterSet: FilterSet + filterSet: FilterSet +} 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 [autoGuard, setAutoGuard] = useState(DEFAULT_AUTO_GUARD) + const [fullAuto, setFullAuto] = useState(props.filterSet.full_auto) + 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) - props.defaultFilterSet.weapons_count + const [minWeaponCount, setMinWeaponCount] = useState( + 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) - props.defaultFilterSet.button_count + const [maxButtonsCount, setMaxButtonsCount] = useState( + props.filterSet.button_count ) - const [maxTurnsCount, setMaxTurnsCount] = useState(DEFAULT_MAX_TURNS) - props.defaultFilterSet.turn_count + const [maxTurnsCount, setMaxTurnsCount] = useState(props.filterSet.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 = {} - 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 + 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, + } - 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) - setAutoGuard(DEFAULT_AUTO_GUARD) - setChargeAttack(DEFAULT_CHARGE_ATTACK) - setMinCharacterCount(DEFAULT_MIN_CHARACTERS) - setMinWeaponCount(DEFAULT_MIN_WEAPONS) - setMinSummonCount(DEFAULT_MIN_SUMMONS) - setMaxButtonsCount(DEFAULT_MAX_BUTTONS) - setMaxTurnsCount(DEFAULT_MAX_TURNS) - setUserQuality(DEFAULT_USER_QUALITY) - setNameQuality(DEFAULT_NAME_QUALITY) - setOriginalOnly(DEFAULT_ORIGINAL_ONLY) + setFullAuto(props.defaultFilterSet.full_auto) + setAutoGuard(props.defaultFilterSet.auto_guard) + setChargeAttack(props.defaultFilterSet.charge_attack) + setMinCharacterCount(props.defaultFilterSet.characters_count) + setMinWeaponCount(props.defaultFilterSet.weapons_count) + setMinSummonCount(props.defaultFilterSet.summons_count) + setMaxButtonsCount(props.defaultFilterSet.button_count) + setMaxTurnsCount(props.defaultFilterSet.turn_count) + setUserQuality(props.defaultFilterSet.user_quality) + setNameQuality(props.defaultFilterSet.name_quality) + setOriginalOnly(props.defaultFilterSet.original) } function openChange() {