design update
This commit is contained in:
Tobias
parent
6640e1bacd
commit
27755af2e0
7 changed files with 1216 additions and 358 deletions
|
|
@ -1,15 +1,51 @@
|
|||
import React, { useState } from "react";
|
||||
import { createStation } from "../utils/StationsCreate";
|
||||
|
||||
// I UNDERSTAND THIS!! --Noah
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
function CreateStation() {
|
||||
const navigate = useNavigate();
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [joinCode, setJoinCode] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [isCopied, setIsCopied] = useState(false);
|
||||
|
||||
const handleCreateStation = () => {
|
||||
setJoinCode(createStation(name, description));
|
||||
const handleCreateStation = async () => {
|
||||
if (!name.trim() || !description.trim()) {
|
||||
setError("Please fill in all fields");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const code = await createStation(name, description);
|
||||
setJoinCode(code);
|
||||
} catch (error) {
|
||||
setError(error.message || "Failed to create station");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoToStation = () => {
|
||||
// Navigate to the station or home page
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
const handleCopyCode = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(joinCode);
|
||||
setIsCopied(true);
|
||||
// Reset the animation after 2 seconds
|
||||
setTimeout(() => {
|
||||
setIsCopied(false);
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy: ', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -37,25 +73,112 @@ function CreateStation() {
|
|||
<div className="create-station-content">
|
||||
<header className="create-station-header">
|
||||
<h1>Create a Station on Serena</h1>
|
||||
<p className="create-station-subtitle">Start your own collaborative music experience</p>
|
||||
</header>
|
||||
|
||||
<main className="create-station-content">
|
||||
<textarea onChange={(e) => setName(e.target.value)} />
|
||||
<textarea onChange={(e) => setDescription(e.target.value)} />
|
||||
{!joinCode ? (
|
||||
<form className="create-station-form" onSubmit={(e) => e.preventDefault()}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="station-name">Station Name</label>
|
||||
<input
|
||||
id="station-name"
|
||||
type="text"
|
||||
placeholder="Enter your station name..."
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="create-station-final-btn"
|
||||
onClick={handleCreateStation}
|
||||
disabled={!name || !description}
|
||||
>
|
||||
Create Radio Station
|
||||
</button>
|
||||
<div className="form-group">
|
||||
<label htmlFor="station-description">Description</label>
|
||||
<textarea
|
||||
id="station-description"
|
||||
placeholder="Describe your station's vibe..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
disabled={isLoading}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p>your joinCode: {joinCode}</p>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
|
||||
</svg>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="create-station-final-btn"
|
||||
onClick={handleCreateStation}
|
||||
disabled={!name.trim() || !description.trim() || isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="loading-spinner"></div>
|
||||
Creating Station...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
|
||||
</svg>
|
||||
Create Radio Station
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<div className="success-state">
|
||||
<div className="success-icon">
|
||||
<svg width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2>Station Created Successfully!</h2>
|
||||
<p>Your station is ready to go. Share this join code with your friends:</p>
|
||||
|
||||
<div className="join-code-display">
|
||||
<span className="join-code">{joinCode}</span>
|
||||
<button
|
||||
className={`copy-btn ${isCopied ? 'copied' : ''}`}
|
||||
onClick={handleCopyCode}
|
||||
>
|
||||
{isCopied ? (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isCopied && (
|
||||
<div className="copy-feedback">
|
||||
<span className="copy-success-message">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
Copied to clipboard!
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button className="go-to-station-btn" onClick={handleGoToStation}>
|
||||
Go to Home
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue