From 5a666c64d99f1a2d7f8b3e5a64f76601bb5e1657 Mon Sep 17 00:00:00 2001 From: Aidan Date: Wed, 23 Apr 2025 08:36:03 -0400 Subject: [PATCH 1/2] design: improve design of sidebar, fix margin --- src/components/Drawer/styles.ts | 21 +++++++++++++++++++++ src/components/Header/index.tsx | 5 +++-- src/components/MainContent/styles.ts | 2 +- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/Drawer/styles.ts b/src/components/Drawer/styles.ts index 838bcd7..be6cdbe 100644 --- a/src/components/Drawer/styles.ts +++ b/src/components/Drawer/styles.ts @@ -1,11 +1,13 @@ import styled from "styled-components"; +{/* this is misaligned */} export const Drawer = styled.button` all: unset; color: white; cursor: pointer; transition: color 0.3s; display: none; +font-size: 1.5rem; &:hover { color: ${props => props.theme.cream} @@ -63,4 +65,23 @@ animation-duration: 0.5s; &:hover { color: ${props => props.theme.cream} } +` + +export const DrawerTitle = styled.h4` + text-align: center; + margin-top: 1rem; + color: white; + animation-name: slideIn; + animation-duration: 0.5s; + + @keyframes slideIn { + 0% { + transform: translateX(-100%); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } + } ` \ No newline at end of file diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index d53ba19..82a34a4 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -2,7 +2,7 @@ import { HashRouter } from "react-router-dom"; import { HeaderContainer, NavLink, HomeLink, LanguageSelector } from "./styles"; import { AvatarHeader } from "../Avatar/avatar"; import i18n from "../../utils/i18n"; -import { Drawer, DrawerContainer, DrawerItem } from "../Drawer/styles"; +import { Drawer, DrawerContainer, DrawerItem, DrawerTitle } from "../Drawer/styles"; import useDrawerVisible from "../../hooks/useDrawerVisible"; import { useTranslation } from "react-i18next"; @@ -13,6 +13,7 @@ export default function Header() { localStorage.setItem("language", event.target.value); }; const { ref, openDrawer, setOpenDrawer } = useDrawerVisible(); + return ( <> @@ -38,7 +39,7 @@ export default function Header() { {openDrawer && setOpenDrawer(false)}> - Giv's Website + Giv's Website {t("about")} {t("skills")} {t("contact")} diff --git a/src/components/MainContent/styles.ts b/src/components/MainContent/styles.ts index f4d6a1f..e19abd7 100644 --- a/src/components/MainContent/styles.ts +++ b/src/components/MainContent/styles.ts @@ -6,6 +6,6 @@ export const MainContainer = styled.div` background-color: ${props => props.theme["gray-700"]}; border-radius: 8px; @media(max-width: 640px){ - margin: 0 0 3rem 0; + margin: 0.75rem 0 3rem 0; } ` \ No newline at end of file -- 2.47.1 From 502e9f7f2fbb34ebfbe4fc68606f683eca8e28d2 Mon Sep 17 00:00:00 2001 From: Aidan Date: Wed, 23 Apr 2025 11:20:39 -0400 Subject: [PATCH 2/2] feat: re-implement lastfm api --- README.md | 19 +-------- src/api/lastfm.ts | 82 +++++++++++++++++++++++---------------- src/lib/axios.ts | 4 +- src/locales/en-us.json | 4 +- src/locales/pt-br.json | 4 +- src/pages/music/index.tsx | 50 ++++++++++++++++++------ 6 files changed, 98 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index 21e55bf..82e3a2c 100644 --- a/README.md +++ b/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 . ## Special Thanks - [Aidan](https://github.com/ihatenodejs) - [lucmsilva](https://github.com/lucmsilva651/) - NineTailedFox +- [biancarosa](https://github.com/biancarosa) - Last.fm API **Enjoy!** diff --git a/src/api/lastfm.ts b/src/api/lastfm.ts index 0b7fc15..1e2b49a 100644 --- a/src/api/lastfm.ts +++ b/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('/', { - params: { - api_key, - method: 'user.getrecenttracks', - user: 'givfnz', - format: 'json', - limit: 1 - } - }) - return response.data + try { + const response = await api.get(''); + console.log('Last.fm data:', response.data); + + return response.data; + } catch (error) { + console.error('Err while fetching Last.fm data:', error); + throw error; + } } \ No newline at end of file diff --git a/src/lib/axios.ts b/src/lib/axios.ts index fdec4ef..a65205b 100644 --- a/src/lib/axios.ts +++ b/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, }) \ No newline at end of file diff --git a/src/locales/en-us.json b/src/locales/en-us.json index 3d84929..089d6e2 100644 --- a/src/locales/en-us.json +++ b/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" } \ No newline at end of file diff --git a/src/locales/pt-br.json b/src/locales/pt-br.json index edaa6c6..720e0e9 100644 --- a/src/locales/pt-br.json +++ b/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" } \ No newline at end of file diff --git a/src/pages/music/index.tsx b/src/pages/music/index.tsx index 0e97ebc..a626d98 100644 --- a/src/pages/music/index.tsx +++ b/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({ 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 ( {t("myLast")} - {t("myLastDescription")} - {lastResponse?.recenttracks?.track[0].name} - {lastResponse?.recenttracks?.track[0].artist["#text"]} - {t("lastLink")} - {lastResponse?.recenttracks?.track[0]?.date?.["#text"] ? - {t("lastUpdate")}{lastResponse?.recenttracks?.track[0]?.date["#text"]} UTC - : {t("currentlyListening")} - } + + {isLoading ? ( + Loading music data... + ) : isError ? ( + <> + Error loading music data + Error details: {error instanceof Error ? error.message : String(error)} + + ) : ( + <> + + {isCurrentlyPlaying ? t("myLastDescription") : t("lastPlayed")} + + {track ? ( + <> + {track.name} - {track.artist["#text"]} + {t("lastLink")} + {isCurrentlyPlaying ? + {t("currentlyListening")} + : {t("lastUpdate")}{track.date?.["#text"]} UTC + } + + ) : ( + {t("noRecentTracks")} + )} + + )} ) } -- 2.47.1