yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 17:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Migrate dashboard project listing to client components, adding URL-driven filtering, sorting, and pagination.

Browse Source
This commit is contained in:
Yusuf İpek
2026-02-20 15:50:50 +03:00
parent 83eeffe5c0
commit 2a20b449a8
7 changed files with 511 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/projects/[projectId]/page.tsx
+37 -15
View File
@@ -50,11 +50,17 @@ function formatRelativeTime(date: Date): string {
interface ProjectPageProps {
params: Promise<{ projectId: string }>;
searchParams: Promise<{ page?: string }>;
}
export default async function ProjectPage({ params }: ProjectPageProps) {
export default async function ProjectPage({ params, searchParams }: ProjectPageProps) {
const session = await auth();
const { projectId } = await params;
const resolvedSearchParams = await searchParams;
const page = Number(resolvedSearchParams?.page) || 1;
const pageSize = 20;
const skip = (page - 1) * pageSize;
// Fetch project with videos
const project = await db.project.findUnique({
@@ -66,19 +72,6 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
where: { userId: session?.user?.id || '' },
select: { role: true },
},
videos: {
orderBy: { position: 'asc' },
include: {
versions: {
where: { isActive: true },
take: 1,
include: {
_count: { select: { comments: true } },
},
},
_count: { select: { versions: true } },
},
},
},
});
@@ -117,8 +110,33 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
redirect('/dashboard');
}
// Fetch videos separately utilizing bounds
const [paginatedVideos, totalVideos] = await Promise.all([
db.video.findMany({
where: { projectId: project.id },
skip,
take: pageSize,
orderBy: { position: 'asc' },
include: {
versions: {
where: { isActive: true },
take: 1,
include: {
_count: { select: { comments: true } },
},
},
_count: { select: { versions: true } },
},
}),
db.video.count({
where: { projectId: project.id }
})
]);
const totalPages = Math.ceil(totalVideos / pageSize);
// Transform videos for VideoCard component
const videos = project.videos.map((video: typeof project.videos[0]) => {
const videos = paginatedVideos.map((video) => {
const activeVersion = video.versions[0];
return {
id: video.id,
@@ -165,6 +183,8 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
canEdit={false}
isOwner={false}
workspaceRole={null}
totalPages={totalPages}
currentPage={page}
/>
</div>
</GuestGate>
@@ -190,6 +210,8 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
canEdit={canEdit}
isOwner={isOwner}
workspaceRole={workspaceRole}
totalPages={totalPages}
currentPage={page}
/>
</div>
);
app/(dashboard)/projects/[projectId]/project-content-client.tsx
+65 -10
View File
@@ -1,6 +1,7 @@
'use client';
import { useState, useMemo } from 'react';
import { useCallback } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import {
Plus,
@@ -46,6 +47,8 @@ interface ProjectContentClientProps {
canEdit: boolean;
isOwner: boolean;
workspaceRole: string | null;
totalPages: number;
currentPage: number;
}
export function ProjectContentClient({
@@ -55,16 +58,32 @@ export function ProjectContentClient({
canEdit,
isOwner,
workspaceRole,
totalPages,
currentPage
}: ProjectContentClientProps) {
const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
const router = useRouter();
const searchParams = useSearchParams();
const sortOrder = searchParams.get('sort') || 'desc';
const sortedVideos = useMemo(() => {
return [...videos].sort((a, b) => {
const dateA = new Date(a.updatedAt).getTime();
const dateB = new Date(b.updatedAt).getTime();
return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
});
}, [videos, sortOrder]);
const createQueryString = useCallback(
(name: string, value: string) => {
const params = new URLSearchParams(searchParams.toString());
params.set(name, value);
if (name !== 'page') {
params.set('page', '1');
}
return params.toString();
},
[searchParams]
);
const sortedVideos = [...videos].sort((a, b) => {
const dateA = new Date(a.updatedAt).getTime();
const dateB = new Date(b.updatedAt).getTime();
return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
});
return (
<>
@@ -100,7 +119,10 @@ export function ProjectContentClient({
<Button
variant="outline"
size="sm"
onClick={() => setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc')}
onClick={() => {
const newOrder = sortOrder === 'desc' ? 'asc' : 'desc';
router.push(`?${createQueryString('sort', newOrder)}`);
}}
className="flex items-center gap-2"
>
{sortOrder === 'desc' ? (
@@ -174,6 +196,39 @@ export function ProjectContentClient({
</CardContent>
</Card>
)}
{/* Pagination */}
{totalPages > 1 && (
<div className="mt-8 flex items-center justify-end space-x-2">
<Button
variant="outline"
size="sm"
disabled={currentPage <= 1}
asChild={currentPage > 1}
>
{currentPage > 1 ? (
<Link href={`?${createQueryString('page', (currentPage - 1).toString())}`}>Previous</Link>
) : (
"Previous"
)}
</Button>
<span className="text-sm font-medium">
Page {currentPage} of {totalPages}
</span>
<Button
variant="outline"
size="sm"
disabled={currentPage >= totalPages}
asChild={currentPage < totalPages}
>
{currentPage < totalPages ? (
<Link href={`?${createQueryString('page', (currentPage + 1).toString())}`}>Next</Link>
) : (
"Next"
)}
</Button>
</div>
)}
</>
);
}