feat: add search bar functionality

src/components/BookGrid/BookGrid.tsx

@@ -1,6 +1,9 @@
+import { useState } from "react";
 import { BookCard } from "../BookCard/BookCard";
+import { SearchBar } from "../SearchBar/SearchBar";
 import styles from "./BookGrid.module.css";
 import { useBooks } from "../../api/useBooks";
+import { useDebounce } from "./useDebounce";
 import type { Book } from "../../api/types";
 import { Pagination } from "../Pagination/Pagination";
 import { SEARCH_LIMIT } from "../../api/openLibrary";
@@ -12,44 +15,66 @@ interface BookGridProps {
 }
 
 function BookGrid({ page, onBookSelect, onPageChange }: BookGridProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const debouncedSearch = useDebounce(searchQuery, 500);
+  const query = debouncedSearch.trim() || "subject:fantasy";
+
   const { data, isPending, isError, error } = useBooks({
-    query: "subject:fantasy",
+    query,
     page,
   });
 
+  const searchBar = (
+    <SearchBar query={searchQuery} onQueryChange={setSearchQuery} />
+  );
+
   if (isPending) {
     return (
-      <p role="status" className={styles.message}>
-        Loading books...
-      </p>
+      <>
+        {searchBar}
+        <p role="status" className={styles.message}>
+          Loading books...
+        </p>
+      </>
     );
   }
 
   if (isError) {
     return (
-      <p role="status" className={styles.message}>
-        Error: {error.message}
-      </p>
+      <>
+        {searchBar}
+        <p role="status" className={styles.message}>
+          Error: {error.message}
+        </p>
+      </>
     );
   }
 
   if (!data || data.books.length === 0) {
     return (
-      <p role="status" className={styles.message}>
-        No books found for this search
-      </p>
+      <>
+        {searchBar}
+        <p role="status" className={styles.message}>
+          No books found for this search
+        </p>
+      </>
     );
   }
 
   return (
     <>
-      <ul className={styles.bookGrid}>
-        {data.books.map((book) => (
-          <li key={book.id}>
-            <BookCard book={book} onBookSelect={onBookSelect} />
-          </li>
-        ))}
-      </ul>
+      {searchBar}
+
+      <>
+        <ul className={styles.bookGrid}>
+          {data.books.map((book) => (
+            <li key={book.id}>
+              <BookCard book={book} onBookSelect={onBookSelect} />
+            </li>
+          ))}
+        </ul>
+      </>
       <Pagination
         currentPage={page}
         totalPages={Math.ceil(data.numFound / SEARCH_LIMIT)}

src/components/BookGrid/useDebounce.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+// Debounce pattern largely adapted from this Stack Overflow post:
+// https://stackoverflow.com/questions/75556418/how-to-use-debounce-hooks-in-react
+function useDebounce<T>(value: T, delay: number): T {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+
+	useEffect(() => {
+		const timeoutId = window.setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+
+		return () => {
+			window.clearTimeout(timeoutId);
+		};
+	}, [value, delay]);
+
+	return debouncedValue;
+}
+
+export { useDebounce };

src/components/SearchBar/SearchBar.module.css

@@ -0,0 +1,22 @@
+.search-bar {
+  display: block;
+  width: 100%;
+  max-width: 500px;
+  padding: 10px 16px;
+  margin: 80px auto 0 auto;
+
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  font-size: 1rem;
+  font-family: inherit;
+
+  &:hover {
+    border-color: var(--theme-color);
+  }
+
+  @media only screen and (max-width: 600px) {
+    width: calc(100% - 80px); /* Adjust width to account for the margins*/
+    margin: 40px 40px 0 40px;
+    max-width: none;
+  }
+}

src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,22 @@
+import styles from "./SearchBar.module.css";
+
+interface SearchBarProps {
+  query: string;
+  onQueryChange: (newQuery: string) => void;
+}
+
+function SearchBar({ query, onQueryChange }: SearchBarProps) {
+  return (
+    <input
+      type="search"
+      name="search"
+      aria-label="Search for books"
+      className={styles.searchBar}
+      placeholder="Search books..."
+      value={query}
+      onChange={(e) => onQueryChange(e.target.value)}
+    />
+  );
+}
+
+export { SearchBar };