Fixed Join Screen and added Station Page navigation

frontend/src/App.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Home from './screens/Home';
-import CreateStation from './screens/CreateStation';
-import JoinStation from './screens/JoinStation';
-import StationPage from './screens/StationPage';
-import './App.css';
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "./screens/Home";
+import CreateStation from "./screens/CreateStation";
+import JoinStation from "./screens/JoinStation";
+import StationPage from "./screens/StationPage";
+import "./App.css";
 
 function App() {
   return (
@@ -14,7 +14,7 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/create-station" element={<CreateStation />} />
           <Route path="/join-station" element={<JoinStation />} />
-          <Route path="/station" element={<StationPage />} />
+          <Route path="/station/:id" element={<StationPage />} />
         </Routes>
       </Router>
     </div>

frontend/src/screens/JoinStation.jsx

@@ -8,13 +8,15 @@ function JoinStation() {
 
   const handleJoinStation = (stationID) => {
     console.log("Joining station with ID:" + stationID);
-    navigate("/station");
+    navigate(`/station/${stationID}`);
   };
 
   useEffect(() => {
-    console.log("Test");
-
-    getStations(getStations());
+    async function fetchStations() {
+      const result = await getStations(); // assuming getStations is async
+      setStations(result);
+    }
+    fetchStations();
   }, []);
 
   return (
@@ -26,8 +28,12 @@ function JoinStation() {
       <main className="join-station-content">
         {stations.map((station, index) => {
           return (
-            <div className="verify-method-section">
-              <text>station</text>
+            <div key={index}>
+              <p>Station Name: {station.name}</p>
+              <p>Station Description: {station.description}</p>
+              <button onClick={() => handleJoinStation(station.id)}>
+                join this station
+              </button>
             </div>
           );
         })}

frontend/src/screens/StationPage.jsx

@@ -1,30 +1,13 @@
-import React, { useState } from 'react';
-import AddSongModal from './AddSongModal';
-import LoginButton from '../components/LoginButton';
+import React, { useState, useParams } from "react";
+import AddSongModal from "./AddSongModal";
+import LoginButton from "../components/LoginButton";
 
 function StationPage() {
+  const { id } = useParams();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [currentSong, setCurrentSong] = useState({
-    title: "No song playing",
-    artist: "Add songs to get started",
-    isPlaying: false
-  });
 
-  // Empty song list - no songs initially
   const recommendedSongs = [];
 
-  const handlePlayPause = () => {
-    setCurrentSong(prev => ({ ...prev, isPlaying: !prev.isPlaying }));
-  };
-
-  const handleNext = () => {
-    console.log('Next song');
-  };
-
-  const handlePrevious = () => {
-    console.log('Previous song');
-  };
-
   const openModal = () => {
     setIsModalOpen(true);
   };
@@ -48,39 +31,6 @@ function StationPage() {
           <LoginButton />
         </header>
 
-        <div className="media-controls-section">
-          <div className="current-song">
-            <h3>{currentSong.title}</h3>
-            <p>{currentSong.artist}</p>
-          </div>
-          
-          <div className="media-controls">
-            <button className="control-btn" onClick={handlePrevious}>
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
-              </svg>
-            </button>
-            
-            <button className="control-btn play-pause" onClick={handlePlayPause}>
-              {currentSong.isPlaying ? (
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
-                </svg>
-              ) : (
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M8 5v14l11-7z"/>
-                </svg>
-              )}
-            </button>
-            
-            <button className="control-btn" onClick={handleNext}>
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-
         <div className="songs-section">
           <div className="section-header">
             <h2>Song Queue</h2>
@@ -88,14 +38,14 @@ function StationPage() {
               Add Song
             </button>
           </div>
-          
+
           <div className="songs-list">
             {recommendedSongs.length === 0 ? (
               <div className="empty-songs-state">
                 <p>No songs in queue yet. Add some songs to get started!</p>
               </div>
             ) : (
-              recommendedSongs.map(song => (
+              recommendedSongs.map((song) => (
                 <div key={song.id} className="song-item">
                   <div className="song-info">
                     <h4>{song.title}</h4>

frontend/src/utils/GetStations.js

@@ -4,17 +4,22 @@ import {
 } from "../constants/ApiConstants";
 
 export async function getStations() {
-  fetch(RADIOSTATION_URL + LIST_RADIOSTATIONS_ENDPOINT, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      console.log("Station:", data);
-    })
-    .catch((error) => {
-      console.error("Error creating station:", error);
-    });
+  try {
+    const response = await fetch(
+      RADIOSTATION_URL + LIST_RADIOSTATIONS_ENDPOINT,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    const data = await response.json();
+    console.log("Station:", data.data);
+    return data.data;
+  } catch (error) {
+    console.error("Error fetching stations:", error);
+    return [];
+  }
 }

frontend/src/utils/StationsCreate.js

@@ -7,8 +7,8 @@ import {
 
 export async function createStation(name, description) {
   const body = {
-    name: "My Awesome Station",
-    description: "The best music station ever",
+    name: name,
+    description: description,
   };
 
   fetch(RADIOSTATION_URL + CREATE_RADIOSTATION_ENDPOINT, {