Change to names

src/App.js

@@ -1,31 +1,24 @@
 import './App.css';
 import Header from './components/Header/Header';
 import Story from './components/Story/Story';
-import { Route, Routes } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom';
 import Chat from './components/Chat/Chat';
 import LandingPage from './components/LandingPage/LandingPage';
 import RoomOne from './components/RoomOne/RoomOne';
 
 function App() {
   return (
     <div>
-       <Routes>
-        <Route path='/' element = {
-          <>
-          <Header />
-          <LandingPage />
-          </>
-          } 
-          />
-          <Route path='/roomID' element={<Story/>}/>
-           <Route path='/room/:roomName' element={
-        <>
-          <RoomOne />
-          <Chat />
-        </>
-        } />
+      <Routes>
+        {/* Single route for the landing page */}
+        <Route path='/' element={<><Header /><LandingPage /></>} />
+
+        {/* Route when only the room name is present in the URL */}
+        <Route path='/:displayedRoomName' element={<><Header /><Story /></>} />
+
+        {/* New route to capture data sent by the backend */}
+        <Route path='/:displayedRoomName/:backendData' element={<><Header /><RoomOne /><Chat /></>} />
       </Routes>
-
     </div>
   );
 }

src/apiCalls.js

@@ -4,15 +4,18 @@ const getCookie = (name) => {
   if (parts.length === 2) return parts.pop().split(';').shift();
 };
 
+
 export default async function fetchGameLink() {
+  const room_name = "Where's Bob?"; // Define the room_name variable as '1'
   // const res = await fetch('https://escapelink-be-42ffc95e6cf7.herokuapp.com/api/v0/games', {
   const res = await fetch('http://localhost:3000/api/v0/games', {
     method: 'POST',
     credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
       'X-CSRF-Token': getCookie('X-CSRF-Token')
-    }
+    },
+    body: JSON.stringify({ room_name }), // Include the room_name in the request body
   })
   if (!res.ok) {
     throw new Error( `${res.status}: Unable to retrieve link`)

src/components/Chat/Chat.js

@@ -9,10 +9,10 @@ export default function Chat() {
   const [allMessages, setAllMessages] = useState([]);
   const [subscription, setSubscription] = useState(null);
   const [hasNickname, setHasNickname] = useState(false);
-  const { roomName } = useParams();
+  const { gameName } = useParams();
 
   useEffect(() => {
-    const nicknameExist = localStorage.getItem(`nickname_${roomName}`);
+    const nicknameExist = localStorage.getItem(`nickname_${gameName}`);
     if (nicknameExist) {
       setNickname(nicknameExist);
       setHasNickname(true);
@@ -23,7 +23,7 @@ export default function Chat() {
       'ws://localhost:3000/cable'
     );
     const newSubscription = cable.subscriptions.create(
-      { channel: 'GameChannel', room: roomName },
+      { channel: 'GameChannel', game: gameName },
       {
         received: (data) => {
           setAllMessages((allMessages) => [
@@ -40,7 +40,7 @@ export default function Chat() {
       cable.disconnect()
       newSubscription.unsubscribe()
     }
-  }, [roomName]);
+  }, [gameName]);
 
   const handleSubmitMessage = (e) => {
     subscription.send({
@@ -51,7 +51,7 @@ export default function Chat() {
   };
 
   const handleNickname = () => {
-    localStorage.setItem(`nickname_${roomName}`, nickname);
+    localStorage.setItem(`nickname_${gameName}`, nickname);
     setHasNickname(true);
   };
 

src/components/LandingPage/LandingPage.js

@@ -1,15 +1,32 @@
-import './LandingPage.css'
-import { Link } from "react-router-dom";
+import React from 'react';
+import './LandingPage.css';
+import { useNavigate } from 'react-router-dom';
 
 export default function LandingPage() {
-return (
-<div className="landing-page">Welcome to EscapeLink! Choose your room
-<div className="buttons">
-    <Link to={'/roomID'} className="Room-One">Alien Escape!</Link>
-    <button>Coming Soon</button>
-    <button>Coming Soon</button>
-    <button>Coming Soon</button>
-    <button>Coming Soon</button>
+  const navigate = useNavigate();
+  let displayedRoomName = ''; // This is the variable you wanted to set.
+
+  const goToRoom = (roomName) => {
+    displayedRoomName = roomName;
+    navigate(`/${displayedRoomName}`);
+  };
+
+  return (
+    <div className="landing-page">
+      Welcome to EscapeLink! Choose your room
+      <div className="buttons">
+        <button onClick={() => goToRoom('wheres-bob')} className="Room-One">Alien Escape!</button>
+        <button>Coming Soon</button>
+        <button>Coming Soon</button>
+        <button>Coming Soon</button>
+        <button>Coming Soon</button>
+      </div>
     </div>
-</div>)
+  );
 }
+
+
+
+
+
+

src/components/Room/Room.js

@@ -109,4 +109,4 @@ export default function Room() {
       {showPuzzleFive && <PuzzleFive setIsDisabled={() => setPuzzleState( 'puzzleFive')} winConditions={winConditions} setWinConditions={setWinConditions} onClose={handleClosePuzzleFive} />}
     </article>
   );
-}
+}

src/components/Story/Story.js

@@ -1,15 +1,16 @@
 import './Story.css';
 import background from '../../assets/big-donut.jpg';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import fetchGameLink from '../../apiCalls';
 
 export default function Story() {
   const navigate = useNavigate();
+  const { displayedRoomName } = useParams(); // Getting the room name from the URL
 
   const startGame = async () => {
     try {
-      const roomName = await fetchGameLink();
-      navigate(`/room/${roomName.game_name}`);
+      const gameData = await fetchGameLink();
+      navigate(`/${displayedRoomName}/${gameData.game_name}`);
     } catch (err) {
       console.log(`${err.message}`);
     }