Implement searching

src/App.tsx

@@ -13,6 +13,7 @@ export interface GameQuery {
   genre: Genre | null;
   platform: Platform | null;
   sortOrder: string;
+  searchText: string;
 }
 
 function App() {
@@ -30,7 +31,7 @@ function App() {
       }}
     >
       <GridItem area="nav">
-        <NavBar />
+        <NavBar onSearch={(searchText) => setGameQuery({ ...gameQuery, searchText })} />
       </GridItem>
       <Show above="lg">
         <GridItem area="aside" paddingX={5}>

src/components/NavBar.tsx

@@ -3,11 +3,15 @@ import logo from '../assets/logo.webp';
 import ColorModeSwitch from './ColorModeSwitch';
 import SearchInput from './SearchInput';
 
-const NavBar = () => {
+interface Props {
+  onSearch: (searchText: string) => void;
+}
+
+const NavBar = ({ onSearch }: Props) => {
   return (
     <HStack padding='10px'>
       <Image src={logo} boxSize='60px' />
-      <SearchInput />
+      <SearchInput onSearch={onSearch} />
       <ColorModeSwitch />
     </HStack>
   )

src/components/SearchInput.tsx

@@ -1,12 +1,24 @@
 import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
+import { useRef } from "react";
 import { BsSearch } from "react-icons/bs";
 
-const SearchInput = () => {
+interface Props {
+  onSearch: (searchText: string) => void;
+}
+
+const SearchInput = ({ onSearch }: Props) => {
+  const ref = useRef<HTMLInputElement>(null);
+
   return (
-    <InputGroup>
+    <form onSubmit={(event) => {
-      <InputLeftElement children={<BsSearch />} />
+      event.preventDefault();
-      <Input borderRadius={20} placeholder="Search games..." variant="filled" />
+      if (ref.current) onSearch(ref.current.value);
-    </InputGroup>
+    }}>
+      <InputGroup>
+        <InputLeftElement children={<BsSearch />} />
+        <Input ref={ref} borderRadius={20} placeholder="Search games..." variant="filled" />
+      </InputGroup>
+    </form>
   );
 };
 

src/hooks/useGames.ts

@@ -23,7 +23,8 @@ const useGames = (gameQuery: GameQuery) =>
       params: {
         genres: gameQuery.genre?.id,
         platforms: gameQuery.platform?.id,
-        ordering: gameQuery.sortOrder
+        ordering: gameQuery.sortOrder,
+        search: gameQuery.searchText
       },
     },
     [gameQuery]

src/index.css

@@ -0,0 +1,3 @@
+form {
+  width: 100%;
+}