stub RoomDetail component

This commit is contained in:
Sorrel Bri 2020-04-12 00:19:21 -07:00
parent a9243840a6
commit c54dcb41a8
6 changed files with 48 additions and 921 deletions

View file

@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import RoomDetail from '../../Display/RoomDetail/RoomDetail';
import './Room.scss'; import './Room.scss';
const RoomButton = ({room}) => { const RoomButton = ({room, roomDetail, showRoomDetail}) => {
const smallRoom = ( const smallRoom = (
<div className="small-room"> <div className="small-room">
<div className="small-room__roof"> <div className="small-room__roof">
@ -49,15 +50,21 @@ const RoomButton = ({room}) => {
) )
return ( 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} /> : <></>}
</>
); );
} }

View file

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

View file

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

File diff suppressed because it is too large Load diff