MOAR STILE

frontend/src/js/App.js

@@ -1,19 +1,19 @@
-import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import '../css/App.css';
-import Leaderboard from './components/leaderboard';
-import GameCard from './components/gameCard';
-import Button from './components/button';
 import GameView from './pages/gameView';
 import Home from './pages/home';
+import { GameProvider } from './contexts/GameContext';
 
 function App() {
   return (
+    <GameProvider>
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/game/:id" element={<GameView />} />
         </Routes>
       </BrowserRouter>
+    </GameProvider>
   );
 }
 

frontend/src/js/components/gameList.js

@@ -8,8 +8,6 @@ function GameList(props){
                 <ListGameCell
                 key={game.gameId}
                 data={game}
-                selectedGame={props.selected}
-                setGame={props.toggle}
                 />
             ))}
         </div>

frontend/src/js/components/listGameCell.js

@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { GameContext } from '../contexts/GameContext';
 
 function ListGameCell(props){
-    const isSelected = props.selectedGame === props.data.gameId;
+    const { selectedGame, setSelectedGame } = useContext(GameContext);
+    const isSelected = selectedGame === props.data.gameId;
 
     return (
       <div
         className={`w-full p-2 my-1 border-2 rounded-sm border-black ${
           isSelected ? 'bg-blue-400' : 'bg-slate-200 hover:bg-slate-400'
         }`}
-        onClick={() => isSelected ? props.setGame(null) :props.setGame(props.data.gameId)}
+        onClick={() => isSelected ? setSelectedGame(null) : setSelectedGame(props.data.gameId)}
       >
         <p>Game ID: {props.data.gameId}</p>
         <p>

frontend/src/js/contexts/GameContext.js

@@ -0,0 +1,16 @@
+import React, { createContext, useState } from 'react';
+
+// Create a context
+export const GameContext = createContext(null);
+
+// Context Provider
+export function GameProvider({ children }) {
+  const [selectedGame, setSelectedGame] = useState({ selectedGame: null });
+
+  return (
+    <GameContext.Provider value={{ selectedGame, setSelectedGame }}>
+      {children}
+    </GameContext.Provider>
+  );
+}
+

frontend/src/js/pages/home.js

@@ -1,11 +1,12 @@
-import React, { useState} from 'react';
+import React, { useContext } from 'react';
 import Leaderboard from '../components/leaderboard';
 import GameList from '../components/gameList';
 import Button from '../components/button';
+import { GameContext } from '../contexts/GameContext';
 
 
 function Home(){
-    const [selectedGame, setSelectedGame] = useState(null);
+    let {selectedGame, setSelectedGame} = useContext(GameContext);
 
     const games = [
         {
@@ -29,7 +30,7 @@ function Home(){
     return (
         <div className="min-h-full h-full flex flex-row">
             <Leaderboard />
-            <GameList games={games} selected={selectedGame} toggle={setSelectedGame}/>
+            <GameList games={games}/>
             <div className="flex flex-col">
                 <Button displayValue="New Game" link="/game/1"/>
                 <Button displayValue="Join Game" link={`/game/${selectedGame}`} disabled={selectedGame ? false : true}/>