add client routing to rooms/:id, move socket(rooms/roomId) connect from Home page to Room page

play-node-go/src/App.js

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

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 (
     <div className="RoomButton" data-testid="RoomButton">
       <h4 className="RoomButton__room-name">{roomData.name}</h4>
+      <Link to={`/rooms/${roomData.id}`}>Join Room</Link>
     </div>
   );
 }

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(<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');
 });

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 (  
     <div className="page">
 

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 (  
     <div className="Room" data-testid="Room">
-      <p>Room</p>
+      <h2></h2>
     </div>
   );
 }

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(<Room />);
+  const { getByTestId } = render(
+    <Router>
+      <Room />
+    </Router>
+  );
   const RoomDiv = getByTestId('Room');
   expect(RoomDiv).toBeInTheDocument();
 });