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
This commit is contained in:
parent
e418b64847
commit
88e830dd78
2 changed files with 89 additions and 52 deletions
|
|
@ -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}
|
||||
/>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue