Merge branch 'gameroom_endpoint'
This commit is contained in:
parent
1ef3adc3d7
commit
3e8e99a816
10 changed files with 84 additions and 12 deletions
|
@ -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> : <></>}
|
||||||
|
|
|
@ -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;
|
|
@ -0,0 +1,9 @@
|
||||||
|
div.RoomButton {
|
||||||
|
display: block;
|
||||||
|
padding: 1vw;
|
||||||
|
|
||||||
|
.RoomButton__room-name {
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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');
|
||||||
|
});
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
div.Page div.Home {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue