From fc2e28c2b5c289a2df2c7def4716935acb5a414e Mon Sep 17 00:00:00 2001
From: Mike Wood <127050722+MWoodshop@users.noreply.github.com>
Date: Fri, 20 Oct 2023 13:19:41 -0400
Subject: [PATCH] Feat: fixes URL so it's the roomName not just room

---
 src/App.js                                | 27 ++++++----------
 src/components/LandingPage/LandingPage.js | 39 ++++++++++++++++-------
 src/components/Story/Story.js             |  7 ++--
 3 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7d5d325..7bc9900 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 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';
@@ -9,23 +9,16 @@ 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>
   );
 }
diff --git a/src/components/LandingPage/LandingPage.js b/src/components/LandingPage/LandingPage.js
index ad1fcb7..faf1bec 100644
--- a/src/components/LandingPage/LandingPage.js
+++ b/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>)
+  );
 }
+
+
+
+
+
+
diff --git a/src/components/Story/Story.js b/src/components/Story/Story.js
index 2666188..d2046cb 100644
--- a/src/components/Story/Story.js
+++ b/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}`);
     }