finished displaying filtered tracks after clicking apply button

frontend/src/components/ContentCheckBox.jsx

@@ -1,27 +1,35 @@
 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/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)
     setFilteredTracks(selectedTracks);
     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);
@@ -42,6 +50,12 @@ const ContentCheckbox = ({ playlistData }) => {
         No
         <input type="checkbox" checked={noChecked} onChange={noClickHandler} />
       </label>
+      <div>
+      <button
+       onClick={(e)=>applyButtonHandler(e)}
+      >Apply to playlist
+      </button>
+      </div>
     </div>
   );
 };

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>
   );
 };

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) => (

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;

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);
     };

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);
   };
 

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,29 +26,13 @@ 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"
             onClick={() => handleModalOpen(false)}
           >
             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>

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;

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