From 57e56a40549e5310e7dfc6abd3a3e05cbcd6eca9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Giuseppe=20Favar=C3=B2?=
 <101141969+giuseppefavaro@users.noreply.github.com>
Date: Wed, 1 Jun 2022 19:44:43 +0200
Subject: [PATCH] Feature/filter current (#131)

* feat: filter current

* feature: favorite page

* feature: aggiunto footer e style della pagina dettaglio
---
 components/CardAlbum/index.jsx                |   2 +-
 components/CardAlbum/styles.module.scss       |   8 +
 components/FilterButtonAlbum/index.jsx        |  10 +-
 .../FilterButtonAlbum/styles.module.scss      |   3 +
 components/FilterButtonPlaylist/index.jsx     |   5 +-
 .../FilterButtonPlaylist/styles.module.scss   |   3 +
 components/Footer/index.jsx                   |  21 +++
 components/Footer/styles.module.scss          |  24 +++
 components/Navbar/index.jsx                   |   6 +
 components/SongsList/index.jsx                |   4 +-
 components/SongsList/styles.module.scss       |  26 +++-
 pages/album/[id].jsx                          | 101 +++++++++++--
 pages/album/styles.module.scss                | 138 ++++++++++++++++--
 pages/favorite/index.jsx                      |  12 ++
 pages/favorite/styles.module.scss             |   0
 pages/index.js                                |   6 -
 styles/globals.css                            |   2 +
 utils/index.jsx                               |  13 +-
 18 files changed, 342 insertions(+), 42 deletions(-)
 create mode 100644 components/FilterButtonAlbum/styles.module.scss
 create mode 100644 components/FilterButtonPlaylist/styles.module.scss
 create mode 100644 components/Footer/index.jsx
 create mode 100644 components/Footer/styles.module.scss
 create mode 100644 pages/favorite/index.jsx
 create mode 100644 pages/favorite/styles.module.scss

diff --git a/components/CardAlbum/index.jsx b/components/CardAlbum/index.jsx
index 5594d74..8ba1485 100644
--- 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
index 0c1b1bf..4db39b1 100644
--- 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
index 3fbe3cb..daeb339 100644
--- a/components/FilterButtonAlbum/index.jsx
+++ b/components/FilterButtonAlbum/index.jsx
@@ -1,3 +1,5 @@
+import styles from "./styles.module.scss"
+
 const FilterButtonAlbum = ({ albumFilterFunc, setPopAlbum, isPoppedAlbum }) => {
   
   function booleanValuefunc() {
@@ -5,7 +7,13 @@ const FilterButtonAlbum = ({ albumFilterFunc, setPopAlbum, isPoppedAlbum }) => {
       albumFilterFunc(isPoppedAlbum);
   }
 
-return <button onClick={() => booleanValuefunc()}>FilterButtonAlbum</button>;
+return <button className={isPoppedAlbum ? null : `${styles.selected}` } onClick={() => booleanValuefunc() }>
+
+FilterButtonAlbum
+</button>
+
+
+
 };
 
 export default FilterButtonAlbum;
\ No newline at end of file
diff --git a/components/FilterButtonAlbum/styles.module.scss b/components/FilterButtonAlbum/styles.module.scss
new file mode 100644
index 0000000..ba893e4
--- /dev/null
+++ b/components/FilterButtonAlbum/styles.module.scss
@@ -0,0 +1,3 @@
+.selected {
+    border: 2px solid red;
+}
\ No newline at end of file
diff --git a/components/FilterButtonPlaylist/index.jsx b/components/FilterButtonPlaylist/index.jsx
index fd77003..d9e688b 100644
--- 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
new file mode 100644
index 0000000..ba893e4
--- /dev/null
+++ b/components/FilterButtonPlaylist/styles.module.scss
@@ -0,0 +1,3 @@
+.selected {
+    border: 2px solid red;
+}
\ No newline at end of file
diff --git a/components/Footer/index.jsx b/components/Footer/index.jsx
new file mode 100644
index 0000000..b9d2eea
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/components/Footer/styles.module.scss b/components/Footer/styles.module.scss
new file mode 100644
index 0000000..168e0bc
--- /dev/null
+++ 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;
+        } 
+    } 
+    
+} 
\ No newline at end of file
diff --git a/components/Navbar/index.jsx b/components/Navbar/index.jsx
index 1c60e69..1bb9aab 100644
--- 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
index 9becd13..83e596c 100644
--- 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
index 43c550f..f88080d 100644
--- 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);
-    }
\ No newline at end of file
+    }
+    
+}
\ No newline at end of file
diff --git a/pages/album/[id].jsx b/pages/album/[id].jsx
index 76d440d..3c30369 100644
--- 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>
+
+
+
+
     </>
   );
 }
diff --git a/pages/album/styles.module.scss b/pages/album/styles.module.scss
index c89b731..c76736b 100644
--- a/pages/album/styles.module.scss
+++ b/pages/album/styles.module.scss
@@ -1,13 +1,131 @@
-.hero {   
+.selected {
+    border: 10px solid red;
+}
+
+
+
+.wrapper {
+    width: 100%;
+    margin-bottom: 30px;
+    background: #fff;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    border-radius: 10px;
+}
+
+
+
+.box {
+    display: flex;
+    padding: 20px;
+    margin: 40px;
+    background: #000;
+    background: linear-gradient(to right, #2c3e50, #bdc3c7);
+    border-radius: 10px;
+    margin-bottom: 30px;
+    position: relative;
+}
+
+.box__cover {
+    margin-right: 20px;
     
-    .all {
-        display: flex;
-        gap: 20px;
-    } 
+}
+
+.box__rating {
+    position: absolute;
+    bottom: 30px;
+    right: 30px;
+}
+
+.box__info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #fff;
+    position: relative;
+
+}
+
+.box__info h1 {
+    margin-bottom: 20px;
+    font-size: 50px;
+}
+
+.box__info button {
+    all: unset;
+    font-size: 30px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
 
-    .img_container {
-        background-color: red;
-        width: 200px;
-        height: 200px;
+
+
+
+/* STRUCTURE ***********************/
+
+.navbar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 250px;
+    height: 100vh;
+    background: #fff;
+    color: #fff;
+    padding: 30px 20px;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 
+  }
+  
+  .main {
+    margin-left: 250px;
+    height: 100vh;
+    background: #f7fafc;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .footer {
+    position: fixed;
+    bottom: 15px;
+    left: 0px;
+    font-size: 14px;
+    padding: 15px;
+  }
+  
+  
+  /* STRUCTURE RESPONSIVE ***********************/
+  @media all and (max-width: 767px) {
+  
+    .navbar {
+        position: static;
+        width: 100%;
+        height: auto;
+        padding: 20px;
     }
-}
\ No newline at end of file
+    
+    .main {
+        margin-left: 0px;
+        height: auto;
+        padding-bottom: 150px;        
+    }
+  
+    .footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 150px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #010e28;
+        color: #fff; 
+    }
+  
+  }
+
+
+
+
+
diff --git a/pages/favorite/index.jsx b/pages/favorite/index.jsx
new file mode 100644
index 0000000..d264ed2
--- /dev/null
+++ b/pages/favorite/index.jsx
@@ -0,0 +1,12 @@
+import styles from "./styles.module.scss";
+import { getAlbum, getPlaylist } from "../../utils";
+
+
+
+const Favorite = () => {
+    return (
+        <div>Favorite</div>
+    )
+}
+
+export default Favorite;
\ No newline at end of file
diff --git a/pages/favorite/styles.module.scss b/pages/favorite/styles.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/pages/index.js b/pages/index.js
index 6631b33..9ed4885 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -52,12 +52,6 @@ export default function Home() {
         <title>Edgify</title>
         <meta name="description" content="Edgify" />
         <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"
-        />
       </Head>
 
       <div className={styles.navbar}>
diff --git a/styles/globals.css b/styles/globals.css
index 997c461..4254e55 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,4 +1,6 @@
 /* GLOBAL *************************/
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+
 
 * {
   margin: 0;
diff --git a/utils/index.jsx b/utils/index.jsx
index 725168c..fe74c57 100644
--- a/utils/index.jsx
+++ b/utils/index.jsx
@@ -21,4 +21,15 @@ export const getPlaylist = async () => {
     });
     console.log('playlist',data);
     return data
-}
\ No newline at end of file
+}
+
+
+
+export const putAlbum =  (id, body) =>
+    fetch(`https://edgemony-backend.herokuapp.com/albums/${id}`, {
+    method: "PUT",
+    headers: {
+        "Content-type" : "application/json"
+    },
+    body: JSON.stringify(body),
+});
\ No newline at end of file