fix: lastfm integration

components/500Page.jsx

@@ -1,6 +1,6 @@
 import { Page500Style } from "./500Page.style";
 
-function Page500() {
+function Page500(error = null) {
   return (
     <Page500Style>
       <div className="container">
@@ -10,6 +10,8 @@ function Page500() {
           <span>500</span> <br />
           Internal server error
         </h1>
+        <p className="info">{JSON.stringify(error)}</p>
+        <br/>
         <p>I might be currently trying to fix the problem.</p>
         <p className="info">Maybe try again in a few minutes ...</p>
       </div>

components/errorBoundary.jsx

@@ -1,4 +1,5 @@
 import { Component } from "react"
+import Page500 from "./500Page"
 
 class ErrorBoundary extends Component {
     constructor(props) {
@@ -20,6 +21,7 @@ class ErrorBoundary extends Component {
         // You can render any custom fallback UI
         return (
           <div>
+            <Page500 />
             <h2>Oops, there is an error!</h2>
             <button
               type="button"

components/skillCard.styled.js

@@ -93,4 +93,8 @@ export default styled.div`
       background-color: var(--color7);
     }
   }
+  .albumart {
+    padding-top: 5px;
+    width: 97%;
+  }
 `;

components/skillComponents/lastfm_current.jsx

@@ -1,8 +1,6 @@
 import React from "react";
 import SkillCard from "../skillCard";
-import SkillCardStyle from "../skillCard.styled";
-import { format, parse } from "date-format-parse";
-import { useLastFM } from "use-last-fm";
+import useLastFM from "hooks/useLastFM";
 
 function LastFMCurrentSkillCard({
   title,
@@ -13,9 +11,9 @@ function LastFMCurrentSkillCard({
   name,
   url,
 }) {
-  const lastFM = useLastFM(3);
+  const {status,song} = useLastFM();
 
-  if (lastFM.status !== "playing") {
+  if (status !== "playing") {
     return (
       <SkillCard title={title} image={image} url={url}>
         Not listening to anything
@@ -25,13 +23,13 @@ function LastFMCurrentSkillCard({
   return (
     <SkillCard title={title} image={image} url={url}>
       <div className="description">
-        {empty ? "No recent tracks" : `${artist} - ${name}`}
+        {empty ? "No recent tracks" : `${song.artist} - ${song.name}`}
       </div>
       <div className="description">
-        {empty ? "" : <img src={albumImg} alt={`${artist} - ${name}`} />}
+        {empty ? "" : <img src={song.art} alt={`${song.artist} - ${song.name}`} className="albumart"/>}
       </div>
     </SkillCard>
   );
 }
 
-export default LastFMCurrentSkillCard;
+export default LastFMCurrentSkillCard;

handlers/axios.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 
 export default axios.create({
-  baseURL: "https://api.b68.dev",
-  //   baseURL: "http://localhost:9000",
+  // baseURL: "https://api.b68.dev",
+    baseURL: "http://localhost:9000",
 });

hooks/useLastFM.js

@@ -0,0 +1,68 @@
+import {useEffect,useState} from "react"
+import axios from "../handlers/axios"
+
+const parseSong = (
+    body,
+    imageSize,
+  ) => {
+    if (!body) {
+      return {
+        status: 'connecting',
+        song: null,
+      };
+    }
+  
+    const lastSong = body.recenttracks.track?.[0];
+  
+    if (!lastSong || !lastSong['@attr']?.nowplaying) {
+      return {
+        status: 'idle',
+        song: null,
+      };
+    }
+  
+    const image = lastSong.image.find(i => {
+      return i.size === imageSize;
+    });
+  
+    return {
+      status: 'playing',
+      song: {
+        name: lastSong.name,
+        artist: lastSong.artist['#text'],
+        art: image?.['#text'] ?? lastSong.image[0]['#text'],
+        url: lastSong.url,
+        album: lastSong.album['#text'],
+      },
+    };
+  }
+  
+
+const useLastFM = () =>{
+    const [status,setStatus] = useState("idle")
+    const [song,setSong] = useState();
+
+    const getStatus = async () =>{
+
+        axios.get("/me/lastfm/current").then((res)=>{
+           const {status, song}=
+                parseSong(res.data, "extralarge")
+            setSong(song)
+            setStatus(status)
+        })
+    }
+    
+    useEffect(()=>{
+
+        const interval = setInterval(()=>{
+            getStatus()
+        }, 3000)
+
+        return () => clearInterval(interval)
+
+    },[])
+
+    return {status,song}
+}
+
+export default useLastFM

package.json

@@ -39,8 +39,7 @@
     "react-dom": "^18.2.0",
     "react-use-lanyard": "^0.1.1",
     "sitemap": "^7.1.1",
-    "styled-components": "^5.3.7",
-    "use-last-fm": "BRAVO68WEB/use-last-fm"
+    "styled-components": "^5.3.7"
   },
   "devDependencies": {
     "eslint": "^7.32.0",

pages/stats.js

@@ -18,3 +18,13 @@ export default function Home() {
     </div>
   );
 }
+
+// export const getServerSideProps = async () => {
+
+//   throw new Error("Internal server error")
+
+//   return {
+//     props:[]
+//   }
+// }
+ 

yarn.lock

@@ -1077,11 +1077,6 @@ define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-dequal@2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
-  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
-
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -2895,13 +2890,6 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-swr@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-0.4.2.tgz#4a9ed5e9948088af145c79d716d294cb99712a29"
-  integrity sha512-SKGxcAfyijj/lE5ja5zVMDqJNudASH3WZPRUakDVOePTM18FnsXgugndjl9BSRwj+jokFCulMDe7F2pQL+VhEw==
-  dependencies:
-    dequal "2.0.2"
-
 swr@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/swr/-/swr-1.3.0.tgz#c6531866a35b4db37b38b72c45a63171faf9f4e8"
@@ -3038,12 +3026,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-use-last-fm@BRAVO68WEB/use-last-fm:
-  version "0.6.2"
-  resolved "https://codeload.github.com/BRAVO68WEB/use-last-fm/tar.gz/9d2ce5424e8259ae91d2a0e00d8efdb41971c7ce"
-  dependencies:
-    swr "^0.4.0"
-
 v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"