patch React compilation warnings and useEffect dependencies

This commit is contained in:
sorrelbri 2020-02-07 16:01:54 -08:00
parent 9cac33cef3
commit 4c7fa1512d
13 changed files with 130 additions and 99 deletions

35
package-lock.json generated
View file

@ -3,6 +3,41 @@
"requires": true, "requires": true,
"lockfileVersion": 1, "lockfileVersion": 1,
"dependencies": { "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": { "@evocateur/libnpmaccess": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz", "resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz",

View file

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

View file

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

View file

@ -18,7 +18,7 @@ const GameButton = (props) => {
const renderOpenGame = () => { const renderOpenGame = () => {
return ( 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"> <div className="GameButton__player-data GameButton__player-data--black">
<span className="GameButton__player-data__name GameButton__player-data__name--black">{game.playerBlack}</span> <span className="GameButton__player-data__name GameButton__player-data__name--black">{game.playerBlack}</span>

View file

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

View file

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

View file

@ -2,7 +2,7 @@ import React from 'react';
import './Point.scss'; import './Point.scss';
const Point = (props) => { 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 turn = game.turn > 0 ? 'black' : 'white';
const stone = () => { const stone = () => {

View file

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

View file

@ -23,6 +23,8 @@ const Home = props => {
return <Loading /> return <Loading />
} }
useEffect(() => {
const fetchRoomsAPI = async () => { const fetchRoomsAPI = async () => {
const response = await roomsServices.indexService(); const response = await roomsServices.indexService();
if (response) { if (response) {
@ -34,8 +36,6 @@ const Home = props => {
return dispatch(action) return dispatch(action)
} }
} }
useEffect(() => {
fetchRoomsAPI(); fetchRoomsAPI();
}, []) }, [])

View file

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

View file

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

View file

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

View file

@ -15,6 +15,8 @@ const Room = (props) => {
const { state, dispatch } = props; const { state, dispatch } = props;
const roomId = parseInt(useParams().id) || 0; const roomId = parseInt(useParams().id) || 0;
useEffect(() => {
const fetchRoomAPI = async () => { const fetchRoomAPI = async () => {
const response = await roomsServices.getRoomService(roomId); const response = await roomsServices.getRoomService(roomId);
if (response) { if (response) {
@ -26,13 +28,10 @@ const Room = (props) => {
return dispatch(action); return dispatch(action);
} }
} }
fetchRoomAPI();
}, [ roomId ])
useEffect(() => { useEffect(() => {
fetchRoomAPI();
}, [])
// ! [start] roomSocket
const roomSocketConnect = () => { const roomSocketConnect = () => {
const action = { const action = {
type: 'SOCKET', type: 'SOCKET',
@ -41,12 +40,8 @@ const Room = (props) => {
} }
dispatch(action) dispatch(action)
} }
useEffect(() => {
roomSocketConnect(); roomSocketConnect();
}, []) }, [ roomId, state.user ])
// ! [end]
const renderGames = () => { const renderGames = () => {
const games = state.games || []; const games = state.games || [];