Game detail

frontend/package.json

@@ -17,6 +17,7 @@
     "react-bootstrap": "^2.10.10",
     "react-bootstrap-icons": "^1.11.6",
     "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.4",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -1,8 +1,19 @@
 import "bootstrap/dist/css/bootstrap.min.css";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import GamesGrid from "./pages/GamesGrid/GamesGrid";
+import GameDetails from "./pages/GameDetails/GameDetails";
+import MyRatings from "./pages/MyRatings/MyRatings";
 
 function App() {
-  return <GamesGrid />;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<GamesGrid />} />
+        <Route path="/games/:id" element={<GameDetails />} />
+        <Route path="/my-ratings" element={<MyRatings />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
 export default App;

frontend/src/apolloClient.ts

@@ -0,0 +1,9 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+import { HttpLink } from "@apollo/client/link/http";
+
+const uri = import.meta.env.VITE_GRAPHQL_URL ?? "http://localhost:3001";
+
+export const apolloClient = new ApolloClient({
+  link: new HttpLink({ uri }),
+  cache: new InMemoryCache(),
+});

frontend/src/components/GameListItem/GameListItem.module.css

@@ -5,6 +5,8 @@
   min-height: var(--row-min-height);
   gap: 1.5rem;
   padding: 0 1.5rem;
+  color: inherit;
+  text-decoration: none;
 }
 
 .odd {

frontend/src/components/GameListItem/GameListItem.tsx

@@ -1,31 +1,40 @@
+import { Image } from "react-bootstrap";
+import { Link } from "react-router-dom";
 import styles from "./GameListItem.module.css";
 
 interface GameListItemProps {
+  id: string;
   title: string;
-  year: number;
+  year: number | null;
   tags: string;
   rating: number;
+  reviewCount: number;
   image: string;
   striped: boolean;
 }
 
 export default function GameListItem({
+  id,
   title,
   year,
   tags,
   rating,
+  reviewCount,
   image,
   striped,
 }: GameListItemProps) {
   return (
-    <div className={`${styles.row} ${striped ? styles.odd : styles.even}`}>
-      <img className={styles.image} src={image} alt={title} />
+    <Link
+      to={`/games/${id}`}
+      className={`${styles.row} ${striped ? styles.odd : styles.even}`}
+    >
+      <Image className={styles.image} src={image} alt={title} />
       <div className={styles.info}>
         <h3 className={styles.title}>{title}</h3>
-        <p>{year}</p>
-        <p>{tags}</p>
-        <p>{rating.toFixed(1)}/10</p>
+        <p>{year ?? "—"}</p>
+        <p>{tags || "—"}</p>
+        <p>{reviewCount > 0 ? `${rating.toFixed(1)}/10` : "Not yet rated"}</p>
       </div>
-    </div>
+    </Link>
   );
 }

frontend/src/components/Header/Header.module.css

@@ -13,9 +13,6 @@
   font-weight: 700;
   color: var(--color-text);
   white-space: nowrap;
-}
-
-.link {
   text-decoration: none;
 }
 

frontend/src/components/Header/Header.tsx

@@ -1,27 +1,72 @@
+import { useState } from "react";
+import type { FormEvent } from "react";
 import { Button, Form, InputGroup } from "react-bootstrap";
 import { Search } from "react-bootstrap-icons";
+import {
+  Link,
+  useLocation,
+  useNavigate,
+  useSearchParams,
+} from "react-router-dom";
+import { GRID_QUERY_STORAGE_KEY } from "../../constants/storageKeys";
 import styles from "./Header.module.css";
 
 export default function Header() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const committedSearch = searchParams.get("search") ?? "";
+  const [value, setValue] = useState(committedSearch);
+
+  // From other pages, fall back to the grid's last persisted query.
+  const homeQuery =
+    location.pathname === "/"
+      ? searchParams.toString()
+      : sessionStorage.getItem(GRID_QUERY_STORAGE_KEY) ?? "";
+  const homeHref = homeQuery ? `/?${homeQuery}` : "/";
+
+  // Adjusted during render, not an effect, so in-progress typing isn't clobbered.
+  const [prevCommittedSearch, setPrevCommittedSearch] = useState(committedSearch);
+  if (committedSearch !== prevCommittedSearch) {
+    setPrevCommittedSearch(committedSearch);
+    setValue(committedSearch);
+  }
+
+  function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    const params = new URLSearchParams(searchParams);
+    const trimmed = value.trim();
+    if (trimmed) {
+      params.set("search", trimmed);
+    } else {
+      params.delete("search");
+    }
+    navigate(`/?${params.toString()}`);
+  }
+
   return (
     <header className={styles.header}>
-      <span className={styles.brand}>Working Title</span>
+      <Link className={styles.brand} to={homeHref}>
+        Working Title
+      </Link>
 
-      <Form className={styles.search}>
+      <Form className={styles.search} role="search" onSubmit={handleSubmit}>
         <InputGroup>
           <Form.Control
             placeholder="Search games..."
             aria-label="Search games"
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
           />
-          <Button variant="light" type="submit">
+          <Button variant="light" type="submit" aria-label="Search">
             <Search />
           </Button>
         </InputGroup>
       </Form>
 
-      <a className={styles.link} href="#">
+      <Link className={styles.link} to="/my-ratings">
         My Ratings
-      </a>
+      </Link>
     </header>
   );
 }