Changeset d1ee039 for frontend/src/components/playlist

Timestamp:

02/15/26 23:28:14 (5 months ago)

Author:

Dimitar Arsov <dimitararsov04@…>

Branches:

main

Children:

615dcee, c807e22

Parents:

c8baad1

Message:

create new playlist, delete playlists and add song to playlist on playlist creation

Location:

frontend/src/components/playlist

Files:

• CreatePlaylistModal.tsx (modified) (2 diffs)
• PlaylistDropdown.tsx (modified) (15 diffs)

frontend/src/components/playlist/CreatePlaylistModal.tsx

@@ -8 +8 @@
   onClose,
   onSuccess,
+  songId,
 }: CreatePlaylistModalProps) => {
   const [playlistName, setPlaylistName] = useState("");
@@ -39 +40 @@
     setIsSubmitting(true);
     try {
-      await axiosInstance.post(
-        `/playlists?playlistName=${encodeURIComponent(playlistName.trim())}`,
-      );
+      await axiosInstance.post("/playlists", null, {
+        params: {
+          playlistName: playlistName.trim(),
+          ...(songId != null && { songId }),
+        },
+      });
+
       toast.success("Playlist created successfully!");
-      onSuccess();
+      await onSuccess();
       handleClose();
     } catch (err: any) {

frontend/src/components/playlist/PlaylistDropdown.tsx

@@ -3 +3 @@
 import axiosInstance from "../../api/axiosInstance";
 import { useCreatedPlaylists } from "../../context/playlistContext";
+import CreatePlaylistModal from "./CreatePlaylistModal";
 
 interface PlaylistDropdownProps {
@@ -13 +14 @@
 
   direction?: "above" | "below";
-
-  onCreateNewPlaylist?: () => void;
 }
 
@@ -24 +23 @@
   usePortal = false,
   direction = "above",
-  onCreateNewPlaylist,
 }: PlaylistDropdownProps) => {
   const { createdPlaylists, refreshPlaylists } = useCreatedPlaylists();
@@ -31 +29 @@
   );
   const [loading, setLoading] = useState(false);
-  const [processingPlaylistId, setProcessingPlaylistId] = useState<
-    number | null
-  >(null);
+  const [processingIds, setProcessingIds] = useState<Set<number>>(new Set());
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -75 +72 @@
 
   const handleTogglePlaylist = async (playlistId: number, songId: number) => {
-    if (processingPlaylistId !== null) return;
-
-    setProcessingPlaylistId(playlistId);
+    if (processingIds.has(playlistId)) return;
+
+    setProcessingIds((prev) => new Set(prev).add(playlistId));
 
     try {
@@ -104 +101 @@
       refreshPlaylists(true);
       setTimeout(() => {
-        setProcessingPlaylistId(null);
+        setProcessingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(playlistId);
+          return next;
+        });
       }, 500);
     }
@@ -110 +111 @@
 
   const handleCreateNew = () => {
-    onCreateNewPlaylist?.();
     onClose();
+    setIsModalOpen(true);
   };
 
-  if (!isOpen) return null;
+  const handleModalSuccess = async () => {
+    await refreshPlaylists(false);
+  };
 
   const inlinePositionClass =
@@ -121 +124 @@
       : "absolute right-0 bottom-full mb-2";
 
-  const dropdownContent = (
+  const dropdownContent = !isOpen ? null : (
     <div
       ref={dropdownRef}
-      className={`${usePortal ? "fixed" : inlinePositionClass} w-56 bg-[#282828] rounded-lg shadow-2xl py-2 z-[9999] border border-white/10 max-h-60 overflow-y-auto custom-scrollbar`}
+      className={`${usePortal ? "fixed" : inlinePositionClass} w-56 bg-[#282828] rounded-lg shadow-2xl py-2 z-9999 border border-white/10 max-h-60 overflow-y-auto custom-scrollbar`}
       style={
         usePortal && position
@@ -147 +150 @@
       ) : createdPlaylists && createdPlaylists.length > 0 ? (
         createdPlaylists.map((playlist) => {
-          const isProcessing = processingPlaylistId === playlist.id;
+          const isProcessing = processingIds.has(playlist.id);
           const isChecked = containingPlaylistIds.includes(playlist.id);
 
@@ -153 +156 @@
             <label
               key={playlist.id}
-              className={`flex items-center px-4 py-2 hover:bg-white/10 transition-colors group/item ${
+              className={`flex items-center gap-1.5 px-4 py-2 hover:bg-white/10 transition-colors group/item ${
                 isProcessing ? "pointer-events-none" : "cursor-pointer"
               }`}
               onClick={(e) => e.stopPropagation()}
             >
-              <div className="relative flex items-center justify-center">
+              <div className="relative flex items-center justify-center  shrink-0">
                 <input
                   type="checkbox"
                   className="peer sr-only"
                   checked={isChecked}
-                  disabled={processingPlaylistId !== null}
+                  disabled={isProcessing}
                   onChange={() => handleTogglePlaylist(playlist.id, songId)}
                 />
@@ -172 +175 @@
                       : isChecked
                         ? "bg-[#1db954] border-[#1db954]"
-                        : "border-gray-500"
+                        : "border-gray-500 text=wjot"
                   }`}
                 >
@@ -182 +185 @@
                 </div>
                 <svg
-                  className={`absolute w-3 h-3  transition-opacity ${
+                  className={`absolute w-3 h-3 transition-opacity ${
                     isChecked && !isProcessing ? "opacity-100" : "opacity-0"
                   }`}
                   fill="none"
-                  stroke="currentColor"
+                  stroke="white"
                   strokeWidth="3"
                   viewBox="0 0 24 24"
@@ -198 +201 @@
               </div>
               <span
-                className={`ml-3 text-sm truncate transition-all ${
+                className={`text-sm truncate transition-all ${
                   isProcessing
                     ? "text-[#1db954] animate-pulse"
@@ -206 +209 @@
                 {playlist.name}
               </span>
-              {isProcessing && (
-                <span className="ml-auto text-xs text-[#1db954] animate-pulse">
-                  •••
-                </span>
-              )}
             </label>
           );
@@ -245 +243 @@
   );
 
-  return usePortal
-    ? createPortal(dropdownContent, document.body)
-    : dropdownContent;
+  const dropdown = dropdownContent
+    ? usePortal
+      ? createPortal(dropdownContent, document.body)
+      : dropdownContent
+    : null;
+
+  return (
+    <>
+      {dropdown}
+      {createPortal(
+        <CreatePlaylistModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onSuccess={handleModalSuccess}
+          songId={songId}
+        />,
+        document.body,
+      )}
+    </>
+  );
 };