From 5e086c17b8d73d98a2697dd467c77f9f4e620139 Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Thu, 18 Apr 2024 16:44:25 -0400
Subject: [PATCH] Make GH stars a client component

---
 .../src/app/components/github-star-button.tsx | 64 ++++++++++---------
 Frontend/src/app/components/navbar.tsx        |  2 +-
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/Frontend/src/app/components/github-star-button.tsx b/Frontend/src/app/components/github-star-button.tsx
index 2af46ab..68fa770 100644
--- a/Frontend/src/app/components/github-star-button.tsx
+++ b/Frontend/src/app/components/github-star-button.tsx
@@ -1,8 +1,17 @@
+"use client";
+
 import MinecraftButton from "@/components/minecraft-button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { StarIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
-import { ReactElement, Suspense } from "react";
+import {
+    Dispatch,
+    ReactElement,
+    SetStateAction,
+    Suspense,
+    useEffect,
+    useState,
+} from "react";
 
 /**
  * The button to display the amount
@@ -10,7 +19,27 @@ import { ReactElement, Suspense } from "react";
  *
  * @returns the component jsx
  */
-const GitHubStarButton = async (): Promise<ReactElement> => {
+const GitHubStarButton = (): ReactElement => {
+    const [stars, setStars]: [
+        number | undefined,
+        Dispatch<SetStateAction<number | undefined>>
+    ] = useState<number | undefined>(undefined); // The stars of the repository
+
+    useEffect(() => {
+        const fetchStars = async (): Promise<void> => {
+            const response: Response = await fetch(
+                "https://api.github.com/repos/Rainnny7/RESTfulMC",
+                { next: { revalidate: 300 } } // Revalidate every 5 minutes
+            );
+            const json: any = await response.json(); // Get the JSON response
+            setStars(json.stargazers_count); // Set the stars
+            console.log("fetch stars");
+        };
+        if (stars === undefined) {
+            fetchStars(); // Fetch the stars
+        }
+    }, [stars]);
+
     return (
         <Link
             href="https://github.com/Rainnny7/RESTfulMC"
@@ -22,7 +51,9 @@ const GitHubStarButton = async (): Promise<ReactElement> => {
                 <Suspense
                     fallback={<Skeleton className="w-4 h-5 rounded-md" />}
                 >
-                    <GitHubStarCount />
+                    <code className="px-1 rounded-md bg-minecraft-green-3/80">
+                        {stars || 0}
+                    </code>
                 </Suspense>
 
                 <StarIcon
@@ -36,31 +67,4 @@ const GitHubStarButton = async (): Promise<ReactElement> => {
     );
 };
 
-/**
- * The github star count component.
- *
- * @returns the star count jsx
- */
-const GitHubStarCount = async (): Promise<ReactElement> => {
-    const stars: number = await getStarCount(); // Get the repo star count
-    return (
-        <code className="px-1 rounded-md bg-minecraft-green-3/80">{stars}</code>
-    );
-};
-
-/**
- * Get the amount of stars
- * the repository has.
- *
- * @returns the star count
- */
-const getStarCount = async (): Promise<number> => {
-    const response: Response = await fetch(
-        "https://api.github.com/repos/Rainnny7/RESTfulMC",
-        { next: { revalidate: 300 } } // Revalidate every 5 minutes
-    );
-    const json: any = await response.json(); // Get the JSON response
-    return json.stargazers_count; // Return the stars
-};
-
 export default GitHubStarButton;
diff --git a/Frontend/src/app/components/navbar.tsx b/Frontend/src/app/components/navbar.tsx
index 32402a8..98e7f9e 100644
--- a/Frontend/src/app/components/navbar.tsx
+++ b/Frontend/src/app/components/navbar.tsx
@@ -17,7 +17,7 @@ import { ReactElement } from "react";
 const Navbar = (): ReactElement => {
     const path: string = usePathname(); // Get the current path
     return (
-        <nav className="fixed inset-x-0 flex h-16 sm:px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
+        <nav className="fixed inset-x-0 flex h-16 px-5 sm:px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
             {/* Left */}
             <div className="flex gap-3 xs:gap-7 lg:gap-12 items-center transition-all transform-gpu">
                 {/* App Branding */}