Make GH stars a client component
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m3s

This commit is contained in:
Braydon 2024-04-18 16:44:25 -04:00
parent 817493bfd4
commit 5e086c17b8
2 changed files with 35 additions and 31 deletions

@ -1,8 +1,17 @@
"use client";
import MinecraftButton from "@/components/minecraft-button"; import MinecraftButton from "@/components/minecraft-button";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { StarIcon } from "@heroicons/react/24/outline"; import { StarIcon } from "@heroicons/react/24/outline";
import Link from "next/link"; 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 * The button to display the amount
@ -10,7 +19,27 @@ import { ReactElement, Suspense } from "react";
* *
* @returns the component jsx * @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 ( return (
<Link <Link
href="https://github.com/Rainnny7/RESTfulMC" href="https://github.com/Rainnny7/RESTfulMC"
@ -22,7 +51,9 @@ const GitHubStarButton = async (): Promise<ReactElement> => {
<Suspense <Suspense
fallback={<Skeleton className="w-4 h-5 rounded-md" />} 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> </Suspense>
<StarIcon <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; export default GitHubStarButton;

@ -17,7 +17,7 @@ import { ReactElement } from "react";
const Navbar = (): ReactElement => { const Navbar = (): ReactElement => {
const path: string = usePathname(); // Get the current path const path: string = usePathname(); // Get the current path
return ( 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 */} {/* Left */}
<div className="flex gap-3 xs:gap-7 lg:gap-12 items-center transition-all transform-gpu"> <div className="flex gap-3 xs:gap-7 lg:gap-12 items-center transition-all transform-gpu">
{/* App Branding */} {/* App Branding */}