Merge pull request #2 from btrustteam/feat/top-projects-load-more

feat(TopProjects): show 5 projects initially, add load more button

Author: kelvinator07

src/__tests__/proxy.test.ts

@@ -30,7 +30,7 @@ describe("proxy", () => {
   describe("unauthenticated", () => {
     it("redirects /dashboard to /", async () => {
       const { proxy } = await import("@/proxy");
-      const response = await proxy(createRequest("/dashboard") as any);
+      const response = await proxy(createRequest("/dashboard"));
 
       expect(response.status).toBe(307);
       expect(new URL(response.headers.get("location")!).pathname).toBe("/");
@@ -39,7 +39,7 @@ describe("proxy", () => {
     it("redirects /developer/satoshi to /", async () => {
       const { proxy } = await import("@/proxy");
       const response = await proxy(
-        createRequest("/developer/satoshi") as any
+        createRequest("/developer/satoshi")
       );
 
       expect(response.status).toBe(307);
@@ -49,7 +49,7 @@ describe("proxy", () => {
     it("redirects /api/github/* to /", async () => {
       const { proxy } = await import("@/proxy");
       const response = await proxy(
-        createRequest("/api/github/overview/test") as any
+        createRequest("/api/github/overview/test")
       );
 
       expect(response.status).toBe(307);
@@ -58,7 +58,7 @@ describe("proxy", () => {
 
     it("allows / (login page)", async () => {
       const { proxy } = await import("@/proxy");
-      const response = await proxy(createRequest("/") as any);
+      const response = await proxy(createRequest("/"));
 
       expect(response.status).toBe(200);
     });
@@ -71,7 +71,7 @@ describe("proxy", () => {
 
     it("redirects when session exists but accessToken is missing", async () => {
       const { proxy } = await import("@/proxy");
-      const response = await proxy(createRequest("/dashboard") as any);
+      const response = await proxy(createRequest("/dashboard"));
 
       expect(response.status).toBe(307);
       expect(new URL(response.headers.get("location")!).pathname).toBe("/");
@@ -87,12 +87,12 @@ describe("proxy", () => {
       const { proxy } = await import("@/proxy");
 
       const dashboardRes = await proxy(
-        createRequest("/dashboard") as any
+        createRequest("/dashboard")
       );
       expect(dashboardRes.status).toBe(200);
 
       const devRes = await proxy(
-        createRequest("/developer/satoshi") as any
+        createRequest("/developer/satoshi")
       );
       expect(devRes.status).toBe(200);
     });

src/app/api/github/rate-limit/__tests__/route.test.ts

@@ -1,10 +1,10 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, type Mock } from "vitest";
 
 vi.mock("@/lib/auth", () => ({
   auth: vi.fn(),
 }));
 import { auth } from "@/lib/auth";
-const mockAuth = vi.mocked(auth);
+const mockAuth = auth as unknown as ReturnType<typeof vi.fn>;
 
 describe("GET /api/github/rate-limit", () => {
   beforeEach(() => {
@@ -14,15 +14,15 @@ describe("GET /api/github/rate-limit", () => {
   });
 
   it("returns 401 when not authenticated", async () => {
-    mockAuth.mockResolvedValue(null as any);
+    mockAuth.mockResolvedValue(null);
     const { GET } = await import("@/app/api/github/rate-limit/route");
     const res = await GET();
     expect(res.status).toBe(401);
   });
 
   it("returns rate limit data", async () => {
-    mockAuth.mockResolvedValue({ accessToken: "token" } as any);
-    (global.fetch as any).mockResolvedValue({
+    mockAuth.mockResolvedValue({ accessToken: "token" });
+    (global.fetch as Mock).mockResolvedValue({
       ok: true,
       json: async () => ({
         resources: {
@@ -42,8 +42,8 @@ describe("GET /api/github/rate-limit", () => {
   });
 
   it("returns error status when GitHub API fails", async () => {
-    mockAuth.mockResolvedValue({ accessToken: "token" } as any);
-    (global.fetch as any).mockResolvedValue({
+    mockAuth.mockResolvedValue({ accessToken: "token" });
+    (global.fetch as Mock).mockResolvedValue({
       ok: false,
       status: 500,
     });

src/components/DeveloperOverviewPage.tsx

@@ -35,7 +35,7 @@ export function DeveloperOverviewPage({ username }: DeveloperOverviewPageProps)
     if (data) {
       addSearch(data.login, data.avatarUrl);
     }
-  }, [data?.login, data?.avatarUrl, addSearch]);
+  }, [data, data?.login, data?.avatarUrl, addSearch]);
 
   const errorVariant = error
     ? error.status === 429

src/components/TopProjects.tsx

@@ -1,6 +1,10 @@
+"use client";
+
+import { useState, useMemo } from "react";
 import { Star, Globe, Minus } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { AGGREGATED_SENTINEL } from "@/lib/types";
 import type { RepoClassification, ContributionItem, RelevanceTier } from "@/lib/types";
 
@@ -22,39 +26,50 @@ const tierColors: Record<RelevanceTier, string> = {
   adjacent: "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400",
 };
 
+const PAGE_SIZE = 5;
+
 export function TopProjects({ bitcoinRepos, contributions, showAdjacent }: TopProjectsProps) {
-  const repos = showAdjacent
-    ? bitcoinRepos
-    : bitcoinRepos.filter((r) => r.tier !== "adjacent");
+  const [pagination, setPagination] = useState({ count: PAGE_SIZE, filter: showAdjacent });
+  const visibleCount = pagination.filter === showAdjacent ? pagination.count : PAGE_SIZE;
+
+  const countByRepo = useMemo(() => {
+    const map = new Map<string, number>();
+    for (const c of contributions) {
+      if (c.repoNameWithOwner === AGGREGATED_SENTINEL) continue;
+      map.set(
+        c.repoNameWithOwner,
+        (map.get(c.repoNameWithOwner) ?? 0) + c.count
+      );
+    }
+    return map;
+  }, [contributions]);
+
+  const sorted = useMemo(() => {
+    const repos = showAdjacent
+      ? bitcoinRepos
+      : bitcoinRepos.filter((r) => r.tier !== "adjacent");
+
+    return [...repos].sort((a, b) => {
+      const ca = countByRepo.get(a.nameWithOwner) ?? 0;
+      const cb = countByRepo.get(b.nameWithOwner) ?? 0;
+      return cb - ca;
+    });
+  }, [bitcoinRepos, showAdjacent, countByRepo]);
 
-  if (repos.length === 0) {
+  if (sorted.length === 0) {
     return (
       <p className="text-sm text-zinc-500 dark:text-zinc-400">
         No Bitcoin-related projects found.
       </p>
     );
   }
 
-  // Sum contribution counts per repo
-  const countByRepo = new Map<string, number>();
-  for (const c of contributions) {
-    if (c.repoNameWithOwner === AGGREGATED_SENTINEL) continue;
-    countByRepo.set(
-      c.repoNameWithOwner,
-      (countByRepo.get(c.repoNameWithOwner) ?? 0) + c.count
-    );
-  }
-
-  // Sort by contribution count descending
-  const sorted = [...repos].sort((a, b) => {
-    const ca = countByRepo.get(a.nameWithOwner) ?? 0;
-    const cb = countByRepo.get(b.nameWithOwner) ?? 0;
-    return cb - ca;
-  });
+  const visible = sorted.slice(0, visibleCount);
+  const hasMore = visibleCount < sorted.length;
 
   return (
     <div className="space-y-3">
-      {sorted.map((repo) => {
+      {visible.map((repo) => {
         const repoUrl = repo.url ?? `https://github.com/${repo.nameWithOwner}`;
         return (
           <a
@@ -87,6 +102,17 @@ export function TopProjects({ bitcoinRepos, contributions, showAdjacent }: TopPr
           </a>
         );
       })}
+
+      {hasMore && (
+        <div className="flex justify-center pt-2">
+          <Button
+            variant="outline"
+            onClick={() => setPagination({ count: visibleCount + PAGE_SIZE, filter: showAdjacent })}
+          >
+            Load more
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

src/components/__tests__/ContributionHeatmap.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, afterEach } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { ContributionHeatmap } from "@/components/ContributionHeatmap";
 import type { ContributionCalendarWeek } from "@/lib/types";
 
@@ -141,7 +141,6 @@ describe("ContributionHeatmap", () => {
     expect(cells[1]).toHaveAttribute("tabindex", "-1");
 
     // Simulate arrow down
-    const { fireEvent } = require("@testing-library/react");
     fireEvent.keyDown(grid, { key: "ArrowDown" });
 
     // After pressing down, second cell in first week should be focused

src/components/__tests__/TopProjects.test.tsx

@@ -1,23 +1,53 @@
 import { describe, it, expect, afterEach } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { readFileSync } from "fs";
+import { resolve } from "path";
 import { TopProjects } from "@/components/TopProjects";
 import type { RepoClassification, ContributionItem } from "@/lib/types";
 
 afterEach(cleanup);
 
+const dateRange = { from: new Date(), to: new Date() };
+
 const repos: RepoClassification[] = [
   { nameWithOwner: "bitcoin/bitcoin", url: "https://github.com/bitcoin/bitcoin", tier: "core", reason: "curated" },
   { nameWithOwner: "mempool/mempool", url: "https://github.com/mempool/mempool", tier: "ecosystem", reason: "curated" },
   { nameWithOwner: "user/nostr-tool", url: "https://github.com/user/nostr-tool", tier: "adjacent", reason: "keyword" },
 ];
 
 const contributions: ContributionItem[] = [
-  { repoNameWithOwner: "bitcoin/bitcoin", type: "commit", count: 50, dateRange: { from: new Date(), to: new Date() } },
-  { repoNameWithOwner: "mempool/mempool", type: "commit", count: 20, dateRange: { from: new Date(), to: new Date() } },
-  { repoNameWithOwner: "user/nostr-tool", type: "commit", count: 5, dateRange: { from: new Date(), to: new Date() } },
+  { repoNameWithOwner: "bitcoin/bitcoin", type: "commit", count: 50, dateRange },
+  { repoNameWithOwner: "mempool/mempool", type: "commit", count: 20, dateRange },
+  { repoNameWithOwner: "user/nostr-tool", type: "commit", count: 5, dateRange },
+];
+
+// 7 repos to test pagination (PAGE_SIZE = 5)
+const manyRepos: RepoClassification[] = [
+  { nameWithOwner: "bitcoin/bitcoin", tier: "core", reason: "curated" },
+  { nameWithOwner: "lightning/lnd", tier: "core", reason: "curated" },
+  { nameWithOwner: "btcsuite/btcd", tier: "core", reason: "curated" },
+  { nameWithOwner: "mempool/mempool", tier: "ecosystem", reason: "curated" },
+  { nameWithOwner: "blockstream/esplora", tier: "ecosystem", reason: "curated" },
+  { nameWithOwner: "AcmeInc/bitcoin-lib", tier: "ecosystem", reason: "keyword" },
+  { nameWithOwner: "user/nostr-tool", tier: "adjacent", reason: "keyword" },
 ];
 
+const manyContributions: ContributionItem[] = manyRepos.map((r, i) => ({
+  repoNameWithOwner: r.nameWithOwner,
+  type: "commit",
+  count: 70 - i * 10,
+  dateRange,
+}));
+
 describe("TopProjects", () => {
+  it("has 'use client' directive", () => {
+    const source = readFileSync(
+      resolve(__dirname, "../TopProjects.tsx"),
+      "utf-8"
+    );
+    expect(source.trimStart().startsWith('"use client"')).toBe(true);
+  });
+
   it("renders repos with tier badges", () => {
     render(
       <TopProjects bitcoinRepos={repos} contributions={contributions} showAdjacent />
@@ -93,4 +123,58 @@ describe("TopProjects", () => {
     expect(screen.getByLabelText("Tier: ecosystem")).toBeInTheDocument();
     expect(screen.getByLabelText("Tier: adjacent")).toBeInTheDocument();
   });
+
+  it("shows only 5 projects initially when there are more", () => {
+    render(
+      <TopProjects bitcoinRepos={manyRepos} contributions={manyContributions} showAdjacent />
+    );
+
+    // First 5 by contribution count should be visible
+    expect(screen.getByText("bitcoin/bitcoin")).toBeInTheDocument();
+    expect(screen.getByText("lightning/lnd")).toBeInTheDocument();
+    expect(screen.getByText("btcsuite/btcd")).toBeInTheDocument();
+    expect(screen.getByText("mempool/mempool")).toBeInTheDocument();
+    expect(screen.getByText("blockstream/esplora")).toBeInTheDocument();
+
+    // 6th and 7th should not be visible
+    expect(screen.queryByText("AcmeInc/bitcoin-lib")).not.toBeInTheDocument();
+    expect(screen.queryByText("user/nostr-tool")).not.toBeInTheDocument();
+  });
+
+  it("shows Load more button when there are more than 5 projects", () => {
+    render(
+      <TopProjects bitcoinRepos={manyRepos} contributions={manyContributions} showAdjacent />
+    );
+
+    expect(screen.getByRole("button", { name: "Load more" })).toBeInTheDocument();
+  });
+
+  it("does not show Load more button when 5 or fewer projects", () => {
+    render(
+      <TopProjects bitcoinRepos={repos} contributions={contributions} showAdjacent />
+    );
+
+    expect(screen.queryByRole("button", { name: "Load more" })).not.toBeInTheDocument();
+  });
+
+  it("reveals remaining projects when Load more is clicked", () => {
+    render(
+      <TopProjects bitcoinRepos={manyRepos} contributions={manyContributions} showAdjacent />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Load more" }));
+
+    expect(screen.getByText("AcmeInc/bitcoin-lib")).toBeInTheDocument();
+    expect(screen.getByText("user/nostr-tool")).toBeInTheDocument();
+  });
+
+  it("hides Load more button after all projects are shown", () => {
+    render(
+      <TopProjects bitcoinRepos={manyRepos} contributions={manyContributions} showAdjacent />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Load more" }));
+
+    expect(screen.queryByRole("button", { name: "Load more" })).not.toBeInTheDocument();
+  });
 });

src/hooks/__tests__/use-recent-searches.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from "vitest";
-import { renderHook, act } from "@testing-library/react";
+import { renderHook, act, waitFor } from "@testing-library/react";
 import { useRecentSearches } from "@/hooks/use-recent-searches";
 
 // Mock localStorage
@@ -20,14 +20,16 @@ describe("useRecentSearches", () => {
     expect(result.current.searches).toEqual([]);
   });
 
-  it("hydrates from localStorage on mount", () => {
+  it("hydrates from localStorage on mount", async () => {
     const existing = [{ username: "satoshi", timestamp: 1000 }];
     store.set("recent-searches", JSON.stringify(existing));
 
     const { result } = renderHook(() => useRecentSearches());
 
-    // After useEffect hydration
-    expect(result.current.searches).toEqual(existing);
+    // useEffect + queueMicrotask defers hydration
+    await waitFor(() => {
+      expect(result.current.searches).toEqual(existing);
+    });
   });
 
   it("adds a search and persists to localStorage", () => {

src/hooks/use-recent-searches.ts

@@ -19,7 +19,8 @@ export function useRecentSearches() {
     try {
       const stored = localStorage.getItem(STORAGE_KEY);
       if (stored) {
-        setSearches(JSON.parse(stored));
+        const parsed = JSON.parse(stored) as RecentSearch[];
+        queueMicrotask(() => setSearches(parsed));
       }
     } catch {
       // Ignore parse errors