Releasing new design #161
@ -1,7 +1,7 @@
|
|||||||
import { Button, TextField } from '@mui/material'
|
import { Button, TextField } from '@mui/material'
|
||||||
import JSZip from 'jszip'
|
import JSZip from 'jszip'
|
||||||
import { useCallback, useEffect, useState } from 'react'
|
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 { toast } from 'react-toastify'
|
||||||
import { useAppSelector } from '../../hooks'
|
import { useAppSelector } from '../../hooks'
|
||||||
import { appPrivateRoutes, appPublicRoutes } from '../../routes'
|
import { appPrivateRoutes, appPublicRoutes } from '../../routes'
|
||||||
@ -40,6 +40,15 @@ type Sort = (typeof SORT_BY)[number]['value']
|
|||||||
|
|
||||||
export const HomePage = () => {
|
export const HomePage = () => {
|
||||||
const navigate = useNavigate()
|
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 [sigits, setSigits] = useState<{ [key: string]: Meta }>({})
|
||||||
const [parsedSigits, setParsedSigits] = useState<{
|
const [parsedSigits, setParsedSigits] = useState<{
|
||||||
@ -120,7 +129,6 @@ export const HomePage = () => {
|
|||||||
|
|
||||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
|
||||||
|
|
||||||
const [search, setSearch] = useState('')
|
|
||||||
const [filter, setFilter] = useState<Filter>('Show all')
|
const [filter, setFilter] = useState<Filter>('Show all')
|
||||||
const [sort, setSort] = useState<Sort>('desc')
|
const [sort, setSort] = useState<Sort>('desc')
|
||||||
|
|
||||||
@ -156,18 +164,22 @@ export const HomePage = () => {
|
|||||||
const searchInput = e.currentTarget.elements.namedItem(
|
const searchInput = e.currentTarget.elements.namedItem(
|
||||||
'q'
|
'q'
|
||||||
) as HTMLInputElement
|
) as HTMLInputElement
|
||||||
setSearch(searchInput.value)
|
searchParams.set('q', searchInput.value)
|
||||||
|
setSearchParams(searchParams)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TextField
|
<TextField
|
||||||
|
id="q"
|
||||||
name="q"
|
name="q"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
size="small"
|
size="small"
|
||||||
type="search"
|
type="search"
|
||||||
|
defaultValue={q}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
// Handle the case when users click native search input's clear or x
|
// Handle the case when users click native search input's clear or x
|
||||||
if (e.currentTarget.value === '') {
|
if (e.currentTarget.value === '') {
|
||||||
setSearch(e.currentTarget.value)
|
searchParams.delete('q')
|
||||||
|
setSearchParams(searchParams)
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
sx={{
|
sx={{
|
||||||
@ -216,7 +228,7 @@ export const HomePage = () => {
|
|||||||
{Object.keys(parsedSigits)
|
{Object.keys(parsedSigits)
|
||||||
.filter((s) => {
|
.filter((s) => {
|
||||||
const { title, signedStatus } = parsedSigits[s]
|
const { title, signedStatus } = parsedSigits[s]
|
||||||
const isMatch = title?.toLowerCase().includes(search.toLowerCase())
|
const isMatch = title?.toLowerCase().includes(q.toLowerCase())
|
||||||
switch (filter) {
|
switch (filter) {
|
||||||
case 'Completed':
|
case 'Completed':
|
||||||
return signedStatus === SignedStatus.Complete && isMatch
|
return signedStatus === SignedStatus.Complete && isMatch
|
||||||
|
Loading…
Reference in New Issue
Block a user