-
+ <>
+ ok
+ ); -}; - -const Layout = () => { - const { isAuthLoading } = useAuth(); - - if (isAuthLoading) { - return
-
-
- );
-};
-
-export default LoadingSpinner;
Index: ontend/src/components/MiniPlayer.tsx
===================================================================
--- frontend/src/components/MiniPlayer.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,214 +1,0 @@
-import { baseURL } from "../api/axiosInstance";
-import { usePlayer } from "../context/playerContext";
-
-const MiniPlayer = () => {
- const { currentSong, isMinimized, stop, toggleMinimize } = usePlayer();
-
- if (!currentSong) return null;
-
- return (
- <>
- {/* Fullscreen overlay - only visible when not minimized */}
-
- {/* Header bar */}
-
-
- {/* Minimized bar - always visible at bottom */}
-
-
-
- {/* Video container - visible only in fullscreen */}
-
- 
{
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
-
-
-
- - {currentSong.title} -
-{currentSong.artist}
-
- {/* Minimize */}
-
-
- {/* Close */}
-
-
-
-
-
- {/* Single iframe - always mounted to preserve playback state */}
-
-
-
-
-
- );
-};
-
-export default MiniPlayer;
Index: ontend/src/components/Sidebar.tsx
===================================================================
--- frontend/src/components/Sidebar.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,281 +1,0 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
-import axiosInstance, { baseURL } from "../api/axiosInstance";
-import { useAuth } from "../context/authContext";
-import { usePlayer } from "../context/playerContext";
-import { useCreatedPlaylists } from "../context/playlistContext";
-import { getErrorMessage } from "../utils/error";
-import type { BasicSong, SidebarProps } from "../utils/types";
-import { toEmbedUrl } from "../utils/utils";
-import CreatePlaylistModal from "./playlist/CreatePlaylistModal";
-
-const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
- const { user } = useAuth();
- const {
- createdPlaylists,
- isLoading: playlistsLoading,
- refreshPlaylists,
- } = useCreatedPlaylists();
- const navigate = useNavigate();
- const { play, currentSong } = usePlayer();
- const [recentlyListened, setRecentlyListened] = useState
- {/* Song info */}
-
-
- {
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
-
- {/* Now playing indicator */}
-
-
- - {currentSong.title} -
-- {currentSong.artist} -
-
-
-
- {/* Controls */}
-
-
-
-
-
-
-
- Playing
-
-
- {/* Expand - shows fullscreen to allow seeking */}
-
-
- {/* Close */}
-
-
-
-
-
-
- {/* Sidebar Header */}
-
-
-
-
- {/* Loading State */}
- {isLoading ? (
- Library
- -
-
-
- ) : (
- <>
- {/* Recently Listened */}
-
-
-
- {/* Playlists */}
- - Recently Played -
-
- {recentlyListened.map((song) => (
-
-
- {
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
- ))}
-
-
- {song.link && (
-
- )}
- navigate(`/songs/${song.id}`)} - className="text-sm font-medium text-white truncate hover:underline cursor-pointer" - > - {song.title} -
-
- {
- e.stopPropagation();
- if (song.artistUsername) {
- navigate(`/users/${song.artistUsername}`);
- }
- }}
- className={`truncate ${
- song.artistUsername
- ? "hover:underline cursor-pointer hover:text-white"
- : ""
- }`}
- >
- {song.artist}
-
- {song.album && (
- <>
- •
- {
- e.stopPropagation();
- if (song.albumId) {
- navigate(
- `/collection/album/${song.albumId}`,
- );
- }
- }}
- className={`truncate ${
- song.albumId
- ? "hover:underline cursor-pointer hover:text-white"
- : ""
- }`}
- >
- {song.album}
-
-
- )}
-
-
-
-
- )}
- - Your Playlists -
-
- {createdPlaylists?.map((playlist) => (
-
- {
- navigate(`/collection/playlist/${playlist.id}`);
- }}
- className="flex items-center justify-between p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors"
- >
-
- ))}
-
- {/* Create Playlist Button */}
-
-
-
-
-
-
-
-
- - {playlist.name} -
-- {playlist.songCount} songs -
- navigate(`/songs/${song.id}`)}
- onMouseEnter={() => {
- if (onDropdownToggle && !playlistOpen) {
- onDropdownToggle(null);
- }
- }}
- className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group"
- >
- {/* Optional index */}
- {index != null && (
-
- {index}
-
- )}
-
- {/* Cover */}
- 
{
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
- {/* Title & subtitle */}
-
- );
-};
-
-export default SongItem;
Index: ontend/src/components/playlist/CreatePlaylistModal.tsx
===================================================================
--- frontend/src/components/playlist/CreatePlaylistModal.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,174 +1,0 @@
-import { useState, useEffect } from "react";
-import { toast } from "react-toastify";
-import axiosInstance from "../../api/axiosInstance";
-import type { CreatePlaylistModalProps } from "../../utils/types";
-
-const CreatePlaylistModal = ({
- isOpen,
- onClose,
- onSuccess,
- songId,
-}: CreatePlaylistModalProps) => {
- const [playlistName, setPlaylistName] = useState("");
- const [isClosing, setIsClosing] = useState(false);
- const [isOpening, setIsOpening] = useState(false);
- const [isSubmitting, setIsSubmitting] = useState(false);
- const [error, setError] = useState("");
-
- useEffect(() => {
- if (isOpen) {
- setIsClosing(false);
- setPlaylistName("");
- setError("");
- setIsOpening(true);
- setTimeout(() => setIsOpening(false), 10);
- }
- }, [isOpen]);
-
- const handleClose = () => {
- setIsClosing(true);
- setTimeout(() => {
- onClose();
- setIsClosing(false);
- }, 200);
- };
-
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
- if (!playlistName.trim() || isSubmitting) return;
-
- setIsSubmitting(true);
- try {
- await axiosInstance.post("/playlists", null, {
- params: {
- playlistName: playlistName.trim(),
- ...(songId != null && { songId }),
- },
- });
-
- toast.success("Playlist created successfully!");
- await onSuccess();
- handleClose();
- } catch (err: any) {
- setError(err?.response?.data?.error || "Failed to create playlist");
- } finally {
- setIsSubmitting(false);
- }
- };
-
- if (!isOpen && !isClosing) return null;
-
- return (
-
-
-
- {/* Role badge (artist contributions) */}
- {role && (
-
- {role.replace("_", " ")}
-
- )}
-
- {/* Genre */}
- {song.genre && (
-
- {song.genre}
-
- )}
-
- {/* Play button */}
- {song.link && (
-
- )}
-
- {/* Like button */}
- {user && onLikeToggle && (
-
- )}
-
- {/* Three-dot menu */}
- {user && (
- - {song.title} -
- {subtitle && ( -{subtitle}
- )} -
-
-
- setPlaylistOpen(false)}
- position={dropdownPosition}
- usePortal={true}
- direction={dropdownDirection}
- />
-
- )}
-
- {/* Three-dot menu */}
-
-
- );
-};
-
-export default CreatePlaylistModal;
Index: ontend/src/components/playlist/PlaylistDropdown.tsx
===================================================================
--- frontend/src/components/playlist/PlaylistDropdown.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,267 +1,0 @@
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import axiosInstance from "../../api/axiosInstance";
-import { useCreatedPlaylists } from "../../context/playlistContext";
-import CreatePlaylistModal from "./CreatePlaylistModal";
-
-interface PlaylistDropdownProps {
- songId: number;
- isOpen: boolean;
- onClose: () => void;
- position?: { top: number; left: number };
-
- usePortal?: boolean;
-
- direction?: "above" | "below";
-}
-
-const PlaylistDropdown = ({
- songId,
- isOpen,
- onClose,
- position,
- usePortal = false,
- direction = "above",
-}: PlaylistDropdownProps) => {
- const { createdPlaylists, refreshPlaylists } = useCreatedPlaylists();
- const [containingPlaylistIds, setContainingPlaylistIds] = useState e.stopPropagation()}
- >
-
-
-
-
-
- Create Playlist
- - e.stopPropagation()}
- >
-
- );
-
- const dropdown = dropdownContent
- ? usePortal
- ? createPortal(dropdownContent, document.body)
- : dropdownContent
- : null;
-
- return (
- <>
- {dropdown}
- {createPortal(
-
- Add to playlist
-
-
- {loading ? (
-
-
-
- ) : createdPlaylists && createdPlaylists.length > 0 ? (
- createdPlaylists.map((playlist) => {
- const isProcessing = processingIds.has(playlist.id);
- const isChecked = containingPlaylistIds.includes(playlist.id);
-
- return (
-
- );
- })
- ) : (
-
- No playlists created
-
- )}
-
-
- navigate(`/collection/album/${album.id}`)}
- className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group"
- >
- 
{
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
- );
-};
-
-export default AlbumResult;
Index: ontend/src/components/search/SongResult.tsx
===================================================================
--- frontend/src/components/search/SongResult.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,26 +1,0 @@
-import axiosInstance from "../../api/axiosInstance";
-import type { Song } from "../../utils/types";
-import SongItem from "../SongItem";
-
-interface SongResultProps {
- song: Song;
- /** Propagate like state change upward if needed */
- onLikeToggled?: (songId: number, isLiked: boolean) => void;
-}
-
-const SongResult = ({ song, onLikeToggled }: SongResultProps) => {
- const handleLike = async (songId: number) => {
- try {
- const response = await axiosInstance.post(
- `/musical-entity/${songId}/like`,
- );
- onLikeToggled?.(songId, response.data.isLiked);
- } catch (err) {
- console.error("Error toggling like:", err);
- }
- };
-
- return
-
-
- {album.genre}
-
- {album.title}
-- Album • {album.releasedBy} -
- navigate(`/users/${user.username}`)}
- className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group"
- >
- {user.profilePhoto ? (
- 
- ) : (
-
- );
-};
-
-export default UserResult;
Index: ontend/src/components/userProfile/ArtistView.tsx
===================================================================
--- frontend/src/components/userProfile/ArtistView.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,158 +1,0 @@
-import { Disc3, Music } from "lucide-react";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
-import axiosInstance, { baseURL } from "../../api/axiosInstance";
-import type { ArtistContribution } from "../../utils/types";
-import SongItem from "../SongItem";
-import { useAuth } from "../../context/authContext";
-
-interface ArtistViewProps {
- contributions: ArtistContribution[];
-}
-
-const ArtistView = ({ contributions }: ArtistViewProps) => {
- const navigate = useNavigate();
- const [items, setItems] = useState(contributions);
- const [openDropdownSongId, setOpenDropdownSongId] = useState
-
- {user.username.charAt(0).toUpperCase()}
-
-
- )}
-
-
- {user.fullName}
-- {label} • @{user.username} -
-
- {albums.length > 0 && (
-
- );
-};
-
-export default ArtistView;
Index: ontend/src/components/userProfile/ListenerView.tsx
===================================================================
--- frontend/src/components/userProfile/ListenerView.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,380 +1,0 @@
-import { Album, Bookmark, Heart, ListMusic, Music, Trash2 } from "lucide-react";
-import { useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { toast } from "react-toastify";
-import axiosInstance, { baseURL } from "../../api/axiosInstance";
-import type { MusicalEntity, Playlist } from "../../utils/types";
-import SongItem from "../SongItem";
-import { useAuth } from "../../context/authContext";
-import { useCreatedPlaylists } from "../../context/playlistContext";
-
-interface ListenerViewProps {
- likedEntities: MusicalEntity[] | [];
- createdPlaylists: Playlist[] | [];
- savedPlaylists: Playlist[] | [];
-}
-
-const ListenerView = ({
- likedEntities,
- createdPlaylists,
- savedPlaylists,
-}: ListenerViewProps) => {
- const navigate = useNavigate();
- const { refreshPlaylists } = useCreatedPlaylists();
- const { username: usernameParam } = useParams();
- const { user: currentUser } = useAuth();
- const [items, setItems] = useState(likedEntities);
- const [createdItems, setCreatedItems] = useState(createdPlaylists);
- const [savedItems, setSavedItems] = useState(savedPlaylists);
- const [openDropdownSongId, setOpenDropdownSongId] = useState
-
- )}
-
- {songs.length > 0 && (
-
-
- Albums
-
- {albums.map((album) => (
-
- navigate(`/collection/album/${album.id}`)}
- >
-
- ))}
-
- {
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
-
-
-
-
-
- {album.role.replace("_", " ")}
-
-
- - {album.title} -
-
-
- )}
-
- {contributions.length === 0 && (
-
-
- Songs
-
- {songs.map((song) => (
- handleLike(song.id, song.title)}
- isDropdownOpen={openDropdownSongId === song.id}
- onDropdownToggle={setOpenDropdownSongId}
- />
- ))}
-
-
-
- )}
- No contributions yet
-Start creating music to see it here
-
- {createdItems && createdItems.length > 0 && (
-
-
- )}
-
- {savedItems && savedItems.length > 0 && (
-
-
- )}
-
- {likedSongs && likedSongs.length > 0 && (
-
-
- )}
-
- {likedAlbums && likedAlbums.length > 0 && (
-
-
- )}
-
- {likedEntities &&
- likedEntities.length === 0 &&
- (!createdItems || createdItems.length === 0) &&
- (!savedItems || savedItems.length === 0) && (
-
- );
-};
-
-export default ListenerView;
Index: ontend/src/components/userProfile/UserListModal.tsx
===================================================================
--- frontend/src/components/userProfile/UserListModal.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,98 +1,0 @@
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { baseURL } from "../../api/axiosInstance";
-import { useAuth } from "../../context/authContext";
-import type { BaseNonAdminUser } from "../../utils/types";
-
-interface ModalProps {
- title: string;
- users: BaseNonAdminUser[];
- onClose: () => void;
- onFollowToggle: (targetUsername: string) => Promise
-
-
- Created Playlists
- - ({createdItems.length}) - -
- {createdItems.map((playlist) => (
-
- navigate(`/collection/playlist/${playlist.id}`)}
- >
-
- ))}
-
- {
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
- {isOwnProfile ? (
-
- ) : (
- currentUser?.username != playlist.creatorUsername && (
-
- )
- )}
-
- - {playlist.name} -
-- {playlist.creatorName} -
-
-
-
- Saved Playlists
- ({savedItems.length}) -
- {savedItems.map((playlist) => (
-
- navigate(`/collection/playlist/${playlist.id}`)}
- >
-
- ))}
-
- {
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
- {currentUser?.username != playlist.creatorUsername && (
-
- )}
-
- - {playlist.name} -
-- {playlist.creatorName} -
-
-
-
- Liked Songs
- - ({likedSongs?.length}) - -
- {likedSongs.map((song, index) => (
- handleLike(song.id, song.title)}
- isDropdownOpen={openDropdownSongId === song.id}
- onDropdownToggle={setOpenDropdownSongId}
- />
- ))}
-
-
-
-
- Liked Albums
- - ({likedAlbums.length}) - -
- {likedAlbums.map((album) => (
-
- navigate(`/collection/album/${album.id}`)}
- >
-
- ))}
-
- {
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
-
-
- - {album.title} -
-- {album.releasedBy} -
-
-
- )}
- Nothing here yet
-- Start exploring music to build your collection -
-
-
- );
-};
-
-export default UserListModal;
Index: ontend/src/context/authContext.tsx
===================================================================
--- frontend/src/context/authContext.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,63 +1,0 @@
-import {
- createContext,
- useContext,
- useEffect,
- useState,
- type Dispatch,
- type ReactNode,
- type SetStateAction,
-} from "react";
-import axiosInstance, {
- refreshTokenMethod,
- scheduleTokenRefresh,
-} from "../api/axiosInstance";
-import { type User } from "../utils/types";
-
-interface AuthContextType {
- user: User | undefined;
- setUser: Dispatch
-
-
-
-
-
- {title}
- -
- {users.length === 0 ? (
-
- No users found.
- ) : ( - users.map((u) => ( -
-
- ))
- )}
- {
- onClose();
- navigate(`/users/${u.username}`);
- }}
- >
-
- {user && user.username !== u.username && (
-
- )}
-
- {u.profilePhoto ? (
- 
- ) : (
-
- {u.fullName.charAt(0)}
-
- )}
-
-
-
- {u.fullName}
-@{u.username}
-
-
- );
- }
-
- return (
- Error
-{error}
-
-
- );
-};
-
-export default AllUsers;
Index: ontend/src/pages/LandingPage.tsx
===================================================================
--- frontend/src/pages/LandingPage.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,504 +1,0 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import axiosInstance, { baseURL } from "../api/axiosInstance";
-import PlaylistDropdown from "../components/playlist/PlaylistDropdown";
-import AlbumResult from "../components/search/AlbumResult";
-import SongResult from "../components/search/SongResult";
-import UserResult from "../components/search/UserResult";
-import { useAuth } from "../context/authContext";
-import { usePlayer } from "../context/playerContext";
-import type {
- Album,
- BaseNonAdminUser,
- SearchCategory,
- Song,
-} from "../utils/types";
-import { toEmbedUrl } from "../utils/utils";
-
-const CATEGORIES: { value: SearchCategory; label: string }[] = [
- { value: "songs", label: "Songs" },
- { value: "albums", label: "Albums" },
- { value: "artists", label: "Artists" },
- { value: "users", label: "Users" },
-];
-
-const LandingPage = () => {
- const navigate = useNavigate();
- const { play, currentSong } = usePlayer();
- const { user } = useAuth();
- const [songs, setSongs] = useStateAll Users
- - -
- {users.map((u) => (
-
- handleUserClick(u.username)}
- className="bg-white shadow-md rounded-lg p-4 hover:shadow-lg hover:bg-gray-50 cursor-pointer transition-all"
- >
-
- ))}
- {u.fullName}
-@{u.username}
-
-
-
- );
- }
-
- if (searchResults.length === 0) {
- return (
-
-
- );
- }
-
- return (
- - No {searchCategory} found for "{activeQuery}" -
-
- {searchResults.map((result, index) => {
- switch (searchCategory) {
- case "songs":
- return (
-
- );
- };
-
- return (
-
-
- );
-};
-
-export default LandingPage;
Index: ontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,109 +1,0 @@
-import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
-import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
-import { useAuth } from "../context/authContext";
-import type { User } from "../utils/types";
-
-const Login = () => {
- const [username, setUsername] = useState("");
- const [password, setPassword] = useState("");
- const [error, setError] = useState
-
-
-
-
- {/* Search Bar */}
-
-
-
-
- {/* Search Results Section */}
- {hasSearched ? (
-
- {/* Category Dropdown */}
-
-
- {/* Search Input */}
- setSearchInput(e.target.value)}
- onKeyDown={handleKeyDown}
- className="flex-1 bg-[#282828] border border-white/10 border-r-0 py-2 px-4 text-white focus:outline-none focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954] transition-all"
- />
-
- {/* Search Button */}
-
-
-
-
- ) : (
- /* Default song grid */
- <>
-
-
-
- {/* Quick category switch buttons */}
- - Results for "{activeQuery}" -
- -
- {CATEGORIES.map((cat) => (
-
- ))}
-
-
- {/* Results list */}
-
- {renderResults()}
-
-
-
-
- {loading ? (
- - Top Songs -
-- Listen to the newest tracks on FinkWave -
-
-
-
- ) : (
- Loading songs...
-
- {songs.map((song) => (
-
- )}
-
- )}
- navigate(`/songs/${song.id}`)}
- onMouseEnter={() => {
- if (
- openPlaylistDropdown !== null &&
- openPlaylistDropdown !== song.id
- ) {
- setOpenPlaylistDropdown(null);
- }
- }}
- className="bg-[#282828] rounded-xl cursor-pointer shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-2 hover:shadow-2xl group relative"
- >
-
- ))}
-
- {
- (e.target as HTMLImageElement).src =
- "/favicon.png";
- }}
- />
-
-
- {song.link ? (
-
- ) : (
-
-
- ▶
-
- )}
-
-
- - {song.title} -
- {song.album && ( -{ - e.stopPropagation(); - if (song.albumId) { - navigate(`/collection/album/${song.albumId}`); - } - }} - className={`text-sm text-gray-400 mb-3 overflow-hidden text-ellipsis whitespace-nowrap ${ - song.albumId - ? "hover:underline cursor-pointer hover:text-white" - : "" - }`} - > - {song.album} -
- )} -{ - e.stopPropagation(); - if (song.artistUsername) { - navigate(`/users/${song.artistUsername}`); - } - }} - className={`text-sm text-gray-400 mb-3 overflow-hidden text-ellipsis whitespace-nowrap ${ - song.artistUsername - ? "hover:underline cursor-pointer hover:text-white" - : "" - }`} - > - {song.releasedBy} -
- {user && ( -
- {/* Like button */}
-
-
- {/* Add to playlist button */}
-
- )}
-
-
-
- setOpenPlaylistDropdown(null)}
- direction="above"
- />
-
-
-
- );
-};
-
-export default Login;
Index: ontend/src/pages/MusicalCollection.tsx
===================================================================
--- frontend/src/pages/MusicalCollection.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,257 +1,0 @@
-import { useEffect, useState } from "react";
-import { Link, useParams } from "react-router-dom";
-import axiosInstance, { baseURL } from "../api/axiosInstance";
-import SongItem from "../components/SongItem";
-import { getErrorMessage } from "../utils/error";
-import type { Album, Playlist, Song } from "../utils/types";
-interface CollectionView {
- id: number;
- title: string;
- cover?: string | null;
- genre?: string;
- type: string;
- releasedBy: string;
- isLikedByCurrentUser?: boolean;
- songs: Song[];
-}
-
-const MusicalCollection = () => {
- const { type, id } = useParams();
- const [collection, setCollection] = useState
-
-
-
-
-
- - Welcome Back -
-Log in to continue to FinkWave
-
-
- );
- }
-
- if (error) {
- return (
-
-
-
- Loading collection…
-
-
- );
- }
-
- if (!collection) return null;
-
- return (
-
-
- {error}
- - ← Back to Home - -
-
- );
-};
-
-export default MusicalCollection;
Index: ontend/src/pages/MySongs.tsx
===================================================================
--- frontend/src/pages/MySongs.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,257 +1,0 @@
-import { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import axiosInstance, { baseURL } from "../api/axiosInstance";
-import { useAuth } from "../context/authContext";
-import type { CatalogItem } from "../utils/types";
-
-const MySongs = () => {
- const { user } = useAuth();
- const navigate = useNavigate();
- const [artistCatalog, setArtistCatalog] = useState
- {/* Back link */}
-
-
- Back to Home
-
-
- {/* Hero section */}
-
-
- {/* Cover art */}
-
-
- {/* Songs list */}
-
-
-
- {/* Collection info */}
-
- {
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
-
-
- {collection.genre ? `${collection.genre} • ` : ""}
- {collection.type === "PLAYLIST" ? "Playlist" : "Album"}
-
-
- - {collection.title} -
- -- {collection.releasedBy} -
- - {collection.songs && ( -- {collection.songs.length} song - {collection.songs.length !== 1 ? "s" : ""} -
- )} - - {/* Action buttons */} -
- {type === "album" && (
-
- )}
-
-
-
- Songs
- - {collection.songs && collection.songs.length > 0 ? ( -
- {collection.songs.map((song, index) => (
- toggleLike(song.id)}
- isDropdownOpen={openDropdownSongId === song.id}
- onDropdownToggle={setOpenDropdownSongId}
- />
- ))}
-
- ) : (
-
-
- )}
- No songs available
-
-
- );
- }
-
- if (loading) {
- return (
-
-
- - You need to be an artist to access this page. -
- - ← Back to Home - -
-
- );
- }
-
- return (
-
-
-
- Loading your music…
-
-
- );
-};
-
-export default MySongs;
Index: ontend/src/pages/Nav.tsx
===================================================================
--- frontend/src/pages/Nav.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,156 +1,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Link } from "react-router-dom";
-import { toast } from "react-toastify";
-import axiosInstance, { baseURL } from "../api/axiosInstance";
-import Logo from "../assets/logo-finkwave.png";
-import { useAuth } from "../context/authContext";
-
-interface NavProps {
- isSidebarOpen?: boolean;
- onToggleSidebar?: () => void;
-}
-
-const Nav = ({ isSidebarOpen = false, onToggleSidebar }: NavProps) => {
- const { user, setUser, isAuthLoading } = useAuth();
- const [isDropdownOpen, setIsDropdownOpen] = useState(false);
- const dropdownRef = useRef
- {/* Header */}
-
-
-
-
- {/* Tabs */}
-
-
-
- My Music
-Manage your songs and albums
-
-
-
-
-
- {/* Content */}
- {activeTab === "singles" ? (
-
- {artistCatalog.filter((item) => item.type === "SONG").length ===
- 0 ? (
-
- ) : (
-
-
-
- ) : (
- artistCatalog
- .filter((item) => item.type === "SONG")
- .map((song, index) => (
- - You haven't published any singles yet -
- -
-
- {index + 1}
-
- {
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
- ))
- )}
-
-
- {song.title}
-
-
- {song.genre}
-{song.releaseDate}
-
- {artistCatalog.filter((item) => item.type === "ALBUM").length ===
- 0 ? (
-
- )}
-
-
-
- ) : (
- artistCatalog
- .filter((item) => item.type === "ALBUM")
- .map((album) => (
-
- - You haven't published any albums yet -
- -
- {
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
-
-
-
-
-
- - {album.title} -
-{album.genre}
-{album.releaseDate}
- - )) - )} -
-
- );
-};
-
-export default Nav;
Index: ontend/src/pages/PublishSong.tsx
===================================================================
--- frontend/src/pages/PublishSong.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,1041 +1,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
-import axiosInstance from "../api/axiosInstance";
-import { useAuth } from "../context/authContext";
-import { GENRE_OPTIONS, ROLE_OPTIONS } from "../utils/consts";
-import type {
- ArtistSearchResult,
- Contributor,
- SongEntry,
-} from "../utils/types";
-
-const MAX_CONTRIBUTORS = 5;
-const MAX_ALBUM_SONGS = 20;
-
-const PublishSong = () => {
- const { user } = useAuth();
- const navigate = useNavigate();
-
- // Form state
- const [releaseType, setReleaseType] = useState<"single" | "album">("single");
- const [title, setTitle] = useState("");
- const [genre, setGenre] = useState("");
- const [link, setLink] = useState("");
- const [coverFile, setCoverFile] = useState
- {onToggleSidebar && user && (
-
- )}
-
- 
-
-
-
-
- {!isAuthLoading && (
-
-
- {user?.isArtist && (
-
- My Songs
-
- )}
- {user ? (
-
- )}
-
-
-
- {isDropdownOpen && (
-
- ) : (
-
- setIsDropdownOpen(false)}
- >
- Account
-
-
-
- )}
-
-
- Login
-
-
- Register
-
-
- )}
-
-
- );
- }
-
- return (
-
-
- - You need to be an artist to publish music. -
- - ← Back to Home - -
-
- );
-};
-
-export default PublishSong;
Index: ontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,359 +1,0 @@
-import { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
-import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
-import { useAuth } from "../context/authContext";
-import type { User, UserRegisterType } from "../utils/types";
-
-const Register = () => {
- const { setUser } = useAuth();
- const [username, setUsername] = useState("");
- const [password, setPassword] = useState("");
- const [fullname, setFullname] = useState("");
- const [userType, setUserType] = useState
- {/* Back link */}
-
-
- Back to My Songs
-
-
- {/* Header */}
-
- Publish New Music
- - -
-
- );
-};
-
-export default Register;
Index: ontend/src/pages/SongDetail.tsx
===================================================================
--- frontend/src/pages/SongDetail.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
+++ (revision )
@@ -1,595 +1,0 @@
-import { useEffect, useState } from "react";
-import { Link, useParams } from "react-router-dom";
-import { toast } from "react-toastify";
-import axiosInstance, { baseURL } from "../api/axiosInstance";
-import PlaylistDropdown from "../components/playlist/PlaylistDropdown";
-import { useAuth } from "../context/authContext";
-import { usePlayer } from "../context/playerContext";
-import type { SongDetail as SongDetailType } from "../utils/types";
-import { toEmbedUrl } from "../utils/utils";
-
-const ROLE_LABELS: Record
-
-
-
-
-
- - Create Account -
-Join FinkWave and discover music
-
- {[1, 2, 3, 4, 5].map((star) => (
-
- ))}
-
- );
-};
-
-const SongDetail = () => {
- const { id } = useParams<{ id: string }>();
- const { user } = useAuth();
- const { play, currentSong } = usePlayer();
- const [song, setSong] = useState
-
- );
- }
-
- if (error || !song) {
- return (
-
-
-
- Loading song…
-
-
- );
- }
-
- const otherContributors = song.contributions.filter(
- (c) => c.artistName !== song.releasedBy,
- );
-
- const avgRating =
- song.reviews.length > 0
- ? (
- song.reviews.reduce((sum, r) => sum + r.grade, 0) /
- song.reviews.length
- ).toFixed(1)
- : null;
-
- return (
-
-
- - {error ?? "Song not found"} -
- - ← Back to Home - -
-
- {/* Back link */}
-
-
- Back to Home
-
-
- {/* Hero section */}
-
-
- )}
-
- {/* Reviews */}
-
-
-
-
- {/* Review Modal */}
- {showReviewModal && (
-
- {/* Cover art */}
-
-
- {/* Credits / Contributions */}
- {song.contributions.length > 0 && (
-
-
-
- {/* Song info */}
-
- {
- (e.target as HTMLImageElement).src = "/favicon.png";
- }}
- />
-
-
-
- {song.genre} • Song
-
-
- - {song.title} -
- - {/* Main artist */} -- {song.releasedBy} -
- - {/* Album */} - {song.album && ( -- Album: {song.album} -
- )} - - {/* Rating summary */} - {avgRating && ( -
- {renderStars(Math.round(Number(avgRating)))}
-
- {avgRating} · {song.reviews.length}{" "}
- {song.reviews.length === 1 ? "review" : "reviews"}
-
-
- )}
-
- {/* Action buttons */}
-
- {/* Play button */}
- {song.link && (
-
- )}
-
- {user && (
- <>
-
-
- {/* Add to Playlist button */}
-
-
-
-
- setShowPlaylistDropdown(false)}
- direction="below"
- />
-
-
- )}
- Credits
-
- {/* Main artist first */}
- {song.contributions
- .filter((c) => c.artistName === song.releasedBy)
- .map((c, i) => (
-
-
-
- ))}
-
- {/* Other contributors */}
- {otherContributors.map((c, i) => (
-
-
-
- {formatRole(c.role)}
-
-
- {c.artistName.charAt(0).toUpperCase()}
-
-
-
- - {c.artistName} -
-
-
- ))}
-
-
-
- {formatRole(c.role)}
-
-
- {c.artistName.charAt(0).toUpperCase()}
-
- {c.artistName}
-
-
-
- {song.reviews.length === 0 ? (
- - Reviews - {song.reviews.length > 0 && ( - - ({song.reviews.length}) - - )} -
- {user != null && ( - - )} -
-
- ) : (
- No reviews yet.
-- Be the first to share your thoughts! -
-
- {song.reviews.map((review) => (
-
- )}
-
-
- ))}
-
-
-
-
- {user?.username === review.authorUsername && (
-
- )}
-
-
- {review.author.charAt(0).toUpperCase()}
-
-
-
-
- - {review.author} -
- {renderStars(review.grade)} -- {review.comment} -
-
-
-
-
-
- {/* Star Rating */}
- Add Review
- -
-
-
-
- {/* Comment */}
-
- {[1, 2, 3, 4, 5].map((star) => (
-
- ))}
-
-
-
-