Added functionality to CreateStation Screen

This commit is contained in:
Noah Knapp 2025-08-01 22:16:33 +02:00
parent ea328d337a
commit 9dea570291
3 changed files with 35 additions and 34 deletions

View file

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

View file

@ -1,12 +1,14 @@
import React, { useState } from 'react';
import { createStation } from '../utils/Stations';
// I UNDERSTAND THIS!! --Noah
function CreateStation() {
const [joinMethod, setJoinMethod] = useState('');
const [password, setPassword] = useState('');
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const handleCreateStation = () => {
// Handle station creation logic here
console.log('Creating station with password:', password);
createStation(name, description);
};
return (
@ -16,40 +18,13 @@ function CreateStation() {
</header>
<main className="create-station-content">
<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)}
/>
Password
</label>
</div>
{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>
<textarea onChange={(e) => setName(e.target.value)} />
<textarea onChange={(e) => setDescription(e.target.value)} />
<button
className="create-station-final-btn"
onClick={handleCreateStation}
disabled={joinMethod !== 'password' || !password.trim()}
disabled={!name || !description}
>
Create Radio Station
</button>
@ -58,4 +33,5 @@ function CreateStation() {
);
}
export default CreateStation;

View file

@ -0,0 +1,21 @@
import { CREATE_RADIOSTATION_ENDPOINT, RADIOSTATION_URL } from "../constants/ApiConstants";
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",
body: JSON.stringify(body)
})
.then((response)=>{
response.JSON()
console.log(response.JSON())
})
.catch((e)=>{
console.log(e)
})
}