Merge branch 'gameroom_endpoint'

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

View file

@ -1,7 +1,7 @@
import React, {useState, useEffect, useReducer} from 'react';
import socketIOClient from 'socket.io-client';
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 { stateReducer } from './reducers/stateReducer';
import { initState } from './reducers/init/stateReducer.init';
@ -71,11 +71,16 @@ function App() {
<MainWrapper page="news" state={state} dispatch={dispatch}/>
</Route>
<Route path="/">
{/* Add ternary for login */}
<Route path="/home">
<MainWrapper page="home" state={state} dispatch={dispatch}/>
</Route>
<Route path="/">
{state.user.username
? <MainWrapper page="home" state={state} dispatch={dispatch}/>
: <MainWrapper page="news" state={state} dispatch={dispatch}/>}
</Route>
</Switch>
<h1>React Boilerplate</h1>
{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 './Home.scss';
import roomsServices from '../../services/api/roomsServices';
import RoomButton from '../../components/Button/Room/Room';
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 response = await roomsServices.indexService();
@ -12,7 +28,7 @@ const Home = props => {
message: 'SET_ROOMS',
body: response
}
return props.dispatch(action)
return dispatch(action)
}
}
@ -24,7 +40,7 @@ const Home = props => {
<div className="page">
<div className="Home" data-testid="Home">
<p>Home</p>
{renderRooms()}
</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 {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 4;
display: block;
max-width: 80vw;
width: 100%;
height: 100%;
}
}
}

View file

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