Refactor: extract usePredictions hook, clean up boilerplate, add validation & tests

package.json

@@ -17,13 +17,16 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "eslint": "^10.3.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
+    "jsdom": "^28.1.0",
     "vite": "^8.0.12",
     "vite-plugin-pwa": "^1.3.0",
     "vitest": "^4.1.7"

src/App.jsx

@@ -1,57 +1,29 @@
-import { useEffect, useState } from 'react';
-import { loadAll, put, remove } from './db';
+import usePredictions from './hooks/usePredictions';
 import PredictionForm from './components/PredictionForm';
 import PredictionList from './components/PredictionList';
 import ScoreSummary from './components/ScoreSummary';
 import ReliabilityDiagram from './components/ReliabilityDiagram';
 import DataIO from './components/DataIO';
-import './App.css';
 
 function App() {
-  const [predictions, setPredictions] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    loadAll().then((all) => {
-      setPredictions(all);
-      setLoading(false);
-    });
-  }, []);
-
-  async function addPrediction({ text, probability, category, resolveBy }) {
-    const prediction = {
-      id: crypto.randomUUID(),
-      text,
-      probability,
-      category,
-      createdAt: new Date().toISOString(),
-      resolveBy,
-      resolvedAt: null,
-      outcome: null,
-      notes: '',
-    };
-    await put(prediction);
-    setPredictions((prev) => [...prev, prediction]);
-  }
-
-  async function resolvePrediction(id, outcome) {
-    const target = predictions.find((p) => p.id === id);
-    if (!target) return;
-    const updated = { ...target, outcome, resolvedAt: new Date().toISOString() };
-    await put(updated);
-    setPredictions((prev) => prev.map((p) => (p.id === id ? updated : p)));
-  }
-
-  async function deletePrediction(id) {
-    await remove(id);
-    setPredictions((prev) => prev.filter((p) => p.id !== id));
-  }
-
-  async function importPredictions(incoming) {
-    for (const prediction of incoming) {
-      await put(prediction);
-    }
-    setPredictions(await loadAll());
+  const {
+    predictions,
+    loading,
+    error,
+    resolvedItems,
+    addPrediction,
+    resolvePrediction,
+    deletePrediction,
+    importPredictions,
+  } = usePredictions();
+
+  if (error) {
+    return (
+      <main>
+        <h1>brierly</h1>
+        <p role="alert">Could not load your predictions: {error}</p>
+      </main>
+    );
   }
 
   return (
@@ -62,8 +34,8 @@ function App() {
         <p>Loading…</p>
       ) : (
         <>
-          <ScoreSummary predictions={predictions} />
-          <ReliabilityDiagram predictions={predictions} />
+          <ScoreSummary resolvedItems={resolvedItems} openCount={predictions.length - resolvedItems.length} />
+          <ReliabilityDiagram resolvedItems={resolvedItems} />
           <PredictionList
             predictions={predictions}
             onResolve={resolvePrediction}

src/components/DataIO.jsx

@@ -27,6 +27,18 @@ function DataIO({ predictions, onImport }) {
       if (!Array.isArray(data)) {
         throw new Error('expected a JSON array of predictions');
       }
+      for (let i = 0; i < data.length; i++) {
+        const item = data[i];
+        if (typeof item.id !== 'string' || !item.id) {
+          throw new Error(`item ${i}: missing or invalid "id" (expected non-empty string)`);
+        }
+        if (typeof item.text !== 'string' || !item.text) {
+          throw new Error(`item ${i}: missing or invalid "text" (expected non-empty string)`);
+        }
+        if (typeof item.probability !== 'number' || item.probability < 0 || item.probability > 1) {
+          throw new Error(`item ${i}: missing or invalid "probability" (expected number between 0 and 1)`);
+        }
+      }
       await onImport(data);
     } catch (err) {
       setError(`Import failed: ${err.message}`);

src/components/PredictionForm.jsx

@@ -1,6 +1,5 @@
 import { useRef, useState } from 'react';
-
-const CATEGORIES = ['work', 'markets', 'personal'];
+import { CATEGORIES } from '../constants';
 
 // Default resolve-by a week out, as YYYY-MM-DD (so the Phase 3 nudge has a
 // real date to compare against, not a graveyard).