From 4c7fa1512d37b69cf1fab1a6742b2912cbf092c8 Mon Sep 17 00:00:00 2001 From: sorrelbri Date: Fri, 7 Feb 2020 16:01:54 -0800 Subject: [PATCH] patch React compilation warnings and useEffect dependencies --- package-lock.json | 35 ++++++++++++ package.json | 10 ++-- packages/play-node-go/src/App.js | 41 +++++++------- .../src/components/Button/Game/Game.js | 2 +- .../src/components/Form/Signup/Signup.js | 4 +- .../src/components/GameUI/Board/Board.js | 3 +- .../src/components/GameUI/Point/Point.js | 2 +- packages/play-node-go/src/pages/Game/Game.js | 55 +++++++++---------- packages/play-node-go/src/pages/Home/Home.js | 22 ++++---- .../src/pages/Home/HomeSidebar.js | 4 +- .../pages/Layout/MainWrapper/MainWrapper.js | 2 +- .../src/pages/Layout/Sidebar/Sidebar.js | 2 +- packages/play-node-go/src/pages/Room/Room.js | 47 +++++++--------- 13 files changed, 130 insertions(+), 99 deletions(-) diff --git a/package-lock.json b/package-lock.json index b0be8cb..4ceab47 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 243e69e..7ee959e 100644 --- a/package.json +++ b/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" } } diff --git a/packages/play-node-go/src/App.js b/packages/play-node-go/src/App.js index 0f0efcb..3acc08a 100644 --- a/packages/play-node-go/src/App.js +++ b/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 ( diff --git a/packages/play-node-go/src/components/Button/Game/Game.js b/packages/play-node-go/src/components/Button/Game/Game.js index 6c457e9..2eb50a5 100644 --- a/packages/play-node-go/src/components/Button/Game/Game.js +++ b/packages/play-node-go/src/components/Button/Game/Game.js @@ -18,7 +18,7 @@ const GameButton = (props) => { const renderOpenGame = () => { return ( <> - requestJoinGame()} >Request to Join Game +
requestJoinGame()} >Request to Join Game
{game.playerBlack} diff --git a/packages/play-node-go/src/components/Form/Signup/Signup.js b/packages/play-node-go/src/components/Form/Signup/Signup.js index 2f37844..1ced657 100644 --- a/packages/play-node-go/src/components/Form/Signup/Signup.js +++ b/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'} diff --git a/packages/play-node-go/src/components/GameUI/Board/Board.js b/packages/play-node-go/src/components/GameUI/Board/Board.js index d3599e5..1d8f75f 100644 --- a/packages/play-node-go/src/components/GameUI/Board/Board.js +++ b/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++; diff --git a/packages/play-node-go/src/components/GameUI/Point/Point.js b/packages/play-node-go/src/components/GameUI/Point/Point.js index 7953bc3..59de091 100644 --- a/packages/play-node-go/src/components/GameUI/Point/Point.js +++ b/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 = () => { diff --git a/packages/play-node-go/src/pages/Game/Game.js b/packages/play-node-go/src/pages/Game/Game.js index 0c817af..f57ea22 100644 --- a/packages/play-node-go/src/pages/Game/Game.js +++ b/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 (
{ return } - 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(); }, []) diff --git a/packages/play-node-go/src/pages/Home/HomeSidebar.js b/packages/play-node-go/src/pages/Home/HomeSidebar.js index 09907a1..422f87d 100644 --- a/packages/play-node-go/src/pages/Home/HomeSidebar.js +++ b/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) => { - const ifNoUser = + const ifNoUser = return (