Changeset c8baad1 for frontend

Timestamp:

02/15/26 01:58:19 (5 months ago)

Author:

Dimitar Arsov <dimitararsov04@…>

Branches:

main

Children:

d1ee039

Parents:

ce45c7a

Message:

create playlists from sidebar

Location:

frontend/src

Files:

• components/Sidebar.tsx (modified) (2 diffs)
• components/SongItem.tsx (modified) (1 diff)
• components/playlist/CreatePlaylistModal.tsx (modified) (7 diffs)
• components/playlist/PlaylistDropdown.tsx (moved) (moved from frontend/src/components/PlaylistDropdown.tsx ) (1 diff)
• pages/LandingPage.tsx (modified) (1 diff)
• pages/SongDetail.tsx (modified) (1 diff)
• utils/types.ts (modified) (1 diff)

frontend/src/components/Sidebar.tsx

@@ -43 +43 @@
     }
   }, [user]);
-
-  const handleCreatePlaylist = async (playlistName: string) => {
-    try {
-      await axiosInstance.post("/playlists", { name: playlistName });
-      toast.success("Playlist created successfully!");
-      await refreshPlaylists(false);
-    } catch (error) {
-      toast.error(getErrorMessage(error));
-    }
-  };
 
   const isLoading = songsLoading || playlistsLoading;
@@ -282 +272 @@
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
-        onSubmit={handleCreatePlaylist}
+        onSuccess={() => refreshPlaylists(false)}
       />
     </>

frontend/src/components/SongItem.tsx

@@ -4 +4 @@
 import { usePlayer } from "../context/playerContext";
 import { toEmbedUrl } from "../utils/utils";
-import PlaylistDropdown from "./PlaylistDropdown";
+import PlaylistDropdown from "./playlist/PlaylistDropdown";
 
 export interface SongItemData {

frontend/src/components/playlist/CreatePlaylistModal.tsx

@@ -1 +1 @@
 import { useState, useEffect } from "react";
+import { toast } from "react-toastify";
+import axiosInstance from "../../api/axiosInstance";
 import type { CreatePlaylistModalProps } from "../../utils/types";
 
@@ -5 +7 @@
   isOpen,
   onClose,
-  onSubmit,
+  onSuccess,
 }: 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(() => {
@@ -15 +19 @@
       setIsClosing(false);
       setPlaylistName("");
+      setError("");
       setIsOpening(true);
       setTimeout(() => setIsOpening(false), 10);
@@ -28 +33 @@
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (playlistName.trim()) {
-      onSubmit(playlistName.trim());
+    if (!playlistName.trim() || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      await axiosInstance.post(
+        `/playlists?playlistName=${encodeURIComponent(playlistName.trim())}`,
+      );
+      toast.success("Playlist created successfully!");
+      onSuccess();
       handleClose();
+    } catch (err: any) {
+      setError(err?.response?.data?.error || "Failed to create playlist");
+    } finally {
+      setIsSubmitting(false);
     }
   };
@@ -88 +104 @@
               id="playlistName"
               autoFocus
-              className="w-full bg-[#282828] border border-white/10 rounded-lg py-3 px-4 text-white placeholder-gray-500 focus:outline-none focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954] transition-all"
+              className={`w-full bg-[#282828] border rounded-lg py-3 px-4 text-white placeholder-gray-500 focus:outline-none transition-all ${
+                error
+                  ? "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500"
+                  : "border-white/10 focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954]"
+              }`}
               placeholder="Enter playlist name"
               value={playlistName}
-              onChange={(e) => setPlaylistName(e.target.value)}
+              onChange={(e) => {
+                setPlaylistName(e.target.value);
+              }}
             />
+            <div
+              className={`overflow-hidden transition-all duration-200 ease-out ${
+                error ? "max-h-20 opacity-100 mt-2" : "max-h-0 opacity-0"
+              }`}
+            >
+              <p className="text-sm text-red-400 flex items-center gap-1.5">
+                <svg
+                  className="w-4 h-4 shrink-0"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                {error}
+              </p>
+            </div>
           </div>
 
@@ -99 +141 @@
               type="button"
               onClick={handleClose}
-              className="flex-1 py-3 bg-[#282828] rounded-full text-white font-semibold hover:bg-[#3a3a3a] transition-colors cursor-pointer"
+              disabled={isSubmitting}
+              className="flex-1 py-3 bg-[#282828] rounded-full text-white font-semibold hover:bg-[#3a3a3a] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
             >
               Cancel
@@ -105 +148 @@
             <button
               type="submit"
-              disabled={!playlistName.trim()}
-              className="flex-1 py-3 bg-[#1db954] rounded-full text-black font-semibold hover:bg-[#1ed760] transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-[#1db954] cursor-pointer"
+              disabled={!playlistName.trim() || isSubmitting}
+              className="flex-1 py-3 bg-[#1db954] rounded-full text-black font-semibold hover:bg-[#1ed760] transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-[#1db954] cursor-pointer flex items-center justify-center gap-2"
             >
-              Create
+              {isSubmitting ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-black/20 border-t-black rounded-full animate-spin"></div>
+                  Creating...
+                </>
+              ) : (
+                "Create"
+              )}
             </button>
           </div>

frontend/src/components/playlist/PlaylistDropdown.tsx

@@ -1 +1 @@
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import axiosInstance from "../api/axiosInstance";
-import { useCreatedPlaylists } from "../context/playlistContext";
+import axiosInstance from "../../api/axiosInstance";
+import { useCreatedPlaylists } from "../../context/playlistContext";
 
 interface PlaylistDropdownProps {

frontend/src/pages/LandingPage.tsx

@@ -2 +2 @@
 import { useNavigate } from "react-router-dom";
 import axiosInstance, { baseURL } from "../api/axiosInstance";
-import PlaylistDropdown from "../components/PlaylistDropdown";
+import PlaylistDropdown from "../components/playlist/PlaylistDropdown";
 import AlbumResult from "../components/search/AlbumResult";
 import SongResult from "../components/search/SongResult";

frontend/src/pages/SongDetail.tsx

@@ -3 +3 @@
 import { toast } from "react-toastify";
 import axiosInstance, { baseURL } from "../api/axiosInstance";
-import PlaylistDropdown from "../components/PlaylistDropdown";
+import PlaylistDropdown from "../components/playlist/PlaylistDropdown";
 import { useAuth } from "../context/authContext";
 import { usePlayer } from "../context/playerContext";

frontend/src/utils/types.ts

@@ -74 +74 @@
   isOpen: boolean;
   onClose: () => void;
-  onSubmit: (playlistName: string) => void;
+  onSuccess: () => void;
 }