From 7ed15201156b0814c75fa033968714215424eb1b Mon Sep 17 00:00:00 2001
From: Judy Ye <judyy.ye@gmail.com>
Date: Sun, 15 Oct 2023 16:59:43 -0700
Subject: [PATCH] Add functionality to button that links to BE's game room name

---
 src/App.js                    |  2 +-
 src/components/Story/Story.js | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index f34bc60..cbebf32 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,7 +15,7 @@ function App() {
           </>
           } 
           />
-        <Route path='/room' element={<Room />}/>
+        <Route path='/room/:roomName' element={<Room />}/>
       </Routes>
     
     </div>
diff --git a/src/components/Story/Story.js b/src/components/Story/Story.js
index 1d43e3f..59cd90b 100644
--- a/src/components/Story/Story.js
+++ b/src/components/Story/Story.js
@@ -3,9 +3,21 @@ import './Story.css'
 // import background from '../../assets/ufo2.jpg'
 // import background from '../../assets/donut.jpg'
 import background from '../../assets/big-donut.jpg'
-import { Link } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
+import fetchGameLink from '../../apiCalls'
 
 export default function Story() {
+  const navigate = useNavigate()
+  
+  const startGame = async () => {
+   try {
+    const roomName = await fetchGameLink()
+    navigate(`/room/${roomName.room_name}`)
+   } catch (err) {
+    console.log(`${err.message}`)
+   }
+  }
+
   return (
     <section className='landing-page-body' style={{'--background': `url(${background})`}} >
       <div className='story-and-button'>
@@ -17,7 +29,7 @@ export default function Story() {
           Suffice it to say, Bob’s a weird guy. But he’s our weird guy. On base, we have a sacred tradition called Doughnut Friday. In the 37 years Bob’s worked here, he has never missed a Doughnut Friday. Ever. The last time anyone saw him was last Friday, and our night janitors mentioned they never saw him leave. Our base commander is the only one who’s known Bob since he started here - and he’s put the base on lockdown and issued an access override. It’s time to head into Bob’s office to find any clues we can."
         
         </div>
-        <Link to={'/room'} className='start-game'>Start Game</Link>
+        <button className='start-game' onClick={startGame}>Start Game</button>   
       </div>
  
     </section>