From 3e8e99a8163df6c5a6e18131adb6aa0f45dc5040 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Mon, 20 Jan 2020 13:22:18 -0800
Subject: [PATCH] Merge branch 'gameroom_endpoint'

---
 .../play-node-go/play-node-go/src/App.js      | 11 ++++++---
 .../src/components/{ => Button}/Logo/Logo.js  |  0
 .../components/{ => Button}/Logo/Logo.scss    |  0
 .../src/components/Button/Room/Room.js        | 13 +++++++++++
 .../src/components/Button/Room/Room.scss      |  9 ++++++++
 .../src/components/Button/Room/Room.test.js   | 23 +++++++++++++++++++
 .../play-node-go/src/pages/Home/Home.js       | 20 ++++++++++++++--
 .../play-node-go/src/pages/Home/Home.scss     |  6 +++++
 .../pages/Layout/MainWrapper/MainWrapper.scss |  8 +++----
 .../src/pages/Layout/NavBar/NavBar.js         |  6 ++---
 10 files changed, 84 insertions(+), 12 deletions(-)
 rename packages/server/packages/play-node-go/play-node-go/src/components/{ => Button}/Logo/Logo.js (100%)
 rename packages/server/packages/play-node-go/play-node-go/src/components/{ => Button}/Logo/Logo.scss (100%)
 create mode 100644 packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.js
 create mode 100644 packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.scss
 create mode 100644 packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.test.js

diff --git a/packages/server/packages/play-node-go/play-node-go/src/App.js b/packages/server/packages/play-node-go/play-node-go/src/App.js
index 4e9ae2b..c1b9e1f 100644
--- a/packages/server/packages/play-node-go/play-node-go/src/App.js
+++ b/packages/server/packages/play-node-go/play-node-go/src/App.js
@@ -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';
@@ -70,10 +70,15 @@ function App() {
           <Route path="/news">
             <MainWrapper page="news" state={state} dispatch={dispatch}/>
           </Route>
+
+          <Route path="/home">
+            <MainWrapper page="home" state={state} dispatch={dispatch}/>
+          </Route>
         
           <Route path="/">
-            {/* Add ternary for login */}
-            <MainWrapper page="home" state={state} dispatch={dispatch}/>
+            {state.user.username 
+            ? <MainWrapper page="home" state={state} dispatch={dispatch}/> 
+            : <MainWrapper page="news" state={state} dispatch={dispatch}/>}
           </Route>
 
         </Switch>
diff --git a/packages/server/packages/play-node-go/play-node-go/src/components/Logo/Logo.js b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Logo/Logo.js
similarity index 100%
rename from packages/server/packages/play-node-go/play-node-go/src/components/Logo/Logo.js
rename to packages/server/packages/play-node-go/play-node-go/src/components/Button/Logo/Logo.js
diff --git a/packages/server/packages/play-node-go/play-node-go/src/components/Logo/Logo.scss b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Logo/Logo.scss
similarity index 100%
rename from packages/server/packages/play-node-go/play-node-go/src/components/Logo/Logo.scss
rename to packages/server/packages/play-node-go/play-node-go/src/components/Button/Logo/Logo.scss
diff --git a/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.js b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.js
new file mode 100644
index 0000000..6761902
--- /dev/null
+++ b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.js
@@ -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;
\ No newline at end of file
diff --git a/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.scss b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.scss
new file mode 100644
index 0000000..b48b2ee
--- /dev/null
+++ b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.scss
@@ -0,0 +1,9 @@
+div.RoomButton {
+  display: block;
+  padding: 1vw;
+
+  .RoomButton__room-name {
+    text-transform: capitalize;
+  }
+
+}
\ No newline at end of file
diff --git a/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.test.js b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.test.js
new file mode 100644
index 0000000..cd885ef
--- /dev/null
+++ b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.test.js
@@ -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');
+});
+
diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.js b/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.js
index 655203d..8d6dc14 100644
--- a/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.js
+++ b/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.js
@@ -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>
   );
diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.scss b/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.scss
index e69de29..ae4003c 100644
--- a/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.scss
+++ b/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.scss
@@ -0,0 +1,6 @@
+div.Page div.Home {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
\ No newline at end of file
diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss b/packages/server/packages/play-node-go/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss
index b2af025..807f518 100644
--- a/packages/server/packages/play-node-go/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss
+++ b/packages/server/packages/play-node-go/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss
@@ -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%;
     }
   }
 }
diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Layout/NavBar/NavBar.js b/packages/server/packages/play-node-go/play-node-go/src/pages/Layout/NavBar/NavBar.js
index 9eb8dc2..7c8014e 100644
--- a/packages/server/packages/play-node-go/play-node-go/src/pages/Layout/NavBar/NavBar.js
+++ b/packages/server/packages/play-node-go/play-node-go/src/pages/Layout/NavBar/NavBar.js
@@ -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>