123 lines
No EOL
3.1 KiB
JavaScript
123 lines
No EOL
3.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
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 ActionError from '../../components/Error/ActionError/ActionError';
|
|
|
|
import Development from '../../components/Display/Development/Development';
|
|
|
|
const Room = (props) => {
|
|
const state = props.state;
|
|
const dispatch = props.dispatch;
|
|
const roomId = parseInt(useParams().id) || 0;
|
|
const [ socketData, setSocketData ] = useState(false);
|
|
|
|
const fetchRoomAPI = async () => {
|
|
const response = await roomsServices.getRoomService(roomId);
|
|
if (response) {
|
|
const action = {
|
|
type: 'ROOMS',
|
|
message: 'JOIN_ROOM',
|
|
body: response
|
|
}
|
|
return dispatch(action);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchRoomAPI();
|
|
}, [])
|
|
|
|
// ! [start] roomSocket
|
|
const roomSocket = socketIOClient(`${config.socketAddress}/${roomId}`)
|
|
|
|
const roomSocketConnect = () => {
|
|
roomSocket.emit('connect');
|
|
// ! dispatch data
|
|
roomSocket.on('connect', socket => {
|
|
setSocketData(true)
|
|
});
|
|
roomSocket.on('join_game_request', data => {
|
|
console.log(data)
|
|
})
|
|
roomSocket.on('connect_error', err => {
|
|
setSocketData(false)
|
|
console.log(err);
|
|
});
|
|
roomSocket.on('error', err => {
|
|
setSocketData(false)
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
roomSocketConnect();
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const data = {
|
|
user: state.user,
|
|
game: state.joinGame
|
|
};
|
|
console.log('emitting request')
|
|
console.log(data)
|
|
roomSocket.emit('join_game_request', data)
|
|
}, [state.joinGame])
|
|
|
|
// ! [end]
|
|
|
|
const renderGames = () => {
|
|
const games = state.games || [];
|
|
if (games.length) {
|
|
return games.map(gameData => (
|
|
<GameButton
|
|
key={`game-${gameData.id}`}
|
|
game={gameData}
|
|
dispatch={dispatch}
|
|
user={gameData.playerBlack === state.user.username || gameData.playerWhite === state.user.username}
|
|
/>
|
|
))
|
|
}
|
|
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">
|
|
<div className="Room__heading">
|
|
<h2>{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
|
|
<span className="Room__connection">{socketData ? '✓' : ' ⃠'}</span>
|
|
{state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>}
|
|
</div>
|
|
|
|
<div className="Room__game-container">
|
|
{renderGames()}
|
|
</div>
|
|
|
|
<div className="Room__message-container">
|
|
{renderMessages()}
|
|
<Development />
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Room; |