diff --git a/packages/server/packages/play-node-go/play-node-go/src/App.js b/packages/server/packages/play-node-go/play-node-go/src/App.js index c1b9e1f..9bee631 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/App.js +++ b/packages/server/packages/play-node-go/play-node-go/src/App.js @@ -59,7 +59,7 @@ function App() { - + diff --git a/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.js b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.js index 6761902..82e27ce 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.js +++ b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.js @@ -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 (

{roomData.name}

+ Join Room
); } diff --git a/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.test.js b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.test.js index cd885ef..bbe584a 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.test.js +++ b/packages/server/packages/play-node-go/play-node-go/src/components/Button/Room/Room.test.js @@ -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(); + const { getByTestId } = render( + + + + ); const RoomButton = getByTestId('RoomButton'); expect(RoomButton).toBeInTheDocument(); }); test('renders RoomButton with Room name', () => { - const { getByTestId } = render(); + const { getByTestId } = render( + + + + ); const RoomButton = getByTestId('RoomButton'); expect(RoomButton).toHaveTextContent('main'); }); diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.js b/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.js index d7d85d8..56050ac 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.js +++ b/packages/server/packages/play-node-go/play-node-go/src/pages/Home/Home.js @@ -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 (
diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js b/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js index 85f07cd..9d3a814 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js +++ b/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js @@ -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 (
-

Room

+

); } diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.test.js b/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.test.js index 7693458..bac7a49 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.test.js +++ b/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.test.js @@ -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(); + const { getByTestId } = render( + + + + ); const RoomDiv = getByTestId('Room'); expect(RoomDiv).toBeInTheDocument(); });