feat(home): add search param to address bar and sync the state with navigation
This commit is contained in:
parent
83ddc1bbc8
commit
93b2477839
@ -1,7 +1,7 @@
|
||||
import { Button, TextField } from '@mui/material'
|
||||
import JSZip from 'jszip'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
import { useAppSelector } from '../../hooks'
|
||||
import { appPrivateRoutes, appPublicRoutes } from '../../routes'
|
||||
@ -40,6 +40,15 @@ type Sort = (typeof SORT_BY)[number]['value']
|
||||
|
||||
export const HomePage = () => {
|
||||
const navigate = useNavigate()
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const q = searchParams.get('q') ?? ''
|
||||
|
||||
useEffect(() => {
|
||||
const searchInput = document.getElementById('q') as HTMLInputElement | null
|
||||
if (searchInput) {
|
||||
searchInput.value = q
|
||||
}
|
||||
}, [q])
|
||||
|
||||
const [sigits, setSigits] = useState<{ [key: string]: Meta }>({})
|
||||
const [parsedSigits, setParsedSigits] = useState<{
|
||||
@ -120,7 +129,6 @@ export const HomePage = () => {
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
|
||||
|
||||
const [search, setSearch] = useState('')
|
||||
const [filter, setFilter] = useState<Filter>('Show all')
|
||||
const [sort, setSort] = useState<Sort>('desc')
|
||||
|
||||
@ -156,18 +164,22 @@ export const HomePage = () => {
|
||||
const searchInput = e.currentTarget.elements.namedItem(
|
||||
'q'
|
||||
) as HTMLInputElement
|
||||
setSearch(searchInput.value)
|
||||
searchParams.set('q', searchInput.value)
|
||||
setSearchParams(searchParams)
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
id="q"
|
||||
name="q"
|
||||
placeholder="Search"
|
||||
size="small"
|
||||
type="search"
|
||||
defaultValue={q}
|
||||
onChange={(e) => {
|
||||
// Handle the case when users click native search input's clear or x
|
||||
if (e.currentTarget.value === '') {
|
||||
setSearch(e.currentTarget.value)
|
||||
searchParams.delete('q')
|
||||
setSearchParams(searchParams)
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
@ -216,7 +228,7 @@ export const HomePage = () => {
|
||||
{Object.keys(parsedSigits)
|
||||
.filter((s) => {
|
||||
const { title, signedStatus } = parsedSigits[s]
|
||||
const isMatch = title?.toLowerCase().includes(search.toLowerCase())
|
||||
const isMatch = title?.toLowerCase().includes(q.toLowerCase())
|
||||
switch (filter) {
|
||||
case 'Completed':
|
||||
return signedStatus === SignedStatus.Complete && isMatch
|
||||
|
Loading…
Reference in New Issue
Block a user