It's all fucked but we're gonna roll with it

frontend/src/constants/ApiConstants.js

@@ -1,4 +1,4 @@
-
 export const RADIOSTATION_URL = "http://localhost:8080/api";
 
-export const CREATE_RADIOSTATION_ENDPOINT = "/radio-stations";
+export const CREATE_RADIOSTATION_ENDPOINT = "/radio-stations";
+export const LIST_RADIOSTATIONS_ENDPOINT = "/radio-stations";

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
 

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>
   );

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);
+    });
+}