ref: create an example for env, fix lastfm

Reviewed-on: GivFNZ/my-website#2

.env.example

@@ -0,0 +1,2 @@
+VITE_GIV_EMAIL = 'youremail@email.com'
+VITE_LAST_USERNAME = 'your_last_username'

package.json

@@ -1,48 +1,47 @@
-{
+{
-  "name": "givs-website-react",
+  "name": "givs-website-react",
-  "private": true,
+  "private": true,
-  "version": "1.3.3",
+  "version": "1.3.5",
-  "type": "module",
+  "type": "module",
-  "scripts": {
+  "scripts": {
-    "dev": "vite",
+    "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview"
-  },
+  },
-  "dependencies": {
+  "dependencies": {
-    "@fontsource-variable/red-hat-display": "^5.1.1",
+    "@fontsource-variable/red-hat-display": "^5.1.1",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@tanstack/react-query": "^5.69.0",
+    "@tanstack/react-query": "^5.69.0",
-    "@types/node": "^22.13.0",
+    "@types/node": "^22.13.0",
-    "axios": "^1.8.4",
+    "axios": "^1.8.4",
-    "dotenv": "^16.4.7",
+    "fs": "^0.0.1-security",
-    "fs": "^0.0.1-security",
+    "i18next": "^24.2.2",
-    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.4",
-    "i18next-browser-languagedetector": "^8.0.4",
+    "keen-slider": "^6.8.6",
-    "keen-slider": "^6.8.6",
+    "lucide-react": "^0.474.0",
-    "lucide-react": "^0.474.0",
+    "path": "^0.12.7",
-    "path": "^0.12.7",
+    "pnpm": "^9.15.4",
-    "pnpm": "^9.15.4",
+    "react": "^18.3.1",
-    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react-i18next": "^15.4.1",
-    "react-i18next": "^15.4.1",
+    "react-router-dom": "^7.1.5",
-    "react-router-dom": "^7.1.5",
+    "react-typed": "^2.0.12",
-    "react-typed": "^2.0.12",
+    "styled-components": "^6.1.14"
-    "styled-components": "^6.1.14"
+  },
-  },
+  "devDependencies": {
-  "devDependencies": {
+    "@eslint/js": "^9.19.0",
-    "@eslint/js": "^9.19.0",
+    "@types/react": "^18.3.18",
-    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
-    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
-    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
-    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
-    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
-    "globals": "^15.14.0",
+    "typescript": "^5.7.3",
-    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.22.0",
-    "typescript-eslint": "^8.22.0",
+    "vite": "^5.4.14"
-    "vite": "^5.4.14"
+  }
-  }
+}
-}

src/api/lastfm.ts

@@ -1,61 +1,10 @@
 import { api } from "../lib/axios";
 
-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: [{
-                "#text": string,
-                size: string
-            }],
-            mbid: string,
-            name: string,
-            url: string,
-            date: {
-                uts: string,
-                "#text": string
-            }
-        }]
-    }
-}
-
 export async function getRecentTracks() {
     try {
-        const response = await api.get<TrackResponse>('');
+        const response = await api.get('/latest-song');
-        console.log('Last.fm data:', response.data);
-        
         return response.data;
     } catch (error) {
-        console.error('Err while fetching Last.fm data:', error);
+        return error;
-        throw error;
     }
 }

src/lib/axios.ts

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

src/pages/contact/index.tsx

@@ -1,33 +1,33 @@
-import { useState } from 'react';
+import { useState } from 'react';
-import { Button, TextArea } from './styles';
+import { Button, TextArea } from './styles';
-import { MainContainer } from '../../components/MainContent/styles';
+import { MainContainer } from '../../components/MainContent/styles';
-import { Send } from 'lucide-react';
+import { Send } from 'lucide-react';
-import { Paragraph } from '../../components/Paragraph/styles';
+import { Paragraph } from '../../components/Paragraph/styles';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
-
+
-export default function Contact() {
+export default function Contact() {
-  const { t } = useTranslation();
+  const { t } = useTranslation();
-  const emailAddress = import.meta.env.VITE_GIV_EMAIL;
+  const emailAddress = import.meta.env.VITE_GIV_EMAIL;
-  const [typedText, setTypedText] = useState('');
+  const [typedText, setTypedText] = useState('');
-
+
-  function handleSubmit() {
+  function handleSubmit() {
-    const mailToTrigger = 'mailto:' + emailAddress + '&subject=I visited your website!&body=' + typedText;
+    const mailToTrigger = 'mailto:' + emailAddress + '&subject=I visited your website!&body=' + typedText;
-    window.location.href = mailToTrigger
+    window.location.href = mailToTrigger
-  }
+  }
-
+
-  return (
+  return (
-    <MainContainer>
+    <MainContainer>
-      <h1>{t("contact")}</h1>
+      <h1>{t("contact")}</h1>
-      <Paragraph>
+      <Paragraph>
-        <span>{t("contactInfo")}</span>
+        <span>{t("contactInfo")}</span>
-      </Paragraph>
+      </Paragraph>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit}>
-        <TextArea
+        <TextArea
-          onChange={(e) => setTypedText(e.target.value)}
+          onChange={(e) => setTypedText(e.target.value)}
-          className="bgb"  
+          className="bgb"  
-        />
+        />
-        <Button type='submit'><Send className="ico" />{t("send")}</Button>
+        <Button type='submit'><Send className="ico" />{t("send")}</Button>
-      </form>
+      </form>
-    </MainContainer>
+    </MainContainer>
-  );
+  );
 }

src/pages/music/index.tsx

@@ -1,4 +1,4 @@
-import { getRecentTracks, TrackResponse } from "../../api/lastfm";
+import { getRecentTracks } from "../../api/lastfm";
 import { MainContainer } from "../../components/MainContent/styles";
 import { useQuery } from '@tanstack/react-query'
 import { Paragraph } from "../../components/Paragraph/styles";
@@ -8,7 +8,7 @@ import { MusicDescription, MusicTitle } from "./styles";
 
 export default function Music() {
     const { t } = useTranslation()
-    const { data: lastResponse, isLoading, isError, error } = useQuery<TrackResponse>({
+    const { data: lastResponse, isLoading, isError, error } = useQuery({
         queryKey: ['song'],
         queryFn: getRecentTracks,
         retry: 1,