front: js readability

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";
 
@@ -15,18 +15,13 @@ function App() {
   const [polling, setPolling] = useState(false);
 
   const pollGames = useCallback(() => {     
-    console.log('start polling..');
+    if (polling)
-    
-    if (polling) {
-      console.log(' ..already in progress');
       return;
-    }
 
     setPolling(true);
     fetch('/api/gamestate')
       .then(response => response.json())
       .then(data => {
-        console.log('poooled');
         setGames(data);
         setPolling(false);
       })
@@ -34,12 +29,11 @@ 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 (
+  return <div className="App">
-    <div className="App">
     <BrowserRouter>
       <Header/>
       <div className="Container">
@@ -48,10 +42,8 @@ function App() {
           <Route path="/gameproposal" element={<GameProposal games={games}/>} />
         </Routes>
       </div>
-
     </BrowserRouter>
     </div>
-  );
 }
 
 export default App;

webapp/src/GameProposal.js

@@ -16,30 +16,29 @@ const GameProposal = ({games}) => {
    
   const waitForYou = games
     .filter(game => game.status === State.WaitForYou)
-    .map(game => { return (
+    .map(game => { 
-      <div class="li" key={game.uuid}>
+      return <div class="li" key={game.uuid}>
         <p>
           from {game.opponentName}, opponentColor {game.opponentColor}
           <br/>
           <q>{game.message}</q>
         </p>
         </div>
-    )});
+    });
 
   const WaitForOpponent = games
     .filter(game => game.status === State.WaitForOpponent)
-    .map(game => { return (
+    .map(game => { 
-      <div class="li" key={game.uuid}>
+      return <div class="li" key={game.uuid}>
         <p> 
           to {game.opponentName}, opponentColor ⛀ ⛂{game.opponentColor}
           <br/>
           <q>{game.message}</q>
         </p>
         </div>
-    )});
+    });
 
-  return (
+  return <div className="GameProposal">
-    <p className="GameProposal">
     {waitForYou}
     {WaitForOpponent.length > 0 && 
       <div class="separator">
@@ -47,8 +46,7 @@ const GameProposal = ({games}) => {
       </div>
     }
     {WaitForOpponent}
-    </p>
+    </div>
-  );
 };
 
 export default GameProposal;

webapp/src/Leaderboard.js

@@ -31,18 +31,15 @@ const Leaderboard = () => {
   const tableRows = Object.keys(data).map(playerName => {
     var rank = data[playerName];
 
-    return (
+    return <tr key={playerName}>
-      <tr key={playerName}>
       <td>{playerName}</td>
       <td>{rank.gamesPlayed}</td>
       <td>{rank.gamesWon}</td>
       <td>{rank.gamesDraw}</td>
       </tr>
-    );
   });
 
-  return (
+  return <div className="Leaderboard">
-    <div className="Leaderboard">
     <table>
       <thead>
         <tr>
@@ -57,7 +54,6 @@ const Leaderboard = () => {
       </tbody>
     </table>
     </div>
-  );
 };
 
 export default Leaderboard;