From 5e086c17b8d73d98a2697dd467c77f9f4e620139 Mon Sep 17 00:00:00 2001 From: Rainnny7 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 => { +const GitHubStarButton = (): ReactElement => { + const [stars, setStars]: [ + number | undefined, + Dispatch> + ] = useState(undefined); // The stars of the repository + + useEffect(() => { + const fetchStars = async (): Promise => { + 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 ( => { } > - + + {stars || 0} + => { ); }; -/** - * The github star count component. - * - * @returns the star count jsx - */ -const GitHubStarCount = async (): Promise => { - const stars: number = await getStarCount(); // Get the repo star count - return ( - {stars} - ); -}; - -/** - * Get the amount of stars - * the repository has. - * - * @returns the star count - */ -const getStarCount = async (): Promise => { - 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 ( -