component params grouping

webapp/src/App.js

@@ -26,14 +26,19 @@ export default function App() {
   const gamesApi = useGamesApi(dispatchGames);
   gamesApi.list(pollingReducer);
 
+  const players = {
+    leaderboard,
+    isCurrentUser: (playerName) => user?.isCurrentUser(playerName) === true ? true : null
+  };
+
   return (
     <BrowserRouter>
       <Header pollingReducer={pollingReducer} />
       <Routes>
         <Route path='/' element={<About />} />
         <Route path='/about' element={<About />} />
-        <Route path='/games/*' element={<Games games={games} dispatchGames={dispatchGames} gamesApi={gamesApi} />} />
-        <Route path='/leaderboard' element={<Leaderboard leaderboard={leaderboard} user={user} />} />
+        <Route path='/games/*' element={<Games context={{ games, dispatchGames, gamesApi }} players={players} />} />
+        <Route path='/leaderboard' element={<Leaderboard players={players} />} />
       </Routes>
     </BrowserRouter>
   )

webapp/src/container/Games.jsx

@@ -21,13 +21,13 @@ import GameBoard from './games/GameBoard';
 
 import { GamesContext, GamesDispatchContext, GamesApiContext } from '../context/games';
 
-export default function Games({ games, dispatchGames, gamesApi }) {
+export default function Games({ context }) {
 
   return (
+    <GamesContext.Provider value={context.games} >
+      <GamesDispatchContext.Provider value={context.dispatchGames} >
+        <GamesApiContext.Provider value={context.gamesApi} >
           <div className="Games">
-      <GamesContext.Provider value={games} >
-        <GamesDispatchContext.Provider value={dispatchGames} >
-          <GamesApiContext.Provider value={gamesApi} >
             <div className='left-side'>
               <ViewSelector />
               <ViewProvider />
@@ -39,10 +39,10 @@ export default function Games({ games, dispatchGames, gamesApi }) {
           <GameMessage />
           <Message2Opponent /> */}
             </div>
+          </div >
         </GamesApiContext.Provider>
       </GamesDispatchContext.Provider>
     </GamesContext.Provider>
-    </div >
   )
 };
 

webapp/src/container/Leaderboard.jsx

@@ -2,18 +2,17 @@ import './Leaderboard.css';
 import React from "react"
 import Loading from '../components/Loading';
 
-export default function Leaderboard({ leaderboard, user }) {
+export default function Leaderboard({ players }) {
+
+  const leaderboard = players.leaderboard;
 
   if (leaderboard == null)
     return <Loading />
 
-  const isCurrentUser = (playerName) =>
-    user?.isCurrentUser(playerName) === true ? true : null;
-
   const tableRows = Object.keys(leaderboard).map(playerName => {
     var rank = leaderboard[playerName];
 
-    return <tr key={playerName} className={isCurrentUser(playerName) && 'currentuser'}>
+    return <tr key={playerName} className={players.isCurrentUser(playerName) && 'currentuser'}>
       <td>{playerName}</td>
       <td>{rank.gamesPlayed}</td>
       <td>{rank.gamesWon}</td>