WIP add challenge

src/App.tsx

@@ -5,6 +5,7 @@ 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";
 
@@ -15,15 +16,17 @@ function App() {
   const [activeMode, setActiveMode] = useState(Mode.review);
 
   return (
-    <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 />}
+    <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>
-    </div>
+    </ChallengeContextProvider>
   );
 }
 

src/components/Modes/Challenge/Challenge.tsx

@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useState, useContext } 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);
@@ -16,7 +17,7 @@ export default function Challenge() {
   const [notesFound, setNotesFound] = useState<number[]>([]);
   const [inProgress, setInprogress] = useState<boolean>(true);
   const notesLeftCount = notesLeft.length;
-
+  console.log("context", useContext(ChallengeContext));
   function handleClick(id: number): void {
     const index = notesLeft.indexOf(id);
     if (index > -1) {
@@ -48,6 +49,7 @@ export default function Challenge() {
               onClick={() => {
                 handleClick(note.id);
               }}
+              key={note.id}
               className={classNames("rounded-md m-2 basis-1/4 h-20", {
                 "bg-green-500": notesFound.includes(note.id),
                 "bg-sky-500/50": !notesFound.includes(note.id),

src/components/Notes/Notes.tsx

@@ -31,10 +31,8 @@ export default function Notes({ activeNotes, activeScale }: NotesProps) {
   return (
     <div className="flex flex-row items-baseline justify-evenly mb-8">
       {activeNotes.map((note, i) => (
-        <div className="flex flex-col basis-1/4">
-          <button key={note.id} className={getNoteClass(note)}>
-            {note.string}
-          </button>
+        <div key={note.id} className="flex flex-col basis-1/4">
+          <button className={getNoteClass(note)}>{note.string}</button>
           <div className="self-center">{mapNotesToLabelsMajor(i)} </div>
         </div>
       ))}

src/context/challenge.tsx

@@ -0,0 +1,16 @@
+import React, { createContext, useState } from "react";
+export const ChallengeContext = createContext({});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function ChallengeContextProvider({ children }: Props) {
+  const [foo, setFoo] = useState(false);
+
+  return (
+    <ChallengeContext.Provider value={{ foo, setFoo }}>
+      {children}
+    </ChallengeContext.Provider>
+  );
+}

tsconfig.json

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

vite.config.ts

@@ -16,6 +16,7 @@ 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: {