mirror of
https://gitbruv.vercel.app/api/git/bruv/gitbruv.git
synced 2025-12-20 23:24:09 +01:00
suspense all the things
This commit is contained in:
Ahmet Kilinc
parent
dd107b53de
commit
c768b15bd7
4 changed files with 184 additions and 134 deletions
|
|
@ -1,3 +1,4 @@
|
|||
import { Suspense } from "react";
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { getRepository, getRepoCommits, getRepoBranches } from "@/actions/repositories";
|
||||
|
|
@ -5,9 +6,82 @@ import { BranchSelector } from "@/components/branch-selector";
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Lock, Globe, GitCommit, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Lock, Globe, GitCommit, ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
|
||||
async function CommitsList({ username, repoName, branch, page, perPage }: { username: string; repoName: string; branch: string; page: number; perPage: number }) {
|
||||
const skip = (page - 1) * perPage;
|
||||
const { commits, hasMore } = await getRepoCommits(username, repoName, branch, perPage, skip);
|
||||
|
||||
if (commits.length === 0) {
|
||||
return (
|
||||
<div className="p-12 text-center">
|
||||
<GitCommit className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<h3 className="text-lg font-medium mb-2">No commits yet</h3>
|
||||
<p className="text-muted-foreground">This branch doesn't have any commits.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="divide-y divide-border">
|
||||
{commits.map((commit) => (
|
||||
<div key={commit.oid} className="flex items-start gap-4 px-4 py-3 hover:bg-muted/30 transition-colors">
|
||||
<Avatar className="h-8 w-8 mt-0.5">
|
||||
<AvatarFallback className="text-xs bg-accent/20">{commit.author.name.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{commit.message.split("\n")[0]}</p>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
|
||||
<span className="font-medium text-foreground">{commit.author.name}</span>
|
||||
<span>committed</span>
|
||||
<span>{formatDistanceToNow(new Date(commit.timestamp), { addSuffix: true })}</span>
|
||||
</div>
|
||||
</div>
|
||||
<code className="text-xs font-mono bg-muted px-2 py-1 rounded shrink-0">{commit.oid.slice(0, 7)}</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{(page > 1 || hasMore) && (
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-card border-t border-border">
|
||||
<Button variant="outline" size="sm" asChild disabled={page <= 1}>
|
||||
<Link href={`/${username}/${repoName}/commits/${branch}?page=${page - 1}`} className={page <= 1 ? "pointer-events-none opacity-50" : ""}>
|
||||
<ChevronLeft className="h-4 w-4 mr-1" />
|
||||
Newer
|
||||
</Link>
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">Page {page}</span>
|
||||
<Button variant="outline" size="sm" asChild disabled={!hasMore}>
|
||||
<Link href={`/${username}/${repoName}/commits/${branch}?page=${page + 1}`} className={!hasMore ? "pointer-events-none opacity-50" : ""}>
|
||||
Older
|
||||
<ChevronRight className="h-4 w-4 ml-1" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function CommitsSkeleton() {
|
||||
return (
|
||||
<div className="divide-y divide-border">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="flex items-start gap-4 px-4 py-3 animate-pulse">
|
||||
<div className="h-8 w-8 bg-muted rounded-full" />
|
||||
<div className="flex-1">
|
||||
<div className="h-5 bg-muted rounded w-2/3 mb-2" />
|
||||
<div className="h-4 bg-muted rounded w-1/3" />
|
||||
</div>
|
||||
<div className="h-6 bg-muted rounded w-16" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function CommitsPage({
|
||||
params,
|
||||
searchParams,
|
||||
|
|
@ -18,7 +92,7 @@ export default async function CommitsPage({
|
|||
const { username, repo: repoName, branch: branchSegments } = await params;
|
||||
const { page: pageParam } = await searchParams;
|
||||
|
||||
const repo = await getRepository(username, repoName);
|
||||
const [repo, branches] = await Promise.all([getRepository(username, repoName), getRepoBranches(username, repoName)]);
|
||||
|
||||
if (!repo) {
|
||||
notFound();
|
||||
|
|
@ -27,12 +101,6 @@ export default async function CommitsPage({
|
|||
const branch = branchSegments?.[0] || repo.defaultBranch;
|
||||
const page = parseInt(pageParam || "1", 10);
|
||||
const perPage = 30;
|
||||
const skip = (page - 1) * perPage;
|
||||
|
||||
const [{ commits, hasMore }, branches] = await Promise.all([
|
||||
getRepoCommits(username, repoName, branch, perPage, skip),
|
||||
getRepoBranches(username, repoName),
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="container px-4 py-6">
|
||||
|
|
@ -64,12 +132,7 @@ export default async function CommitsPage({
|
|||
<div className="border border-border rounded-lg overflow-hidden">
|
||||
<div className="flex items-center justify-between gap-4 px-4 py-3 bg-card border-b border-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<BranchSelector
|
||||
branches={branches}
|
||||
currentBranch={branch}
|
||||
username={username}
|
||||
repoName={repoName}
|
||||
/>
|
||||
<BranchSelector branches={branches} currentBranch={branch} username={username} repoName={repoName} />
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<GitCommit className="h-4 w-4" />
|
||||
<span>Commits</span>
|
||||
|
|
@ -77,69 +140,10 @@ export default async function CommitsPage({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{commits.length === 0 ? (
|
||||
<div className="p-12 text-center">
|
||||
<GitCommit className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<h3 className="text-lg font-medium mb-2">No commits yet</h3>
|
||||
<p className="text-muted-foreground">
|
||||
This branch doesn't have any commits.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-border">
|
||||
{commits.map((commit) => (
|
||||
<div
|
||||
key={commit.oid}
|
||||
className="flex items-start gap-4 px-4 py-3 hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<Avatar className="h-8 w-8 mt-0.5">
|
||||
<AvatarFallback className="text-xs bg-accent/20">
|
||||
{commit.author.name.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{commit.message.split("\n")[0]}</p>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
|
||||
<span className="font-medium text-foreground">{commit.author.name}</span>
|
||||
<span>committed</span>
|
||||
<span>
|
||||
{formatDistanceToNow(new Date(commit.timestamp), { addSuffix: true })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<code className="text-xs font-mono bg-muted px-2 py-1 rounded shrink-0">
|
||||
{commit.oid.slice(0, 7)}
|
||||
</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(page > 1 || hasMore) && (
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-card border-t border-border">
|
||||
<Button variant="outline" size="sm" asChild disabled={page <= 1}>
|
||||
<Link
|
||||
href={`/${username}/${repoName}/commits/${branch}?page=${page - 1}`}
|
||||
className={page <= 1 ? "pointer-events-none opacity-50" : ""}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4 mr-1" />
|
||||
Newer
|
||||
</Link>
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">Page {page}</span>
|
||||
<Button variant="outline" size="sm" asChild disabled={!hasMore}>
|
||||
<Link
|
||||
href={`/${username}/${repoName}/commits/${branch}?page=${page + 1}`}
|
||||
className={!hasMore ? "pointer-events-none opacity-50" : ""}
|
||||
>
|
||||
Older
|
||||
<ChevronRight className="h-4 w-4 ml-1" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<Suspense fallback={<CommitsSkeleton />}>
|
||||
<CommitsList username={username} repoName={repoName} branch={branch} page={page} perPage={perPage} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue