feat: re-implement lastfm api

README.md

@@ -29,28 +29,13 @@ Any contribution is welcome. If you want to test the website in your own machine
 - `bun install` - Install dependencies
 - `bun dev` - Run dev server
 
-The development server will be available at http://localhost:5173.
-
-### Environment Variables
-
-**The LastFM feature is disabled, and this environment variable is not required yet.**
-
-To run the project, you need to set up the following environment variables:
-
-| Variable                    | Description              |
-|-----------------------------|--------------------------|
-| `VITE_LASTFM_API_KEY`       | Your [Last.fm API Key]() |
-
-Create a `.env` file in the root of the project and add the required variables like so:
-
-```env
-VITE_LASTFM_API_KEY=your-lastfm-api-key-here
-```
+The development server will be available at <http://localhost:5173>.
 
 ## Special Thanks
 
 - [Aidan](https://github.com/ihatenodejs)
 - [lucmsilva](https://github.com/lucmsilva651/)
 - NineTailedFox
+- [biancarosa](https://github.com/biancarosa) - Last.fm API
 
 **Enjoy!**

src/api/lastfm.ts

@@ -1,45 +1,61 @@
 import { api } from "../lib/axios";
 
-const api_key = null;
+export interface TrackResponse {
+    track: {
+        album: {
+            mbid: string,
+            "#text": string
+        },
+        artist: {
+            mbid: string,
+            "#text": string
+        },
+        date: {
+            uts: string,
+            "#text": string
+        },
+        image: [{
+            "#text": string,
+            size: string
+        }],
+        mbid: string,
+        name: string,
+        streamable: string,
+        url: string
+    }
+}
 
 export interface getRecentTracksResponse {
     recenttracks: {
-        track: [
-            {
-                artist: {
-                    mbid: string,
-                    "#text": string
-                },
-                streamable: string,
-                image: [],
+        track: [{
+            artist: {
                 mbid: string,
-                name: string,
-                url: string,
-                date: {
-                    uts: string,
-                    "#text": string
-                }
+                "#text": string
+            },
+            streamable: string,
+            image: [{
+                "#text": string,
+                size: string
+            }],
+            mbid: string,
+            name: string,
+            url: string,
+            date: {
+                uts: string,
+                "#text": string
             }
-        ],
-        "@attr": {
-            user: string,
-            totalPages: string,
-            page: string,
-            perPage: string,
-            total: string
-        }
+        }]
     }
 }
 
 export async function getRecentTracks() {
-    const response = await api.get<getRecentTracksResponse>('/', {
-        params: {
-            api_key,
-            method: 'user.getrecenttracks',
-            user: 'givfnz',
-            format: 'json',
-            limit: 1
-        }
-    })
-    return response.data
+    try {
+        const response = await api.get<TrackResponse>('');
+        console.log('Last.fm data:', response.data);
+        
+        return response.data;
+    } catch (error) {
+        console.error('Err while fetching Last.fm data:', error);
+        throw error;
+    }
 }

src/lib/axios.ts

@@ -1,5 +1,7 @@
 import axios from 'axios'
 
+const defaultApiUrl = 'https://lastfm-last-played.biancarosa.com.br/givfnz/latest-song';
+
 export const api = axios.create({
-    baseURL: import.meta.env.VITE_LASTFM_API_URL,
+    baseURL: import.meta.env.VITE_LASTFM_API_URL || defaultApiUrl,
 })

src/locales/en-us.json

@@ -10,8 +10,10 @@
     "send": "Send",
     "myLast": "My Last.FM Status",
     "myLastDescription": "I'm listening to:",
+    "lastPlayed": "Last played song:",
     "lastLink": "View on Last.FM",
     "music": "Music",
     "currentlyListening": "I'm currently listening to it!",
-    "lastUpdate": "Last update: "
+    "lastUpdate": "Last update: ",
+    "noRecentTracks": "No recent tracks found"
 }

src/locales/pt-br.json

@@ -10,8 +10,10 @@
     "send": "Enviar",
     "myLast": "Meu status do Last.FM",
     "myLastDescription": "Dê uma olhada na música que eu estava ouvindo:",
+    "lastPlayed": "Última música ouvida:",
     "lastLink": "Clique aqui para ver a música no Last.FM",
     "music": "Música",
     "currentlyListening": "Eu estou ouvindo neste momento!",
-    "lastUpdate": "Última atualização: "
+    "lastUpdate": "Última atualização: ",
+    "noRecentTracks": "Nenhuma música recente encontrada"
 }

src/pages/music/index.tsx

@@ -1,4 +1,4 @@
-import { getRecentTracks } from "../../api/lastfm";
+import { getRecentTracks, TrackResponse } from "../../api/lastfm";
 import { MainContainer } from "../../components/MainContent/styles";
 import { useQuery } from '@tanstack/react-query'
 import { Paragraph } from "../../components/Paragraph/styles";
@@ -8,22 +8,48 @@ import { MusicDescription, MusicTitle } from "./styles";
 
 export default function Music() {
     const { t } = useTranslation()
-    const { data: lastResponse } = useQuery({
+    const { data: lastResponse, isLoading, isError, error } = useQuery<TrackResponse>({
         queryKey: ['song'],
-        queryFn: getRecentTracks
+        queryFn: getRecentTracks,
+        retry: 1,
+        refetchOnWindowFocus: false
     })
-    const isAvailable = false;
-    if(isAvailable){
+    
+    const isAvailable = true;
+    if (isAvailable){
+        const track = lastResponse?.track;
+        const isCurrentlyPlaying = !track?.date?.["#text"];
+        
         return (
             <MainContainer>
                 <MusicTitle>{t("myLast")}</MusicTitle>
-                <MusicDescription>{t("myLastDescription")}</MusicDescription>
-                <Paragraph>{lastResponse?.recenttracks?.track[0].name} - {lastResponse?.recenttracks?.track[0].artist["#text"]}</Paragraph>
-                <IconLink target="blank" href={lastResponse?.recenttracks?.track[0].url}>{t("lastLink")}</IconLink>
-                {lastResponse?.recenttracks?.track[0]?.date?.["#text"] ?
-                    <Paragraph>{t("lastUpdate")}{lastResponse?.recenttracks?.track[0]?.date["#text"]} UTC</Paragraph>
-                    : <Paragraph>{t("currentlyListening")}</Paragraph>
-                }
+                
+                {isLoading ? (
+                    <Paragraph>Loading music data...</Paragraph>
+                ) : isError ? (
+                    <>
+                        <Paragraph>Error loading music data</Paragraph>
+                        <Paragraph>Error details: {error instanceof Error ? error.message : String(error)}</Paragraph>
+                    </>
+                ) : (
+                    <>
+                        <MusicDescription>
+                            {isCurrentlyPlaying ? t("myLastDescription") : t("lastPlayed")}
+                        </MusicDescription>
+                        {track ? (
+                            <>
+                                <Paragraph>{track.name} - {track.artist["#text"]}</Paragraph>
+                                <IconLink target="blank" href={track.url}>{t("lastLink")}</IconLink>
+                                {isCurrentlyPlaying ? 
+                                    <Paragraph>{t("currentlyListening")}</Paragraph>
+                                    : <Paragraph>{t("lastUpdate")}{track.date?.["#text"]} UTC</Paragraph>
+                                }
+                            </>
+                        ) : (
+                            <Paragraph>{t("noRecentTracks")}</Paragraph>
+                        )}
+                    </>
+                )}
             </MainContainer>
         )
     }