Merge branch 'gameroom_endpoint'

This commit is contained in:
Sorrel Bri 2020-01-20 13:22:18 -08:00 committed by sorrelbri
parent 1ef3adc3d7
commit 3e8e99a816
10 changed files with 84 additions and 12 deletions

View file

@ -1,7 +1,7 @@
import React, {useState, useEffect, useReducer} from 'react'; import React, {useState, useEffect, useReducer} from 'react';
import socketIOClient from 'socket.io-client'; import socketIOClient from 'socket.io-client';
import config from './config'; 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/stateReducer'; import { stateReducer } from './reducers/stateReducer';
import { initState } from './reducers/init/stateReducer.init'; import { initState } from './reducers/init/stateReducer.init';
@ -71,11 +71,16 @@ function App() {
<MainWrapper page="news" state={state} dispatch={dispatch}/> <MainWrapper page="news" state={state} dispatch={dispatch}/>
</Route> </Route>
<Route path="/"> <Route path="/home">
{/* Add ternary for login */}
<MainWrapper page="home" state={state} dispatch={dispatch}/> <MainWrapper page="home" state={state} dispatch={dispatch}/>
</Route> </Route>
<Route path="/">
{state.user.username
? <MainWrapper page="home" state={state} dispatch={dispatch}/>
: <MainWrapper page="news" state={state} dispatch={dispatch}/>}
</Route>
</Switch> </Switch>
<h1>React Boilerplate</h1> <h1>React Boilerplate</h1>
{fetchData ? <p>{fetchData}</p> : <></>} {fetchData ? <p>{fetchData}</p> : <></>}

View file

@ -0,0 +1,13 @@
import React from 'react';
import './Room.scss';
const RoomButton = (props) => {
const roomData = props.room;
return (
<div className="RoomButton" data-testid="RoomButton">
<h4 className="RoomButton__room-name">{roomData.name}</h4>
</div>
);
}
export default RoomButton;

View file

@ -0,0 +1,9 @@
div.RoomButton {
display: block;
padding: 1vw;
.RoomButton__room-name {
text-transform: capitalize;
}
}

View file

@ -0,0 +1,23 @@
import React from 'react';
import { render } from '@testing-library/react';
import Room from './Room';
const roomData = {
id: 1,
name: "main",
description: "A general place to play Go",
language: "EN"
}
test('renders RoomButton without crashing', () => {
const { getByTestId } = render(<Room room={roomData} />);
const RoomButton = getByTestId('RoomButton');
expect(RoomButton).toBeInTheDocument();
});
test('renders RoomButton with Room name', () => {
const { getByTestId } = render(<Room room={roomData} />);
const RoomButton = getByTestId('RoomButton');
expect(RoomButton).toHaveTextContent('main');
});

View file

@ -1,8 +1,24 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import './Home.scss'; import './Home.scss';
import roomsServices from '../../services/api/roomsServices'; import roomsServices from '../../services/api/roomsServices';
import RoomButton from '../../components/Button/Room/Room';
const Home = props => { const Home = props => {
const state = props.state;
const dispatch = props.dispatch;
const renderRooms = () => {
const rooms = state.rooms || [];
if (rooms.length) {
return rooms.map(roomData => (
<RoomButton
key={`room-${roomData.id}`}
room={roomData}
/>
))
}
return <p>Loading Component</p>
}
const fetchRoomsAPI = async () => { const fetchRoomsAPI = async () => {
const response = await roomsServices.indexService(); const response = await roomsServices.indexService();
@ -12,7 +28,7 @@ const Home = props => {
message: 'SET_ROOMS', message: 'SET_ROOMS',
body: response body: response
} }
return props.dispatch(action) return dispatch(action)
} }
} }
@ -24,7 +40,7 @@ const Home = props => {
<div className="page"> <div className="page">
<div className="Home" data-testid="Home"> <div className="Home" data-testid="Home">
<p>Home</p> {renderRooms()}
</div> </div>
</div> </div>
); );

View file

@ -0,0 +1,6 @@
div.Page div.Home {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
justify-content: flex-start;
}

View file

@ -27,10 +27,10 @@ div.main-wrapper {
} }
main { main {
display: flex; display: block;
justify-content: center; max-width: 80vw;
align-items: center; width: 100%;
flex-grow: 4; height: 100%;
} }
} }
} }

View file

@ -1,17 +1,17 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import './NavBar.scss'; import './NavBar.scss';
import Logo from '../../../components/Logo/Logo'; import Logo from '../../../components/Button/Logo/Logo';
const NavBar = (props) => { const NavBar = (props) => {
return ( return (
<div className="NavBar" data-testid="NavBar"> <div className="NavBar" data-testid="NavBar">
<Link to="/" > <Link to="/home" >
<div className="NavBar__logo"><Logo /></div> <div className="NavBar__logo"><Logo /></div>
</Link> </Link>
<Link to="/" > <Link to="/home" >
<div className="NavBar__home">Find a Game</div> <div className="NavBar__home">Find a Game</div>
</Link> </Link>