chore(deps): update dependency typescript-eslint to v8.50.0

store theme selection in localstorage
feat: modularize game filtering logic and UI into a custom hook and dedicated components.feat: modularize game filtering logic and UI into a custom hook and dedicated components.
2025-12-19 14:04:38 +00:00 · 2025-12-19 14:08:54 +01:00 · 2025-12-19 14:06:31 +01:00
7 changed files with 338 additions and 276 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -3,7 +3,6 @@

 <head>
  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Game List</title>
 </head>
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@ -59,7 +59,7 @@ importers:
        version: 5.9.3
      typescript-eslint:
        specifier: ^8.48.1
-        version: 8.48.1(eslint@9.39.1)(typescript@5.9.3)
+        version: 8.50.0(eslint@9.39.1)(typescript@5.9.3)
      vite:
        specifier: npm:rolldown-vite@7.2.5
        version: rolldown-vite@7.2.5(@types/node@24.10.1)
@ -362,70 +362,70 @@ packages:
  '@types/react@19.2.7':
    resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}

-  '@typescript-eslint/eslint-plugin@8.48.1':
-    resolution: {integrity: sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==}
+  '@typescript-eslint/eslint-plugin@8.50.0':
+    resolution: {integrity: sha512-O7QnmOXYKVtPrfYzMolrCTfkezCJS9+ljLdKW/+DCvRsc3UAz+sbH6Xcsv7p30+0OwUbeWfUDAQE0vpabZ3QLg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
-      '@typescript-eslint/parser': ^8.48.1
+      '@typescript-eslint/parser': ^8.50.0
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/parser@8.48.1':
-    resolution: {integrity: sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==}
+  '@typescript-eslint/parser@8.50.0':
+    resolution: {integrity: sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/project-service@8.48.1':
-    resolution: {integrity: sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==}
+  '@typescript-eslint/project-service@8.50.0':
+    resolution: {integrity: sha512-Cg/nQcL1BcoTijEWyx4mkVC56r8dj44bFDvBdygifuS20f3OZCHmFbjF34DPSi07kwlFvqfv/xOLnJ5DquxSGQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/scope-manager@8.48.1':
-    resolution: {integrity: sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==}
+  '@typescript-eslint/scope-manager@8.50.0':
+    resolution: {integrity: sha512-xCwfuCZjhIqy7+HKxBLrDVT5q/iq7XBVBXLn57RTIIpelLtEIZHXAF/Upa3+gaCpeV1NNS5Z9A+ID6jn50VD4A==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/tsconfig-utils@8.48.1':
-    resolution: {integrity: sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==}
+  '@typescript-eslint/tsconfig-utils@8.50.0':
+    resolution: {integrity: sha512-vxd3G/ybKTSlm31MOA96gqvrRGv9RJ7LGtZCn2Vrc5htA0zCDvcMqUkifcjrWNNKXHUU3WCkYOzzVSFBd0wa2w==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/type-utils@8.48.1':
-    resolution: {integrity: sha512-1jEop81a3LrJQLTf/1VfPQdhIY4PlGDBc/i67EVWObrtvcziysbLN3oReexHOM6N3jyXgCrkBsZpqwH0hiDOQg==}
+  '@typescript-eslint/type-utils@8.50.0':
+    resolution: {integrity: sha512-7OciHT2lKCewR0mFoBrvZJ4AXTMe/sYOe87289WAViOocEmDjjv8MvIOT2XESuKj9jp8u3SZYUSh89QA4S1kQw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/types@8.48.1':
-    resolution: {integrity: sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==}
+  '@typescript-eslint/types@8.50.0':
+    resolution: {integrity: sha512-iX1mgmGrXdANhhITbpp2QQM2fGehBse9LbTf0sidWK6yg/NE+uhV5dfU1g6EYPlcReYmkE9QLPq/2irKAmtS9w==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/typescript-estree@8.48.1':
-    resolution: {integrity: sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==}
+  '@typescript-eslint/typescript-estree@8.50.0':
+    resolution: {integrity: sha512-W7SVAGBR/IX7zm1t70Yujpbk+zdPq/u4soeFSknWFdXIFuWsBGBOUu/Tn/I6KHSKvSh91OiMuaSnYp3mtPt5IQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/utils@8.48.1':
-    resolution: {integrity: sha512-fAnhLrDjiVfey5wwFRwrweyRlCmdz5ZxXz2G/4cLn0YDLjTapmN4gcCsTBR1N2rWnZSDeWpYtgLDsJt+FpmcwA==}
+  '@typescript-eslint/utils@8.50.0':
+    resolution: {integrity: sha512-87KgUXET09CRjGCi2Ejxy3PULXna63/bMYv72tCAlDJC3Yqwln0HiFJ3VJMst2+mEtNtZu5oFvX4qJGjKsnAgg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/visitor-keys@8.48.1':
-    resolution: {integrity: sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==}
+  '@typescript-eslint/visitor-keys@8.50.0':
+    resolution: {integrity: sha512-Xzmnb58+Db78gT/CCj/PVCvK+zxbnsw6F+O1oheYszJbBSdEjVhQi3C/Xttzxgi/GLmpvOggRs1RFpiJ8+c34Q==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

  '@vitejs/plugin-react@5.1.2':
    resolution: {integrity: sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==}
    engines: {node: ^20.19.0 || >=22.12.0}
    peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      vite: npm:rolldown-vite@7.2.5

  acorn-jsx@5.3.2:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@ -646,9 +646,6 @@ packages:
    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
    engines: {node: '>=18'}

-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
  has-flag@4.0.0:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
    engines: {node: '>=8'}
@ -1004,8 +1001,8 @@ packages:
    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
    engines: {node: '>= 0.8.0'}

-  typescript-eslint@8.48.1:
-    resolution: {integrity: sha512-FbOKN1fqNoXp1hIl5KYpObVrp0mCn+CLgn479nmu2IsRMrx2vyv74MmsBLVlhg8qVwNFGbXSp8fh1zp8pEoC2A==}
+  typescript-eslint@8.50.0:
+    resolution: {integrity: sha512-Q1/6yNUmCpH94fbgMUMg2/BSAr/6U7GBk61kZTv1/asghQOWOjTlp9K8mixS5NcJmm2creY+UFfGeW/+OcA64A==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
@ -1362,16 +1359,15 @@ snapshots:
    dependencies:
      csstype: 3.2.3

-  '@typescript-eslint/eslint-plugin@8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.50.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)':
    dependencies:
      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/type-utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.48.1
+      '@typescript-eslint/parser': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.50.0
+      '@typescript-eslint/type-utils': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.50.0
      eslint: 9.39.1
-      graphemer: 1.4.0
      ignore: 7.0.5
      natural-compare: 1.4.0
      ts-api-utils: 2.1.0(typescript@5.9.3)
@ -1379,41 +1375,41 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/parser@8.48.1(eslint@9.39.1)(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.50.0(eslint@9.39.1)(typescript@5.9.3)':
    dependencies:
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.48.1
+      '@typescript-eslint/scope-manager': 8.50.0
+      '@typescript-eslint/types': 8.50.0
+      '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.50.0
      debug: 4.4.3
      eslint: 9.39.1
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/project-service@8.48.1(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.50.0(typescript@5.9.3)':
    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/tsconfig-utils': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.50.0
      debug: 4.4.3
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/scope-manager@8.48.1':
+  '@typescript-eslint/scope-manager@8.50.0':
    dependencies:
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/visitor-keys': 8.48.1
+      '@typescript-eslint/types': 8.50.0
+      '@typescript-eslint/visitor-keys': 8.50.0

-  '@typescript-eslint/tsconfig-utils@8.48.1(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.50.0(typescript@5.9.3)':
    dependencies:
      typescript: 5.9.3

-  '@typescript-eslint/type-utils@8.48.1(eslint@9.39.1)(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.50.0(eslint@9.39.1)(typescript@5.9.3)':
    dependencies:
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/types': 8.50.0
+      '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
      debug: 4.4.3
      eslint: 9.39.1
      ts-api-utils: 2.1.0(typescript@5.9.3)
@ -1421,14 +1417,14 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/types@8.48.1': {}
+  '@typescript-eslint/types@8.50.0': {}

-  '@typescript-eslint/typescript-estree@8.48.1(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.50.0(typescript@5.9.3)':
    dependencies:
-      '@typescript-eslint/project-service': 8.48.1(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/visitor-keys': 8.48.1
+      '@typescript-eslint/project-service': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.50.0
+      '@typescript-eslint/visitor-keys': 8.50.0
      debug: 4.4.3
      minimatch: 9.0.5
      semver: 7.7.3
@ -1438,20 +1434,20 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/utils@8.48.1(eslint@9.39.1)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.50.0(eslint@9.39.1)(typescript@5.9.3)':
    dependencies:
      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1)
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.50.0
+      '@typescript-eslint/types': 8.50.0
+      '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
      eslint: 9.39.1
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/visitor-keys@8.48.1':
+  '@typescript-eslint/visitor-keys@8.50.0':
    dependencies:
-      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/types': 8.50.0
      eslint-visitor-keys: 4.2.1

  '@vitejs/plugin-react@5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))':
@ -1677,8 +1673,6 @@ snapshots:

  globals@16.5.0: {}

-  graphemer@1.4.0: {}
-
  has-flag@4.0.0: {}

  hermes-estree@0.25.1: {}
@ -1956,12 +1950,12 @@ snapshots:
    dependencies:
      prelude-ls: 1.2.1

-  typescript-eslint@8.48.1(eslint@9.39.1)(typescript@5.9.3):
+  typescript-eslint@8.50.0(eslint@9.39.1)(typescript@5.9.3):
    dependencies:
-      '@typescript-eslint/eslint-plugin': 8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.50.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
      eslint: 9.39.1
      typescript: 5.9.3
    transitivePeerDependencies:
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -24,7 +24,13 @@ function App() {
  const [token, setToken] = useState<string>(
    localStorage.getItem("token") || ""
  );
-  const [theme, setTheme] = useState<string>("default");
+  const [theme, _setTheme] = useState<string>(
+    localStorage.getItem("theme") || "default"
+  );
+  const setTheme = (theme: string) => {
+    _setTheme(theme);
+    localStorage.setItem("theme", theme);
+  };
  const [toasts, setToasts] = useState<ToastMessage[]>([]);
  const [isLoading, setIsLoading] = useState(false);

--- a/frontend/src/GameFilter.tsx
+++ b/frontend/src/GameFilter.tsx
@ -1,25 +1,19 @@
 import { useState, useEffect } from "react";
-import {
-  Person,
-  PersonList as PersonListProto,
-  Game as GameProto,
-  GetGameInfoRequest,
-  GameInfoResponse,
-} from "../items";
+import { Person, PersonList as PersonListProto } from "../items";
 import { apiFetch } from "./api";
-import { Link } from "react-router-dom";
-import { GameImage } from "./GameImage";
-import "./GameFilter.css"
+import "./GameFilter.css";
+import { useGameFilter } from "./hooks/useGameFilter";
+import { PersonSelector } from "./components/PersonSelector";
+import { FilteredGamesList } from "./components/FilteredGamesList";

 export function GameFilter() {
  const [people, setPeople] = useState<Person[]>([]);
  const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
-  const [filteredGames, setFilteredGames] = useState<string[]>([]);
-  const [gameToPositive, setGameToPositive] = useState<
-    Map<string, Set<string>>
-  >(new Map());
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [metaData, _setMetaData] = useState<{ [key: string]: GameProto }>({});
+
+  const { filteredGames, gameToPositive } = useGameFilter(
+    people,
+    selectedPeople
+  );

  useEffect(() => {
    apiFetch("/api")
@ -31,83 +25,6 @@ export function GameFilter() {
      .catch((err) => console.error("Failed to fetch people:", err));
  }, []);

-  useEffect(() => {
-    if (selectedPeople.size === 0) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setFilteredGames([]);
-      return;
-    }
-
-    // Get all games where ALL selected people have "Would Play"
-    const selectedPersons = people.filter((p) => selectedPeople.has(p.name));
-
-    if (selectedPersons.length === 0) {
-      setFilteredGames([]);
-      return;
-    }
-
-    // Create a map of game -> set of people who would not play it
-    const gameToNegative = new Map<string, Set<string>>();
-    const gameToPositiveOpinion = new Map<string, Set<string>>();
-
-    selectedPersons.forEach((person) => {
-      person.opinion.forEach((op) => {
-        if (!gameToNegative.has(op.title)) {
-          gameToNegative.set(op.title, new Set());
-        }
-        if (!gameToPositiveOpinion.has(op.title)) {
-          gameToPositiveOpinion.set(op.title, new Set());
-        }
-        if (!op.wouldPlay) {
-          gameToNegative.get(op.title)!.add(person.name);
-        }
-        if (op.wouldPlay) {
-          gameToPositiveOpinion.get(op.title)!.add(person.name);
-        }
-      });
-    });
-
-    setGameToPositive(gameToPositiveOpinion);
-
-    // Filter games where ALL selected people would play
-    const game_titles = Array.from(gameToNegative.entries())
-      .filter(([, players]) => players.size === 0)
-      .map(([game]) => game);
-
-    let games = game_titles.filter((title) => metaData[title]).map((title) => metaData[title]);
-    const gamesToFetch = GetGameInfoRequest.encode(
-      GetGameInfoRequest.create({
-        games: game_titles.filter((title) => !metaData[title]),
-      })
-    ).finish();
-
-    apiFetch("/api/games/batch", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/octet-stream",
-      },
-      body: gamesToFetch,
-    })
-      .then((res) => res.arrayBuffer())
-      .then((buffer) => {
-        const list = GameInfoResponse.decode(new Uint8Array(buffer));
-        games = games.concat(list.games);
-
-        games.forEach((game) => {
-          metaData[game.title] = game;
-        });
-
-        const filteredGames = games.filter((g) => {
-          const game = g as GameProto;
-          return (
-            game.maxPlayers >= selectedPeople.size &&
-            game.minPlayers <= selectedPeople.size
-          );
-        });
-        setFilteredGames(filteredGames.map((g) => (g as GameProto).title));
-      });
-  }, [selectedPeople, people, metaData]);
-
  const togglePerson = (name: string) => {
    const newSelected = new Set(selectedPeople);
    if (newSelected.has(name)) {
@ -125,118 +42,17 @@ export function GameFilter() {
        Select multiple people to find games that everyone would play
      </p>

-      <div style={{ marginBottom: "3rem" }}>
-        <h3>Select People</h3>
-        <div
-          className="grid-container"
-          style={{
-            display: "flex",
-            flexWrap: "wrap",
-            gap: "1rem",
-            justifyContent: "center",
-          }}
-        >
-          {people.map((person) => (
-            <div
-              key={person.name}
-              className="list-item gamefilter-entry"
-              style={{
-                borderColor: selectedPeople.has(person.name)
-                  ? "var(--accent-color)"
-                  : "var(--border-color)",
-              }}
-              onClick={() => togglePerson(person.name)}
-            >
-              <div style={{ gap: "0.5rem" }}>
-                <strong>{person.name}</strong>
-              </div>
-              <div
-                style={{
-                  fontSize: "0.9em",
-                  color: "var(--text-muted)",
-                  marginTop: "0.5rem",
-                }}
-              >
-                {person.opinion.length} opinion(s)
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
+      <PersonSelector
+        people={people}
+        selectedPeople={selectedPeople}
+        onTogglePerson={togglePerson}
+      />

-      {selectedPeople.size > 0 && (
-        <div>
-          <h3>Games Everyone Would Play ({filteredGames.length})</h3>
-          {filteredGames.length > 0 ? (
-            <ul className="grid-container">
-              {filteredGames.map((game) => (
-                <Link
-                  to={`/game/${encodeURIComponent(game)}`}
-                  key={game}
-                  className="list-item game-entry"
-                  style={{
-                    textDecoration: "none",
-                    color: "inherit",
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                  }}
-                >
-                  <div>
-                    <strong>{game}</strong>
-                    <div
-                      style={{
-                        fontSize: "0.9em",
-                        color: "#4caf50",
-                        marginTop: "0.5rem",
-                      }}
-                    >
-                      <span>✓</span> {gameToPositive.get(game)!.size} selected
-                      would play
-                    </div>
-                    {selectedPeople.size - gameToPositive.get(game)!.size >
-                      0 && (
-                      <div
-                        style={{
-                          fontSize: "0.9em",
-                          color: "#d4d400",
-                          marginTop: "0.3rem",
-                        }}
-                      >
-                        <span>?</span>{" "}
-                        {selectedPeople.size - gameToPositive.get(game)!.size}{" "}
-                        {selectedPeople.size - gameToPositive.get(game)!.size >
-                        1
-                          ? "are"
-                          : "is"}{" "}
-                        neutral
-                      </div>
-                    )}
-                  </div>
-                  <GameImage game={game} />
-                </Link>
-              ))}
-            </ul>
-          ) : (
-            <div
-              style={{
-                padding: "3rem",
-                textAlign: "center",
-                background: "var(--secondary-alt-bg)",
-                borderRadius: "16px",
-                border: "1px dashed var(--border-color)",
-                color: "var(--text-muted)",
-              }}
-            >
-              <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔍</div>
-              <p>No games found where all selected people would play.</p>
-              <p style={{ fontSize: "0.9rem" }}>
-                Try selecting fewer people or adding more opinions!
-              </p>
-            </div>
-          )}
-        </div>
-      )}
+      <FilteredGamesList
+        filteredGames={filteredGames}
+        gameToPositive={gameToPositive}
+        selectedPeopleCount={selectedPeople.size}
+      />
    </div>
  );
 }
--- a/frontend/src/components/FilteredGamesList.tsx
+++ b/frontend/src/components/FilteredGamesList.tsx
@ -0,0 +1,94 @@
+import { Link } from "react-router-dom";
+import { GameImage } from "../GameImage";
+
+interface FilteredGamesListProps {
+  filteredGames: string[];
+  gameToPositive: Map<string, Set<string>>;
+  selectedPeopleCount: number;
+}
+
+export function FilteredGamesList({
+  filteredGames,
+  gameToPositive,
+  selectedPeopleCount,
+}: FilteredGamesListProps) {
+  if (selectedPeopleCount === 0) return null;
+
+  return (
+    <div>
+      <h3>Games Everyone Would Play ({filteredGames.length})</h3>
+      {filteredGames.length > 0 ? (
+        <ul className="grid-container">
+          {filteredGames.map((game) => {
+            const positiveCount = gameToPositive.get(game)?.size || 0;
+            const neutralCount = selectedPeopleCount - positiveCount;
+
+            return (
+              <Link
+                to={`/game/${encodeURIComponent(game)}`}
+                key={game}
+                className="list-item game-entry"
+                style={{
+                  textDecoration: "none",
+                  color: "inherit",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <strong>{game}</strong>
+                  <div
+                    style={{
+                      fontSize: "0.9em",
+                      color: "#4caf50",
+                      marginTop: "0.5rem",
+                    }}
+                  >
+                    <span>✓</span> {positiveCount} selected would play
+                  </div>
+                  {neutralCount > 0 && (
+                    <div
+                      style={{
+                        fontSize: "0.9em",
+                        color: "#d4d400",
+                        marginTop: "0.3rem",
+                      }}
+                    >
+                      <span>?</span> {neutralCount}{" "}
+                      {neutralCount > 1 ? "are" : "is"} neutral
+                    </div>
+                  )}
+                </div>
+                <GameImage game={game} />
+              </Link>
+            );
+          })}
+        </ul>
+      ) : (
+        <EmptyState />
+      )}
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div
+      style={{
+        padding: "3rem",
+        textAlign: "center",
+        background: "var(--secondary-alt-bg)",
+        borderRadius: "16px",
+        border: "1px dashed var(--border-color)",
+        color: "var(--text-muted)",
+      }}
+    >
+      <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔍</div>
+      <p>No games found where all selected people would play.</p>
+      <p style={{ fontSize: "0.9rem" }}>
+        Try selecting fewer people or adding more opinions!
+      </p>
+    </div>
+  );
+}
--- a/frontend/src/components/PersonSelector.tsx
+++ b/frontend/src/components/PersonSelector.tsx
@ -0,0 +1,55 @@
+import { Person } from "../../items";
+
+interface PersonSelectorProps {
+  people: Person[];
+  selectedPeople: Set<string>;
+  onTogglePerson: (name: string) => void;
+}
+
+export function PersonSelector({
+  people,
+  selectedPeople,
+  onTogglePerson,
+}: PersonSelectorProps) {
+  return (
+    <div style={{ marginBottom: "3rem" }}>
+      <h3>Select People</h3>
+      <div
+        className="grid-container"
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "1rem",
+          justifyContent: "center",
+        }}
+      >
+        {people.map((person) => (
+          <div
+            key={person.name}
+            className="list-item gamefilter-entry"
+            style={{
+              borderColor: selectedPeople.has(person.name)
+                ? "var(--accent-color)"
+                : "var(--border-color)",
+              cursor: "pointer",
+            }}
+            onClick={() => onTogglePerson(person.name)}
+          >
+            <div style={{ gap: "0.5rem" }}>
+              <strong>{person.name}</strong>
+            </div>
+            <div
+              style={{
+                fontSize: "0.9em",
+                color: "var(--text-muted)",
+                marginTop: "0.5rem",
+              }}
+            >
+              {person.opinion.length} opinion(s)
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/hooks/useGameFilter.ts
+++ b/frontend/src/hooks/useGameFilter.ts
@ -0,0 +1,98 @@
+import { useState, useEffect, useRef, useMemo } from "react";
+import {
+  Person,
+  Game as GameProto,
+  GetGameInfoRequest,
+  GameInfoResponse,
+} from "../../items";
+import { apiFetch } from "../api";
+
+export function useGameFilter(people: Person[], selectedPeople: Set<string>) {
+  const [fetchedTitles, setFetchedTitles] = useState<string[]>([]);
+  const metaDataRef = useRef<{ [key: string]: GameProto }>({});
+
+  const { gameToNegative, gameToPositiveOpinion } = useMemo(() => {
+    const gameToNegative = new Map<string, Set<string>>();
+    const gameToPositiveOpinion = new Map<string, Set<string>>();
+
+    if (selectedPeople.size === 0)
+      return { gameToNegative, gameToPositiveOpinion };
+
+    const selectedPersons = people.filter((p) => selectedPeople.has(p.name));
+    selectedPersons.forEach((person) => {
+      person.opinion.forEach((op) => {
+        if (!gameToNegative.has(op.title))
+          gameToNegative.set(op.title, new Set());
+        if (!gameToPositiveOpinion.has(op.title))
+          gameToPositiveOpinion.set(op.title, new Set());
+
+        if (!op.wouldPlay) {
+          gameToNegative.get(op.title)!.add(person.name);
+        } else {
+          gameToPositiveOpinion.get(op.title)!.add(person.name);
+        }
+      });
+    });
+
+    return { gameToNegative, gameToPositiveOpinion };
+  }, [people, selectedPeople]);
+
+  const titlesEveryoneWouldPlay = useMemo(() => {
+    return Array.from(gameToNegative.entries())
+      .filter(([, players]) => players.size === 0)
+      .map(([game]) => game);
+  }, [gameToNegative]);
+
+  useEffect(() => {
+    const titlesToFetch = titlesEveryoneWouldPlay.filter(
+      (title) => !metaDataRef.current[title]
+    );
+    if (titlesToFetch.length === 0) return;
+
+    const gamesToFetch = GetGameInfoRequest.encode(
+      GetGameInfoRequest.create({
+        games: titlesToFetch,
+      })
+    ).finish();
+
+    apiFetch("/api/games/batch", {
+      method: "POST",
+      headers: { "Content-Type": "application/octet-stream" },
+      body: gamesToFetch,
+    })
+      .then((res) => res.arrayBuffer())
+      .then((buffer) => {
+        const list = GameInfoResponse.decode(new Uint8Array(buffer));
+        list.games.forEach((game) => {
+          metaDataRef.current[game.title] = game;
+        });
+        // Trigger a re-render to update filteredGames
+        setFetchedTitles([...titlesToFetch]);
+      })
+      .catch((err) => console.error("Failed to fetch game metadata:", err));
+  }, [titlesEveryoneWouldPlay]);
+
+  const filteredGames = useMemo(() => {
+    if (selectedPeople.size === 0) return [];
+
+    const games = titlesEveryoneWouldPlay
+      .filter((title) => metaDataRef.current[title])
+      .map((title) => metaDataRef.current[title]);
+
+    return filterByPlayerCount(games, selectedPeople.size);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [titlesEveryoneWouldPlay, selectedPeople.size, fetchedTitles]);
+
+  return { filteredGames, gameToPositive: gameToPositiveOpinion };
+}
+
+function filterByPlayerCount(
+  games: GameProto[],
+  playerCount: number
+): string[] {
+  return games
+    .filter(
+      (game) => game.maxPlayers >= playerCount && game.minPlayers <= playerCount
+    )
+    .map((game) => game.title);
+}
Author	SHA1	Message	Date
Renovate Bot	8c5c7332de	chore(deps): update dependency typescript-eslint to v8.50.0	2025-12-19 14:04:38 +00:00
code002lover	d1b65231a6	store theme selection in localstorage	2025-12-19 14:08:54 +01:00
code002lover	5b397e2265	feat: modularize game filtering logic and UI into a custom hook and dedicated components.feat: modularize game filtering logic and UI into a custom hook and dedicated components.	2025-12-19 14:06:31 +01:00