Build a Quiz App

import { useEffect, useReducer, useRef, useState } from "react";
import { QUESTIONS, SECONDS_PER_QUESTION } from "./src/data/questions";
import { initialState, quizReducer } from "./src/utils/quizReducer";
import Review from "./src/components/Review";

export default function App() {
  const [state, dispatch] = useReducer(quizReducer, initialState);
  const [now, setNow] = useState(() => Date.now());
  const heading = useRef(null);
  const { phase, index, selected } = state;
  const q = QUESTIONS[index];

  // Timer: tick a clock, and time out against a fixed deadline (no drift).
  useEffect(() => {
    if (phase !== "question") return;
    const id = setInterval(() => {
      const t = Date.now();
      setNow(t);
      if (t >= state.deadline) dispatch({ type: "TIMEOUT", index, at: t });
    }, 200);
    return () => clearInterval(id); // new question, review or unmount: stop
  }, [phase, index, state.deadline]);

  // Keyboard: 1-4 pick an option, Enter goes on. Only while a question shows.
  useEffect(() => {
    if (phase !== "question") return;
    const onKey = (e) => {
      // let buttons handle their own Enter
      if (e.target.closest && e.target.closest("button")) return;
      const n = Number(e.key);
      if (n >= 1 && n <= q.options.length)
        dispatch({ type: "SELECT", option: n - 1 });
      if (e.key === "Enter") dispatch({ type: "NEXT", at: Date.now() });
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [phase, q]);

  // Move focus to the new heading so screen readers announce the question.
  useEffect(() => {
    if (phase === "question") heading.current?.focus();
  }, [phase, index]);

  if (phase === "intro") {
    return (
      <main className="app">
        <section className="card">
          <h1>Frontend quiz</h1>
          <p>
            {QUESTIONS.length} questions, {SECONDS_PER_QUESTION} seconds each.
            Keys 1-4 pick an answer, Enter goes on.
          </p>
          <button
            data-testid="start"
            onClick={() => {
              setNow(Date.now());
              dispatch({ type: "START", at: Date.now() });
            }}
          >
            Start quiz
          </button>
        </section>
      </main>
    );
  }

  if (phase === "review") {
    return (
      <main className="app">
        <Review
          answers={state.answers}
          onRestart={() => {
            setNow(Date.now());
            dispatch({ type: "RESTART", at: Date.now() });
          }}
        />
      </main>
    );
  }

  const left = Math.max(
    0,
    Math.min(SECONDS_PER_QUESTION, Math.ceil((state.deadline - now) / 1000)),
  );
  return (
    <main className="app">
      <section className="card" aria-labelledby="q-title">
        <div className="top">
          <span data-testid="progress">
            Question {index + 1} of {QUESTIONS.length}
          </span>
          <span
            className={"timer" + (left <= 3 ? " low" : "")}
            role="timer"
            data-testid="timer"
          >
            {left}s
          </span>
        </div>
        <progress
          max={QUESTIONS.length}
          value={index}
          aria-label="Quiz progress"
        />
        <h2 id="q-title" tabIndex={-1} ref={heading} data-testid="heading">
          {q.prompt}
        </h2>
        <fieldset className="options">
          <legend className="sr-only">Choose one answer</legend>
          {q.options.map((opt, i) => (
            <label
              key={opt}
              className={"option" + (selected === i ? " chosen" : "")}
            >
              <input
                type="radio"
                name={q.id}
                checked={selected === i}
                onChange={() => dispatch({ type: "SELECT", option: i })}
              />
              <kbd aria-hidden="true">{i + 1}</kbd> {opt}
            </label>
          ))}
        </fieldset>
        <button
          data-testid="next"
          disabled={selected === null}
          onClick={() => dispatch({ type: "NEXT", at: Date.now() })}
        >
          {index === QUESTIONS.length - 1 ? "Finish" : "Next"}
        </button>
      </section>
    </main>
  );
}