Merge pull request #79 from Aman-Mandal/shazam-top-tracks

Shazam top tracks

.env

@@ -1,4 +1,6 @@
 GOOGLE_CLIENT_ID=461824563020-ohqpshrs1vh41289rle6kjqcdhv58j4f.apps.googleusercontent.com
 GOOGLE_CLIENT_SECRET = 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
 NEXTAUTH_URL=http://localhost:3000
-JWT_SECRET =fUAcqpb6X/Qo33B7N7nKezh7IwLf0h2XdwsQ6X2Y+oE=
+JWT_SECRET =fUAcqpb6X/Qo33B7N7nKezh7IwLf0h2XdwsQ6X2Y+oE=
+
+NEXT_PUBLIC_RAPIDAPI_KEY= 0ac7392c46msha4f3dfc287416ffp189c80jsnd7cf096105d4

components/TopCharts/TopCharts.jsx

@@ -1,12 +1,15 @@
 import Link from 'next/link';
-import React from 'react';
+import React, { useEffect } from 'react';
 import Image from 'next/image';
 import { charts } from '../../data/data';
 import AddBoxIcon from '@mui/icons-material/AddBox';
 import { useStateContext } from '../../contexts/ContextProvider';
-const TopCharts = () => {
+
+const TopCharts = ({ topCharts }) => {
   const { setcurrentSong } = useStateContext();
 
+  console.log(topCharts);
+
   const selectSongHandler = (song) => {
     setcurrentSong((prev) => {
       return {
@@ -25,38 +28,43 @@ const TopCharts = () => {
         </Link>
       </div>
       <div>
-        {charts.map(
+        {topCharts.map(
           (chart, index) =>
             index < 3 && (
               <div
                 className='gap-2 flex items-center justify-between mb-4'
                 key={chart.songName}
                 onClick={() =>
                   selectSongHandler({
-                    image: chart.img,
-                    title: chart.songName,
-                    artist: chart.artistName,
+                    image: chart?.images.coverart,
+                    title: chart?.title,
+                    artist: chart?.artists[0].alias,
                   })
                 }
               >
                 <div className='flex items-center gap-3 cursor-pointer'>
                   <div className='rounded-md w-16 h-16 overflow-hidden'>
-                    <Image src={chart.img} alt={chart.songName} />
+                    <Image
+                      src={chart?.images.coverart}
+                      alt={chart?.title}
+                      width='100%'
+                      height='100%'
+                    />
                   </div>
 
                   <div className='flex flex-col'>
                     <p className='text-gray-100 text-lg font-medium'>
-                      {chart.songName}
+                      {chart?.title}
                     </p>
                     <small className='text-gray-400 text-xs'>
-                      {chart.artistName}
+                      {chart?.artists[0].alias}
                     </small>
                   </div>
                 </div>
                 <div className='flex'>
                   <div className='flex items-center gap-3'>
                     <small className='swatch_text-primary text-xs mr-2'>
-                      {chart.time}
+                      3:09
                     </small>
                     <p className='swatch_text-primary w-6 h-6 flex items-center justify-center text-xl mr-2 border-[1px] border-[#192CFD]'>
                       +

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-}
+  images: {
+    domains: ['is4-ssl.mzstatic.com','is5-ssl.mzstatic.com'],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -15,6 +15,7 @@
     "@heroicons/react": "^1.0.6",
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.7",
+    "axios": "^1.1.2",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "next-auth": "^4.12.3",

pages/Explore.jsx

@@ -1,8 +1,26 @@
+import { useEffect, useState } from 'react';
 import { TopArtists, Genres, TopCharts, Player, Trending } from '../components';
 import { useStateContext } from '../contexts/ContextProvider';
+import axios from 'axios';
 
 const Explore = () => {
   const { activeMenu, setActiveMenu } = useStateContext();
+  const [topCharts, setTopCharts] = useState([]);
+
+  // api fetch
+  const getTopCharts = async () => {
+    try {
+      const res = await axios.get('api/top/charts');
+      const { data } = res;
+      setTopCharts(data.tracks)
+    } catch (error) {
+      console.log('yo', error);
+    }
+  };
+
+  useEffect(() => {
+    getTopCharts();
+  }, []);
 
   return (
     <div
@@ -16,7 +34,7 @@ const Explore = () => {
         <TopArtists />
         <Player />
         <Genres />
-        <TopCharts />
+        <TopCharts topCharts={topCharts} />
       </div>
     </div>
   );