Added functionality to CreateStation Screen
This commit is contained in:
parent
ea328d337a
commit
9dea570291
3 changed files with 35 additions and 34 deletions
4
frontend/src/constants/ApiConstants.js
Normal file
4
frontend/src/constants/ApiConstants.js
Normal file
|
@ -0,0 +1,4 @@
|
|||
|
||||
export const RADIOSTATION_URL = "http://localhost:8080/api";
|
||||
|
||||
export const CREATE_RADIOSTATION_ENDPOINT = "/radio-stations";
|
|
@ -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;
|
||||
|
|
21
frontend/src/utils/Stations.js
Normal file
21
frontend/src/utils/Stations.js
Normal 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)
|
||||
})
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue