fix(statistics): resolve spotify top track bug

mateusfg7 · Feb 27, 2024 · 57fe0aa · 57fe0aa
1 parent cfcd9e3
commit 57fe0aa
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 74 deletions.
diff --git a/src/app/about/statistics/_components/spotify-dashboard/cards/top-track.tsx b/src/app/about/statistics/_components/spotify-dashboard/cards/top-track.tsx
@@ -2,18 +2,14 @@ import Image from 'next/image'
 import { MusicNotes } from '@phosphor-icons/react/dist/ssr'
 
 import { placeholder } from '~/lib/placeholder'
-import { getLastFmTopTracks, getTrackInfo } from '~/lib/lastFm'
+import { getLastFmTopTracks } from '~/lib/lastFm'
 
 export async function TopTrack() {
-  const tracks = await getLastFmTopTracks('1month')
+  const track = await getLastFmTopTracks('1month').then(tracks => tracks[0])
 
-  const topTrack = await getTrackInfo({
-    artistName: tracks[0].artist.name,
-    trackName: tracks[0].name
-  })
-  const imageUrl = topTrack.album.image.filter(
-    image => image.size === 'extralarge'
-  )[0]['#text']
+  const imageUrl = track.image.find(image => image.size === 'extralarge')?.[
+    '#text'
+  ]
 
   return (
     <div className="flex h-full w-full items-center justify-between gap-2 rounded-3xl bg-neutral-200 p-4 leading-none dark:bg-neutral-950 md:p-7">
@@ -27,23 +23,25 @@ export async function TopTrack() {
         </span>
         <span className="flex h-full items-center">
           <a
-            href={topTrack.url}
+            href={track.url}
             target="_blank"
-            title={`${topTrack.name} - ${topTrack.artist['#text']}`}
+            title={`${track.name} - ${track.artist['#text']}`}
             className="block w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl hover:underline md:text-3xl"
           >
-            {topTrack.name} - {topTrack.artist.name}
+            {track.name} - {track.artist.name}
           </a>
         </span>
       </div>
-      <Image
-        src={imageUrl}
-        alt="Artist Image"
-        width={300}
-        height={300}
-        placeholder={placeholder(96, 96) as `data:image/${string}`}
-        className="w-11 rounded-xl md:w-24 md:rounded-3xl"
-      />
+      {imageUrl && (
+        <Image
+          src={imageUrl}
+          alt="Artist Image"
+          width={300}
+          height={300}
+          placeholder={placeholder(96, 96) as `data:image/${string}`}
+          className="w-11 rounded-xl md:w-24 md:rounded-3xl"
+        />
+      )}
     </div>
   )
 }
diff --git a/src/lib/lastFm.ts b/src/lib/lastFm.ts
@@ -155,60 +155,6 @@ export async function getLastFmTopTracks(period: Period = '6month') {
   return tracks
 }
 
-type TrackInfoBody = {
-  track: {
-    name: string
-    mbid: string
-    url: string
-    duration: string
-    streamable: { '#text': '0' | '1'; fulltrack: '0' | '1' }
-    listeners: string
-    playcount: string
-    artist: {
-      name: string
-      mbid: string
-      url: string
-    }
-    album: {
-      artist: string
-      title: string
-      mbid: string
-      url: string
-      image: {
-        size: ImageSize
-        '#text': string
-      }[]
-      '@attr': { position: string }
-    }
-    toptags: { tag: { name: string; url: string }[] }
-  }
-}
-
-export async function getTrackInfo({
-  trackName,
-  artistName
-}: {
-  trackName: string
-  artistName: string
-}) {
-  const lastFmApiRequest = await fetch(
-    `http://ws.audioscrobbler.com/2.0/?method=track.getInfo&api_key=${process.env.LASTFM_API_KEY}&artist=${artistName}&track=${trackName}&format=json`
-  )
-
-  if (!lastFmApiRequest.ok) {
-    console.log(lastFmApiRequest)
-    throw new ApiError({
-      message: lastFmApiRequest.statusText,
-      status: lastFmApiRequest.status,
-      url: lastFmApiRequest.url
-    })
-  }
-
-  const { track }: TrackInfoBody = await lastFmApiRequest.json()
-
-  return track
-}
-
 type User = {
   name: string
   playcount: string