Add code and petName to app context

Author: Selvio

src/components/DoomCanvas/DoomCanvas.tsx

@@ -1,9 +1,13 @@
 import React, { useEffect, useRef } from "react";
 import { EmscriptenModule } from "../../types";
+import { useAppContext } from "../../context/useAppContext";
 
 const DoomCanvas: React.FC = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const isEffectRan = useRef(false);
+  const { gameData } = useAppContext();
+
+  console.log("gameData", gameData);
 
   useEffect(() => {
     // Prevent effect from running twice

src/components/SetNameModal/SetNameModal.tsx

@@ -1,9 +1,10 @@
-import { ChangeEventHandler, FC, useEffect, useState } from "react";
+import { ChangeEventHandler, FC, useEffect } from "react";
 import Modal from "../Modal";
 import { ModalProps } from "../Modal/Modal";
 import { FaArrowRotateRight } from "react-icons/fa6";
 import Button from "../Button";
 import { generateRandomName } from "./petNameWords";
+import { useAppContext } from "../../context/useAppContext";
 
 interface SetNameModalProps extends Omit<ModalProps, "children"> {
   submit: () => void;
@@ -16,23 +17,22 @@ const SetNameModal: FC<SetNameModalProps> = ({
   submit,
   title,
 }) => {
-  const [petName, setPetName] = useState("");
-  const [code, setCode] = useState("");
+  const { setGameData, gameData } = useAppContext();
 
   useEffect(() => {
-    setPetName(generateRandomName());
-  }, []);
+    setGameData((prev) => ({ ...prev, petName: generateRandomName() }));
+  }, [setGameData]);
 
   const handleChangeName: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setPetName(e.target.value);
+    setGameData((prev) => ({ ...prev, petName: e.target.value }));
   };
 
   const handleChangeCode: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setCode(e.target.value);
+    setGameData((prev) => ({ ...prev, code: e.target.value }));
   };
 
   const handleGenerateName = () => {
-    setPetName(generateRandomName());
+    setGameData((prev) => ({ ...prev, petName: generateRandomName() }));
   };
 
   return (
@@ -48,7 +48,7 @@ const SetNameModal: FC<SetNameModalProps> = ({
               id="code"
               onChange={handleChangeCode}
               type="text"
-              value={code}
+              value={gameData.code}
             />
           </div>
         )}
@@ -65,7 +65,7 @@ const SetNameModal: FC<SetNameModalProps> = ({
             id="petName"
             onChange={handleChangeName}
             type="text"
-            value={petName}
+            value={gameData.petName}
           />
           <Button tick className="text-2xl w-40 h-12" onClick={submit}>
             Go

src/context/AppContextProvider.tsx

@@ -5,6 +5,11 @@ import { GameStatistics, Region } from "../types";
 import { REGIONS, SERVER_URL } from "../constants";
 
 const AppContextProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [gameData, setGameData] = useState({
+    petName: "",
+    code: "",
+  });
+
   const [region, setRegion] = useState<Region>(REGIONS[0]);
   const globalQuery = useQuery<GameStatistics>({
     queryKey: ["global"],
@@ -16,8 +21,8 @@ const AppContextProvider: FC<PropsWithChildren> = ({ children }) => {
   });
 
   const value = useMemo(
-    () => ({ globalQuery, region, setRegion }),
-    [globalQuery, region],
+    () => ({ globalQuery, region, setRegion, gameData, setGameData }),
+    [gameData, globalQuery, region],
   );
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;

src/context/useAppContext.ts

@@ -3,15 +3,24 @@ import { GameStatistics, Region } from "../types";
 import { UseQueryResult } from "@tanstack/react-query";
 import { REGIONS } from "../constants";
 
+interface GameData {
+  petName: string;
+  code: string;
+}
+
 interface AppContextInterface {
+  gameData: GameData;
   globalQuery?: UseQueryResult<GameStatistics, Error>;
   region: Region;
+  setGameData: Dispatch<React.SetStateAction<GameData>>;
   setRegion: Dispatch<React.SetStateAction<Region>>;
 }
 
 export const AppContext = createContext<AppContextInterface>({
+  gameData: { petName: "", code: "" },
   globalQuery: undefined,
   region: REGIONS[0],
+  setGameData: () => {},
   setRegion: () => {},
 });