diff --git a/src/pages/games.tsx b/src/pages/games.tsx index 4174648..05dce3a 100644 --- a/src/pages/games.tsx +++ b/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(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) => { + if (event.key === 'Enter') { + handleSearch() + } + } + return (
@@ -36,8 +58,18 @@ export const GamesPage = () => {
- -