feat: navigate to search page on submitting search term in games page

src/pages/games.tsx

@@ -1,13 +1,17 @@
 import { PaginationWithPageNumbers } from 'components/Pagination'
 import { MAX_GAMES_PER_PAGE } from 'constants.ts'
 import { useGames } from 'hooks'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { GameCard } from '../components/GameCard'
 import '../styles/pagination.css'
 import '../styles/search.css'
 import '../styles/styles.css'
+import { createSearchParams, useNavigate } from 'react-router-dom'
+import { appRoutes } from 'routes'
 
 export const GamesPage = () => {
+  const navigate = useNavigate()
+  const searchTermRef = useRef<HTMLInputElement>(null)
   const games = useGames()
   const [currentPage, setCurrentPage] = useState(1)
 
@@ -24,6 +28,24 @@ export const GamesPage = () => {
     }
   }
 
+  const handleSearch = () => {
+    const value = searchTermRef.current?.value || '' // Access the input value from the ref
+    if (value !== '') {
+      const searchParams = createSearchParams({
+        searchTerm: value,
+        searching: 'Games'
+      })
+      navigate({ pathname: appRoutes.search, search: `?${searchParams}` })
+    }
+  }
+
+  // Handle "Enter" key press inside the input
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleSearch()
+    }
+  }
+
   return (
     <div className='InnerBodyMain'>
       <div className='ContainerMain'>
@@ -36,8 +58,18 @@ export const GamesPage = () => {
               <div className='SearchMain'>
                 <div className='SearchMainInside'>
                   <div className='SearchMainInsideWrapper'>
-                    <input type='text' className='SMIWInput' />
+                    <input
-                    <button className='btn btnMain SMIWButton' type='button'>
+                      type='text'
+                      className='SMIWInput'
+                      ref={searchTermRef}
+                      onKeyDown={handleKeyDown}
+                      placeholder='Enter search term'
+                    />
+                    <button
+                      className='btn btnMain SMIWButton'
+                      type='button'
+                      onClick={handleSearch}
+                    >
                       <svg
                         xmlns='http://www.w3.org/2000/svg'
                         viewBox='0 0 512 512'

src/pages/search.tsx

@@ -22,6 +22,7 @@ import React, {
   useRef,
   useState
 } from 'react'
+import { useSearchParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { getModPageRoute } from 'routes'
 import { ModDetails, MuteLists } from 'types'
@@ -53,14 +54,20 @@ interface FilterOptions {
 }
 
 export const SearchPage = () => {
+  const [searchParams] = useSearchParams()
+
   const muteLists = useMuteLists()
   const searchTermRef = useRef<HTMLInputElement>(null)
   const [filterOptions, setFilterOptions] = useState<FilterOptions>({
     sort: SortByEnum.Latest,
     moderated: ModeratedFilterEnum.Moderated,
-    searching: SearchingFilterEnum.Mods
+    searching:
+      (searchParams.get('searching') as SearchingFilterEnum) ||
+      SearchingFilterEnum.Mods
   })
-  const [searchTerm, setSearchTerm] = useState('')
+  const [searchTerm, setSearchTerm] = useState(
+    searchParams.get('searchTerm') || ''
+  )
 
   const handleSearch = () => {
     const value = searchTermRef.current?.value || '' // Access the input value from the ref