Merge remote-tracking branch 'origin/main' into tobi-dev

frontend/src/constants/ApiConstants.js

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

frontend/src/screens/CreateStation.jsx

@@ -1,11 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
+import { createStation } from "../utils/StationsCreate";
+
+// I UNDERSTAND THIS!! --Noah
 
 function CreateStation() {
-  const [joinMethod, setJoinMethod] = useState('');
-  const [password, setPassword] = useState('');
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
 
   const handleCreateStation = () => {
-    console.log('Creating station with password:', password);
+    createStation(name, description);
   };
 
   return (
@@ -35,52 +38,18 @@ function CreateStation() {
               <h1>Create a Station on Serena</h1>
             </header>
 
-            <main className="create-station-form">
-              <div className="join-method-section">
-                <h2>How should people be able to join your station?</h2>
-                
-                <div className="radio-option">
-                  <label>
-                    <input
-                      type="radio"
-                      name="joinMethod"
-                      value="password"
-                      checked={joinMethod === 'password'}
-                      onChange={(e) => setJoinMethod(e.target.value)}
-                    />
-                    <span className="radio-custom"></span>
-                    Password
-                  </label>
-                </div>
+      <main className="create-station-content">
+        <textarea onChange={(e) => setName(e.target.value)} />
+        <textarea onChange={(e) => setDescription(e.target.value)} />
 
-                {joinMethod === '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"
-                    />
-                  </div>
-                )}
-              </div>
-
-              <button 
-                className="create-station-final-btn"
-                onClick={handleCreateStation}
-                disabled={joinMethod !== 'password' || !password.trim()}
-              >
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
-                </svg>
-                Create Radio Station
-              </button>
-            </main>
-          </div>
-        </div>
-      </div>
+        <button
+          className="create-station-final-btn"
+          onClick={handleCreateStation}
+          disabled={!name || !description}
+        >
+          Create Radio Station
+        </button>
+      </main>
     </div>
   );
 }

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-container">
       <div className="join-station-main">
@@ -39,52 +44,15 @@ function JoinStation() {
               <h1>Join a Station on Serena</h1>
             </header>
 
-            <main className="join-station-form">
-              <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)}
-                    />
-                    <span className="radio-custom"></span>
-                    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"
-                    />
-                  </div>
-                )}
-              </div>
-
-              <button 
-                className="join-station-final-btn"
-                onClick={handleJoinStation}
-                disabled={verifyMethod !== 'password' || !password.trim()}
-              >
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
-                </svg>
-                Join Radio Station
-              </button>
-            </main>
-          </div>
-        </div>
-      </div>
+      <main className="join-station-content">
+        {stations.map((station, index) => {
+          return (
+            <div className="verify-method-section">
+              <text>station</text>
+            </div>
+          );
+        })}
+      </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);
+    });
+}

frontend/src/utils/StationsCreate.js

@@ -0,0 +1,28 @@
+import {
+  CREATE_RADIOSTATION_ENDPOINT,
+  RADIOSTATION_URL,
+} from "../constants/ApiConstants";
+
+// I UNDERSTAND THIS :D --Noah
+
+export async function createStation(name, description) {
+  const body = {
+    name: "My Awesome Station",
+    description: "The best music station ever",
+  };
+
+  fetch(RADIOSTATION_URL + CREATE_RADIOSTATION_ENDPOINT, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      console.log("Station created:", data);
+    })
+    .catch((error) => {
+      console.error("Error creating station:", error);
+    });
+}