From 13ad6645f0224ea6142fcdcf2121f825a3ce4b78 Mon Sep 17 00:00:00 2001
From: GivFNZ <givfnz@p0ntus.com>
Date: Fri, 21 Mar 2025 22:34:03 -0300
Subject: [PATCH] ref: create type for recentTracks response

---
 src/api/lastfm.ts         | 20 +++++++++++++++++++-
 src/pages/music/index.tsx |  7 +++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/api/lastfm.ts b/src/api/lastfm.ts
index 9febbe5..58b172c 100644
--- a/src/api/lastfm.ts
+++ b/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',
diff --git a/src/pages/music/index.tsx b/src/pages/music/index.tsx
index f524308..242e5cb 100644
--- a/src/pages/music/index.tsx
+++ b/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>
     )
 }
\ No newline at end of file