diff --git a/utopia-remix/app/models/project.server.spec.ts b/utopia-remix/app/models/project.server.spec.ts index ab6049ba8f55..d64bfdfdd0da 100644 --- a/utopia-remix/app/models/project.server.spec.ts +++ b/utopia-remix/app/models/project.server.spec.ts @@ -60,30 +60,6 @@ describe('project model', () => { const aliceProjects = await listProjects({ ownerId: 'alice' }) expect(aliceProjects.map((p) => p.proj_id)).toEqual(['baz']) }) - - it('can paginate results', async () => { - await createTestProject(prisma, { id: 'one', ownerId: 'bob' }) - await createTestProject(prisma, { id: 'two', ownerId: 'bob' }) - await createTestProject(prisma, { id: 'three', ownerId: 'bob' }) - await createTestProject(prisma, { id: 'four', ownerId: 'bob' }) - await createTestProject(prisma, { id: 'five', ownerId: 'bob' }) - await createTestProject(prisma, { id: 'six', ownerId: 'bob' }) - await createTestProject(prisma, { id: 'seven', ownerId: 'bob' }) - - expect((await listProjects({ ownerId: 'bob', limit: 3 })).map((p) => p.proj_id)).toEqual([ - 'seven', - 'six', - 'five', - ]) - - expect( - (await listProjects({ ownerId: 'bob', limit: 3, offset: 3 })).map((p) => p.proj_id), - ).toEqual(['four', 'three', 'two']) - - expect( - (await listProjects({ ownerId: 'bob', limit: 3, offset: 6 })).map((p) => p.proj_id), - ).toEqual(['one']) - }) }) }) }) diff --git a/utopia-remix/app/models/project.server.ts b/utopia-remix/app/models/project.server.ts index 81d6458c170a..e8a008147689 100644 --- a/utopia-remix/app/models/project.server.ts +++ b/utopia-remix/app/models/project.server.ts @@ -1,15 +1,20 @@ import { Project } from 'prisma-client' import { prisma } from '../db.server' -export async function listProjects(params: { - ownerId: string - offset?: number - limit?: number -}): Promise { +export type ProjectWithoutContent = Omit + +export async function listProjects(params: { ownerId: string }): Promise { return prisma.project.findMany({ + select: { + id: true, + proj_id: true, + owner_id: true, + title: true, + created_at: true, + modified_at: true, + deleted: true, + }, where: { owner_id: params.ownerId }, orderBy: { modified_at: 'desc' }, - take: params.limit, - skip: params.offset, }) } diff --git a/utopia-remix/app/routes/projects.tsx b/utopia-remix/app/routes/projects.tsx index 4739f7f554ed..90a082e4f415 100644 --- a/utopia-remix/app/routes/projects.tsx +++ b/utopia-remix/app/routes/projects.tsx @@ -1,27 +1,18 @@ import { LoaderFunctionArgs, json } from '@remix-run/node' -import { useFetcher, useLoaderData } from '@remix-run/react' +import { useLoaderData } from '@remix-run/react' import moment from 'moment' import { Project, UserDetails } from 'prisma-client' import React from 'react' import { listProjects } from '../models/project.server' -import { ensure, requireUser } from '../util/api.server' -import { Status } from '../util/statusCodes.server' -import { sprinkles } from '../styles/sprinkles.css' import { button } from '../styles/button.css' - -const PAGINATION_LIMIT = 10 // how many projects to load per window +import { sprinkles } from '../styles/sprinkles.css' +import { requireUser } from '../util/api.server' export async function loader(args: LoaderFunctionArgs) { const user = await requireUser(args.request) - const url = new URL(args.request.url) - const offset = parseInt(url.searchParams.get('offset') ?? '0') - ensure(offset >= 0, 'offset cannot be negative', Status.BAD_REQUEST) - const projects = await listProjects({ ownerId: user.user_id, - limit: PAGINATION_LIMIT, - offset: offset, }) return json({ projects, user }) @@ -33,18 +24,6 @@ const ProjectsPage = React.memo(() => { user: UserDetails } - const [projects, setProjects] = React.useState([]) - - const projectsFetcher = useFetcher() - const [reachedEnd, setReachedEnd] = React.useState(false) - - const loadMore = React.useCallback( - (offset: number) => () => { - projectsFetcher.load(`?offset=${offset}`) - }, - [], - ) - const openProject = React.useCallback( (projectId: string) => () => { window.open(`${window.ENV.EDITOR_URL}/p/${projectId}`, '_blank') @@ -52,24 +31,6 @@ const ProjectsPage = React.memo(() => { [], ) - React.useEffect(() => { - setProjects(data.projects) - if (data.projects.length < PAGINATION_LIMIT) { - setReachedEnd(true) - } - }, [data.projects]) - - React.useEffect(() => { - if (projectsFetcher.data == null || projectsFetcher.state === 'loading') { - return - } - const newProjects = (projectsFetcher.data as { projects: Project[] }).projects - setProjects((projects) => [...projects, ...newProjects]) - if (newProjects.length < PAGINATION_LIMIT) { - setReachedEnd(true) - } - }, [projectsFetcher.data]) - return (
{ - {projects.map((project) => { + {data.projects.map((project) => { return ( @@ -129,14 +90,6 @@ const ProjectsPage = React.memo(() => { })} - {!reachedEnd ? ( - - ) : null}
) })