GitHub Contributions Fetcher

1"use client";
2 
3import * as React from "react";
4import GitHubContributions, {
5  Contribution,
6} from "@/registry/github-contributions/github-contributions";
7import { Grid3x3Icon, TriangleAlertIcon } from "lucide-react";
8 
9interface GithubContributionsResponse {
10  total: {
11    [year: string]: number; // 'lastYear'
12  };
13  contributions: Array<Contribution>;
14}
15 
16interface StatusDisplayProps {
17  icon: React.ReactNode;
18  message: string;
19  additionalClasses?: string;
20}
21 
22// Helper component to display loading/error states
23const StatusDisplay: React.FC<StatusDisplayProps> = ({
24  icon,
25  message,
26  additionalClasses,
27}) => {
28  return (
29    <div
30      className={`w-full max-w-[688px] h-[104px] border rounded-md flex flex-col items-center justify-center gap-1 ${
31        additionalClasses || ""
32      }`}
33    >
34      {icon}
35      <p className="text-sm text-muted-foreground">{message}</p>
36    </div>
37  );
38};
39 
40const GithubContributionsFetcher: React.FC<{ username: string }> = ({
41  username,
42}) => {
43  const [loading, setLoading] = React.useState<boolean>(true);
44  const [error, setError] = React.useState<Error | null>(null);
45  const [data, setData] = React.useState<Contribution[] | null>(null);
46 
47  React.useEffect(() => {
48    const fetchContributionData = async () => {
49      try {
50        const response = await fetch(
51          `https://github-contributions-api.jogruber.de/v4/${username}?y=last`,
52        );
53        if (!response.ok)
54          throw new Error(`HTTP error! status: ${response.status}`);
55 
56        const result: GithubContributionsResponse = await response.json();
57        setData(result.contributions);
58      } catch (err) {
59        setError(err as Error);
60      } finally {
61        setLoading(false);
62      }
63    };
64 
65    fetchContributionData();
66  }, [username]);
67 
68  if (loading) {
69    return (
70      <StatusDisplay
71        icon={<Grid3x3Icon className="size-6 stroke-muted-foreground" />}
72        message={`Loading ${username}'s contributions...`}
73        additionalClasses="motion-safe:animate-pulse"
74      />
75    );
76  }
77 
78  if (data === null || error) {
79    return (
80      <StatusDisplay
81        icon={<TriangleAlertIcon className="size-6 stroke-muted-foreground" />}
82        message="Could not load contributions."
83      />
84    );
85  }
86 
87  return <GitHubContributions data={data} />;
88};
89 
90export default GithubContributionsFetcher;