From b80b2225c346f3c51edaa9f460a734edae59204e Mon Sep 17 00:00:00 2001
From: shadi fakhri <113238379+Shadi38@users.noreply.github.com>
Date: Fri, 1 Dec 2023 22:30:06 +0000
Subject: [PATCH 1/2] finished displaying filtered tracks after clicking apply
 button

---
 frontend/src/components/ContentCheckBox.jsx   | 37 ++++++--
 frontend/src/components/DurationFilter.jsx    | 24 +++--
 frontend/src/components/DynamicGenres.jsx     |  4 -
 .../src/components/FilteredTracksDisplay.jsx  | 88 +++++++++++++++++++
 frontend/src/components/Header.jsx            |  2 +-
 .../src/components/SharedPlaylistDisplay.jsx  |  4 +-
 .../dialogs/PlaylistTracksFilterModal.jsx     | 17 ----
 .../screens/FilteredTracksScreen.jsx          | 15 +++-
 frontend/src/config.js                        |  4 +-
 9 files changed, 151 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/components/FilteredTracksDisplay.jsx

diff --git a/frontend/src/components/ContentCheckBox.jsx b/frontend/src/components/ContentCheckBox.jsx
index c0e2c89..0877b23 100644
--- a/frontend/src/components/ContentCheckBox.jsx
+++ b/frontend/src/components/ContentCheckBox.jsx
@@ -1,14 +1,30 @@
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 const ContentCheckbox = ({ playlistData }) => {
+  const navigate = useNavigate();
   const [filteredTracks, setFilteredTracks] = useState([]);
   const [yesChecked, setYesChecked] = useState(false);
   const [noChecked, setNoChecked] = useState(false);
+    
+  console.log(playlistData)
+
+  // const applyButtonHandler = (e) => {
+  //   e.preventDefault();
+  //   console.log(filteredTracks)
+  //   setFilteredTracks(filteredTracks)
+  //   navigate(`/app/Playlists/${filteredTracks}`);
+  // };
+  const applyButtonHandler = (e) => {
+    e.preventDefault();
+    console.log(filteredTracks)
+    setFilteredTracks(filteredTracks)
+    navigate('/app/filteredPlaylist',{state:{filteredTracks}});
+  };
+  
 
   function yesClickHandler() {
-    console.log(playlistData.tracks.items)
-    console.log(playlistData.tracks.items[0].track.explicit)
-    const selectedTracks = playlistData.tracks.items.filter(
+    const selectedTracks = playlistData.filter(
       (track) => track.track.explicit === true
     );
     console.log(selectedTracks)
@@ -16,18 +32,20 @@ const ContentCheckbox = ({ playlistData }) => {
     setNoChecked(false);
     setYesChecked(true);
   }
+  
   function noClickHandler() {
-    console.log(playlistData.tracks.items);
-    console.log(playlistData.tracks.items[0].track.explicit);
-    const selectedTracks = playlistData.tracks.items.filter(
+    const selectedTracks = playlistData.filter(
       (track) => track.track.explicit === false
     );
+  
     console.log(selectedTracks);
     setFilteredTracks(selectedTracks);
     setYesChecked(false);
     setNoChecked(true);
   }
 
+  
+
   return (
     <div>
       <label>
@@ -42,6 +60,13 @@ const ContentCheckbox = ({ playlistData }) => {
         No
         <input type="checkbox" checked={noChecked} onChange={noClickHandler} />
       </label>
+      <div>
+      <button
+       onClick={(e)=>applyButtonHandler(e)}
+      >Apply to playlist
+      </button>
+      </div>
+      
     </div>
   );
 };
diff --git a/frontend/src/components/DurationFilter.jsx b/frontend/src/components/DurationFilter.jsx
index f33099f..3ea0c2b 100644
--- a/frontend/src/components/DurationFilter.jsx
+++ b/frontend/src/components/DurationFilter.jsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import ContentCheckbox from "./ContentCheckBox";
 
 const DurationFilter = ({playlistData}) => {
   const [range, setRange] = useState(0);
@@ -10,7 +11,6 @@ function handleChange(e) {
     setRange(parseInt(e.target.value));
                 //1minute
                 if(range===0){
-                    
                     const selectedTracks = playlistData.tracks.items.filter(
                     (track) => track.track.duration_ms<=60000);
                     //console.log(selectedTracks)
@@ -28,41 +28,48 @@ function handleChange(e) {
                     console.log(playlistData.tracks.items)
                     const selectedTracks = playlistData.tracks.items.filter(
                     (track) => track.track.duration_ms<=180000);
-                    console.log(selectedTracks)}
+                    console.log(selectedTracks)
+                    setFilteredTracks(selectedTracks)}
                 //4minutes  
                 else if(range===3){
                     const selectedTracks = playlistData.tracks.items.filter(
                     (track) => track.track.duration_ms<=240000);
-                    console.log(selectedTracks)}
+                    console.log(selectedTracks)
+                    setFilteredTracks(selectedTracks)}
                 //5minutes  
                 else if(range===4){
                     const selectedTracks = playlistData.tracks.items.filter(
                     (track) => track.track.duration_ms<=300000);
-                    console.log(selectedTracks)}
+                    console.log(selectedTracks)
+                    setFilteredTracks(selectedTracks)}
                     //6minutes  
                 else if(range===5){
                     const selectedTracks = playlistData.tracks.items.filter(
                     (track) => track.track.duration_ms<=360000);
-                    console.log(selectedTracks)}
+                    console.log(selectedTracks)
+                    setFilteredTracks(selectedTracks)}
                     //7minutes  
                 else if(range===6){
                     const selectedTracks = playlistData.tracks.items.filter(
                     (track) => track.track.duration_ms<=420000);
-                    console.log(selectedTracks)}
+                    console.log(selectedTracks)
+                    setFilteredTracks(selectedTracks)}
                     //8minutes
                 else if(range===7){
                     console.log(range)
                     console.log(playlistData.tracks.items[0].track.duration_ms)
                     const selectedTracks = playlistData.tracks.items.filter(
                     (track) => track.track.duration_ms<=480000);
-                    console.log(selectedTracks)} 
+                    console.log(selectedTracks)
+                    setFilteredTracks(selectedTracks)} 
                     //9minutes    
                 else if(range===8){
                     console.log(range)
                     console.log(playlistData.tracks.items[0].track.duration_ms)
                     const selectedTracks = playlistData.tracks.items.filter(
                     (track) => track.track.duration_ms<=540000);
-                    console.log(selectedTracks)}    
+                    console.log(selectedTracks)
+                    setFilteredTracks(selectedTracks)}    
                     //10minutes    
                 else if(range===8){
                     console.log(range)
@@ -84,6 +91,7 @@ function handleChange(e) {
         onChange={(e) => handleChange(e)}
       />
       <p style={{textAlign:"center"}}>{range}min</p>
+      <ContentCheckbox playlistData={filteredTracks} />
     </div>
   );
 };
diff --git a/frontend/src/components/DynamicGenres.jsx b/frontend/src/components/DynamicGenres.jsx
index 38a392c..edd348a 100644
--- a/frontend/src/components/DynamicGenres.jsx
+++ b/frontend/src/components/DynamicGenres.jsx
@@ -39,9 +39,6 @@ const genresUrl =
 
   const clickHandlerBtn = (e) => {
     e.preventDefault();
-    console.log(selectedGenre)
-    //console.log(playlistData.tracks.items[0].artists[0].genres);
-
     if (playlistData && playlistData.tracks && playlistData.tracks.items) {
       let filtered = playlistData.tracks.items.filter(track => {
         // Check if the track, artists, and genres are defined before accessing them
@@ -86,7 +83,6 @@ const genresUrl =
       >
         Click
       </button>
-      {console.log(filteredTracks)}
       {showFilteredTracks &&
   (filteredTracks.length > 0 ? (
     filteredTracks.tracks.items.map((track, trackIndex) => (
diff --git a/frontend/src/components/FilteredTracksDisplay.jsx b/frontend/src/components/FilteredTracksDisplay.jsx
new file mode 100644
index 0000000..0ed9aae
--- /dev/null
+++ b/frontend/src/components/FilteredTracksDisplay.jsx
@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+
+function formatDuration(durationInMilliseconds) {
+    const minutes = Math.floor(durationInMilliseconds / 60000);
+    const seconds = ((durationInMilliseconds % 60000) / 1000).toFixed(0);
+    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+}
+const FilteredTracksDisplay = ({filteredTracks})=>{
+
+    const [playTracks, setPlayTracks] = useState(false);
+  const [uri, setUri] = useState("");
+  const [urlTrack, setUrlTrack] = useState();
+
+  useEffect(() => {
+    console.log(uri);
+    window.onSpotifyIframeApiReady = (IFrameAPI) => {
+      const element = document.getElementById("embed-iframe");
+      const options = {
+        uri: uri,
+      };
+      const callback = (EmbedController) => {};
+      IFrameAPI.createController(element, options, callback);
+    };
+
+    // Clean up on component unmount
+    return () => {
+      delete window.onSpotifyIframeApiReady;
+    };
+  }, [uri]);
+
+  const handlePlay = (spotifyUri, spotifyUrl) => {
+    setUri(spotifyUri);
+    setUrlTrack(spotifyUrl);
+    console.log(urlTrack);
+    setPlayTracks(true);
+  };
+
+  if (!filteredTracks) {
+    return <div>Loading...</div>; 
+  }
+
+    return(
+        <div className=" mx-10">
+            <div className="grid grid-cols-1 gap-10 my-14 md:grid-cols-2 lg:grid-cols-4 md:gap-10 text-xl md:text-3xl md:mx-6">
+            {playTracks && (
+            <div id="embed-iframe">
+                <iframe
+                src={`https://open.spotify.com/embed/track/${urlTrack}`}
+                width="280"
+                height="100"
+                ></iframe>
+                <button
+                style={{ position: "relative" }}
+                onClick={() => setPlayTracks(false)}
+                >
+                ❌
+                </button>
+            </div>
+           )}
+           {filteredTracks &&
+            filteredTracks.map((track,index)=>
+            <div key={index} className="grid grid-cols-2 
+            md:gap-5
+            text-xl
+            md:text-3xl">
+            {track.track.album.images.length > 0 && (
+                <img
+                  key={index}
+                  src={track.track.album.images[0].url}
+                  alt={`Album Cover for ${track.track.name}`}
+                  style={{ cursor: "pointer" }}
+                  onClick={() => handlePlay(track.track.uri, track.track.id)}
+                />  
+            )}
+            <div className="ml-6 sm:m-0 flex-rows">
+              <p className=" font-medium text-blue-400">{track.track.name}</p>
+              <p className=" text-gray-400 text-2xl">
+                {formatDuration(track.track.duration_ms)}
+              </p>
+            </div>
+            </div>  
+            )}
+            </div>
+            
+        </div>
+    )
+}
+export default FilteredTracksDisplay;
\ No newline at end of file
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 81b2ddc..cd9febb 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -15,7 +15,7 @@ const Header = () => {
           Authorization: `Bearer ${myAccessToken}`,
         },
       });
-      console.log(response);
+     
       const data = await response.json();
       SetUserName(data.display_name);
     };
diff --git a/frontend/src/components/SharedPlaylistDisplay.jsx b/frontend/src/components/SharedPlaylistDisplay.jsx
index 35eb6e8..9edd22c 100644
--- a/frontend/src/components/SharedPlaylistDisplay.jsx
+++ b/frontend/src/components/SharedPlaylistDisplay.jsx
@@ -12,7 +12,7 @@ const SharedPlaylistDisplay = ({ playlistData }) => {
   const [urlTrack, setUrlTrack] = useState();
 
   useEffect(() => {
-    console.log(uri);
+   
     window.onSpotifyIframeApiReady = (IFrameAPI) => {
       const element = document.getElementById("embed-iframe");
       const options = {
@@ -29,9 +29,9 @@ const SharedPlaylistDisplay = ({ playlistData }) => {
   }, [uri]);
 
   const handlePlay = (spotifyUri, spotifyUrl) => {
+    
     setUri(spotifyUri);
     setUrlTrack(spotifyUrl);
-    console.log(urlTrack);
     setPlayTracks(true);
   };
 
diff --git a/frontend/src/components/dialogs/PlaylistTracksFilterModal.jsx b/frontend/src/components/dialogs/PlaylistTracksFilterModal.jsx
index 47b4187..9475596 100644
--- a/frontend/src/components/dialogs/PlaylistTracksFilterModal.jsx
+++ b/frontend/src/components/dialogs/PlaylistTracksFilterModal.jsx
@@ -1,6 +1,5 @@
 import { Dialog } from "@headlessui/react";
 import GenreFilter from "../DynamicGenres";
-import ContentCheckbox from "../ContentCheckBox";
 import DurationFilter from "../DurationFilter";
 
 function PlaylistTracksFilterModal({ isOpen, handleModalOpen, playlistData }) {
@@ -27,16 +26,6 @@ function PlaylistTracksFilterModal({ isOpen, handleModalOpen, playlistData }) {
 
           <DurationFilter playlistData={playlistData}/>
         </div>
-
-        <div className="m-3 text-lg">
-          <Dialog.Description className="text-lg">
-            {" "}
-            Is explicit
-          </Dialog.Description>
-
-          <ContentCheckbox playlistData={playlistData} />
-        </div>
-
         <div className="flex flex-row justify-center m-auto my-4">
           <button
             className="ml-3 inline-flex justify-center rounded-md border-2 px-3 py-2 text-sm font-semibold text-black shadow-sm hover:bg-blue-700 sm:ml-3 sm:w-auto"
@@ -44,12 +33,6 @@ function PlaylistTracksFilterModal({ isOpen, handleModalOpen, playlistData }) {
           >
             Clean
           </button>
-          <button
-            className="ml-3 inline-flex justify-center rounded-md bg-light-blue-700 px-3 py-2 text-sm font-semibold text-black shadow-sm hover:bg-blue-700 sm:ml-3 sm:w-auto"
-            onClick={() => handleModalOpen(false)}
-          >
-            Apply to playlist
-          </button>
         </div>
       </Dialog.Panel>
     </Dialog>
diff --git a/frontend/src/components/screens/FilteredTracksScreen.jsx b/frontend/src/components/screens/FilteredTracksScreen.jsx
index 2107677..6390100 100644
--- a/frontend/src/components/screens/FilteredTracksScreen.jsx
+++ b/frontend/src/components/screens/FilteredTracksScreen.jsx
@@ -1,11 +1,18 @@
 import Header from "../Header";
+import { useLocation } from "react-router-dom";
+import FilteredTracksDisplay from "../FilteredTracksDisplay";
+
 const FilteredTracksScreen = ()=>{
+    const location = useLocation()
+    const filteredTracks = location.state && location.state.filteredTracks;
+    console.log(filteredTracks)
+
 return(
-    <div>
+    <div >
         <Header/>
-<h2 style={{color:"white"}}>FilteredTracksScreen</h2>
+        <h2 style={{color:"white"}}>FilteredTracksScreen</h2>
+        <FilteredTracksDisplay filteredTracks={filteredTracks}/>
     </div>
-)
+)}
 
-}
 export default FilteredTracksScreen;
\ No newline at end of file
diff --git a/frontend/src/config.js b/frontend/src/config.js
index e7389ee..f5617dd 100644
--- a/frontend/src/config.js
+++ b/frontend/src/config.js
@@ -1,6 +1,6 @@
-export const redirectUri = "https://song-sieve-frontend.onrender.com/app"; // production
+//export const redirectUri = "https://song-sieve-frontend.onrender.com/app"; // production
 
-//  export const redirectUri = "http://localhost:3000/app"; // development
+  export const redirectUri = "http://localhost:3000/app"; // development
 
 
 

From 7855f0b5a74f6ef324984f359cbb43704af397d3 Mon Sep 17 00:00:00 2001
From: shadi fakhri <113238379+Shadi38@users.noreply.github.com>
Date: Fri, 1 Dec 2023 22:39:25 +0000
Subject: [PATCH 2/2] cleaned codes

---
 frontend/src/components/ContentCheckBox.jsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/frontend/src/components/ContentCheckBox.jsx b/frontend/src/components/ContentCheckBox.jsx
index 0877b23..2f810ab 100644
--- a/frontend/src/components/ContentCheckBox.jsx
+++ b/frontend/src/components/ContentCheckBox.jsx
@@ -8,13 +8,6 @@ const ContentCheckbox = ({ playlistData }) => {
   const [noChecked, setNoChecked] = useState(false);
     
   console.log(playlistData)
-
-  // const applyButtonHandler = (e) => {
-  //   e.preventDefault();
-  //   console.log(filteredTracks)
-  //   setFilteredTracks(filteredTracks)
-  //   navigate(`/app/Playlists/${filteredTracks}`);
-  // };
   const applyButtonHandler = (e) => {
     e.preventDefault();
     console.log(filteredTracks)
@@ -22,7 +15,6 @@ const ContentCheckbox = ({ playlistData }) => {
     navigate('/app/filteredPlaylist',{state:{filteredTracks}});
   };
   
-
   function yesClickHandler() {
     const selectedTracks = playlistData.filter(
       (track) => track.track.explicit === true
@@ -44,8 +36,6 @@ const ContentCheckbox = ({ playlistData }) => {
     setNoChecked(true);
   }
 
-  
-
   return (
     <div>
       <label>
@@ -66,7 +56,6 @@ const ContentCheckbox = ({ playlistData }) => {
       >Apply to playlist
       </button>
       </div>
-      
     </div>
   );
 };