Feat: fixes URL so it's the roomName not just room

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/:gameName' element={
-        <>
-          <RoomOne />
-          <Chat />
-        </>
-        } />
-      </Routes>
+      <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/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/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 gameName = await fetchGameLink();
-      navigate(`/room/${gameName.game_name}`);
+      const gameData = await fetchGameLink();
+      navigate(`/${displayedRoomName}/${gameData.game_name}`);
     } catch (err) {
       console.log(`${err.message}`);
     }