Boot context, use state

src/App.tsx

@@ -5,7 +5,6 @@ import { useState, useEffect } from "react";
 import ModeToggle from "@components/ModeToggle/ModeToggle";
 import Review from "@components/Modes/Review/Review";
 import Challenge from "@components/Modes/Challenge/Challenge";
-import ChallengeContextProvider from "@context/challenge";
 
 import { Mode } from "@types";
 
@@ -16,17 +15,15 @@ function App() {
   const [activeMode, setActiveMode] = useState(Mode.review);
 
   return (
-    <ChallengeContextProvider>
-      <div className="p-4 h-screen flex flex-col justify-center">
-        <div>
-          <h1 className="text-3xl font-bold text-center mb-12 text-sky-500/100">
-            Music Theory Practice
-          </h1>
-          <ModeToggle activeMode={activeMode} setActiveMode={setActiveMode} />
-          {activeMode === Mode.review ? <Review /> : <Challenge />}
-        </div>
+    <div className="p-4 h-screen flex flex-col justify-center">
+      <div>
+        <h1 className="text-3xl font-bold text-center mb-12 text-sky-500/100">
+          Music Theory Practice
+        </h1>
+        <ModeToggle activeMode={activeMode} setActiveMode={setActiveMode} />
+        {activeMode === Mode.review ? <Review /> : <Challenge />}
       </div>
-    </ChallengeContextProvider>
+    </div>
   );
 }
 

src/components/Modes/Challenge/Challenge.tsx

@@ -1,35 +1,56 @@
-import { useState, useContext } from "react";
+import { useState } from "react";
 import classNames from "classnames";
 import { shuffle } from "lodash";
 
 import { Note, Scale } from "@types";
 import data from "@data";
 
-import { ChallengeContext } from "@context/challenge";
-const { notes, scales } = data;
-// this stuff will need to be refs or go in an effect as we will lose it on renders...
-const shuffledNotes: Note[] = shuffle(notes);
-const randomScale: Scale = shuffle(scales).pop() || scales[0];
-const notesInScale: number[] = [...randomScale.notes];
+interface ChallengeGameState {
+  notesLeft: number[];
+  notesFound: number[];
+  shuffledNotes: Note[];
+  inProgress: boolean;
+  randomScale: Scale;
+}
+
+function setUpGameState() {
+  const { notes, scales } = data;
+  const shuffledNotes: Note[] = shuffle(notes);
+  const randomScale: Scale = shuffle(scales).pop() || scales[0];
+  const notesInScale: number[] = [...randomScale.notes];
+  return {
+    shuffledNotes,
+    randomScale,
+    notesLeft: notesInScale,
+    notesFound: [],
+    inProgress: true,
+  };
+}
 
 export default function Challenge() {
-  const [notesLeft, setNotesLeft] = useState<number[]>(notesInScale);
-  const [notesFound, setNotesFound] = useState<number[]>([]);
-  const [inProgress, setInprogress] = useState<boolean>(true);
+  const [gameState, setGameState] = useState<ChallengeGameState>(
+    setUpGameState()
+  );
+  const { inProgress, notesLeft, notesFound, shuffledNotes, randomScale } =
+    gameState;
   const notesLeftCount = notesLeft.length;
-  console.log("context", useContext(ChallengeContext));
   function handleClick(id: number): void {
     const index = notesLeft.indexOf(id);
     if (index > -1) {
       notesLeft.splice(index, 1);
-      setNotesLeft([...notesLeft]);
-      setNotesFound((prev) => {
-        const updated = [...prev];
-        updated.push(id);
-        return [...updated];
+      setGameState((prev) => {
+        const updatedNotesFound = [...prev.notesFound];
+        updatedNotesFound.push(id);
+        return {
+          ...prev,
+          notesLeft: [...notesLeft],
+          notesFound: updatedNotesFound,
+        };
       });
       if (![...notesLeft].length) {
-        setInprogress(false);
+        setGameState((prev) => {
+          return { ...prev, inProgress: false };
+        });
       }
     }
   }

tsconfig.json

@@ -5,7 +5,6 @@
       "@data":["src/data.json"],
       "@components/*": ["src/components/*"],
       "@utils/*": ["src/utils/*"],
-      "@context/*": ["src/context/*"],
       "@types": ["src/types.ts"],
     },
     "target": "ES2020",

vite.config.ts

@@ -16,7 +16,6 @@ export default defineConfig({
       "@utils": path.resolve(__dirname, "./src/utils"),
       "@data": path.resolve(__dirname, "./src/data.json"),
       "@types": path.resolve(__dirname, "./src/types.ts"),
-      "@context": path.resolve(__dirname, "./src/context"),
     },
   },
   test: {