102 lines
3.2 KiB
JavaScript
102 lines
3.2 KiB
JavaScript
import { useRouter } from 'next/router'
|
|
import { Form, Select, DatePicker } from './form'
|
|
import { ITEM_SORTS, USER_SORTS, WHENS } from '../lib/constants'
|
|
import { whenToFrom } from '../lib/time'
|
|
|
|
export default function TopHeader ({ sub, cat }) {
|
|
const router = useRouter()
|
|
|
|
const top = async values => {
|
|
const { what, when, ...query } = values
|
|
|
|
if (what === 'cowboys') {
|
|
await router.push({
|
|
pathname: `/top/${what}`
|
|
})
|
|
return
|
|
}
|
|
|
|
const prefix = sub ? `/~${sub}` : ''
|
|
|
|
if (typeof query.by !== 'undefined') {
|
|
if (query.by === '' ||
|
|
(what === 'stackers' && (query.by === 'stacked' || !USER_SORTS.includes(query.by))) ||
|
|
(what !== 'stackers' && (query.by === 'zaprank' || !ITEM_SORTS.includes(query.by)))) {
|
|
delete query.by
|
|
}
|
|
}
|
|
if (when !== 'custom') { delete query.from; delete query.to }
|
|
if (query.from && !query.to) return
|
|
|
|
await router.push({
|
|
pathname: `${prefix}/top/${what}/${when || 'day'}`,
|
|
query
|
|
})
|
|
}
|
|
|
|
const what = cat
|
|
const by = router.query.by || (what === 'stackers' ? 'stacked' : 'zaprank')
|
|
const when = router.query.when || ''
|
|
|
|
return (
|
|
<div className='d-flex'>
|
|
<Form
|
|
className='me-auto'
|
|
initial={{ what, by, when, from: '', to: '' }}
|
|
onSubmit={top}
|
|
>
|
|
<div className='text-muted fw-bold my-3 d-flex align-items-center flex-wrap'>
|
|
<div className='text-muted fw-bold my-2 d-flex align-items-center'>
|
|
top
|
|
<Select
|
|
groupClassName='mx-2 mb-0'
|
|
onChange={(formik, e) => top({ ...formik?.values, what: e.target.value })}
|
|
name='what'
|
|
size='sm'
|
|
overrideValue={what}
|
|
items={router?.query?.sub ? ['posts', 'comments'] : ['posts', 'comments', 'stackers', 'cowboys']}
|
|
/>
|
|
{cat !== 'cowboys' &&
|
|
<>
|
|
by
|
|
<Select
|
|
groupClassName='mx-2 mb-0'
|
|
onChange={(formik, e) => top({ ...formik?.values, by: e.target.value })}
|
|
name='by'
|
|
size='sm'
|
|
overrideValue={by}
|
|
items={cat === 'stackers' ? USER_SORTS : ITEM_SORTS}
|
|
/>
|
|
for
|
|
<Select
|
|
groupClassName='mb-0 mx-2'
|
|
onChange={(formik, e) => {
|
|
const range = e.target.value === 'custom' ? { from: whenToFrom(when), to: Date.now() } : {}
|
|
top({ ...formik?.values, when: e.target.value, ...range })
|
|
}}
|
|
name='when'
|
|
size='sm'
|
|
overrideValue={when}
|
|
items={WHENS}
|
|
/>
|
|
</>}
|
|
|
|
</div>
|
|
{when === 'custom' &&
|
|
<DatePicker
|
|
fromName='from'
|
|
toName='to'
|
|
className='p-0 px-2 my-2'
|
|
onChange={(formik, [from, to], e) => {
|
|
top({ ...formik?.values, from: from.getTime(), to: to.getTime() })
|
|
}}
|
|
from={router.query.from}
|
|
to={router.query.to}
|
|
when={when}
|
|
/>}
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
)
|
|
}
|