From 591b16c880e4afe0b0ef847e75767b8bfb6aa170 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 | 40 +++++++++++++- components/FilterModal/index.tsx | 90 +++++++++++++++++++------------- 2 files changed, 93 insertions(+), 37 deletions(-) diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx index b784d4a2..acf661f2 100644 --- a/components/FilterBar/index.tsx +++ b/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) => { /> - + ) } diff --git a/components/FilterModal/index.tsx b/components/FilterModal/index.tsx index 5600ddab..0c4d88c7 100644 --- a/components/FilterModal/index.tsx +++ b/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 {} - -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 @@ -54,41 +45,68 @@ 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 [chargeAttack, setChargeAttack] = useState(DEFAULT_CHARGE_ATTACK) + const [fullAuto, setFullAuto] = useState(props.filterSet.full_auto) + const [autoGuard, setAutoGuard] = useState(props.filterSet.auto_guard) + 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 [minSummonCount, setMinSummonCount] = useState(DEFAULT_MIN_SUMMONS) + const [minWeaponCount, setMinWeaponCount] = useState( + 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 [maxTurnsCount, setMaxTurnsCount] = useState(DEFAULT_MAX_TURNS) - - const [userQuality, setUserQuality] = useState(DEFAULT_USER_QUALITY) - const [nameQuality, setNameQuality] = useState(DEFAULT_NAME_QUALITY) - const [originalOnly, setOriginalOnly] = useState(DEFAULT_ORIGINAL_ONLY) + const [userQuality, setUserQuality] = useState(props.filterSet.user_quality) + const [nameQuality, setNameQuality] = useState(props.filterSet.name_quality) + const [originalOnly, setOriginalOnly] = useState(props.filterSet.original) // 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) - 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() {