From 8cac7533dde5f875b2bc1c1201f4ebb48549fb86 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Sat, 14 Oct 2023 10:43:44 +0200
Subject: [PATCH] front: js readability

---
 webapp/src/App.js          | 36 ++++++++++++-------------------
 webapp/src/GameProposal.js | 36 +++++++++++++++----------------
 webapp/src/Leaderboard.js  | 44 +++++++++++++++++---------------------
 3 files changed, 51 insertions(+), 65 deletions(-)

diff --git a/webapp/src/App.js b/webapp/src/App.js
index 7b2264e..9fac52a 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -2,7 +2,7 @@ import './App.css';
 import React, { useState, useEffect, useCallback } from 'react';
 import {
   BrowserRouter,
-  Routes, //replaces "Switch" used till v5
+  Routes,
   Route,
 } from "react-router-dom";
 
@@ -14,19 +14,14 @@ function App() {
   const [games, setGames] = useState(null);
   const [polling, setPolling] = useState(false);
 
-  const pollGames = useCallback(() => { 
-    console.log('start polling..');
-    
-    if (polling) {
-      console.log(' ..already in progress');
+  const pollGames = useCallback(() => {     
+    if (polling)
       return;
-    }
 
     setPolling(true);
     fetch('/api/gamestate')
       .then(response => response.json())
       .then(data => {
-        console.log('poooled');
         setGames(data);
         setPolling(false);
       })
@@ -34,24 +29,21 @@ function App() {
   }, [polling]);
 
   useEffect(() => {
-    const timer = setInterval(pollGames(), 35 * 1000);
+    const timer = setInterval(pollGames(), 35 * 1000); // <<-- poll new gamestates every 35 sec
     return clearInterval(timer);
   }, [pollGames])
 
-  return (
-    <div className="App">
-      <BrowserRouter>
-        <Header/>
-        <div className="Container">
-          <Routes>
-            <Route path="/leaderboard" element={<Leaderboard/>} />
-            <Route path="/gameproposal" element={<GameProposal games={games}/>} />
-          </Routes>
-        </div>
-
-      </BrowserRouter>
+  return <div className="App">
+    <BrowserRouter>
+      <Header/>
+      <div className="Container">
+        <Routes>
+          <Route path="/leaderboard" element={<Leaderboard/>} />
+          <Route path="/gameproposal" element={<GameProposal games={games}/>} />
+        </Routes>
+      </div>
+    </BrowserRouter>
     </div>
-  );
 }
 
 export default App;
diff --git a/webapp/src/GameProposal.js b/webapp/src/GameProposal.js
index 35a22f4..0c1bf40 100644
--- a/webapp/src/GameProposal.js
+++ b/webapp/src/GameProposal.js
@@ -16,39 +16,37 @@ const GameProposal = ({games}) => {
    
   const waitForYou = games
     .filter(game => game.status === State.WaitForYou)
-    .map(game => { return (
-      <div class="li" key={game.uuid}>
+    .map(game => { 
+      return <div class="li" key={game.uuid}>
         <p>
           from {game.opponentName}, opponentColor {game.opponentColor}
           <br/>
           <q>{game.message}</q>
         </p>
-      </div>
-    )});
+        </div>
+    });
 
   const WaitForOpponent = games
     .filter(game => game.status === State.WaitForOpponent)
-    .map(game => { return (
-      <div class="li" key={game.uuid}>
+    .map(game => { 
+      return <div class="li" key={game.uuid}>
         <p> 
           to {game.opponentName}, opponentColor ⛀ ⛂{game.opponentColor}
           <br/>
           <q>{game.message}</q>
         </p>
-      </div>
-    )});
-
-  return (
-    <p className="GameProposal">
-      {waitForYou}
-      {WaitForOpponent.length > 0 && 
-        <div class="separator">
-          waiting for opponent ({WaitForOpponent.length})
         </div>
-      }
-      {WaitForOpponent}
-    </p>
-  );
+    });
+
+  return <div className="GameProposal">
+    {waitForYou}
+    {WaitForOpponent.length > 0 && 
+      <div class="separator">
+        waiting for opponent ({WaitForOpponent.length})
+      </div>
+    }
+    {WaitForOpponent}
+    </div>
 };
 
 export default GameProposal;
diff --git a/webapp/src/Leaderboard.js b/webapp/src/Leaderboard.js
index f215451..f10c1a1 100644
--- a/webapp/src/Leaderboard.js
+++ b/webapp/src/Leaderboard.js
@@ -24,40 +24,36 @@ const Leaderboard = () => {
 //
 //    return <li key={playerName}>
 //      {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw}
-//    </li>
+//      </li>
 //  });
 //  return <ul>{listItems}</ul>;
 
   const tableRows = Object.keys(data).map(playerName => {
     var rank = data[playerName];
 
-    return (
-      <tr key={playerName}>
-        <td>{playerName}</td>
-        <td>{rank.gamesPlayed}</td>
-        <td>{rank.gamesWon}</td>
-        <td>{rank.gamesDraw}</td>
+    return <tr key={playerName}>
+      <td>{playerName}</td>
+      <td>{rank.gamesPlayed}</td>
+      <td>{rank.gamesWon}</td>
+      <td>{rank.gamesDraw}</td>
       </tr>
-    );
   });
 
-  return (
-    <div className="Leaderboard">
-      <table>
-        <thead>
-          <tr>
-            <th></th>
-            <th>Played</th>
-            <th>Won</th>
-            <th>Draw</th>
-          </tr>
-        </thead>
-        <tbody>
-          { tableRows }
-        </tbody>
-      </table>
+  return <div className="Leaderboard">
+    <table>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Played</th>
+          <th>Won</th>
+          <th>Draw</th>
+        </tr>
+      </thead>
+      <tbody>
+        { tableRows }
+      </tbody>
+    </table>
     </div>
-  );
 };
 
 export default Leaderboard;