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,10 +1,11 @@
|
|||
import { Suspense } from "react";
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { getRepository, getRepoFile, getRepoBranches } from "@/actions/repositories";
|
||||
import { CodeViewer } from "@/components/code-viewer";
|
||||
import { BranchSelector } from "@/components/branch-selector";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Lock, Globe, ChevronRight, Home, FileCode } from "lucide-react";
|
||||
import { Lock, Globe, ChevronRight, Home, FileCode, Loader2 } from "lucide-react";
|
||||
|
||||
const LANGUAGE_MAP: Record<string, string> = {
|
||||
ts: "typescript",
|
||||
|
|
@ -32,30 +33,40 @@ function getLanguage(filename: string): string {
|
|||
return LANGUAGE_MAP[ext] || "text";
|
||||
}
|
||||
|
||||
export default async function BlobPage({ params }: { params: Promise<{ username: string; repo: string; path: string[] }> }) {
|
||||
const { username, repo: repoName, path: pathSegments } = await params;
|
||||
const branch = pathSegments[0];
|
||||
const filePath = pathSegments.slice(1).join("/");
|
||||
|
||||
const repo = await getRepository(username, repoName);
|
||||
|
||||
if (!repo) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const [file, branches] = await Promise.all([
|
||||
getRepoFile(username, repoName, branch, filePath),
|
||||
getRepoBranches(username, repoName),
|
||||
]);
|
||||
async function FileContent({ username, repoName, branch, filePath }: { username: string; repoName: string; branch: string; filePath: string }) {
|
||||
const file = await getRepoFile(username, repoName, branch, filePath);
|
||||
|
||||
if (!file) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const fileName = filePath.split("/").pop() || "";
|
||||
const language = getLanguage(fileName);
|
||||
|
||||
return <CodeViewer content={file.content} language={language} showLineNumbers />;
|
||||
}
|
||||
|
||||
function CodeSkeleton() {
|
||||
return (
|
||||
<div className="p-4 min-h-[400px] flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function BlobPage({ params }: { params: Promise<{ username: string; repo: string; path: string[] }> }) {
|
||||
const { username, repo: repoName, path: pathSegments } = await params;
|
||||
const branch = pathSegments[0];
|
||||
const filePath = pathSegments.slice(1).join("/");
|
||||
|
||||
const [repo, branches] = await Promise.all([getRepository(username, repoName), getRepoBranches(username, repoName)]);
|
||||
|
||||
if (!repo) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const pathParts = filePath.split("/").filter(Boolean);
|
||||
const fileName = pathParts[pathParts.length - 1];
|
||||
const language = getLanguage(fileName);
|
||||
const lineCount = file.content.split("\n").length;
|
||||
|
||||
return (
|
||||
<div className="container px-4 py-6">
|
||||
|
|
@ -86,12 +97,7 @@ export default async function BlobPage({ params }: { params: Promise<{ username:
|
|||
|
||||
<div className="border border-border rounded-lg overflow-hidden">
|
||||
<div className="flex items-center gap-2 px-4 py-3 bg-card border-b border-border">
|
||||
<BranchSelector
|
||||
branches={branches}
|
||||
currentBranch={branch}
|
||||
username={username}
|
||||
repoName={repoName}
|
||||
/>
|
||||
<BranchSelector branches={branches} currentBranch={branch} username={username} repoName={repoName} />
|
||||
</div>
|
||||
<nav className="flex items-center gap-1 px-4 py-2 bg-muted/30 border-b border-border text-sm">
|
||||
<Link href={`/${username}/${repoName}`} className="text-accent hover:underline flex items-center gap-1">
|
||||
|
|
@ -115,11 +121,13 @@ export default async function BlobPage({ params }: { params: Promise<{ username:
|
|||
<div className="flex items-center justify-between px-4 py-2 bg-muted/30 border-b border-border">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<FileCode className="h-4 w-4" />
|
||||
<span>{lineCount} lines</span>
|
||||
<span>{fileName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CodeViewer content={file.content} language={language} showLineNumbers />
|
||||
<Suspense fallback={<CodeSkeleton />}>
|
||||
<FileContent username={username} repoName={repoName} branch={branch} filePath={filePath} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,48 @@
|
|||
import { Suspense } from "react";
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { getRepository, getRepoFileTree, getRepoBranches } from "@/actions/repositories";
|
||||
import { FileTree } from "@/components/file-tree";
|
||||
import { BranchSelector } from "@/components/branch-selector";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Lock, Globe, ChevronRight, Home } from "lucide-react";
|
||||
import { Lock, Globe, ChevronRight, Home, Loader2 } from "lucide-react";
|
||||
|
||||
async function TreeContent({ username, repoName, branch, dirPath }: { username: string; repoName: string; branch: string; dirPath: string }) {
|
||||
const fileTree = await getRepoFileTree(username, repoName, branch, dirPath);
|
||||
|
||||
if (!fileTree) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return <FileTree files={fileTree.files} username={username} repoName={repoName} branch={branch} basePath={dirPath} />;
|
||||
}
|
||||
|
||||
function TreeSkeleton() {
|
||||
return (
|
||||
<div className="divide-y divide-border">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 px-4 py-2.5 animate-pulse">
|
||||
<div className="h-4 w-4 bg-muted rounded" />
|
||||
<div className="h-4 bg-muted rounded w-1/4" />
|
||||
<div className="h-4 bg-muted rounded w-1/3 ml-auto hidden sm:block" />
|
||||
<div className="h-4 bg-muted rounded w-20" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function TreePage({ params }: { params: Promise<{ username: string; repo: string; path: string[] }> }) {
|
||||
const { username, repo: repoName, path: pathSegments } = await params;
|
||||
const branch = pathSegments[0];
|
||||
const dirPath = pathSegments.slice(1).join("/");
|
||||
|
||||
const repo = await getRepository(username, repoName);
|
||||
const [repo, branches] = await Promise.all([getRepository(username, repoName), getRepoBranches(username, repoName)]);
|
||||
|
||||
if (!repo) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const [fileTree, branches] = await Promise.all([
|
||||
getRepoFileTree(username, repoName, branch, dirPath),
|
||||
getRepoBranches(username, repoName),
|
||||
]);
|
||||
|
||||
if (!fileTree) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const pathParts = dirPath.split("/").filter(Boolean);
|
||||
|
||||
return (
|
||||
|
|
@ -57,13 +74,7 @@ export default async function TreePage({ params }: { params: Promise<{ username:
|
|||
|
||||
<div className="border border-border rounded-lg overflow-hidden">
|
||||
<div className="flex items-center gap-2 px-4 py-3 bg-card border-b border-border">
|
||||
<BranchSelector
|
||||
branches={branches}
|
||||
currentBranch={branch}
|
||||
username={username}
|
||||
repoName={repoName}
|
||||
basePath={dirPath}
|
||||
/>
|
||||
<BranchSelector branches={branches} currentBranch={branch} username={username} repoName={repoName} basePath={dirPath} />
|
||||
</div>
|
||||
|
||||
<nav className="flex items-center gap-1 px-4 py-2 bg-muted/30 border-b border-border text-sm">
|
||||
|
|
@ -85,7 +96,9 @@ export default async function TreePage({ params }: { params: Promise<{ username:
|
|||
))}
|
||||
</nav>
|
||||
|
||||
<FileTree files={fileTree.files} username={username} repoName={repoName} branch={branch} basePath={dirPath} />
|
||||
<Suspense fallback={<TreeSkeleton />}>
|
||||
<TreeContent username={username} repoName={repoName} branch={branch} dirPath={dirPath} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue