From c68bb1447017d8c2c6bde66b73a70b5e7eec2c8f Mon Sep 17 00:00:00 2001
From: Tosin Ogunjobi <ogunjobi.developer@gmail.com>
Date: Sat, 27 Jan 2024 13:48:15 -0800
Subject: [PATCH] fixed selected all not working

---
 src/app/components/playlists.tsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/app/components/playlists.tsx b/src/app/components/playlists.tsx
index e9b177e..c2b4c00 100644
--- a/src/app/components/playlists.tsx
+++ b/src/app/components/playlists.tsx
@@ -5,16 +5,9 @@ import DefaultButton from "./buttons/defaultButton";
 
 interface Playlist {
     key: number;
-    // Add other properties based on your actual playlist object structure
-    // For example:
     name: string;
-    // ... other properties
 }
 
-// TODO: There's currently a bug where if the playlists have the same name, they will be considered the same playlist
-// This is because the playlists are stored in a set, which doesn't allow duplicates
-// Need to use Ids instead of names
-
 function Playlists({
     provider,
     selectedPlaylists,
@@ -55,14 +48,23 @@ function Playlists({
         }
     };
 
+    // Toggle the playlist option to be selected or not
     const handleToggleOption = (playlist: Playlist) => {
-        if (selectedPlaylists.find((selected) => selected.key === playlist.key)) {
-            // Option is selected, unselect it
-            setSelectedPlaylists(selectedPlaylists.filter((selected) => selected.key !== playlist.key));
-        } else {
-            // Option is not selected, select it
+        // Select the option if it hasn't been selected yet
+        if (!isSelected(playlist)) {
             setSelectedPlaylists([...selectedPlaylists, playlist]);
         }
+        // Deselect the option if it has been selected
+        else {
+            setSelectedPlaylists(selectedPlaylists.filter((selected) => selected.key !== playlist.key));
+        }
+
+        console.log(selectedPlaylists);
+    };
+
+    // Check if the playlist is selected
+    const isSelected = (playlist: Playlist) => {
+        return selectedPlaylists.map(selected => selected.key).includes(playlist.key);
     };
 
     if (!isLoaded) {
@@ -90,7 +92,7 @@ function Playlists({
                     {playlists.map((playlist, index) => (
                         <div
                             key={index}
-                            className={`w-[120px] h-[120px] rounded-lg hover:bg-blue-200 flex items-center justify-center ${selectedPlaylists.includes(playlist) ? "bg-blue-200" : ""}`}
+                            className={`w-[120px] h-[120px] rounded-lg hover:bg-blue-200 flex items-center justify-center ${isSelected(playlist) ? "bg-blue-200" : ""}`}
                         >
                             <div onClick={() => handleToggleOption(playlist)} className={`flex flex-col items-center justify-center cursor-pointer `}>
                                 <div className={`flex items-center justify-center w-20 h-20 bg-white rounded-[10px] shadow`}>