fix: un-necessary client side call for spotify api removed

Author: Daggron

components/Footer/index.tsx

@@ -1,18 +1,8 @@
-import SpotifyLogo from '../Spotify/SpotifySvg';
 import Line from '../Line';
 import { LinkComponent } from '../Typography';
-import { useEffect } from 'react';
 import NowPlaying from '../Spotify/NowPlaying';
 
 export default function Footer() {
-  useEffect(() => {
-    fetch('/api/fetchCurrentPlayingSong')
-      .then((response) => response.json())
-      .then((response) => {
-        console.log(response);
-      });
-  }, []);
-
   return (
     <footer className="Footer mt-12">
       <Line />

constants/apiMap.ts

@@ -2,6 +2,7 @@ const apiMap = {
   SPOTIFY_GET_CURRENT_PLAYING_TRACK:
     'https://api.spotify.com/v1/me/player/currently-playing',
   SPOTIFY_ACCESS_TOKEN: 'https://accounts.spotify.com/api/token',
+  SPOTIFY_TOP_TRACKS_ENDPOINT: 'https://api.spotify.com/v1/me/top/tracks',
 };
 
 export default apiMap;

pages/about.tsx

@@ -17,3 +17,13 @@ export default function AboutPage() {
     </>
   );
 }
+
+// export async function getServerSideProps() {
+//   const res = await getTopTracks();
+//   const tracks = await res.json();
+//   return {
+//     props: {
+//       tracks: tracks.items,
+//     },
+//   };
+// }

pages/blog/[slug].tsx

@@ -7,7 +7,7 @@ import SeoManager from '../../components/SeoManager/SeoManager';
 import { getAllPosts, getPostBySlug } from '../../utils/index';
 import { blogFrontMatter } from '../../types/blogfrontMatter';
 
-function BlogPosts(props: {source: any, frontMatter: blogFrontMatter }) {
+function BlogPosts(props: { source: any; frontMatter: blogFrontMatter }) {
   return (
     <>
       <SeoManager
@@ -29,8 +29,8 @@ export function getStaticPaths() {
   }));
   return {
     paths,
-    fallback: false
-  }
+    fallback: false,
+  };
 }
 
 export async function getStaticProps(pageData) {

utils/spotify.ts

@@ -33,3 +33,13 @@ export const getNowPlaying = async () => {
     },
   });
 };
+
+export const getTopTracks = async () => {
+  const { access_token } = await getAccessToken();
+
+  return fetch(apiMap.SPOTIFY_TOP_TRACKS_ENDPOINT, {
+    headers: {
+      Authorization: `Bearer ${access_token}`,
+    },
+  });
+};