add client routing to rooms/:id, move socket(rooms/roomId) connect from Home page to Room page
This commit is contained in:
parent
63a9233b15
commit
55b1a9bce0
6 changed files with 46 additions and 26 deletions
|
@ -59,7 +59,7 @@ function App() {
|
|||
<MainWrapper page="account" state={state} dispatch={dispatch}/>
|
||||
</Route>
|
||||
|
||||
<Route path="/rooms">
|
||||
<Route path="/rooms/:id">
|
||||
<MainWrapper page="room" state={state} dispatch={dispatch}/>
|
||||
</Route>
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Room.scss';
|
||||
|
||||
const RoomButton = (props) => {
|
||||
|
@ -6,6 +7,7 @@ const RoomButton = (props) => {
|
|||
return (
|
||||
<div className="RoomButton" data-testid="RoomButton">
|
||||
<h4 className="RoomButton__room-name">{roomData.name}</h4>
|
||||
<Link to={`/rooms/${roomData.id}`}>Join Room</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import Room from './Room';
|
||||
|
||||
const roomData = {
|
||||
|
@ -10,13 +11,21 @@ const roomData = {
|
|||
}
|
||||
|
||||
test('renders RoomButton without crashing', () => {
|
||||
const { getByTestId } = render(<Room room={roomData} />);
|
||||
const { getByTestId } = render(
|
||||
<Router>
|
||||
<Room room={roomData} />
|
||||
</Router>
|
||||
);
|
||||
const RoomButton = getByTestId('RoomButton');
|
||||
expect(RoomButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('renders RoomButton with Room name', () => {
|
||||
const { getByTestId } = render(<Room room={roomData} />);
|
||||
const { getByTestId } = render(
|
||||
<Router>
|
||||
<Room room={roomData} />
|
||||
</Router>
|
||||
);
|
||||
const RoomButton = getByTestId('RoomButton');
|
||||
expect(RoomButton).toHaveTextContent('main');
|
||||
});
|
||||
|
|
|
@ -2,13 +2,7 @@ import React, { useEffect } from 'react';
|
|||
import './Home.scss';
|
||||
import roomsServices from '../../services/api/roomsServices';
|
||||
import RoomButton from '../../components/Button/Room/Room';
|
||||
import socketIOClient from 'socket.io-client';
|
||||
import config from '../../config';
|
||||
|
||||
// ! [start] roomSocket stub
|
||||
const roomId = 1
|
||||
const roomSocket = socketIOClient(`${config.socketAddress}/${roomId}`)
|
||||
// ! [end]
|
||||
|
||||
const Home = props => {
|
||||
const state = props.state || {};
|
||||
|
@ -43,19 +37,6 @@ const Home = props => {
|
|||
fetchRoomsAPI();
|
||||
}, [])
|
||||
|
||||
// ! [start] roomSocket stub
|
||||
const roomSocketConnect = () => {
|
||||
roomSocket.emit('connect');
|
||||
// roomSocket.on('connected', data => setSocketData('room socket connected'));
|
||||
// roomSocket.on('connect_error', err => setError([...error, err]));
|
||||
// roomSocket.on('error', err => setError([...error, err]))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
roomSocketConnect();
|
||||
}, [])
|
||||
// ! [end]
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
|
||||
|
|
|
@ -1,10 +1,33 @@
|
|||
import React from 'react';
|
||||
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';
|
||||
|
||||
const Room = (props) => {
|
||||
const roomId = useParams().id;
|
||||
const [ socketData, setSocketData ] = useState();
|
||||
const [ messages, setMessages ] = useState();
|
||||
|
||||
// ! [start] roomSocket
|
||||
const roomSocket = socketIOClient(`${config.socketAddress}/${roomId}`)
|
||||
|
||||
const roomSocketConnect = () => {
|
||||
roomSocket.emit('connect');
|
||||
// ! dispatch data
|
||||
roomSocket.on('connected', data => setSocketData('room socket connected'));
|
||||
roomSocket.on('connect_error', err => console.log(err));
|
||||
roomSocket.on('error', err => console.log(err));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
roomSocketConnect();
|
||||
}, [])
|
||||
// ! [end]
|
||||
|
||||
const Room = () => {
|
||||
return (
|
||||
<div className="Room" data-testid="Room">
|
||||
<p>Room</p>
|
||||
<h2></h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,9 +1,14 @@
|
|||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import Room from './Room';
|
||||
|
||||
test('renders Room without crashing', () => {
|
||||
const { getByTestId } = render(<Room />);
|
||||
const { getByTestId } = render(
|
||||
<Router>
|
||||
<Room />
|
||||
</Router>
|
||||
);
|
||||
const RoomDiv = getByTestId('Room');
|
||||
expect(RoomDiv).toBeInTheDocument();
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue