Merge pull request #29 from escape-link/feat/chat

Feat/chat

package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@rails/actioncable": "^7.1.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "action": "^0.0.1",
+    "cable": "^1.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",

src/App.js

@@ -3,6 +3,7 @@ import Header from './components/Header/Header';
 import Story from './components/Story/Story';
 import { Route, Routes } from 'react-router-dom'
 import Room from './components/Room/Room'
+import Chat from './components/Chat/Chat';
 
 function App() {
   return (
@@ -15,7 +16,12 @@ function App() {
           </>
           } 
           />
-        <Route path='/room/:roomName' element={<Room />}/>
+           <Route path='/room/:roomName' element={
+        <>
+          <Room />
+          <Chat />
+        </>
+        } />
       </Routes>
 
     </div>

src/apiCalls.js

@@ -5,7 +5,7 @@ const getCookie = (name) => {
 };
 
 export default async function fetchGameLink() {
-  const res = await fetch('http://localhost:3000/api/v0/games', {
+  const res = await fetch('https://escapelink-be-42ffc95e6cf7.herokuapp.com/api/v0/games', {
     method: 'POST', 
     credentials: 'include',
     headers: {

src/components/Chat/Chat.js

@@ -0,0 +1,91 @@
+import './Chat.css';
+import { useEffect, useState } from 'react';
+import { createConsumer } from '@rails/actioncable';
+import { useParams } from 'react-router-dom';
+
+export default function Chat() {
+  const [nickname, setNickname] = useState('');
+  const [currentMessage, setCurrentMessage] = useState('');
+  const [allMessages, setAllMessages] = useState([]);
+  const [subscription, setSubscription] = useState(null);
+  const [hasNickname, setHasNickname] = useState(false);
+  const { roomName } = useParams();
+
+  useEffect(() => {
+    const nicknameExist = localStorage.getItem(`nickname_${roomName}`);
+    if (nicknameExist) {
+      setNickname(nicknameExist);
+      setHasNickname(true);
+    }
+
+    const cable = createConsumer(
+      'wss://escapelink-be-42ffc95e6cf7.herokuapp.com/cable'
+    );
+    const newSubscription = cable.subscriptions.create(
+      { channel: 'GameChannel', room: roomName },
+      {
+        received: (data) => {
+          setAllMessages((allMessages) => [
+            ...allMessages,
+            `${data.nickname}: ${data.message}`
+          ]);
+        }
+      }
+    );
+
+    setSubscription(newSubscription)
+
+    return () => {
+      cable.disconnect()
+      newSubscription.unsubscribe()
+    }
+  }, [roomName]);
+
+  const handleSubmitMessage = (e) => {
+    subscription.send({
+      nickname: nickname,
+      message: currentMessage
+    });
+    setCurrentMessage('');
+  };
+
+  const handleNickname = () => {
+    localStorage.setItem(`nickname_${roomName}`, nickname);
+    setHasNickname(true);
+  };
+
+  return (
+    <div>
+      {!hasNickname ? (
+        <div>
+          <label htmlFor="nickname" />
+          <input
+            id="nickname"
+            name="nickname"
+            placeholder="Enter your name"
+            type="text"
+            value={nickname}
+            onChange={(e) => setNickname(e.target.value)}
+          />
+          <button onClick={handleNickname}>Enter</button>
+        </div>
+      ) : (
+        <div>
+          <p>Greetings {nickname}</p>
+          <label htmlFor="currentMessage" />
+          <textarea
+            id="currentMessage"
+            name="currentMessage"
+            placeholder="Enter message here"
+            rows="4"
+            cols="33"
+            value={currentMessage}
+            onChange={(e) => setCurrentMessage(e.target.value)}
+          />
+          <button onClick={handleSubmitMessage}>Send</button>
+        </div>
+      )}
+      <p>{allMessages}</p>
+    </div>
+  );
+}