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 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> : <></>}
|
||||
|
|
|
@ -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 './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>
|
||||
);
|
||||
|
|
|
@ -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 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 4;
|
||||
display: block;
|
||||
max-width: 80vw;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue