Justin Edmund
aefd6c3754
It also indexes on the raid's `slug` instead of `id`, a new key that will let us get to using query params to filter
83 lines
3.4 KiB
TypeScript
83 lines
3.4 KiB
TypeScript
import React from 'react'
|
|
import { useSnapshot } from 'valtio'
|
|
import { useTranslation } from 'next-i18next'
|
|
import classNames from 'classnames'
|
|
|
|
import RaidDropdown from '~components/RaidDropdown'
|
|
|
|
import { appState } from '~utils/appState'
|
|
|
|
import './index.scss'
|
|
|
|
interface Props {
|
|
children: React.ReactNode
|
|
scrolled: boolean
|
|
element?: number
|
|
raidSlug?: string
|
|
recency?: number
|
|
onFilter: (element?: number, raid?: string, recency?: number) => void
|
|
}
|
|
|
|
const FilterBar = (props: Props) => {
|
|
// Set up translation
|
|
const { t } = useTranslation('common')
|
|
|
|
// Set up state object
|
|
const app = useSnapshot(appState)
|
|
|
|
// Set up refs for filter dropdowns
|
|
const elementSelect = React.createRef<HTMLSelectElement>()
|
|
const raidSelect = React.createRef<HTMLSelectElement>()
|
|
const recencySelect = React.createRef<HTMLSelectElement>()
|
|
|
|
// Set up classes object for showing shadow on scroll
|
|
const classes = classNames({
|
|
'FilterBar': true,
|
|
'shadow': props.scrolled
|
|
})
|
|
|
|
function selectChanged(event: React.ChangeEvent<HTMLSelectElement>) {
|
|
const elementValue = (elementSelect.current) ? parseInt(elementSelect.current.value) : -1
|
|
const recencyValue = (recencySelect.current) ? parseInt(recencySelect.current.value) : -1
|
|
let raidValue = ''
|
|
|
|
if (app.raids) {
|
|
const raid = app.raids.find((raid: Raid) => raid.slug === raidSelect.current?.value)
|
|
raidValue = (raid) ? raid.id : ''
|
|
}
|
|
|
|
props.onFilter(elementValue, raidValue, recencyValue)
|
|
}
|
|
|
|
return (
|
|
<div className={classes}>
|
|
{props.children}
|
|
<select onChange={selectChanged} ref={elementSelect} value={props.element}>
|
|
<option data-element="all" key={-1} value={-1}>{t('elements.full.all')}</option>
|
|
<option data-element="null" key={-0} value={0}>{t('elements.full.null')}</option>
|
|
<option data-element="wind" key={1} value={1}>{t('elements.full.wind')}</option>
|
|
<option data-element="fire" key={2} value={2}>{t('elements.full.fire')}</option>
|
|
<option data-element="water" key={3} value={3}>{t('elements.full.water')}</option>
|
|
<option data-element="earth" key={4} value={4}>{t('elements.full.earth')}</option>
|
|
<option data-element="dark" key={5} value={5}>{t('elements.full.dark')}</option>
|
|
<option data-element="light" key={6} value={6}>{t('elements.full.light')}</option>
|
|
</select>
|
|
<RaidDropdown
|
|
showAllRaidsOption={true}
|
|
onChange={selectChanged}
|
|
ref={raidSelect}
|
|
/>
|
|
<select onChange={selectChanged} ref={recencySelect}>
|
|
<option key={-1} value={-1}>{t('recency.all_time')}</option>
|
|
<option key={86400} value={86400}>{t('recency.last_day')}</option>
|
|
<option key={604800} value={604800}>{t('recency.last_week')}</option>
|
|
<option key={2629746} value={2629746}>{t('recency.last_month')}</option>
|
|
<option key={7889238} value={7889238}>{t('recency.last_3_months')}</option>
|
|
<option key={15778476} value={15778476}>{t('recency.last_6_months')}</option>
|
|
<option key={31556952} value={31556952}>{t('recency.last_year')}</option>
|
|
</select>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FilterBar
|