dvorakmortonxd.dev/src/app/components/ContributionHeatmap.tsx

"use client";

import React, { useEffect, useState } from "react";

interface HeatmapData {
  timestamp: number;
  contributions: number;
}

export default function ContributionHeatmap() {
  const [weeks, setWeeks] = useState<{ date: string; contribs: number; level: number }[][]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [totalContribs, setTotalContribs] = useState(0);
  const [activities, setActivities] = useState<any[]>([]);

  useEffect(() => {
    async function fetchHeatmap() {
      try {
        const res = await fetch("/api/heatmap");
        if (!res.ok) {
          throw new Error("Failed to fetch");
        }
        const data: HeatmapData[] = await res.json();
        const map = new Map<string, number>();
        let total = 0;
        data.forEach((item) => {
          const d = new Date(item.timestamp * 1000);
          const dateStr = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
          map.set(dateStr, item.contributions);
          total += item.contributions;
        });

        const endDate = new Date();
        endDate.setHours(0, 0, 0, 0);
        const startDate = new Date(endDate);
        startDate.setFullYear(startDate.getFullYear() - 1);
        startDate.setDate(startDate.getDate() - startDate.getDay());

        const newWeeks = [];
        let currentWeek = [];

        for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
          const dateStr = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
          const contribs = map.get(dateStr) || 0;
          
          let level = 0;
          if (contribs > 0) level = 1;
          if (contribs >= 3) level = 2;
          if (contribs >= 6) level = 3;
          if (contribs >= 10) level = 4;

          currentWeek.push({ date: dateStr, contribs, level });

          if (currentWeek.length === 7) {
            newWeeks.push(currentWeek);
            currentWeek = [];
          }
        }
        if (currentWeek.length > 0) {
          while (currentWeek.length < 7) {
            currentWeek.push({ date: "", contribs: -1, level: -1 });
          }
          newWeeks.push(currentWeek);
        }

        setWeeks(newWeeks);
        setTotalContribs(total);
        setLoading(false);
      } catch (err) {
        console.error("Failed to load heatmap:", err);
        setError(true);
        setLoading(false);
      }
    }

    async function fetchActivities() {
      try {
        const res = await fetch("/api/activities");
        if (res.ok) {
          const data = await res.json();
          // Filter to just standard push/commit events
          const valid = data.filter((d: any) => d.op_type === "commit_repo" || d.op_type === "push_repo").slice(0, 3);
          setActivities(valid);
        }
      } catch (err) {
        console.error("Failed to load activities:", err);
      }
    }

    fetchHeatmap();
    fetchActivities();
  }, []);

  if (loading) {
    return <div style={{ color: "var(--gray)", fontSize: "0.85rem" }}>Loading contributions...</div>;
  }

  if (error) {
    return <div style={{ color: "var(--gray)", fontSize: "0.85rem" }}>Failed to load contributions.</div>;
  }

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "10px", width: "100%" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: "0.85rem", color: "var(--fg)" }}>
          <span style={{ color: "var(--gray)" }}>martin@git.dvorakmortonxd.dev</span>:~$ echo &#34;<span style={{ color: "var(--green)" }}>{totalContribs}</span> contributions in the last year&#34;
        </div>
      </div>
      <div className="heatmap-container">
        {weeks.map((week, wIdx) => (
          <div key={wIdx} className="heatmap-week">
            {week.map((day, dIdx) => (
              <div
                key={dIdx}
                className="heatmap-cell"
                data-level={day.level >= 0 ? day.level : undefined}
                style={{ visibility: day.level === -1 ? "hidden" : "visible" }}
                title={day.level >= 0 ? `${day.contribs} contributions on ${day.date}` : undefined}
              >
              </div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "4px", fontSize: "0.75rem", color: "var(--gray)" }}>
        <span>Less</span>
        <div className="heatmap-legend-cell" data-level="0"></div>
        <div className="heatmap-legend-cell" data-level="1"></div>
        <div className="heatmap-legend-cell" data-level="2"></div>
        <div className="heatmap-legend-cell" data-level="3"></div>
        <div className="heatmap-legend-cell" data-level="4"></div>
        <span>More</span>
      </div>

      {activities.length > 0 && (
        <div>
          <div style={{ fontSize: "0.85rem", color: "var(--fg)", marginBottom: "4px" }}>
            <span style={{ color: "var(--gray)" }}>martin@git.dvorakmortonxd.dev</span>:~$ git log -n 3 <span style={{ color: "var(--gray)" }}>#displays my 3 latest contributions</span>
          </div>
          {activities.map((act, idx) => {
            let msg = "No message";
            try {
              if (act.content) {
                const parsed = JSON.parse(act.content);
                if (parsed.Commits && parsed.Commits.length > 0) {
                  msg = parsed.Commits[0].Message.split("\n")[0];
                } else if (parsed.HeadCommit) {
                  msg = parsed.HeadCommit.Message.split("\n")[0];
                }
              }
            } catch (e) {}

            return (
              <div key={idx} style={{ display: "flex", flexDirection: "column", fontSize: "0.8rem", color: "var(--fg)" }}>
                <div style={{ display: "flex", justifyContent: "space-between", color: "var(--green)" }}>
                  <span>repo: {act.repo?.full_name || "unknown"}</span>
                  <span style={{ color: "var(--gray)", fontSize: "0.67rem" }}>
                    {new Date(act.created).toLocaleDateString()}-{new Date(act.created).toLocaleTimeString()}
                  </span>
                </div>
                <div style={{ color: "var(--gray)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                  {msg}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}