spotify: *refactoring

src/components/SpotifyCard.tsx

@@ -4,17 +4,7 @@ import { useEffect, useState } from 'react'
 import io from 'socket.io-client'
 import Image from 'next/image'
 import Link from 'next/link'
-
-interface SpotifyData {
-  song?: {
-    artist: string[]
-    title: string
-    url: string
-    image: string
-    progress: number
-    length: number
-  }
-}
+import type { SpotifyData } from '@/utils/interface'
 
 export const NowPlayingCard = () => {
   const [spotify, setSpotify] = useState<SpotifyData>({})
@@ -31,15 +21,6 @@ export const NowPlayingCard = () => {
     }
   }, [])
 
-  const Progress = () => {
-    if (spotify.song && spotify.song.length > 0) {
-      const progressPercentage =
-        (spotify.song.progress / spotify.song.length) * 100
-      return `${progressPercentage}%`
-    }
-    return '0%'
-  }
-
   return (
     <div className='mt-5 flex max-w-sm transform flex-row rounded-md border border-gray-800 p-3 shadow transition duration-300 ease-in-out hover:scale-105 focus:outline-none'>
       {spotify.song ? (
@@ -70,7 +51,10 @@ export const NowPlayingCard = () => {
             <div className='mt-2 bg-gray-200 rounded-full h-1 dark:bg-gray-700 bg-fixed flex w-44'>
               <div
                 className='bg-[#1DB954] h-1 rounded-full transition-width duration-300 ease-in-out'
-                style={{ width: Progress() }}
+                style={{
+                  width:
+                    (spotify.song.progress / spotify.song.duration) * 100 + '%',
+                }}
               ></div>
             </div>
           </div>

src/pages/api/spotify.ts

@@ -21,21 +21,26 @@ export default async function handler(
 ) {
   try {
     const song = await spotify.getCurrentSong()
-    if (!song || !song.isPlaying) {
+    if (!song.is_playing) {
       return res.status(200).json({
-        nowplaying: false,
+        is_playing: false,
       })
     }
     res.status(200).json({
-      nowplaying: true,
-      song: {
-        artist: song.artists.name,
-        title: song.title,
-        url: song.url,
+      is_playing: true,
+      name: song.name,
+      album: {
+        name: song.album.name,
         image: song.album.image,
-        progress: song.progress,
-        length: song.length,
+        release: song.album.release_date,
       },
+      artists: {
+        name: song.artists.name,
+        url: song.artists.url,
+      },
+      url: song.url,
+      progress: song.progress,
+      duration: song.duration,
     })
   } catch (error) {
     res

src/utils/interface.ts

@@ -3,7 +3,7 @@ interface Album {
   images: {
     url: string
   }[]
-  release: string[]
+  release_date: string
 }
 
 export interface Artist {
@@ -18,3 +18,14 @@ export interface Item {
   external_urls: { spotify: string }
   duration_ms: number
 }
+
+export interface SpotifyData {
+  song?: {
+    title: string
+    artist: string[]
+    url: string
+    image: string
+    progress: number
+    duration: number
+  }
+}

src/utils/result.ts

@@ -10,20 +10,20 @@ export class SongResultMap {
     const { item } = result
 
     return {
-      progress: result.progress_ms,
-      title: item.name,
+      name: item.name,
       album: {
         name: item.album.name,
         image: item.album.images[0]?.url,
-        release: item.album.release,
+        release_date: item.album.release_date,
       },
       artists: {
         name: item.artists.map((x: Artist) => x.name),
         url: item.artists.map((x: Artist) => x.external_urls.spotify),
       },
       url: item.external_urls.spotify,
-      length: item.duration_ms,
-      isPlaying: result.is_playing,
+      progress: result.progress_ms,
+      duration: item.duration_ms,
+      is_playing: result.is_playing,
     }
   }
 }

src/utils/type.ts

@@ -1,16 +1,16 @@
 export type SongResult = {
-  progress: number
+  is_playing: boolean
+  name: string
   album: {
     name: string
     image?: string
-    release: string[]
+    release_date: string
   }
   artists: {
     name: string[]
     url: string[]
   }
   url: string
-  title: string
-  length: number
-  isPlaying: boolean
+  progress: number
+  duration: number
 }