stub room display with messages and game link

packages/play-node-go/play-node-go/src/components/Button/Game/Game.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './Game.scss';
+
+const GameButton = (props) => {
+  const gameData = props.game;
+  return (
+    <div className="GameButton" data-testid="GameButton">
+      <Link to={`/games/${gameData.id}`}>View Game</Link>
+      <p>{gameData.playerBlack} - {gameData.playerBlackRank}</p>
+      <p>{gameData.playerWhite} - {gameData.playerWhiteRank}</p>
+    </div>
+  );
+}
+
+export default GameButton;

packages/play-node-go/play-node-go/src/components/Button/Game/Game.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Game from './Game';
+
+const gameData = {
+  id: 1,
+  name: "main",
+  description: "A general place to play Go",
+  language: "EN"
+}
+
+test('renders GameButton without crashing', () => {
+  const { getByTestId } = render(
+    <Router>
+      <Game game={gameData} />
+    </Router>
+  );
+  const GameButton = getByTestId('GameButton');
+  expect(GameButton).toBeInTheDocument();
+});
+

packages/play-node-go/play-node-go/src/components/Display/Development/Development.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Development = () => {
+  return (<>
+    <p>This Feature is in Development :{')'}</p>
+  </>);
+}
+
+export default Development;

packages/play-node-go/play-node-go/src/components/Display/Message/Message.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import './Message.scss';
+
+const Message = (props) => {
+  const messageData = props.message;
+  return (
+    <div className="Message" data-testid="Message">
+      <p>{messageData.content}</p>
+      <p>{messageData.username}</p>
+      <p>{messageData.admin ? 'admin' : <></>}</p>
+    </div>
+  );
+}
+
+export default Message;

packages/play-node-go/play-node-go/src/components/Display/Message/Message.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Message from './Message';
+
+const messageData = [
+  {
+  "content": "Hey! Welcome to the general room!", "username": "userOne", "admin": true
+  }
+];
+
+test('renders Message without crashing', () => {
+  const { getByTestId } = render( <Message message={messageData} /> );
+  const messageDiv = getByTestId('Message');
+  expect(messageDiv).toBeInTheDocument();
+});
+

packages/play-node-go/play-node-go/src/pages/Game/Game.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import './Game.scss';
 
+import Development from '../../components/Display/Development/Development';
+
 const Game = () => {
   return (  
     <div className="Game" data-testid="Game">
       <p>Game</p>
+      <Development />
     </div>
   );
 }

packages/play-node-go/play-node-go/src/pages/Room/Room.js

@@ -4,6 +4,10 @@ import './Room.scss';
 import socketIOClient from 'socket.io-client';
 import config from '../../config';
 import roomsServices from '../../services/api/roomsServices';
+import GameButton from '../../components/Button/Game/Game';
+import Message from '../../components/Display/Message/Message';
+
+import Development from '../../components/Display/Development/Development';
 
 const Room = (props) => {
   const state = props.state;
@@ -45,9 +49,46 @@ const Room = (props) => {
 
   // ! [end]
 
+  const renderGames = () => {
+    const games = state.games || [];
+    if (games.length) {
+      return games.map(gameData => (
+        <GameButton 
+          key={`game-${gameData.id}`}
+          game={gameData}
+        />
+      ))
+    }
+    return <p>Loading Games...</p>
+  }
+
+  const renderMessages = () => {
+    const messages = state.messages || [];
+    if (messages.length) {
+      return messages.map((messageData, idx) => (
+        <Message
+          key={`message-${idx}`}
+          message={messageData}
+        />
+      ))
+    }
+    return <p>Loading Messages...</p>
+  }
+
+
   return (  
     <div className="Room" data-testid="Room">
-      <h2></h2>
+      <h2>{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
+
+      <div className="Room__game-container">
+        {renderGames()}
+      </div>
+
+      <div className="Room__message-container">
+        {renderMessages()}
+        <Development />
+      </div>
+
     </div>
   );
 }

packages/play-node-go/play-node-go/src/pages/Room/Room.scss

@@ -0,0 +1,28 @@
+div.Room {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  width: 100%;
+  justify-content: stretch;
+  align-items: initial;
+
+  h2 {
+    justify-self:stretch;
+    align-self: flex-start;
+    width: 100%;
+    max-height: 5vh;
+    
+  }
+
+  div.Room__game-container {
+    height: 100%;
+    justify-self: flex-start;
+    align-self: flex-start;
+  }
+  
+  div.Room__message-container {
+    height: 100%;
+    justify-self: flex-end;
+    align-self: flex-end;
+  }
+}

packages/play-node-go/play-node-go/src/pages/Room/Room.test.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { initState } from '../../reducers/init/stateReducer.init';
 import Room from './Room';
 
+const state = initState();
 test('renders Room without crashing', () => {
   const { getByTestId } = render(
     <Router>
-      <Room />
+      <Room state={state} />
     </Router>
   );
   const RoomDiv = getByTestId('Room');

packages/play-node-go/play-node-go/src/services/api/roomsServices.js

@@ -25,6 +25,17 @@ const getRoomService = async (roomIndex) => {
   )
   .then(res => res.text())
   .then(text => JSON.parse(text))
+  .then(obj => {
+    obj.games = obj.roomGames.map(game => {
+      delete Object.assign(game, {boardSize: game.board_size }).board_size;
+      delete Object.assign(game, {playerBlack: game.player_black }).player_black;
+      delete Object.assign(game, {playerBlackRank: game.player_black_rank }).player_black_rank;
+      delete Object.assign(game, {playerWhite: game.player_white }).player_white;
+      delete Object.assign(game, {playerWhiteRank: game.player_white_rank }).player_white_rank;
+      return game;
+    })
+    return obj;
+  })
   .catch(err => err);
 
   return response;