render stubbed RoomButton component on Home

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;

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;
+  }
+
+}

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');
+});
+

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>
   );

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;
+}

play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss

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

play-node-go/src/pages/Layout/NavBar/NavBar.js

@@ -1,7 +1,7 @@
 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) => {