feat(home): add search param to address bar and sync the state with navigation

src/pages/home/index.tsx

@@ -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