Merge branch 'page'

README.md

@@ -116,7 +116,3 @@ http-server dist
 ### License
 
 This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.
-
-```
-
-```

src/pages/Artist/Artist.jsx

@@ -8,26 +8,42 @@ import { IoPlay } from 'react-icons/io5';
 import equ from '../../assets/images/equaliser-animated-green.gif';
 import { ThreeDots } from 'react-loader-spinner';
 import { VscVerifiedFilled } from 'react-icons/vsc';
-import styles from '../Collection/Collection.module.css';
-import styles2 from './Artist.module.css';
+import { RiMore2Line } from 'react-icons/ri';
+import styles from './Artist.module.css';
+import HorizontalCard from '../../components/HorizontalScrollCard/HorizontalCard';
 
 function Artist() {
   const navigate = useNavigate();
   const [artistData, setArtistData] = useState(null);
-  const { fetchData } = useAuth();
+  const [topTracks, setTopTracks] = useState(null);
+  const [artistAlbums, setArtistAlbum] = useState(null);
+  const [bgColor, setBgColor] = useState('#090909');
+  const { fetchData, msToTime, DateConverter, predictColor } = useAuth();
   const { artistId } = useParams();
 
   useEffect(() => {
-    fetchData(`${Single_Artists}/${artistId}`)
+    Promise.all([
+      fetchData(`${Single_Artists}/${artistId}`),
+      fetchData(`${Single_Artists}/${artistId}/top-tracks`),
+      fetchData(`${Single_Artists}/${artistId}/albums?limit=10`),
+    ])
       .then((res) => {
-        setArtistData(res);
-        console.log(res);
+        setArtistData(res[0]);
+        setTopTracks(res[1]);
+        setArtistAlbum(res[2]);
       })
       .catch((err) => {
         console.log(err);
       });
   }, [artistId]);
 
+  useEffect(() => {
+    if (artistData)
+      predictColor(artistData.images[0].url, (result) =>
+        setBgColor(result.rgba)
+      );
+  }, [artistData]);
+
   if (!artistData) {
     return (
       <div className={styles.collectionSection}>
@@ -40,8 +56,13 @@ function Artist() {
 
   return (
     <div className={styles.collectionSection}>
-      <div className={styles.innerSection}>
-        <div className={styles.navigationBar}>{/* <NavBar /> */}</div>
+      <div
+        className={styles.innerSection}
+        style={{ backgroundColor: `${bgColor}` }}
+      >
+        <div className={styles.navigationBar}>
+          <NavBar />
+        </div>
         <nav>
           <div className={styles.navigationBtn}>
             <button onClick={() => navigate(-1)}>
@@ -59,7 +80,7 @@ function Artist() {
             </div>
           </div>
           <div className={styles.detailsSection}>
-            <div className={styles2.type}>
+            <div className={styles.type}>
               <VscVerifiedFilled
                 color="white"
                 size={25}
@@ -70,76 +91,59 @@ function Artist() {
             <div className={styles.title}>
               <h1>{artistData && artistData.name}</h1>
             </div>
-            <div className={styles2.desc}>
-              <h4>{artistData && artistData.followers.total} Followers</h4>
+            <div className={styles.desc}>
+              <h4>
+                {artistData && artistData.followers.total} monthly listeners
+              </h4>
             </div>
           </div>
         </header>
         <div className={styles.tableContainer}>
           <hr />
           <table>
-            {/* <thead>
-                <tr>
-                  <th className={styles.tableSongNoLabel}>#</th>
-                  <th className={styles.tableSongTitleLabel}>title</th>
-                  <th className={styles.tableSongAlbumLabel}>album</th>
-                  <th className={styles.tableSongDateLabel}>date added</th>
-                  <th className={styles.tableSongDurationLabel}>
-                    <LuClock3 />
-                  </th>
-                </tr>
-              </thead> */}
             <tbody>
-              {/* {artistData.tracks.items.map((data, index) => {
+              {topTracks &&
+                topTracks.tracks.map((data, index) => {
                   return (
                     <tr key={index} style={{ cursor: 'pointer' }}>
                       <td className={styles.songNo}>
-                        {cardHover ? <IoPlay /> : <span>{index + 1}</span>}
-                         <img
-                          src={equ}
-                          style={{ width: '15px', height: '15px' }}
-                        /> 
+                        <span>{index + 1}</span>
+                        {/* <img
+                        src={equ}
+                        style={{ width: '15px', height: '15px' }}
+                      /> */}
                       </td>
                       <td className={styles.songMainData}>
                         <div className={styles.songAvatar}>
-                          <img src={data.track.album.images[1].url} />
+                          <img src={data.album.images[0].url} />
                         </div>
                         <div className={styles.songDetails}>
                           <div className={styles.songName}>
-                            <Link to={`/track/${data.track.id}`}>
-                              <span>{data.track.name}</span>
+                            <Link to={`/track/${data.id}`}>
+                              <span>{data.name}</span>
                             </Link>
                           </div>
-                          <div className={styles.artistName}>
-                            {data.track.artists.map((obj, index) => {
-                              return (
-                                <Link to={`/artist/${obj.id}`} key={index}>
-                                  <span>{obj.name},</span>
-                                </Link>
-                              );
-                            })}
-                          </div>
                         </div>
                       </td>
                       <td className={styles.songAlbumName}>
                         <div className={styles.albumNameSection}>
-                          <Link to={`/album/${data.track.album.id}`}>
-                            <span>{data.track.album.name}</span>
+                          <Link to={`/album/${data.album.id}`}>
+                            <span>{data.album.name}</span>
                           </Link>
                         </div>
                       </td>
                       <td className={styles.songAddedTime}>
-                        <span>{DateConverter(data.added_at)}</span>
+                        <span>{DateConverter(data.album.release_date)}</span>
                       </td>
                       <td className={styles.songDuration}>
-                        <span>{msToTime(data.track.duration_ms)}</span>
+                        <span>{msToTime(data.duration_ms)}</span>
                       </td>
                       <td className={styles.moreBtn}>
                         <RiMore2Line style={{ cursor: 'not-allowed' }} />
                       </td>
                     </tr>
                   );
-                })} */}
+                })}
             </tbody>
           </table>
         </div>