Index: frontend/src/App.tsx =================================================================== --- frontend/src/App.tsx (revision 765e166b79bd65b570078fd2d0b5b84754b04258) +++ frontend/src/App.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e) @@ -13,5 +13,5 @@ import { useAuth } from "./context/authContext"; import { usePlayer } from "./context/playerContext"; -import AllUsers from "./pages/AllUsers"; +// import AllUsers from "./pages/AllUsers"; import LandingPage from "./pages/LandingPage"; import Login from "./pages/Login"; @@ -95,8 +95,8 @@ element: , }, - { - path: "/users", - element: , - }, + // { + // path: "/users", + // element: , + // }, { path: "/users/:username", Index: frontend/src/components/Sidebar.tsx =================================================================== --- frontend/src/components/Sidebar.tsx (revision 765e166b79bd65b570078fd2d0b5b84754b04258) +++ frontend/src/components/Sidebar.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e) @@ -5,276 +5,276 @@ 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 { useCreatedPlaylists } from "../context/playlistContext"; import CreatePlaylistModal from "./playlist/CreatePlaylistModal"; -import { getErrorMessage } from "../utils/error"; 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([]); - const [songsLoading, setSongsLoading] = useState(false); - const [isModalOpen, setIsModalOpen] = useState(false); - - useEffect(() => { - const fetchData = async () => { - setSongsLoading(true); - try { - const data = await axiosInstance.get("/songs/recent"); - setRecentlyListened(data.data); - } catch (error) { - toast.error(getErrorMessage(error)); - } finally { - setSongsLoading(false); - } - }; - if (user) { - fetchData(); - } else { - setRecentlyListened([]); - setSongsLoading(false); - } - }, [user]); - - const isLoading = songsLoading || playlistsLoading; - - return ( - <> -
-
- {/* Sidebar Header */} -
-

Library

- -
- - {/* Loading State */} - {isLoading ? ( -
-
-
- ) : ( - <> - {/* Recently Listened */} -
-

- Recently Played -

-
- {recentlyListened.map((song) => ( -
- {song.title} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> -
-

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} - - - )} -
-
- {song.link && ( - - )} -
- ))} -
-
- - {/* Playlists */} -
-

- 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" - > -
-
- - - -
-
-

- {playlist.name} -

-

- {playlist.songCount} songs -

-
-
-
- ))} - - {/* Create Playlist Button */} - -
-
- - )} -
-
- - setIsModalOpen(false)} - onSuccess={() => refreshPlaylists(false)} - songId={null} - /> - - ); + const { user } = useAuth(); + const { + createdPlaylists, + isLoading: playlistsLoading, + refreshPlaylists, + } = useCreatedPlaylists(); + const navigate = useNavigate(); + const { play, currentSong } = usePlayer(); + const [recentlyListened, setRecentlyListened] = useState([]); + const [songsLoading, setSongsLoading] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + + useEffect(() => { + const fetchData = async () => { + setSongsLoading(true); + try { + const data = await axiosInstance.get("/songs/recent"); + setRecentlyListened(data.data); + } catch (error) { + toast.error(getErrorMessage(error)); + } finally { + setSongsLoading(false); + } + }; + if (user) { + fetchData(); + } else { + setRecentlyListened([]); + setSongsLoading(false); + } + }, [user]); + + const isLoading = songsLoading || playlistsLoading; + + return ( + <> +
+
+ {/* Sidebar Header */} +
+

Library

+ +
+ + {/* Loading State */} + {isLoading ? ( +
+
+
+ ) : ( + <> + {/* Recently Listened */} +
+

+ Recently Played +

+
+ {recentlyListened.map((song) => ( +
+ {song.title} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> +
+

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} + + + )} +
+
+ {song.link && ( + + )} +
+ ))} +
+
+ + {/* Playlists */} +
+

+ 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" + > +
+
+ + + +
+
+

+ {playlist.name} +

+

+ {playlist.songCount} songs +

+
+
+
+ ))} + + {/* Create Playlist Button */} + +
+
+ + )} +
+
+ + setIsModalOpen(false)} + onSuccess={() => refreshPlaylists(false)} + songId={null} + /> + + ); }; Index: frontend/src/components/userProfile/UserListModal.tsx =================================================================== --- frontend/src/components/userProfile/UserListModal.tsx (revision 765e166b79bd65b570078fd2d0b5b84754b04258) +++ frontend/src/components/userProfile/UserListModal.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e) @@ -1,97 +1,97 @@ +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"; -import { useEffect } from "react"; -import { useAuth } from "../../context/authContext"; interface ModalProps { - title: string; - users: BaseNonAdminUser[]; - onClose: () => void; - onFollowToggle: (targetUsername: string) => Promise; + title: string; + users: BaseNonAdminUser[]; + onClose: () => void; + onFollowToggle: (targetUsername: string) => Promise; } const UserListModal = ({ - title, - users, - onClose, - onFollowToggle, + title, + users, + onClose, + onFollowToggle, }: ModalProps) => { - const navigate = useNavigate(); - const { user } = useAuth(); - useEffect(() => { - document.body.style.overflow = "hidden"; - return () => { - document.body.style.overflow = ""; - }; - }, []); + const navigate = useNavigate(); + const { user } = useAuth(); + useEffect(() => { + document.body.style.overflow = "hidden"; + return () => { + document.body.style.overflow = ""; + }; + }, []); - return ( -
-
-
-

{title}

- -
+ return ( +
+
+
+

{title}

+ +
-
- {users.length === 0 ? ( -

No users found.

- ) : ( - users.map((u) => ( -
-
{ - onClose(); - navigate(`/users/${u.username}`); - }} - > -
- {u.profilePhoto ? ( - - ) : ( - - {u.fullName.charAt(0)} - - )} -
-
-

{u.fullName}

-

@{u.username}

-
-
- {user && ( - - )} -
- )) - )} -
-
-
-
- ); +
+ {users.length === 0 ? ( +

No users found.

+ ) : ( + users.map((u) => ( +
+
{ + onClose(); + navigate(`/users/${u.username}`); + }} + > +
+ {u.profilePhoto ? ( + + ) : ( + + {u.fullName.charAt(0)} + + )} +
+
+

{u.fullName}

+

@{u.username}

+
+
+ {user && user.username !== u.username && ( + + )} +
+ )) + )} +
+
+
+
+ ); }; Index: frontend/src/pages/LandingPage.tsx =================================================================== --- frontend/src/pages/LandingPage.tsx (revision 765e166b79bd65b570078fd2d0b5b84754b04258) +++ frontend/src/pages/LandingPage.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e) @@ -6,498 +6,498 @@ 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, + Album, + BaseNonAdminUser, + SearchCategory, + Song, } from "../utils/types"; import { toEmbedUrl } from "../utils/utils"; -import { useAuth } from "../context/authContext"; const CATEGORIES: { value: SearchCategory; label: string }[] = [ - { value: "songs", label: "Songs" }, - { value: "albums", label: "Albums" }, - { value: "artists", label: "Artists" }, - { value: "users", label: "Users" }, + { 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] = useState([]); - const [loading, setLoading] = useState(true); - - const [searchInput, setSearchInput] = useState(""); - const [activeQuery, setActiveQuery] = useState(""); - const [searchCategory, setSearchCategory] = useState("songs"); - const [searchResults, setSearchResults] = useState([]); - const [searchLoading, setSearchLoading] = useState(false); - const [hasSearched, setHasSearched] = useState(false); - - const [openPlaylistDropdown, setOpenPlaylistDropdown] = useState< - number | null - >(null); - - useEffect(() => { - const fetchSongs = async () => { - try { - const response = await axiosInstance.get("/songs/top"); - setSongs(response.data); - } catch (error) { - console.error("Error fetching songs:", error); - } finally { - setLoading(false); - } - }; - fetchSongs(); - }, []); - - const toggleLike = async (songId: number) => { - try { - await axiosInstance.post(`/musical-entity/${songId}/like`); - setSongs((prevSongs) => - prevSongs.map((song) => - song.id === songId - ? { ...song, isLikedByCurrentUser: !song.isLikedByCurrentUser } - : song, - ), - ); - } catch (error) { - console.error("Error toggling like:", error); - } - }; - - const togglePlaylistDropdown = (songId: number) => { - if (openPlaylistDropdown === songId) { - setOpenPlaylistDropdown(null); - } else { - setOpenPlaylistDropdown(songId); - } - }; - - const performSearch = async (query: string, category: SearchCategory) => { - if (!query.trim()) return; - - setSearchLoading(true); - setHasSearched(true); - setActiveQuery(query); - setSearchCategory(category); - - try { - let endpoint = ""; - switch (category) { - case "songs": - endpoint = `/songs/search?q=${encodeURIComponent(query)}`; - break; - case "albums": - endpoint = `/albums/search?q=${encodeURIComponent(query)}`; - break; - case "artists": - endpoint = `/users/search?type=ARTIST&q=${encodeURIComponent(query)}`; - break; - case "users": - endpoint = `/users/search?type=LISTENER&q=${encodeURIComponent(query)}`; - break; - } - - const response = await axiosInstance.get(endpoint); - setSearchResults(response.data); - } catch (error) { - console.error("Search error:", error); - setSearchResults([]); - } finally { - setSearchLoading(false); - } - }; - - const handleSearch = () => { - performSearch(searchInput, searchCategory); - }; - - const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { - handleSearch(); - } - }; - - const handleCategorySwitch = (category: SearchCategory) => { - performSearch(activeQuery, category); - }; - - const clearSearch = () => { - setSearchInput(""); - setActiveQuery(""); - setHasSearched(false); - setSearchResults([]); - }; - - const renderResults = () => { - if (searchLoading) { - return ( -
-
-
- ); - } - - if (searchResults.length === 0) { - return ( -
-

- No {searchCategory} found for "{activeQuery}" -

-
- ); - } - - return ( -
- {searchResults.map((result, index) => { - switch (searchCategory) { - case "songs": - return ( - - ); - case "albums": - return ( - - ); - case "artists": - return ( - - ); - case "users": - return ( - - ); - } - })} -
- ); - }; - - return ( -
-
-
-
- {/* Search Bar */} -
-
- {/* 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 */} - -
-
- - {/* Search Results Section */} - {hasSearched ? ( -
-
-

- Results for "{activeQuery}" -

- -
- - {/* Quick category switch buttons */} -
- {CATEGORIES.map((cat) => ( - - ))} -
- - {/* Results list */} -
- {renderResults()} -
-
- ) : ( - /* Default song grid */ - <> -
-

- Top Songs -

-

- Listen to the newest tracks on FinkWave -

-
- - {loading ? ( -
-
-

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" - > -
- {song.title} { - (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" - /> -
-
- )} -
-
- ))} -
- )} - - )} -
-
-
-
- ); + const navigate = useNavigate(); + const { play, currentSong } = usePlayer(); + const { user } = useAuth(); + const [songs, setSongs] = useState([]); + const [loading, setLoading] = useState(true); + + const [searchInput, setSearchInput] = useState(""); + const [activeQuery, setActiveQuery] = useState(""); + const [searchCategory, setSearchCategory] = useState("songs"); + const [searchResults, setSearchResults] = useState([]); + const [searchLoading, setSearchLoading] = useState(false); + const [hasSearched, setHasSearched] = useState(false); + + const [openPlaylistDropdown, setOpenPlaylistDropdown] = useState< + number | null + >(null); + + useEffect(() => { + const fetchSongs = async () => { + try { + const response = await axiosInstance.get("/songs/top"); + setSongs(response.data); + } catch (error) { + console.error("Error fetching songs:", error); + } finally { + setLoading(false); + } + }; + fetchSongs(); + }, []); + + const toggleLike = async (songId: number) => { + try { + await axiosInstance.post(`/musical-entity/${songId}/like`); + setSongs((prevSongs) => + prevSongs.map((song) => + song.id === songId + ? { ...song, isLikedByCurrentUser: !song.isLikedByCurrentUser } + : song, + ), + ); + } catch (error) { + console.error("Error toggling like:", error); + } + }; + + const togglePlaylistDropdown = (songId: number) => { + if (openPlaylistDropdown === songId) { + setOpenPlaylistDropdown(null); + } else { + setOpenPlaylistDropdown(songId); + } + }; + + const performSearch = async (query: string, category: SearchCategory) => { + if (!query.trim()) return; + + setSearchLoading(true); + setHasSearched(true); + setActiveQuery(query); + setSearchCategory(category); + + try { + let endpoint = ""; + switch (category) { + case "songs": + endpoint = `/songs/search?q=${encodeURIComponent(query)}`; + break; + case "albums": + endpoint = `/albums/search?q=${encodeURIComponent(query)}`; + break; + case "artists": + endpoint = `/users/search?type=ARTIST&q=${encodeURIComponent(query)}`; + break; + case "users": + endpoint = `/users/search?type=LISTENER&q=${encodeURIComponent(query)}`; + break; + } + + const response = await axiosInstance.get(endpoint); + setSearchResults(response.data); + } catch (error) { + console.error("Search error:", error); + setSearchResults([]); + } finally { + setSearchLoading(false); + } + }; + + const handleSearch = () => { + performSearch(searchInput, searchCategory); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + handleSearch(); + } + }; + + const handleCategorySwitch = (category: SearchCategory) => { + performSearch(activeQuery, category); + }; + + const clearSearch = () => { + setSearchInput(""); + setActiveQuery(""); + setHasSearched(false); + setSearchResults([]); + }; + + const renderResults = () => { + if (searchLoading) { + return ( +
+
+
+ ); + } + + if (searchResults.length === 0) { + return ( +
+

+ No {searchCategory} found for "{activeQuery}" +

+
+ ); + } + + return ( +
+ {searchResults.map((result, index) => { + switch (searchCategory) { + case "songs": + return ( + + ); + case "albums": + return ( + + ); + case "artists": + return ( + + ); + case "users": + return ( + + ); + } + })} +
+ ); + }; + + return ( +
+
+
+
+ {/* Search Bar */} +
+
+ {/* 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 */} + +
+
+ + {/* Search Results Section */} + {hasSearched ? ( +
+
+

+ Results for "{activeQuery}" +

+ +
+ + {/* Quick category switch buttons */} +
+ {CATEGORIES.map((cat) => ( + + ))} +
+ + {/* Results list */} +
+ {renderResults()} +
+
+ ) : ( + /* Default song grid */ + <> +
+

+ Top Songs +

+

+ Listen to the newest tracks on FinkWave +

+
+ + {loading ? ( +
+
+

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" + > +
+ {song.title} { + (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" + /> +
+
+ )} +
+
+ ))} +
+ )} + + )} +
+
+
+
+ ); }; Index: frontend/src/pages/Nav.tsx =================================================================== --- frontend/src/pages/Nav.tsx (revision 765e166b79bd65b570078fd2d0b5b84754b04258) +++ frontend/src/pages/Nav.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e) @@ -56,5 +56,5 @@ - )} - - {user && ( - <> - - - {/* Add to Playlist button */} -
- - - setShowPlaylistDropdown(false)} - direction="below" - /> -
- - )} - - - - - {/* Credits / Contributions */} - {song.contributions.length > 0 && ( -
-

Credits

-
- {/* Main artist first */} - {song.contributions - .filter((c) => c.artistName === song.releasedBy) - .map((c, i) => ( -
-
-
- {c.artistName.charAt(0).toUpperCase()} -
-
-

- {c.artistName} -

-
-
- - {formatRole(c.role)} - -
- ))} - - {/* Other contributors */} - {otherContributors.map((c, i) => ( -
-
-
- {c.artistName.charAt(0).toUpperCase()} -
-

{c.artistName}

-
- - {formatRole(c.role)} - -
- ))} -
-
- )} - - {/* Reviews */} -
-
-

- Reviews - {song.reviews.length > 0 && ( - - ({song.reviews.length}) - - )} -

- {user != null && ( - - )} -
- - {song.reviews.length === 0 ? ( -
-

No reviews yet.

-

- Be the first to share your thoughts! -

-
- ) : ( -
- {song.reviews.map((review) => ( -
-
-
-
- - {review.author.charAt(0).toUpperCase()} - -
-
-

- {review.author} -

- {renderStars(review.grade)} -
-
- {user?.username === review.authorUsername && ( - - )} -
-

- {review.comment} -

-
- ))} -
- )} -
- - - {/* Review Modal */} - {showReviewModal && ( -
-
-
-

Add Review

- -
- - {/* Star Rating */} -
- -
- {[1, 2, 3, 4, 5].map((star) => ( - - ))} -
-
- - {/* Comment */} -
- -