import React, {useState, useEffect, useReducer} from 'react'; import './App.scss'; import config from './config'; import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'; import socketIOClient from 'socket.io-client'; import Sidebar from './components/Sidebar/Sidebar'; import Account from './pages/Account/Account'; import Game from './pages/Game/Game'; import Home from './pages/Home/Home'; import News from './pages/News/News'; import Room from './pages/Room/Room'; import { stateReducer } from './reducers/stateReducer'; import { initState } from './reducers/init/stateReducer.init'; export const socket = socketIOClient(config.apiAddress); function App() { const [fetchData, setFetchData] = useState(); const [socketData, setSocketData] = useState(); const [error, setError] = useState([]); const [ state, dispatch ] = useReducer( stateReducer, {}, initState ); useEffect(() => { fetch(config.apiAddress) .then(res => res.text()) .catch(err => setError([...error, err])) .then(data => setFetchData(data)) }) useEffect(() => { socket.emit('connect'); socket.on('connect', data => setSocketData('socket connected')); socket.on('connect_error', err => setError([...error, err])); socket.on('error', err => setError([...error, err])) }) return (

React Boilerplate

{fetchData ?

{fetchData}

: <>} {socketData ?

{socketData}

: <>} {error ? error.map(err =>

{err}

): <>} {/* Add ternary for login */}
); } export default App;