135 lines
4.8 KiB
JavaScript
135 lines
4.8 KiB
JavaScript
import Container from 'react-bootstrap/Container'
|
|
import styles from './search.module.css'
|
|
import SearchIcon from '../svgs/search-line.svg'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { Form, Input, Select, DatePicker, SubmitButton } from './form'
|
|
import { useRouter } from 'next/router'
|
|
import { whenToFrom } from '../lib/time'
|
|
|
|
export default function Search ({ sub }) {
|
|
const router = useRouter()
|
|
const [q, setQ] = useState(router.query.q || '')
|
|
const inputRef = useRef(null)
|
|
|
|
useEffect(() => {
|
|
inputRef.current?.focus()
|
|
}, [])
|
|
|
|
const search = async values => {
|
|
let prefix = ''
|
|
if (sub) {
|
|
prefix = `/~${sub}`
|
|
}
|
|
|
|
if (values.q?.trim() !== '') {
|
|
if (values.what === 'stackers') {
|
|
await router.push({
|
|
pathname: '/stackers/search',
|
|
query: { q, what: 'stackers' }
|
|
}, {
|
|
pathname: '/stackers/search',
|
|
query: { q }
|
|
})
|
|
return
|
|
}
|
|
|
|
if (values.what === '' || values.what === 'all') delete values.what
|
|
if (values.sort === '' || values.sort === 'zaprank') delete values.sort
|
|
if (values.when === '' || values.when === 'forever') delete values.when
|
|
if (values.when !== 'custom') { delete values.from; delete values.to }
|
|
if (values.from && !values.to) return
|
|
|
|
await router.push({
|
|
pathname: prefix + '/search',
|
|
query: values
|
|
})
|
|
}
|
|
}
|
|
|
|
const filter = sub !== 'jobs'
|
|
const what = router.pathname.startsWith('/stackers') ? 'stackers' : router.query.what || 'all'
|
|
const sort = router.query.sort || 'zaprank'
|
|
const when = router.query.when || 'forever'
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.searchSection}>
|
|
<Container className={`px-md-0 ${styles.searchContainer}`}>
|
|
<Form
|
|
initial={{ q, what, sort, when, from: '', to: '' }}
|
|
onSubmit={values => search({ ...values })}
|
|
>
|
|
<div className={`${styles.active} my-3`}>
|
|
<Input
|
|
name='q'
|
|
required
|
|
autoFocus
|
|
groupClassName='me-3 mb-0 flex-grow-1'
|
|
className='flex-grow-1'
|
|
clear
|
|
innerRef={inputRef}
|
|
overrideValue={q}
|
|
onChange={async (formik, e) => {
|
|
setQ(e.target.value?.trim())
|
|
}}
|
|
/>
|
|
<SubmitButton variant='primary' className={styles.search}>
|
|
<SearchIcon width={22} height={22} />
|
|
</SubmitButton>
|
|
</div>
|
|
{filter && router.query.q &&
|
|
<div className='text-muted fw-bold d-flex align-items-center flex-wrap pb-2'>
|
|
<div className='text-muted fw-bold d-flex align-items-center pb-2'>
|
|
<Select
|
|
groupClassName='me-2 mb-0'
|
|
onChange={(formik, e) => search({ ...formik?.values, what: e.target.value })}
|
|
name='what'
|
|
size='sm'
|
|
overrideValue={what}
|
|
items={['all', 'posts', 'comments', 'stackers']}
|
|
/>
|
|
{what !== 'stackers' &&
|
|
<>
|
|
by
|
|
<Select
|
|
groupClassName='mx-2 mb-0'
|
|
onChange={(formik, e) => search({ ...formik?.values, sort: e.target.value })}
|
|
name='sort'
|
|
size='sm'
|
|
overrideValue={sort}
|
|
items={['zaprank', 'recent', 'comments', 'sats']}
|
|
/>
|
|
for
|
|
<Select
|
|
groupClassName='mb-0 mx-2'
|
|
onChange={(formik, e) => {
|
|
const range = e.target.value === 'custom' ? { from: whenToFrom(when), to: Date.now() } : {}
|
|
search({ ...formik?.values, when: e.target.value, ...range })
|
|
}}
|
|
name='when'
|
|
size='sm'
|
|
overrideValue={when}
|
|
items={['custom', 'forever', 'day', 'week', 'month', 'year']}
|
|
/>
|
|
</>}
|
|
</div>
|
|
{when === 'custom' &&
|
|
<DatePicker
|
|
fromName='from'
|
|
toName='to'
|
|
className='p-0 px-2 mb-2'
|
|
onChange={(formik, [from, to], e) => {
|
|
search({ ...formik?.values, from: from.getTime(), to: to.getTime() })
|
|
}}
|
|
from={router.query.from}
|
|
to={router.query.to}
|
|
when={when}
|
|
/>}
|
|
</div>}
|
|
</Form>
|
|
</Container>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|