Feature/filter current (#131)

* feat: filter current * feature: favorite page * feature: aggiunto footer e style della pagina dettaglio
edgemony-coding-bootcamp · Jun 1, 2022 · 57e56a4 · 57e56a4
1 parent 15fe269
commit 57e56a4
Show file tree

Hide file tree

Showing 18 changed files with 342 additions and 42 deletions.
diff --git a/components/CardAlbum/index.jsx b/components/CardAlbum/index.jsx
@@ -27,7 +27,7 @@ export default function CardAlbum({ allData, inputSearchValue }) {
               <Link href= {el.iam === 'album' ? `album/${el.id}` : `playlist/${el.id}`}  key={el.id}>
                 <a>
                   <div className={styles.img_container}>
-                    <img></img>
+                    <img src={el?.cover} alt={el?.title}></img>
                   </div>
                   <div className={styles.info_container}>
                     <h2>{el?.title}</h2>

diff --git a/components/CardAlbum/styles.module.scss b/components/CardAlbum/styles.module.scss
@@ -22,6 +22,14 @@
         background-color: red;
         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.346);
         border-radius: 10px;
+
+
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius: 10px;
+
+            }
 
         }
 

diff --git a/components/FilterButtonAlbum/index.jsx b/components/FilterButtonAlbum/index.jsx
@@ -1,11 +1,19 @@
+import styles from "./styles.module.scss"
+
 const FilterButtonAlbum = ({ albumFilterFunc, setPopAlbum, isPoppedAlbum }) => {
 
   function booleanValuefunc() {
     setPopAlbum(!isPoppedAlbum)
       albumFilterFunc(isPoppedAlbum);
   }
 
-return <button onClick={() => booleanValuefunc()}>FilterButtonAlbum</button>;
+return <button className={isPoppedAlbum ? null : `${styles.selected}` } onClick={() => booleanValuefunc() }>
+
+FilterButtonAlbum
+</button>
+
+
+
 };
 
 export default FilterButtonAlbum;
diff --git a/components/FilterButtonAlbum/styles.module.scss b/components/FilterButtonAlbum/styles.module.scss
@@ -0,0 +1,3 @@
+.selected {
+    border: 2px solid red;
+}
diff --git a/components/FilterButtonPlaylist/index.jsx b/components/FilterButtonPlaylist/index.jsx
@@ -1,3 +1,6 @@
+import styles from "./styles.module.scss"
+
+
 const FilterButtonPlaylist = ({playlistFilterFunc, setPoppedPlaylist, isPoppedPlaylist}) => {
 
     function booleanPlaylistValue() {
@@ -6,7 +9,7 @@ const FilterButtonPlaylist = ({playlistFilterFunc, setPoppedPlaylist, isPoppedPl
     }
 
     return (
-        <button onClick={() => booleanPlaylistValue() }>
+        <button className={isPoppedPlaylist ? null : `${styles.selected}` } onClick={() => booleanPlaylistValue() }>
             FilterButtonPlaylist
         </button>
     )

diff --git a/components/FilterButtonPlaylist/styles.module.scss b/components/FilterButtonPlaylist/styles.module.scss
@@ -0,0 +1,3 @@
+.selected {
+    border: 2px solid red;
+}
diff --git a/components/Footer/index.jsx b/components/Footer/index.jsx
@@ -0,0 +1,21 @@
+import styles from "./styles.module.scss";
+
+
+const Footer = () => {
+    return (
+
+        <div className={styles.Footer}>
+            <p>Made with Next.JS by</p>
+
+            <ul>
+            <li><a target="_blank" href="https://www.linkedin.com/in/martinaaruta/">Martina</a></li>
+            <li><a target="_blank" href="https://www.linkedin.com/in/valeria-scandurra/">Valeria</a></li>
+            <li><a target="_blank" href="https://www.linkedin.com/in/muriel-ingrassia-460a9723a/">Muriel</a></li>
+            <li><a target="_blank" href="https://www.linkedin.com/in/claudio-bozzotta-84a9657a/">Claudio</a></li>
+            <li><a target="_blank" href="https://www.linkedin.com/in/giuseppe-favaro/">Giuseppe</a></li>
+            </ul>
+        </div>
+    )
+}
+
+export default Footer;
diff --git a/components/Footer/styles.module.scss b/components/Footer/styles.module.scss
@@ -0,0 +1,24 @@
+.Footer {
+
+    li {
+        list-style: none;
+        display: inline-block;
+        padding: 0;
+        margin-right: 5px;
+        font-size: 10px;
+    }
+
+    li a {
+        color: #263238;
+    } 
+
+    @media all and (max-width: 767px) {
+
+        text-align: center;
+
+        li a {
+            color: #fff;
+        } 
+    } 
+
+} 
diff --git a/components/Navbar/index.jsx b/components/Navbar/index.jsx
@@ -26,6 +26,12 @@ const Navbar = () => {
             <a><AiOutlineSearch />Search</a>
           </Link>
         </li>
+
+        <li>
+          <Link href="/favorite">
+            <a><AiOutlineSearch />Favorite</a>
+          </Link>
+        </li>
       </ul>
 
     </div>

diff --git a/components/SongsList/index.jsx b/components/SongsList/index.jsx
@@ -5,7 +5,7 @@ import React from "react";
 export default function SongList({ album, playlist }) {
   return (
     album ? 
-    <div>
+    <div className={styles.SongList} >
       <ol>
         {album?.songs.map((song) => (
           <li className={styles.song_container} key={song}>
@@ -18,7 +18,7 @@ export default function SongList({ album, playlist }) {
     <div>
       <ol>
         {playlist?.songs.map((song) => (
-          <li className={styles.song_container} key={song}>
+          <li key={song}>
             {song}
           </li>
         ))}

diff --git a/components/SongsList/styles.module.scss b/components/SongsList/styles.module.scss
@@ -1,8 +1,22 @@
-.song_container {
-    padding: 20px 0;
 
-
-}
-.song_container:hover {
+
+.SongList {
+    margin: 40px;
+
+    ol {
+        list-style-position:inside;
+    }
+
+    li {
+        border-bottom: 1px solid #CFD8DC;
+        padding: 20px 0;
+    }
+    li:last-child {
+        border-bottom: 0;
+    }
+
+    li:hover {
         background-color: rgba(128, 128, 128, 0.100);
-    }
+    }
+
+}
diff --git a/pages/album/[id].jsx b/pages/album/[id].jsx
@@ -1,6 +1,14 @@
 import SongList from "../../components/SongsList";
 import styles from "./styles.module.scss";
 import StarRating from '../../components/StarRating';
+import { useState} from "react";
+
+import {putAlbum} from "../../utils";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+
+import { AiFillHeart,AiOutlineHeart} from 'react-icons/ai';
+
 
 export const getStaticProps = async (context) => {
   const id = context.params.id;
@@ -31,25 +39,90 @@ export const getStaticPaths = async () => {
 };
 
 export default function AlbumId({ album }) {
+
+const [isPopped, setPopped] = useState(false);
+
+
+
+
+  const AddFavorite = async () => {
+
+    if(album.favorite === true) { // Caso 1: favorite è true dall' API. Settalo a false
+
+      setPopped(!isPopped);
+      await putAlbum(album.id , {
+        favorite: false
+      })
+
+      console.log("Caso 1: favorite è true dall' API. Settalo a false")
+
+    } else { // Caso 2: favorite è false favorite dall' API. Settalo a true
+
+      setPopped(!isPopped);
+      await putAlbum(album.id , {
+        favorite: true
+      })
+
+      console.log("Caso 2: favorite è false favorite dall' API. Settalo a true")
+
+    }
+
+  }
+
+
+
   return (
     <>
-      <div className={styles.hero} >
-        <div className={styles.all}>
-          <div className={styles.img_container}>
-            <img src={album.cover} />
-          </div>
-          <div className={styles.info}>
-            <h1>{album.title}</h1>
-            <p>
+
+      <header className={styles.navbar}>
+        <Navbar />
+      </header>
+
+
+
+      <main className={styles.main}>
+        <div className={styles.wrapper}>
+
+          <div className={styles.box}>
+            <div className={styles.box__cover}>
+              <img src={album.cover} alt={album.title} width="200" height="200" />
+            </div>
+
+            <div className={styles.box__info}>
+              <h1>{album.title}</h1>
+              <p>
               {album.artist} ft. {album.featuring.join(", ")}
-            </p>
-            <p>{album.year}</p>
-            <p>{album.genres.join(" ")}</p>
-            <StarRating album={album}/>
+              </p>
+              <p>{album.year}</p>
+              <p>{album.genres.join(" ")}</p>
+
+              <button onClick={() => AddFavorite()}>{isPopped ? <AiFillHeart/> : <AiOutlineHeart/>  }</button>
+            </div>
+
+            <div className={styles.box__rating}>
+              <StarRating album={album}/>
+            </div>
+
+
+
           </div>
+
+
+
+
+          <SongList album={album } />
         </div>
-      </div>
-      <SongList album={album}/>
+      </main>
+
+
+
+      <footer className={styles.footer}>
+        <Footer />        
+      </footer>
+
+
+
+
     </>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,12 @@ const Navbar = () => { @@
                 <a><AiOutlineSearch />Search</a>
               </Link>
             </li>
+            <li>
+              <Link href="/favorite">
+                <a><AiOutlineSearch />Favorite</a>
+              </Link>
+            </li>
           </ul>
         </div>
@@ Expand Down @@