add dedicated stat module

src/components/info/TVComponent.tsx

@@ -1,73 +0,0 @@
-import { useState, useEffect } from "react";
-
-type TVObject = {
-  id: number;
-  type: string;
-  title: string;
-  author: string | null;
-  description: string;
-  image: string;
-  paused: boolean;
-  episode: string;
-  tmdbId: string;
-  finished: boolean;
-  yearReleased: string;
-  genre: string;
-  startedOn: string;
-};
-
-export default function TVComponent() {
-  const [show, setShow] = useState<TVObject | null>(null);
-  const [failedFetch, setFailedFetch] = useState(false);
-
-  useEffect(() => {
-    async function fetchMusic() {
-      const response = await fetch(
-        "https://api.alexav.gg/v4/tracker/items?type=TV&sort=desc&limit=1"
-      );
-      if (response.ok) {
-        const data = await response.json();
-        if (data && data.length <= 0) {
-          setFailedFetch(true);
-        } else setShow(data[0] as TVObject);
-      } else setFailedFetch(true);
-    }
-
-    setTimeout(() => {
-      fetchMusic();
-    }, 60000);
-    fetchMusic();
-  }, []);
-
-  if (show) {
-    return (
-      <div className="flex align-middle">
-        <a
-          className="hover:underline"
-          href={`https://tracker.alexav.gg/info/${show.id}`}
-          target="_blank"
-        >
-          <h1 className="lowercase">
-            {show.title}
-            <br />
-            {show.finished ? "finished" : show.paused ? "paused" : show.episode}
-          </h1>
-        </a>
-      </div>
-    );
-  } else {
-    if (failedFetch) {
-      return (
-        <div>
-          <p>failed to get show :(</p>
-        </div>
-      );
-    } else {
-      return (
-        <div>
-          <p>loading show..</p>
-        </div>
-      );
-    }
-  }
-}

src/components/modules/InfoModule.tsx

@@ -1,5 +1,4 @@
 import MusicComponent from "../info/MusicComponent";
-import TVComponent from "../info/TVComponent";
 
 export default function InfoModule() {
   return (
@@ -41,11 +40,6 @@ export default function InfoModule() {
 
           <h1 className="font-bold text-2xl italic">obsessed with</h1>
           <p>dexter, tlou, twd</p>
-
-          <hr className="my-2" />
-
-          <h1 className="font-bold text-2xl italic">status</h1>
-          <TVComponent />
         </div>
       </div>
     </div>

src/components/modules/StatModule.tsx

@@ -0,0 +1,214 @@
+import { useState, useEffect } from "react";
+
+type ContentObject = {
+  id: number;
+  type: string;
+  title: string;
+  author: string | null;
+  description: string;
+  image: string;
+  paused: boolean;
+  episode: string;
+  tmdbId: string;
+  finished: boolean;
+  yearReleased: string;
+  genre: string;
+  startedOn: string;
+};
+
+export default function StatModule() {
+  const [show, setShow] = useState<ContentObject | null>(null);
+  const [game, setGame] = useState<ContentObject | null>(null);
+  const [book, setBook] = useState<ContentObject | null>(null);
+
+  const [failedFetch, setFailedFetch] = useState({
+    tv: false,
+    book: false,
+    game: false,
+  });
+
+  const ErrorState = () => {
+    return (
+      <div className="text-center p-2">
+        <h1 className="text-lg font-semibold">Uh oh :(</h1>
+        <p>Something went wrong loading this stat</p>
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    async function fetchTV() {
+      const response = await fetch(
+        "https://api.alexav.gg/v4/tracker/items?type=TV&sort=desc&limit=1&started=true"
+      );
+      if (response.ok) {
+        const data = await response.json();
+        if (data && data.length <= 0) {
+          setFailedFetch((prev) => {
+            return {
+              ...prev,
+              tv: true,
+            };
+          });
+        } else setShow(data.data[0] as ContentObject);
+      } else
+        setFailedFetch((prev) => {
+          return {
+            ...prev,
+            tv: true,
+          };
+        });
+    }
+    async function fetchBook() {
+      const response = await fetch(
+        "https://api.alexav.gg/v4/tracker/items?type=BOOK&sort=desc&limit=1&started=true"
+      );
+      if (response.ok) {
+        const data = await response.json();
+        if (data && data.length <= 0) {
+          setFailedFetch((prev) => {
+            return {
+              ...prev,
+              book: true,
+            };
+          });
+        } else setBook(data.data[0] as ContentObject);
+      } else
+        setFailedFetch((prev) => {
+          return {
+            ...prev,
+            book: true,
+          };
+        });
+    }
+    async function fetchGame() {
+      const response = await fetch(
+        "https://api.alexav.gg/v4/tracker/items?type=GAME&sort=desc&limit=1&started=true"
+      );
+      if (response.ok) {
+        const data = await response.json();
+        if (data && data.length <= 0) {
+          setFailedFetch((prev) => {
+            return {
+              ...prev,
+              game: true,
+            };
+          });
+        } else setGame(data.data[0] as ContentObject);
+      } else
+        setFailedFetch((prev) => {
+          return {
+            ...prev,
+            game: true,
+          };
+        });
+    }
+
+    fetchTV();
+    fetchBook();
+    fetchGame();
+  }, []);
+
+  return (
+    <div className="border border-white border-solid rounded-lg w-full mb-4">
+      <div className="grid grid-cols-3 gap-2">
+        {!failedFetch.tv ? (
+          <div className="text-center p-2 space-y-2">
+            <img
+              src={show?.image}
+              className="object-cover w-full h-[50px] object-top"
+            />
+            <a
+              className="hover:underline"
+              href={`https://tracker.alexav.gg/info/${show?.id}`}
+              target="_blank"
+            >
+              <h1 className="font-semibold">{show?.title}</h1>
+              <p>
+                {" "}
+                {show?.finished
+                  ? "finished"
+                  : show?.paused
+                    ? "paused"
+                    : show?.episode}
+              </p>
+            </a>
+          </div>
+        ) : (
+          <ErrorState />
+        )}
+        {!failedFetch.game ? (
+          <div className="text-center p-2 space-y-2">
+            <img
+              src={game?.image}
+              className="object-cover w-full h-[50px] object-top"
+            />
+            <a
+              className="hover:underline"
+              href={`https://tracker.alexav.gg/info/${game?.id}`}
+              target="_blank"
+            >
+              <h1 className="font-semibold">{game?.title}</h1>
+              <p>
+                {" "}
+                {game?.finished
+                  ? "finished"
+                  : game?.paused
+                    ? "paused"
+                    : game?.episode}
+              </p>
+            </a>
+          </div>
+        ) : (
+          <ErrorState />
+        )}
+        {!failedFetch.book ? (
+          <div className="text-center p-2 space-y-2">
+            <img
+              src={book?.image}
+              className="object-cover w-full h-[50px] object-top"
+            />
+            <a
+              className="hover:underline"
+              href={`https://tracker.alexav.gg/info/${book?.id}`}
+              target="_blank"
+            >
+              <h1 className="font-semibold">{book?.title}</h1>
+              <p>
+                {" "}
+                {book?.finished
+                  ? "finished"
+                  : book?.paused
+                    ? "paused"
+                    : book?.author}
+              </p>
+            </a>
+          </div>
+        ) : (
+          <ErrorState />
+        )}
+      </div>
+    </div>
+  );
+
+  // if (show) {
+  //   return (
+  //     <div className="flex align-middle">
+  //     </div>
+  //   );
+  // } else {
+  //   if (failedFetch) {
+  //     return (
+  //       <div>
+  //         <p>failed to get show :(</p>
+  //       </div>
+  //     );
+  //   } else {
+  //     return (
+  //       <div>
+  //         <p>loading show..</p>
+  //       </div>
+  //     );
+  //   }
+  // }
+}

src/pages/App.tsx

@@ -7,6 +7,7 @@ import InfoModule from "../components/modules/InfoModule";
 import WelcomeModule from "../components/modules/WelcomeModule";
 import FantasyStatus from "../components/FantasyStatus";
 import ScoreModule from "../components/modules/ScoreModule";
+import StatModule from "../components/modules/StatModule";
 
 export default function App() {
   const [selectedImage, setSelectedImage] = useState<string>("");
@@ -38,6 +39,7 @@ export default function App() {
 
           <WelcomeModule />
           <InfoModule />
+          <StatModule />
           <PictureCarousel onClick={(url) => setSelectedImage(url)} />
           <GameComponent />
           <ScoreModule type={"bills"} />