stub RoomDetail component
This commit is contained in:
parent
a9243840a6
commit
c54dcb41a8
6 changed files with 48 additions and 921 deletions
|
@ -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">
|
||||
<Link to={`/rooms/${room.id}`}>Join {room.name}</Link>
|
||||
</h4>
|
||||
<h4 className="RoomButton__room-link RoomButton__room-link--info">
|
||||
<h4
|
||||
className="RoomButton__room-link RoomButton__room-link--info"
|
||||
onClick={e => showRoomDetail(room.id)}
|
||||
>
|
||||
?
|
||||
</h4>
|
||||
{smallRoom}
|
||||
</div>
|
||||
{roomDetail ? <RoomDetail room={room} /> : <></>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
|
@ -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}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
|
910
packages/server/package-lock.json
generated
910
packages/server/package-lock.json
generated
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue