From cfae6fa49b4c3f5f0b48ae154c5f5a83f77e9466 Mon Sep 17 00:00:00 2001
From: Noah <noah.knapp.bz@gmail.com>
Date: Fri, 1 Aug 2025 23:59:24 +0200
Subject: [PATCH] It's all fucked but we're gonna roll with it

---
 frontend/src/constants/ApiConstants.js        |  4 +-
 frontend/src/screens/CreateStation.jsx        |  2 +-
 frontend/src/screens/JoinStation.jsx          | 63 ++++++-------------
 frontend/src/utils/GetStations.js             | 20 ++++++
 .../utils/{Stations.js => StationsCreate.js}  |  0
 5 files changed, 42 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/utils/GetStations.js
 rename frontend/src/utils/{Stations.js => StationsCreate.js} (100%)

diff --git a/frontend/src/constants/ApiConstants.js b/frontend/src/constants/ApiConstants.js
index d677507..c7fd4b7 100644
--- a/frontend/src/constants/ApiConstants.js
+++ b/frontend/src/constants/ApiConstants.js
@@ -1,4 +1,4 @@
-
 export const RADIOSTATION_URL = "http://localhost:8080/api";
 
-export const CREATE_RADIOSTATION_ENDPOINT = "/radio-stations";
\ No newline at end of file
+export const CREATE_RADIOSTATION_ENDPOINT = "/radio-stations";
+export const LIST_RADIOSTATIONS_ENDPOINT = "/radio-stations";
diff --git a/frontend/src/screens/CreateStation.jsx b/frontend/src/screens/CreateStation.jsx
index eab99fa..469dfc3 100644
--- a/frontend/src/screens/CreateStation.jsx
+++ b/frontend/src/screens/CreateStation.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { createStation } from '../utils/Stations';
+import { createStation } from '../utils/StationsCreate';
 
 // I UNDERSTAND THIS!! --Noah
 
diff --git a/frontend/src/screens/JoinStation.jsx b/frontend/src/screens/JoinStation.jsx
index 3bb3302..2f3e758 100644
--- a/frontend/src/screens/JoinStation.jsx
+++ b/frontend/src/screens/JoinStation.jsx
@@ -1,17 +1,22 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { getStations } from "../utils/GetStations";
 
 function JoinStation() {
-  const [verifyMethod, setVerifyMethod] = useState('');
-  const [password, setPassword] = useState('');
   const navigate = useNavigate();
+  const [stations, setStations] = useState([]);
 
-  const handleJoinStation = () => {
-    console.log('Joining station with password:', password);
-    // Redirect to station page after joining
-    navigate('/station');
+  const handleJoinStation = (stationID) => {
+    console.log("Joining station with ID:" + stationID);
+    navigate("/station");
   };
 
+  useEffect(() => {
+    console.log("Test");
+
+    getStations(getStations());
+  }, []);
+
   return (
     <div className="join-station">
       <header className="join-station-header">
@@ -19,43 +24,13 @@ function JoinStation() {
       </header>
 
       <main className="join-station-content">
-        <div className="verify-method-section">
-          <h2>How would you like to verify access?</h2>
-          
-          <div className="radio-option">
-            <label>
-              <input
-                type="radio"
-                name="verifyMethod"
-                value="password"
-                checked={verifyMethod === 'password'}
-                onChange={(e) => setVerifyMethod(e.target.value)}
-              />
-              Password
-            </label>
-          </div>
-
-          {verifyMethod === 'password' && (
-            <div className="password-input-section">
-              <label htmlFor="station-password">Station Password:</label>
-              <input
-                type="password"
-                id="station-password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Enter station password"
-              />
+        {stations.map((station, index) => {
+          return (
+            <div className="verify-method-section">
+              <text>station</text>
             </div>
-          )}
-        </div>
-
-        <button 
-          className="join-station-final-btn"
-          onClick={handleJoinStation}
-          disabled={verifyMethod !== 'password' || !password.trim()}
-        >
-          Join Station
-        </button>
+          );
+        })}
       </main>
     </div>
   );
diff --git a/frontend/src/utils/GetStations.js b/frontend/src/utils/GetStations.js
new file mode 100644
index 0000000..21d954e
--- /dev/null
+++ b/frontend/src/utils/GetStations.js
@@ -0,0 +1,20 @@
+import {
+  LIST_RADIOSTATIONS_ENDPOINT,
+  RADIOSTATION_URL,
+} 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);
+    });
+}
diff --git a/frontend/src/utils/Stations.js b/frontend/src/utils/StationsCreate.js
similarity index 100%
rename from frontend/src/utils/Stations.js
rename to frontend/src/utils/StationsCreate.js