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,
"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",

View file

@ -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"
}
}

View file

@ -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,6 +14,8 @@ function App() {
initState
);
useEffect(() => {
const fetchIndexAPI = async () => {
const response = await indexServices.indexService();
if (response) {
@ -26,19 +27,17 @@ function App() {
dispatch(action)
}
}
useEffect(() => {
fetchIndexAPI();
}, [])
useEffect(() => {
const socketConnect = () => {
if (state.connect.type) return;
dispatch({type:'SOCKET', message: 'LAUNCH', body:{nsp:'', dispatch}});
}
useEffect(() => {
socketConnect();
}, [])
}, [ state.connect ])
return (
<Router>

View file

@ -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>

View file

@ -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'}

View file

@ -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++;

View file

@ -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 = () => {

View file

@ -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,6 +10,8 @@ const Game = (props) => {
const { state, dispatch } = props;
const gameId = parseInt(useParams().id) || 0;
useEffect(() => {
const fetchGameAPI = async () => {
const response = await gamesServices.getGameService(gameId);
if (response) {
@ -23,11 +23,11 @@ const Game = (props) => {
return dispatch(action);
}
}
fetchGameAPI();
}, [ gameId ])
useEffect(() => {
fetchGameAPI();
}, [])
const roomSocketConnect = () => {
const game = state.active.game;
const user = state.user;
@ -38,10 +38,9 @@ const Game = (props) => {
}
return dispatch(action);
}
useEffect(() => {
roomSocketConnect();
}, [state.active] )
}, [ state.active ] )
return (
<div
className="Game"

View file

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

View file

@ -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>

View file

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

View file

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

View file

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