stacker.news/components/search.js

135 lines
4.8 KiB
JavaScript
Raw Normal View History

2023-07-24 18:35:05 +00:00
import Container from 'react-bootstrap/Container'
2022-01-26 21:43:18 +00:00
import styles from './search.module.css'
2022-09-22 15:26:02 +00:00
import SearchIcon from '../svgs/search-line.svg'
import { useEffect, useRef, useState } from 'react'
import { Form, Input, Select, DatePicker, SubmitButton } from './form'
2022-01-27 19:18:48 +00:00
import { useRouter } from 'next/router'
2023-11-14 16:23:44 +00:00
import { whenToFrom } from '../lib/time'
2022-01-26 21:43:18 +00:00
2022-02-17 17:23:43 +00:00
export default function Search ({ sub }) {
2022-01-27 19:18:48 +00:00
const router = useRouter()
2022-10-20 22:44:44 +00:00
const [q, setQ] = useState(router.query.q || '')
const inputRef = useRef(null)
2022-01-27 19:18:48 +00:00
useEffect(() => {
inputRef.current?.focus()
2022-01-27 19:18:48 +00:00
}, [])
2022-10-20 22:44:44 +00:00
const search = async values => {
let prefix = ''
if (sub) {
prefix = `/~${sub}`
}
2022-10-25 17:13:06 +00:00
2022-10-20 22:44:44 +00:00
if (values.q?.trim() !== '') {
2023-07-09 17:37:12 +00:00
if (values.what === 'stackers') {
2022-10-25 17:13:06 +00:00
await router.push({
2023-07-09 17:37:12 +00:00
pathname: '/stackers/search',
query: { q, what: 'stackers' }
}, {
pathname: '/stackers/search',
query: { q }
2022-10-25 17:13:06 +00:00
})
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
2022-10-20 22:44:44 +00:00
await router.push({
pathname: prefix + '/search',
query: values
})
}
}
2023-05-01 20:58:30 +00:00
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'
2022-01-26 21:43:18 +00:00
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}
2023-11-14 00:17:45 +00:00
items={['zaprank', 'recent', 'comments', 'sats']}
/>
for
<Select
groupClassName='mb-0 mx-2'
onChange={(formik, e) => {
2023-11-14 16:23:44 +00:00
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) => {
2023-11-14 16:23:44 +00:00
search({ ...formik?.values, from: from.getTime(), to: to.getTime() })
}}
from={router.query.from}
to={router.query.to}
when={when}
/>}
</div>}
</Form>
2022-01-26 21:43:18 +00:00
</Container>
</div>
</>
)
}