ref: create type for recentTracks response

src/api/lastfm.ts

@@ -2,8 +2,26 @@ import { api } from "../lib/axios";
 
 const api_key = import.meta.env.VITE_LASTFM_API_KEY
 
+export interface getRecentTracksResponse {
+    recenttracks: {
+        track: [
+            {
+                artist: {
+                    mbid: string,
+                    "#text": string
+                },
+                streamable: string,
+                image: [],
+                mbid: string,
+                name: string,
+                url: string,
+            }
+        ]
+    }
+}
+
 export async function getRecentTracks() {
-    const response = await api.get('/', {
+    const response = await api.get<getRecentTracksResponse>('/', {
         params: {
             api_key,
             method: 'user.getrecenttracks',

src/pages/music/index.tsx

@@ -8,13 +8,12 @@ export default function Music() {
         queryKey: ['song'],
         queryFn: getRecentTracks
     })
-    const { recenttracks } = lastResponse
-    const { track } = recenttracks
-    const lastTrack = track[0]
     return (
         <MainContainer>
             <h1>My Last FM Status</h1>
-            <Paragraph>{lastTrack.name} - {lastTrack.artist["#text"]}</Paragraph>
+            <h2>Check my last played song!</h2>
+            <Paragraph>{lastResponse?.recenttracks?.track[0].name} - {lastResponse?.recenttracks?.track[0].artist["#text"]}</Paragraph>
+            <a href={lastResponse?.recenttracks?.track[0].url}>Check this song on LastFM</a>
         </MainContainer>
     )
 }