Featurefilteredbuttonmarti (#130)

* first commit

* fixed: filter & songlist

components/CardAlbum/index.jsx

@@ -5,17 +5,6 @@ import Link from "next/link";
 export default function CardAlbum({ allData, inputSearchValue }) {
   return (
 
-
-    // {isAlbum &&              
-    // (allData.filter(
-    //   album => {
-    //     return album.iam === "album"
-    //   }
-    // ))}
-
-
-
-
     <div className={styles.all}>
       {allData &&
         allData
@@ -34,8 +23,8 @@ export default function CardAlbum({ allData, inputSearchValue }) {
 
           .map((el) => (
             <div className={styles.CardAlbum} key={el.id}>
-
-              <Link href={`album/${el.id}`} key={el.id}>
+              
+              <Link href= {el.iam === 'album' ? `album/${el.id}` : `playlist/${el.id}`}  key={el.id}>
                 <a>
                   <div className={styles.img_container}>
                     <img></img>

components/FilterButtonAlbum/index.jsx

@@ -1,11 +1,11 @@
-const FilterButtonAlbum = ({albumFilterFunc, setPop, isPopped}) => {
+const FilterButtonAlbum = ({ albumFilterFunc, setPopAlbum, isPoppedAlbum }) => {
+
+  function booleanValuefunc() {
+    setPopAlbum(!isPoppedAlbum)
+      albumFilterFunc(isPoppedAlbum);
+  }
 
-
-    return (
-        <button onClick={() => albumFilterFunc(setPop(!isPopped)) }>
-            FilterButtonAlbum
-        </button>
-    )
-}
+return <button onClick={() => booleanValuefunc()}>FilterButtonAlbum</button>;
+};
 
 export default FilterButtonAlbum;

components/FilterButtonPlaylist/index.jsx

@@ -1,8 +1,12 @@
-const FilterButtonPlaylist = ({playlistFilterFunc}) => {
+const FilterButtonPlaylist = ({playlistFilterFunc, setPoppedPlaylist, isPoppedPlaylist}) => {
 
+    function booleanPlaylistValue() {
+        setPoppedPlaylist(!isPoppedPlaylist);
+        playlistFilterFunc(isPoppedPlaylist)
+    }
 
     return (
-        <button onClick={() => playlistFilterFunc() }>
+        <button onClick={() => booleanPlaylistValue() }>
             FilterButtonPlaylist
         </button>
     )

components/SongsList/index.jsx

@@ -2,14 +2,27 @@ import styles from "./styles.module.scss";
 
 import React from "react";
 
-export default function SongList({ album }) {
+export default function SongList({ album, playlist }) {
   return (
+    album ? 
     <div>
-      <ol >
-        {album.songs.map((song) => (
-          <li className={styles.song_container} key={song}>{song}</li>
+      <ol>
+        {album?.songs.map((song) => (
+          <li className={styles.song_container} key={song}>
+            {song}
+          </li>
         ))}
       </ol>
     </div>
-  );
+   : (
+    <div>
+      <ol>
+        {playlist?.songs.map((song) => (
+          <li className={styles.song_container} key={song}>
+            {song}
+          </li>
+        ))}
+      </ol>
+    </div>
+  ));
 }

pages/album/[id].jsx

@@ -49,7 +49,7 @@ export default function AlbumId({ album }) {
           </div>
         </div>
       </div>
-      <SongList album={album } />
+      <SongList album={album}/>
     </>
   );
 }

pages/index.js

@@ -13,38 +13,39 @@ import FilterButtonPlaylist from "../components/FilterButtonPlaylist";
 export default function Home() {
   // const [albumsData, setAlbumsData] = useState([]);
   // const [playlistData, setPlaylistData] = useState([]);
-  const [inputSearchValue, setinputSearchValue] = useState('');
+  const [inputSearchValue, setinputSearchValue] = useState("");
   const [allData, setallData] = useState([]);
+  const [displayData, setdisplayData] = useState([]);
 
-  //const [isAlbum, setisAlbum] = useState([]);
+  const [isPoppedAlbum, setPopAlbum] = useState(true);
+  const [isPoppedPlaylist, setPoppedPlaylist] = useState(true);
 
-  const [isPopped, setPop] = useState(false);
-
-  const albumFilterFunc = (isPopped) => {
-    if ( isPopped ) {
-      console.log("Caso 1")
-      const arr2 = allData.filter(item => item.iam === "album")
-      setallData(arr2);
+  const albumFilterFunc = (isPoppedAlbum) => {
+    if (isPoppedAlbum) {
+      console.log("è", isPoppedAlbum, "quindi Caso 1");
+      const arr2 = allData.filter((item) => item.iam === "album");
+      setdisplayData(arr2);
     } else {
-      console.log("Caso 2")
-      return allData;
+      setdisplayData(allData);
     }
+  };
 
-  }
-
-  const playlistFilterFunc = () => {
-    const arr2 = allData.filter(item => item.iam === "playlist")
-    setallData(arr2);
-}
+  const playlistFilterFunc = (isPoppedPlaylist) => {
+    if (isPoppedPlaylist) {
+      const arr2 = allData.filter((item) => item.iam === "playlist");
+      setdisplayData(arr2);
+    } else {
+      setdisplayData(allData);
+    }
+  };
 
   useEffect(() => {
-    Promise.all([getAlbum(), getPlaylist()]).then((values) => 
-      setallData([...values[0], ...values[1]])
-    );
+    Promise.all([getAlbum(), getPlaylist()]).then((values) => {
+      setallData([...values[0], ...values[1]]);
+      setdisplayData([...values[0], ...values[1]]);
+    });
   }, []);
 
-
-
   return (
     <div className={styles.container}>
       <Head>
@@ -53,42 +54,70 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
+          rel="stylesheet"
+        />
       </Head>
 
       <div className={styles.navbar}>
         <Navbar />
       </div>
 
-
-
       <main className={styles.main}>
-        <InputSearch setinputSearchValue={setinputSearchValue}/>
-
-        <FilterButtonAlbum setPop={setPop} isPopped={isPopped} albumFilterFunc={albumFilterFunc} />
-        <FilterButtonPlaylist playlistFilterFunc={playlistFilterFunc} />
+        <InputSearch setinputSearchValue={setinputSearchValue} />
+
+        <FilterButtonAlbum
+          setPopAlbum={setPopAlbum}
+          isPoppedAlbum={isPoppedAlbum}
+          albumFilterFunc={albumFilterFunc}
+        />
+        <FilterButtonPlaylist
+          playlistFilterFunc={playlistFilterFunc}
+          setPoppedPlaylist={setPoppedPlaylist}
+          isPoppedPlaylist={isPoppedPlaylist}
+        />
 
         <div className={styles.albums_container}>
           <h2>All</h2>
-          <CardAlbum allData={allData}  inputSearchValue={inputSearchValue}/>
+          <CardAlbum
+            allData={displayData}
+            inputSearchValue={inputSearchValue}
+          />
         </div>
       </main>
 
-
       <footer className={styles.footer}>
-
         <p>Made with Next.JS by</p>
-        
+
         <ul>
-          <li><a target="_blank" href="https://www.linkedin.com/in/">Martina</a></li>
-          <li><a target="_blank" href="https://www.linkedin.com/in/">Valeria</a></li>
-          <li><a target="_blank" href="https://www.linkedin.com/in/">Muriel</a></li>
-          <li><a target="_blank" href="https://www.linkedin.com/in/">Claudio</a></li>
-          <li><a target="_blank" href="https://www.linkedin.com/in/">Giuseppe</a></li>
+          <li>
+            <a target="_blank" href="https://www.linkedin.com/in/">
+              Martina
+            </a>
+          </li>
+          <li>
+            <a target="_blank" href="https://www.linkedin.com/in/">
+              Valeria
+            </a>
+          </li>
+          <li>
+            <a target="_blank" href="https://www.linkedin.com/in/">
+              Muriel
+            </a>
+          </li>
+          <li>
+            <a target="_blank" href="https://www.linkedin.com/in/">
+              Claudio
+            </a>
+          </li>
+          <li>
+            <a target="_blank" href="https://www.linkedin.com/in/">
+              Giuseppe
+            </a>
+          </li>
         </ul>
-
       </footer>
-
     </div>
   );
 }

pages/playlist/[id].jsx

@@ -0,0 +1,55 @@
+import SongList from "../../components/SongsList";
+import styles from "./styles.module.scss";
+import StarRating from '../../components/StarRating';
+
+export const getStaticProps = async (context) => {
+  const id = context.params.id;
+  const res = await fetch(
+    `https://edgemony-backend.herokuapp.com/playlist/${id}`
+  );
+  const data = await res.json();
+
+  return {
+    props: { playlist: data },
+  };
+};
+
+export const getStaticPaths = async () => {
+  const res = await fetch(`https://edgemony-backend.herokuapp.com/playlist/`);
+  const data = await res.json();
+
+  const paths = data.map((playlist) => {
+    return {
+      params: { id: playlist.id.toString() },
+    };
+  });
+
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export default function PlaylistId({ playlist }) {
+  return (
+    <>
+      <div className={styles.hero} >
+        <div className={styles.all}>
+          <div className={styles.img_container}>
+            <img src={playlist.cover} />
+          </div>
+          <div className={styles.info}>
+            <h1>{playlist.title}</h1>
+            <p>
+              {playlist.artist} ft. {playlist.featuring.join(", ")}
+            </p>
+            <p>{playlist.year}</p>
+            <p>{playlist.genres.join(" ")}</p>
+            <StarRating playlist={playlist}/>
+          </div>
+        </div>
+      </div>
+      <SongList playlist={playlist}/>
+    </>
+  );
+}

pages/playlist/styles.module.scss

@@ -0,0 +1,13 @@
+.hero {   
+
+    .all {
+        display: flex;
+        gap: 20px;
+    } 
+
+    .img_container {
+        background-color: red;
+        width: 200px;
+        height: 200px;
+    }
+}