stub RoomDetail component

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import RoomDetail from '../../Display/RoomDetail/RoomDetail';
 import './Room.scss';
 
-const RoomButton = ({room}) => {
+const RoomButton = ({room, roomDetail, showRoomDetail}) => {
   const smallRoom = (
     <div className="small-room">
       <div className="small-room__roof">
@@ -49,15 +50,21 @@ const RoomButton = ({room}) => {
   )
 
   return (
-    <div className="RoomButton" data-testid="RoomButton">
+    <>
-      <h4 className="RoomButton__room-link RoomButton__room-link--action">
+      <div className="RoomButton" data-testid="RoomButton">
-        <Link to={`/rooms/${room.id}`}>Join {room.name}</Link>
+        <h4 className="RoomButton__room-link RoomButton__room-link--action">
-      </h4>
+          <Link to={`/rooms/${room.id}`}>Join {room.name}</Link>
-      <h4 className="RoomButton__room-link RoomButton__room-link--info">
+        </h4>
-        ?
+        <h4 
-      </h4>
+          className="RoomButton__room-link RoomButton__room-link--info"
-      {smallRoom}
+          onClick={e => showRoomDetail(room.id)}
-    </div>
+        >
+          ?
+        </h4>
+        {smallRoom}
+      </div>
+      {roomDetail ? <RoomDetail room={room} /> : <></>}
+    </>
   );
 }
 

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import './RoomDetail.scss';
+
+const RoomDetail = ({room}) => {
+  return (
+    <div className="RoomDetail">
+      <div className="RoomDetail__arrow"></div>
+      <div className="RoomDetail__data">
+        <div className="RoomDetail__heading">
+          <h3 className="RoomDetail__room-name">{room.name}</h3>
+          <div className="RoomDetail__room-lang"></div>
+          <p className="RoomDetail__room-description">{room.description}</p>
+        </div>
+        <div className="RoomDetail__current">
+          <h4 className="RoomDetail__current-header">Current:</h4>
+          <p className="RoomDetail__current-players"></p>
+          <p className="RoomDetail__current-games"></p>
+          <p className="RoomDetail__current-rank"></p>
+        </div>
+      </div>
+    </div>
+  );
+}
+ 
+export default RoomDetail;

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import './Home.scss';
 import roomsServices from '../../services/api/roomsServices';
 import RoomButton from '../../components/Button/Room/Room';
@@ -8,6 +8,9 @@ import Loading from '../../components/Display/Loading/Loading';
 const Home = props => {
   const state =     props.state || {};
   const dispatch =  props.dispatch;
+  const [ roomDetail, setRoomDetail ] = useState(0);
+
+  const showRoomDetail = id => setRoomDetail(id);
   
   const renderRooms = () => {
     const rooms = state.rooms || [];
@@ -16,6 +19,8 @@ const Home = props => {
         <RoomButton 
           key={`room-${roomData.id}`}
           room={roomData}
+          roomDetail={roomDetail === roomData.id}
+          showRoomDetail={showRoomDetail}
         />
       ))
     }