feat: If click in checkbox load

fernandomospf · Nov 21, 2021 · de6aabd · de6aabd
1 parent 09be0b4
commit de6aabd
Showing 1 changed file with 40 additions and 9 deletions.
diff --git a/src/pages/Album.jsx b/src/pages/Album.jsx
@@ -3,13 +3,21 @@ import PropTypes from 'prop-types';
 import Header from '../Components/Header';
 import MusicCard from '../Components/MusicCard';
 import getMusics from '../services/musicsAPI';
+// import './albumStyle.css';
+import Loading from '../Components/Loading';
 
 export default class Album extends Component {
   constructor() {
     super();
     this.state = {
       album: [],
+      isLoad: false,
+      favorites: [],
     };
+
+    console.log(this);
+
+    this.handleFavorite = this.handleFavorite.bind(this);
   }
 
   componentDidMount() {
@@ -19,11 +27,23 @@ export default class Album extends Component {
       album: data,
       artistName: data[0].artistName,
       collectionName: data[0].collectionName,
+      trackId: data[0].trackId,
     }));
   }
 
+  handleFavorite({ target }) {
+    console.dir(target.checked);
+    if (target.checked) {
+      this.setState({
+        isLoad: true,
+
+      });
+    };
+  }
+
   render() {
-    const { album, artistName, collectionName } = this.state;
+    const { album, artistName, collectionName, trackId, isLoad } = this.state;
+
     const validateAlbum = album.filter((musics) => musics.previewUrl !== undefined);
     return (
       <div data-testid="page-album">
@@ -32,14 +52,25 @@ export default class Album extends Component {
           <h2 data-testid="album-name">{collectionName}</h2>
           <h3 data-testid="artist-name">{artistName}</h3>
         </div>
-        <ul>
-          {validateAlbum.map(({ trackName, previewUrl }) => (
-            <li key={ trackName }>
-              <p>{trackName}</p>
-              <MusicCard audio={ previewUrl } />
-            </li>
-          ))}
-        </ul>
+        { isLoad ? <Loading /> : (
+          <ul>
+            {validateAlbum.map(({ trackName, previewUrl }) => (
+              <li key={ trackName }>
+                <p>{trackName}</p>
+                <MusicCard audio={ previewUrl } />
+                <label htmlFor="favorite">
+                  Favorita:
+                  <input
+                    data-testid={ `checkbox-music-${trackId}` }
+                    onClick={ (e) => this.handleFavorite(e) }
+                    type="checkbox"
+                    name="favorite"
+                    id="favorite"
+                  />
+                </label>
+              </li>
+            ))}
+          </ul>)}
       </div>
     );
   }