- {err.message === "Request timed out. Please try again."
- ? "The request took too long to complete. Please try again or try a different repository."
- : "There was an error loading the related repositories. Please try again later."}
-
-
- );
- }
-}
-
-export async function generateMetadata({
- params,
-}: {
- params: Promise<{ org: string; repo: string }>;
-}) {
- const { org, repo } = await params;
- const repoName = `${org}/${repo}`;
- return {
- title: `${repoName} Related Repos - GitRelate(d)`,
- };
-}
diff --git a/app/actions.ts b/app/actions.ts
deleted file mode 100644
index 1e9f127..0000000
--- a/app/actions.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-"use server";
-
-import { getRelatedReposCached } from "@/lib/repos";
-
-export async function fetchMoreRelatedRepos(repoName: string, offset: number) {
- return await getRelatedReposCached(repoName, offset);
-}
diff --git a/app/api/stargazers/route.test.ts b/app/api/stargazers/route.test.ts
deleted file mode 100644
index 8c20851..0000000
--- a/app/api/stargazers/route.test.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-import { NextRequest } from "next/server";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { GET } from "./route";
-
-vi.mock("@/lib/github", () => ({
- getStargazers: vi.fn(),
-}));
-
-import { getStargazers } from "@/lib/github";
-
-const mockedGetStargazers = vi.mocked(getStargazers);
-
-describe("Stargazers API Route", () => {
- const originalEnv = process.env.NEXT_PUBLIC_USE_CLIENT_CLICKHOUSE;
-
- beforeEach(() => {
- vi.clearAllMocks();
- });
-
- afterEach(() => {
- // Restore original environment variable
- if (originalEnv !== undefined) {
- process.env.NEXT_PUBLIC_USE_CLIENT_CLICKHOUSE = originalEnv;
- } else {
- delete process.env.NEXT_PUBLIC_USE_CLIENT_CLICKHOUSE;
- }
- vi.resetAllMocks();
- });
-
- describe("when client-side fetching is enabled", () => {
- beforeEach(() => {
- process.env.NEXT_PUBLIC_USE_CLIENT_CLICKHOUSE = "true";
- });
-
- it("returns informational message about client-side fetching", async () => {
- const request = new NextRequest(
- "http://localhost:3000/api/stargazers?repo=owner/repo"
- );
-
- const response = await GET(request);
- const data = await response.json();
-
- expect(response.status).toBe(200);
- expect(data).toEqual({
- message:
- "Client-side fetching is enabled. Data is fetched directly from ClickHouse in the browser for better performance.",
- suggestion:
- "This API endpoint is available but not recommended when client-side fetching is enabled.",
- clientFetchingEnabled: true,
- });
-
- // Should not call the actual API function
- expect(mockedGetStargazers).not.toHaveBeenCalled();
- });
-
- it("returns the same message regardless of query parameters", async () => {
- const request = new NextRequest("http://localhost:3000/api/stargazers");
-
- const response = await GET(request);
- const data = await response.json();
-
- expect(response.status).toBe(200);
- expect(data.clientFetchingEnabled).toBe(true);
- expect(mockedGetStargazers).not.toHaveBeenCalled();
- });
- });
-
- describe("when client-side fetching is disabled", () => {
- beforeEach(() => {
- process.env.NEXT_PUBLIC_USE_CLIENT_CLICKHOUSE = "false";
- });
-
- it("returns stargazers data when repo parameter is provided", async () => {
- const mockStargazers = [
- { login: "user1", avatar_url: "https://github.com/user1.png" },
- { login: "user2", avatar_url: "https://github.com/user2.png" },
- ];
-
- mockedGetStargazers.mockResolvedValue(mockStargazers);
-
- const request = new NextRequest(
- "http://localhost:3000/api/stargazers?repo=facebook/react"
- );
-
- const response = await GET(request);
- const data = await response.json();
-
- expect(response.status).toBe(200);
- expect(data).toEqual(mockStargazers);
- expect(mockedGetStargazers).toHaveBeenCalledWith("facebook/react");
- });
-
- it("returns 400 error when repo parameter is missing", async () => {
- const request = new NextRequest("http://localhost:3000/api/stargazers");
-
- const response = await GET(request);
- const data = await response.json();
-
- expect(response.status).toBe(400);
- expect(data).toEqual({ error: "Repo parameter is required" });
- expect(mockedGetStargazers).not.toHaveBeenCalled();
- });
-
- it("returns 400 error when repo parameter is empty", async () => {
- const request = new NextRequest(
- "http://localhost:3000/api/stargazers?repo="
- );
-
- const response = await GET(request);
- const data = await response.json();
-
- expect(response.status).toBe(400);
- expect(data).toEqual({ error: "Repo parameter is required" });
- expect(mockedGetStargazers).not.toHaveBeenCalled();
- });
-
- it("handles errors from getStargazers function", async () => {
- const consoleErrorSpy = vi
- .spyOn(console, "error")
- .mockImplementation(() => {});
- const error = new Error("GitHub API error");
- mockedGetStargazers.mockRejectedValue(error);
-
- const request = new NextRequest(
- "http://localhost:3000/api/stargazers?repo=owner/repo"
- );
-
- const response = await GET(request);
- const data = await response.json();
-
- expect(response.status).toBe(500);
- expect(data).toEqual({ error: "Failed to fetch stargazers" });
- expect(mockedGetStargazers).toHaveBeenCalledWith("owner/repo");
- expect(consoleErrorSpy).toHaveBeenCalledWith(
- "Error fetching stargazers:",
- error
- );
-
- consoleErrorSpy.mockRestore();
- });
-
- it("handles various repo name formats", async () => {
- const mockStargazers = [
- { login: "user1", avatar_url: "https://github.com/user1.png" },
- ];
- mockedGetStargazers.mockResolvedValue(mockStargazers);
-
- const testCases = [
- "microsoft/typescript",
- "vercel/next.js",
- "facebook/react-native",
- "nodejs/node",
- ];
-
- for (const repo of testCases) {
- const request = new NextRequest(
- `http://localhost:3000/api/stargazers?repo=${repo}`
- );
- const response = await GET(request);
-
- expect(response.status).toBe(200);
- expect(mockedGetStargazers).toHaveBeenCalledWith(repo);
- }
- });
- });
-
- describe("when client-side fetching environment variable is not set", () => {
- beforeEach(() => {
- delete process.env.NEXT_PUBLIC_USE_CLIENT_CLICKHOUSE;
- });
-
- it("falls back to server-side implementation", async () => {
- const mockStargazers = [
- { login: "user1", avatar_url: "https://github.com/user1.png" },
- ];
- mockedGetStargazers.mockResolvedValue(mockStargazers);
-
- const request = new NextRequest(
- "http://localhost:3000/api/stargazers?repo=owner/repo"
- );
-
- const response = await GET(request);
- const data = await response.json();
-
- expect(response.status).toBe(200);
- expect(data).toEqual(mockStargazers);
- expect(mockedGetStargazers).toHaveBeenCalledWith("owner/repo");
- });
- });
-});
diff --git a/app/api/stargazers/route.ts b/app/api/stargazers/route.ts
deleted file mode 100644
index 4c10016..0000000
--- a/app/api/stargazers/route.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { getStargazers } from "@/lib/github";
-import { NextRequest, NextResponse } from "next/server";
-
-export async function GET(req: NextRequest) {
- // Check if client-side fetching is enabled
- if (process.env.NEXT_PUBLIC_USE_CLIENT_CLICKHOUSE === "true") {
- return NextResponse.json(
- {
- message:
- "Client-side fetching is enabled. Data is fetched directly from ClickHouse in the browser for better performance.",
- suggestion:
- "This API endpoint is available but not recommended when client-side fetching is enabled.",
- clientFetchingEnabled: true,
- },
- { status: 200 }
- );
- }
-
- // Client-side fetching is disabled, use original API implementation
- const { searchParams } = new URL(req.url);
- const repo = searchParams.get("repo");
-
- if (!repo) {
- return NextResponse.json(
- { error: "Repo parameter is required" },
- { status: 400 }
- );
- }
-
- try {
- const stargazers = await getStargazers(repo);
- return NextResponse.json(stargazers);
- } catch (error) {
- console.error("Error fetching stargazers:", error);
- return NextResponse.json(
- { error: "Failed to fetch stargazers" },
- { status: 500 }
- );
- }
-}
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 283855b..aea1f09 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "react-router";
export default function Header() {
return (
@@ -7,7 +7,7 @@ export default function Header() {
GitRelate(d)
diff --git a/app/components/RepoFilter.tsx b/app/components/RepoFilter.tsx
index ea76680..039ba8d 100644
--- a/app/components/RepoFilter.tsx
+++ b/app/components/RepoFilter.tsx
@@ -1,5 +1,3 @@
-"use client";
-
import { useState } from "react";
import { Switch } from "@headlessui/react";
diff --git a/app/components/RepoInput.tsx b/app/components/RepoInput.tsx
index a1b85f0..1aa72fe 100644
--- a/app/components/RepoInput.tsx
+++ b/app/components/RepoInput.tsx
@@ -1,15 +1,13 @@
-"use client";
-
import { useState } from "react";
-import { useRouter } from "next/navigation";
+import { useNavigate } from "react-router";
import { parseGitHubURL } from "@/utils/github";
export default function RepoInput() {
const [repo, setRepo] = useState("");
- const router = useRouter();
+ const navigate = useNavigate();
const handleSearch = () => {
- if (repo) router.push(`/${repo}`);
+ if (repo) navigate(`/${repo}`);
};
const handleInputChange = (e: React.ChangeEvent) => {
diff --git a/app/components/RepoTable.test.tsx b/app/components/RepoTable.test.tsx
new file mode 100644
index 0000000..2192bb2
--- /dev/null
+++ b/app/components/RepoTable.test.tsx
@@ -0,0 +1,105 @@
+// @vitest-environment jsdom
+import type { RelatedRepo } from "@/types/github";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import RepoTable from "./RepoTable";
+
+vi.mock("@/lib/repos.client", () => ({
+ getRelatedReposClient: vi.fn(),
+ clearExpiredCache: vi.fn(),
+}));
+
+import { getRelatedReposClient } from "@/lib/repos.client";
+
+const mockedGetRelatedReposClient = vi.mocked(getRelatedReposClient);
+
+const EMPTY_MESSAGE = "No related repositories found.";
+
+const mockRelatedRepos: RelatedRepo[] = [
+ {
+ repoName: "owner/repo1",
+ githubUrl: "https://github.com/owner/repo1",
+ stargazers: 100,
+ forkers: 50,
+ ratio: 2.0,
+ },
+];
+
+function renderTable() {
+ return render(
+
+
+
+ );
+}
+
+function isLoading(container: HTMLElement) {
+ return container.querySelector(".animate-pulse") !== null;
+}
+
+describe("RepoTable", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ afterEach(() => {
+ cleanup();
+ vi.restoreAllMocks();
+ vi.resetAllMocks();
+ });
+
+ it("shows a loading skeleton while the first page loads", () => {
+ mockedGetRelatedReposClient.mockReturnValue(new Promise(() => {}));
+
+ const { container } = renderTable();
+
+ expect(isLoading(container)).toBe(true);
+ expect(screen.queryByText(EMPTY_MESSAGE)).toBe(null);
+ });
+
+ it("lists the related repos once they load", async () => {
+ mockedGetRelatedReposClient.mockResolvedValue(mockRelatedRepos);
+
+ const { container } = renderTable();
+
+ expect(await screen.findByText("owner/repo1")).toBeDefined();
+ expect(isLoading(container)).toBe(false);
+ expect(mockedGetRelatedReposClient).toHaveBeenCalledWith("test/repo", 0);
+ });
+
+ it("shows the empty state when no related repos are found", async () => {
+ mockedGetRelatedReposClient.mockResolvedValue([]);
+
+ const { container } = renderTable();
+
+ expect(await screen.findByText(EMPTY_MESSAGE)).toBeDefined();
+ expect(isLoading(container)).toBe(false);
+ expect(screen.queryByRole("button", { name: "Show More" })).toBe(null);
+ });
+
+ it("shows the error and loads again when Try Again is clicked", async () => {
+ vi.spyOn(console, "error").mockImplementation(() => {});
+ mockedGetRelatedReposClient
+ .mockRejectedValueOnce(new Error("Request timed out. Please try again."))
+ .mockResolvedValueOnce(mockRelatedRepos);
+
+ const { container } = renderTable();
+
+ expect(await screen.findByText("Error Loading Data")).toBeDefined();
+ expect(
+ screen.getByText("Request timed out. Please try again.")
+ ).toBeDefined();
+
+ fireEvent.click(screen.getByRole("button", { name: "Try Again" }));
+
+ expect(isLoading(container)).toBe(true);
+ expect(await screen.findByText("owner/repo1")).toBeDefined();
+ expect(screen.queryByText("Error Loading Data")).toBe(null);
+ expect(mockedGetRelatedReposClient).toHaveBeenCalledTimes(2);
+ expect(mockedGetRelatedReposClient).toHaveBeenLastCalledWith(
+ "test/repo",
+ 0
+ );
+ });
+});
diff --git a/app/components/RepoTable.tsx b/app/components/RepoTable.tsx
index 6bfc1a1..41d67d4 100644
--- a/app/components/RepoTable.tsx
+++ b/app/components/RepoTable.tsx
@@ -1,15 +1,12 @@
-"use client";
-
import { useState, useEffect } from "react";
import { ArrowUpDown, Search } from "lucide-react";
-import Link from "next/link";
+import { Link } from "react-router";
import type { RelatedRepo } from "@/types/github";
-import { fetchMoreRelatedRepos } from "@/app/actions";
import { getRelatedReposClient, clearExpiredCache } from "@/lib/repos.client";
import { Skeleton } from "@/app/components/Skeleton";
// import RepoFilter from './RepoFilter';
-// Loading skeleton component for the repo table that matches the server-side loading
+// Loading skeleton component for the repo table
function RepoTableSkeleton() {
return (
//
@@ -42,43 +39,25 @@ function RepoTableSkeleton() {
);
}
-export default function RepoTable({
- initialRelatedRepos = [],
- repoName = "",
-}: {
- initialRelatedRepos?: RelatedRepo[];
- repoName?: string;
-}) {
- const [relatedRepos, setRelatedRepos] =
- useState(initialRelatedRepos);
- // const [filteredRepos, setFilteredRepos] = useState(initialRelatedRepos);
- const [offset, setOffset] = useState(
- initialRelatedRepos?.length || 0
+export default function RepoTable({ repoName = "" }: { repoName?: string }) {
+ const [relatedRepos, setRelatedRepos] = useState([]);
+ // const [filteredRepos, setFilteredRepos] = useState([]);
+ const [offset, setOffset] = useState(0);
+ // Tracked separately from the results, because a loaded repo can have none
+ const [initialLoading, setInitialLoading] = useState(
+ Boolean(repoName)
);
- const [initialLoading, setInitialLoading] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
const [hasMore, setHasMore] = useState(true);
const [error, setError] = useState("");
-
- const useClient = process.env.NEXT_PUBLIC_USE_CLIENT_CLICKHOUSE === "true";
-
- // Determine if we should show loading initially
- const shouldShowInitialLoading =
- useClient &&
- repoName &&
- initialRelatedRepos.length === 0 &&
- relatedRepos.length === 0 &&
- !error;
+ // Incremented to run the initial fetch again after an error
+ const [attempt, setAttempt] = useState(0);
useEffect(() => {
- // Clear expired cache entries on component mount when using client-side fetching
- if (useClient) {
- clearExpiredCache();
- }
+ // Clear expired cache entries on component mount
+ clearExpiredCache();
- if (useClient && repoName && relatedRepos.length === 0) {
- setInitialLoading(true);
- setError("");
+ if (repoName) {
getRelatedReposClient(repoName, 0)
.then((data) => {
setRelatedRepos(data);
@@ -93,7 +72,7 @@ export default function RepoTable({
setInitialLoading(false);
});
}
- }, [useClient, repoName, relatedRepos.length]);
+ }, [repoName, attempt]);
const [sortColumn, setSortColumn] = useState("stargazers");
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
@@ -153,9 +132,7 @@ export default function RepoTable({
const handleShowMore = async () => {
setLoadingMore(true);
try {
- const moreRepos = useClient
- ? await getRelatedReposClient(repoName, offset)
- : await fetchMoreRelatedRepos(repoName, offset);
+ const moreRepos = await getRelatedReposClient(repoName, offset);
if (moreRepos.length === 0 || moreRepos.length < 100) {
setHasMore(false);
}
@@ -171,7 +148,7 @@ export default function RepoTable({
};
// Show loading state for initial client-side fetch
- if (initialLoading || shouldShowInitialLoading) {
+ if (initialLoading) {
return ;
}
@@ -186,8 +163,8 @@ export default function RepoTable({