stacker.news/components/top-header.js

81 lines
2.2 KiB
JavaScript
Raw Normal View History

2021-12-16 23:05:31 +00:00
import { useRouter } from 'next/router'
2022-10-25 21:35:32 +00:00
import { Form, Select } from './form'
2021-12-16 23:05:31 +00:00
2023-02-03 19:10:18 +00:00
const USER_SORTS = ['stacked', 'spent', 'comments', 'posts', 'referrals']
const ITEM_SORTS = ['votes', 'comments', 'sats']
2023-06-12 22:15:20 +00:00
export default function TopHeader ({ sub, cat }) {
2021-12-16 23:05:31 +00:00
const router = useRouter()
2022-10-25 21:35:32 +00:00
const top = async values => {
2023-02-03 19:10:18 +00:00
const { what, when, ...query } = values
2023-02-09 18:41:28 +00:00
if (what === 'cowboys') {
await router.push({
pathname: `/top/${what}`
})
return
}
2023-06-12 22:15:20 +00:00
const prefix = sub ? `/~${sub}` : ''
2023-02-03 19:10:18 +00:00
if (typeof query.sort !== 'undefined') {
if (query.sort === '' ||
2023-07-09 17:37:12 +00:00
(what === 'stackers' && !USER_SORTS.includes(query.sort)) ||
(what !== 'stackers' && !ITEM_SORTS.includes(query.sort))) {
2023-02-03 19:10:18 +00:00
delete query.sort
}
}
2022-10-25 21:35:32 +00:00
await router.push({
2023-06-12 22:15:20 +00:00
pathname: `${prefix}/top/${what}/${when || 'day'}`,
2023-02-03 19:10:18 +00:00
query
2022-10-25 21:35:32 +00:00
})
}
2021-12-16 23:05:31 +00:00
return (
2022-10-25 21:35:32 +00:00
<div className='d-flex'>
<Form
className='mr-auto'
initial={{
what: cat,
sort: router.query.sort || '',
when: router.query.when || ''
}}
onSubmit={top}
>
<div className='text-muted font-weight-bold my-3 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'
2023-07-09 17:37:12 +00:00
items={router?.query?.sub ? ['posts', 'comments'] : ['posts', 'comments', 'stackers', 'cowboys']}
2022-10-25 21:35:32 +00:00
/>
2023-02-09 18:41:28 +00:00
{cat !== 'cowboys' &&
<>
by
<Select
groupClassName='mx-2 mb-0'
onChange={(formik, e) => top({ ...formik?.values, sort: e.target.value })}
name='sort'
size='sm'
2023-07-09 17:37:12 +00:00
items={cat === 'stackers' ? USER_SORTS : ITEM_SORTS}
2023-02-09 18:41:28 +00:00
/>
for
<Select
groupClassName='mb-0 ml-2'
onChange={(formik, e) => top({ ...formik?.values, when: e.target.value })}
name='when'
size='sm'
items={['day', 'week', 'month', 'year', 'forever']}
/>
</>}
2022-10-25 21:35:32 +00:00
</div>
</Form>
</div>
2021-12-16 23:05:31 +00:00
)
}