patch React compilation warnings and useEffect dependencies
This commit is contained in:
parent
9cac33cef3
commit
4c7fa1512d
13 changed files with 130 additions and 99 deletions
35
package-lock.json
generated
35
package-lock.json
generated
|
@ -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",
|
||||||
|
|
10
package.json
10
package.json
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,30 +14,30 @@ function App() {
|
||||||
initState
|
initState
|
||||||
);
|
);
|
||||||
|
|
||||||
const fetchIndexAPI = async () => {
|
|
||||||
const response = await indexServices.indexService();
|
|
||||||
if (response) {
|
|
||||||
const action = {
|
|
||||||
type: 'INDEX',
|
|
||||||
message: 'SET_USER',
|
|
||||||
body: response
|
|
||||||
}
|
|
||||||
dispatch(action)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const fetchIndexAPI = async () => {
|
||||||
|
const response = await indexServices.indexService();
|
||||||
|
if (response) {
|
||||||
|
const action = {
|
||||||
|
type: 'INDEX',
|
||||||
|
message: 'SET_USER',
|
||||||
|
body: response
|
||||||
|
}
|
||||||
|
dispatch(action)
|
||||||
|
}
|
||||||
|
}
|
||||||
fetchIndexAPI();
|
fetchIndexAPI();
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const socketConnect = () => {
|
|
||||||
if (state.connect.type) return;
|
|
||||||
dispatch({type:'SOCKET', message: 'LAUNCH', body:{nsp:'', dispatch}});
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const socketConnect = () => {
|
||||||
|
if (state.connect.type) return;
|
||||||
|
dispatch({type:'SOCKET', message: 'LAUNCH', body:{nsp:'', dispatch}});
|
||||||
|
}
|
||||||
socketConnect();
|
socketConnect();
|
||||||
}, [])
|
}, [ state.connect ])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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'}
|
||||||
|
|
|
@ -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++;
|
||||||
|
|
|
@ -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 = () => {
|
||||||
|
|
|
@ -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,36 +10,37 @@ const Game = (props) => {
|
||||||
const { state, dispatch } = props;
|
const { state, dispatch } = props;
|
||||||
const gameId = parseInt(useParams().id) || 0;
|
const gameId = parseInt(useParams().id) || 0;
|
||||||
|
|
||||||
const fetchGameAPI = async () => {
|
|
||||||
const response = await gamesServices.getGameService(gameId);
|
useEffect(() => {
|
||||||
if (response) {
|
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 = {
|
const action = {
|
||||||
type: 'GAMES',
|
type: 'SOCKET',
|
||||||
message: 'SET_ACTIVE',
|
message: 'CONNECT_GAME',
|
||||||
body: response
|
body: { game, user, dispatch }
|
||||||
}
|
}
|
||||||
return dispatch(action);
|
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();
|
roomSocketConnect();
|
||||||
}, [state.active] )
|
}, [ state.active ] )
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="Game"
|
className="Game"
|
||||||
|
|
|
@ -23,19 +23,19 @@ const Home = props => {
|
||||||
return <Loading />
|
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(() => {
|
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();
|
fetchRoomsAPI();
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -15,38 +15,33 @@ const Room = (props) => {
|
||||||
const { state, dispatch } = props;
|
const { state, dispatch } = props;
|
||||||
const roomId = parseInt(useParams().id) || 0;
|
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
|
|
||||||
}
|
|
||||||
return dispatch(action);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchRoomAPI();
|
const fetchRoomAPI = async () => {
|
||||||
}, [])
|
const response = await roomsServices.getRoomService(roomId);
|
||||||
|
if (response) {
|
||||||
// ! [start] roomSocket
|
const action = {
|
||||||
|
type: 'ROOMS',
|
||||||
const roomSocketConnect = () => {
|
message: 'JOIN_ROOM',
|
||||||
const action = {
|
body: response
|
||||||
type: 'SOCKET',
|
}
|
||||||
message: 'CONNECT_ROOM',
|
return dispatch(action);
|
||||||
body: {user: state.user, room: roomId, dispatch}
|
}
|
||||||
}
|
}
|
||||||
dispatch(action)
|
fetchRoomAPI();
|
||||||
}
|
}, [ roomId ])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const roomSocketConnect = () => {
|
||||||
|
const action = {
|
||||||
|
type: 'SOCKET',
|
||||||
|
message: 'CONNECT_ROOM',
|
||||||
|
body: {user: state.user, room: roomId, dispatch}
|
||||||
|
}
|
||||||
|
dispatch(action)
|
||||||
|
}
|
||||||
roomSocketConnect();
|
roomSocketConnect();
|
||||||
}, [])
|
}, [ roomId, state.user ])
|
||||||
|
|
||||||
// ! [end]
|
|
||||||
|
|
||||||
const renderGames = () => {
|
const renderGames = () => {
|
||||||
const games = state.games || [];
|
const games = state.games || [];
|
||||||
|
|
Loading…
Reference in a new issue