Add URL handler for question ID

Author: postrational

package-lock.json

@@ -19,6 +19,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.9.3",
     "react-syntax-highlighter": "^15.6.6",
     "zustand": "^5.0.8"
   },

package.json

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useEffect } from 'react';
 import { Box, Button, Paper, Typography } from '@mui/material';
+import { useSearchParams } from 'react-router-dom';
 import './App.css';
 import { QuizQuestion } from './components/QuizQuestion';
 import { QuizStats } from './components/QuizStats';
@@ -11,20 +12,32 @@ export function App() {
   const correctQuestions = useQuizStore((state) => state.correctQuestions);
   const resetProgress = useQuizStore((state) => state.resetProgress);
 
-  const [currentQuestionId, setCurrentQuestionId] = useState(
-    () => selectNextQuestion(answeredQuestions, correctQuestions) ?? questionIds[0],
-  );
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const urlQuestionId = searchParams.get('q');
+  const validUrlQuestionId = urlQuestionId && questionIds.includes(urlQuestionId) ? urlQuestionId : null;
+
+  const currentQuestionId =
+    validUrlQuestionId ?? selectNextQuestion(answeredQuestions, correctQuestions) ?? questionIds[0];
+
+  // Sync URL with current question
+  useEffect(() => {
+    if (searchParams.get('q') !== currentQuestionId) {
+      setSearchParams({ q: currentQuestionId }, { replace: true });
+    }
+  }, [currentQuestionId, searchParams, setSearchParams]);
 
   const handleNextQuestion = () => {
     const nextId = selectNextQuestion(answeredQuestions, correctQuestions);
     if (nextId) {
-      setCurrentQuestionId(nextId);
+      setSearchParams({ q: nextId }, { replace: true });
     }
   };
 
   const handlePlayAgain = () => {
     resetProgress();
-    setCurrentQuestionId(questionIds[Math.floor(Math.random() * questionIds.length)]);
+    const randomId = questionIds[Math.floor(Math.random() * questionIds.length)];
+    setSearchParams({ q: randomId }, { replace: true });
   };
 
   const allQuestionsCorrect = correctQuestions.length === questionIds.length;

src/App.tsx

@@ -1,15 +1,18 @@
 import { CssBaseline } from '@mui/material';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import { App } from './App';
 import { Theme } from './components/Theme';
 import './index.css';
 
 createRoot(document.getElementById('root') as HTMLElement).render(
   <StrictMode>
-    <Theme>
-      <CssBaseline />
-      <App />
-    </Theme>
+    <BrowserRouter>
+      <Theme>
+        <CssBaseline />
+        <App />
+      </Theme>
+    </BrowserRouter>
   </StrictMode>,
 );