patch React compilation warnings and useEffect dependencies

package-lock.json

@@ -3,6 +3,41 @@
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
+    "@babel/helper-plugin-utils": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz",
+      "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==",
+      "dev": true
+    },
+    "@babel/plugin-syntax-flow": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.8.3.tgz",
+      "integrity": "sha512-innAx3bUbA0KSYj2E2MNFSn9hiCeowOFLxlsuhXzw8hMQnzkDomUr9QCD7E9VF60NmnG1sNTuuv6Qf4f8INYsg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-flow-strip-types": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.8.3.tgz",
+      "integrity": "sha512-g/6WTWG/xbdd2exBBzMfygjX/zw4eyNC4X8pRaq7aRHRoDUCzAIu3kGYIXviOv8BjCuWm8vDBwjHcjiRNgXrPA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-syntax-flow": "^7.8.3"
+      }
+    },
+    "@babel/preset-flow": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.8.3.tgz",
+      "integrity": "sha512-iCXFk+T4demnq+dNLLvlGOgvYF6sPZ/hS1EmswugOqh1Ysp2vuiqJzpgsnp5rW8+6dLJT/0CXDzye28ZH6BAfQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-transform-flow-strip-types": "^7.8.3"
+      }
+    },
     "@evocateur/libnpmaccess": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz",

package.json

@@ -5,13 +5,15 @@
     "test": "lerna run test",
     "bootstrap": "lerna bootstrap"
   },
+  "presets": ["@babel/preset-flow"],
   "devDependencies": {
-    "lerna": "^3.20.2",
-    "chai": "^4.2.0",
-    "chai-http": "^4.3.0",
-    "mocha": "^7.0.0",
+    "@babel/preset-flow": "^7.8.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
+    "chai": "^4.2.0",
+    "chai-http": "^4.3.0",
+    "lerna": "^3.20.2",
+    "mocha": "^7.0.0",
     "react-test-renderer": "^16.12.0"
   }
 }

packages/play-node-go/src/App.js

@@ -1,6 +1,5 @@
-import React, {useState, useEffect, useReducer} from 'react';
-import config from './config';
-import { Switch, Route, BrowserRouter as Router, Redirect } from 'react-router-dom';
+import React, { useEffect, useReducer} from 'react';
+import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
 import MainWrapper from './pages/Layout/MainWrapper/MainWrapper';
 import { stateReducer } from './reducers/reducer';
 import { initState } from './reducers/init/reducer.init';
@@ -15,30 +14,30 @@ function App() {
     initState
   );
 
-  const fetchIndexAPI = async () => {
-    const response = await indexServices.indexService();
-    if (response) {
-      const action = {
-        type: 'INDEX',
-        message: 'SET_USER',
-        body: response
-      }
-      dispatch(action)
-    }
-  }
   
   useEffect(() => {
+    const fetchIndexAPI = async () => {
+      const response = await indexServices.indexService();
+      if (response) {
+        const action = {
+          type: 'INDEX',
+          message: 'SET_USER',
+          body: response
+        }
+        dispatch(action)
+      }
+    }
     fetchIndexAPI();
   }, [])
 
-  const socketConnect = () => {
-    if (state.connect.type) return;
-    dispatch({type:'SOCKET', message: 'LAUNCH', body:{nsp:'', dispatch}});
-  }
   
   useEffect(() => {
+    const socketConnect = () => {
+      if (state.connect.type) return;
+      dispatch({type:'SOCKET', message: 'LAUNCH', body:{nsp:'', dispatch}});
+    }
     socketConnect();
-  }, [])
+  }, [ state.connect ])
 
   return (
     <Router>

packages/play-node-go/src/components/Button/Game/Game.js

@@ -18,7 +18,7 @@ const GameButton = (props) => {
   const renderOpenGame = () => {
     return (
       <>
-        <a onClick={() => requestJoinGame()} >Request to Join Game</a>
+        <div onClick={() => requestJoinGame()} >Request to Join Game</div>
 
         <div className="GameButton__player-data GameButton__player-data--black">
           <span className="GameButton__player-data__name GameButton__player-data__name--black">{game.playerBlack}</span>

packages/play-node-go/src/components/Form/Signup/Signup.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import './Signup.scss';
 import authServices from '../../../services/authServices';
 import FormError from '../../Error/FormError/FormError';
@@ -22,7 +22,7 @@ const Signup = (props) => {
       })
     }
 
-    if (password.length < 8) {
+    if (password.length < minimumPasswordLength) {
       return props.dispatch({
         ...errorDispatchAction,
         body: { authError: 'Password must be at least 8 characters'}

packages/play-node-go/src/components/GameUI/Board/Board.js

@@ -3,7 +3,7 @@ import './Board.scss';
 import Point from '../Point/Point';
 
 const Board = (props) => {
-  const { game, record, user, dispatch, board } = props;
+  const { game, user, dispatch, board } = props;
   const sizeFlag = `Game__board--size-${ game.boardSize }`
 
   const renderPoints = boardSize => {
@@ -20,6 +20,7 @@ const Board = (props) => {
           pointData={board[`${posX}-${posY}`]}
           // point={board[posX][posY]}
           dispatch={dispatch}
+          user={user}
           {...props}
         />
       ); i++;

packages/play-node-go/src/components/GameUI/Point/Point.js

@@ -2,7 +2,7 @@ import React from 'react';
 import './Point.scss';
 
 const Point = (props) => {
-  const { posX, posY, user, game, record, dispatch, pointData } = props;
+  const { posX, posY, user, game, dispatch, pointData } = props;
   const turn = game.turn > 0 ? 'black' : 'white';
   
   const stone = () => {

packages/play-node-go/src/pages/Game/Game.js

@@ -1,7 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import socketIOClient from 'socket.io-client';
-import config from '../../config';
 import gamesServices from '../../services/api/gamesServices';
 import './Game.scss';
 import Logo from '../../components/Display/Logo/Logo';
@@ -12,36 +10,37 @@ const Game = (props) => {
   const { state, dispatch } = props;
   const gameId = parseInt(useParams().id) || 0;
 
-  const fetchGameAPI = async () => {
-    const response = await gamesServices.getGameService(gameId);
-    if (response) {
+  
+  useEffect(() => {
+    const fetchGameAPI = async () => {
+      const response = await gamesServices.getGameService(gameId);
+      if (response) {
+        const action = {
+          type: 'GAMES',
+          message: 'SET_ACTIVE',
+          body: response
+        }
+        return dispatch(action);
+      }
+    }
+    fetchGameAPI();
+  }, [ gameId ])
+
+  
+  useEffect(() => {
+    const roomSocketConnect = () => {
+      const game = state.active.game;
+      const user = state.user;
       const action = {
-        type: 'GAMES',
-        message: 'SET_ACTIVE',
-        body: response
+        type: 'SOCKET',
+        message: 'CONNECT_GAME',
+        body: { game, user, dispatch }
       }
       return dispatch(action);
     }
-  }
-  
-  useEffect(() => {
-    fetchGameAPI();
-  }, [])
-
-  const roomSocketConnect = () => {
-    const game = state.active.game;
-    const user = state.user;
-    const action = {
-      type: 'SOCKET',
-      message: 'CONNECT_GAME',
-      body: { game, user, dispatch }
-    }
-    return dispatch(action);
-  }
-
-  useEffect(() => {
     roomSocketConnect();
-  }, [state.active] )
+  }, [ state.active ] )
+
   return (  
     <div 
       className="Game" 

packages/play-node-go/src/pages/Home/Home.js

@@ -23,19 +23,19 @@ const Home = props => {
     return <Loading />
   }
 
-  const fetchRoomsAPI = async () => {
-    const response = await roomsServices.indexService();
-    if (response) {
-      const action = {
-        type: 'ROOMS',
-        message: 'SET_ROOMS',
-        body: response.rooms
-      }
-      return dispatch(action)
-    }
-  }
   
   useEffect(() => {
+    const fetchRoomsAPI = async () => {
+      const response = await roomsServices.indexService();
+      if (response) {
+        const action = {
+          type: 'ROOMS',
+          message: 'SET_ROOMS',
+          body: response.rooms
+        }
+        return dispatch(action)
+      }
+    }
     fetchRoomsAPI();
   }, [])
 

packages/play-node-go/src/pages/Home/HomeSidebar.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import Auth from '../../components/Form/Auth/Auth';
 import NewRoomButton from '../../components/Button/NewRoom/NewRoom';
@@ -14,7 +14,7 @@ const HomeSidebar = (props) => {
     <LibraryButton />
   </>
 
-  const ifNoUser = <Auth state={state} dispatch={state} />
+  const ifNoUser = <Auth state={state} dispatch={dispatch} />
 
   return (  
     <nav>

packages/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import './MainWrapper.scss';
 
 import NavBar from '../NavBar/NavBar';

packages/play-node-go/src/pages/Layout/Sidebar/Sidebar.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import './Sidebar.scss';
 
 import AccountSidebar from '../../Account/AccountSidebar';

packages/play-node-go/src/pages/Room/Room.js

@@ -15,38 +15,33 @@ const Room = (props) => {
   const { state, dispatch } = props;
   const roomId = parseInt(useParams().id) || 0;
 
-  const fetchRoomAPI = async () => {
-    const response = await roomsServices.getRoomService(roomId);
-    if (response) {
-      const action = {
-        type: 'ROOMS',
-        message: 'JOIN_ROOM',
-        body: response
+  
+  useEffect(() => {
+    const fetchRoomAPI = async () => {
+      const response = await roomsServices.getRoomService(roomId);
+      if (response) {
+        const action = {
+          type: 'ROOMS',
+          message: 'JOIN_ROOM',
+          body: response
+        }
+        return dispatch(action);
       }
-      return dispatch(action);
     }
-  }
-  
-  useEffect(() => {
     fetchRoomAPI();
-  }, [])
-
-  // ! [start] roomSocket
-
-  const roomSocketConnect = () => {
-    const action = {
-      type: 'SOCKET',
-      message: 'CONNECT_ROOM',
-      body: {user: state.user, room: roomId, dispatch}
-    }
-    dispatch(action)
-  }
+  }, [ roomId ])
 
   useEffect(() => {
+    const roomSocketConnect = () => {
+      const action = {
+        type: 'SOCKET',
+        message: 'CONNECT_ROOM',
+        body: {user: state.user, room: roomId, dispatch}
+      }
+      dispatch(action)
+    }
     roomSocketConnect();
-  }, [])
-
-  // ! [end]
+  }, [ roomId, state.user ])
 
   const renderGames = () => {
     const games = state.games || [];