fix(INTERNAL-1530): /explore/projects pagination

taskany-inc · Jan 27, 2025 · 5dff778 · 5dff778
1 parent f9b49ed
commit 5dff778
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 46 deletions.
diff --git a/src/components/ExplorePageHeader/ExplorePageHeader.tsx b/src/components/ExplorePageHeader/ExplorePageHeader.tsx
@@ -1,32 +1,9 @@
 import React from 'react';
-import NextLink from 'next/link';
-import { useRouter } from 'next/router';
-import { Link, Switch, SwitchControl } from '@taskany/bricks/harmony';
 
-import { routes } from '../../hooks/router';
 import { CommonHeader } from '../CommonHeader';
 
 import { tr } from './ExplorePageHeader.i18n';
 
 export const ExplorePageHeader: React.FC = () => {
-    const router = useRouter();
-
-    const tabsMenuOptions: Array<[string, string]> = [
-        [tr('Top'), routes.exploreTopProjects()],
-        [tr('Projects'), routes.exploreProjects()],
-    ];
-
-    return (
-        <CommonHeader title={tr('Explore')}>
-            <Switch value={router.asPath}>
-                {tabsMenuOptions.map(([title, href]) => (
-                    <NextLink key={href} href={href} passHref legacyBehavior>
-                        <Link>
-                            <SwitchControl value={href} text={title} />
-                        </Link>
-                    </NextLink>
-                ))}
-            </Switch>
-        </CommonHeader>
-    );
+    return <CommonHeader title={tr('Explore')} />;
 };
diff --git a/src/components/ExploreProjectsPage/ExploreProjectsPage.tsx b/src/components/ExploreProjectsPage/ExploreProjectsPage.tsx
@@ -1,3 +1,4 @@
+import { useMemo, useCallback } from 'react';
 import { nullable } from '@taskany/bricks';
 import { Table } from '@taskany/bricks/harmony';
 
@@ -8,37 +9,67 @@ import { ExplorePageHeader } from '../ExplorePageHeader/ExplorePageHeader';
 import { ProjectListItem } from '../ProjectListItem/ProjectListItem';
 import { TableRowItem, TableRowItemTitle } from '../TableRowItem/TableRowItem';
 import { trpc } from '../../utils/trpcClient';
+import { refreshInterval } from '../../utils/config';
+import { LoadMoreButton } from '../LoadMoreButton/LoadMoreButton';
+import { Loader } from '../Loader/Loader';
 
 import { tr } from './ExploreProjectsPage.i18n';
 
+const pageSize = 20;
+
 export const ExploreProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {
-    const { data } = trpc.project.getAll.useQuery();
+    const { data, hasNextPage, fetchNextPage, fetchStatus } = trpc.v2.project.getAll.useInfiniteQuery(
+        {
+            limit: pageSize,
+            firstLevel: false,
+        },
+        {
+            getNextPageParam: ({ pagination }) => pagination.offset,
+            keepPreviousData: true,
+            staleTime: refreshInterval,
+        },
+    );
+
+    const pages = data?.pages;
+    const projectsToRender = useMemo(() => {
+        return pages?.flatMap((p) => p.projects);
+    }, [pages]);
 
-    if (!data?.projects) return null;
+    const onFetchNextPage = useCallback(() => {
+        fetchNextPage();
+    }, [fetchNextPage]);
 
     return (
         <Page user={user} ssrTime={ssrTime} title={tr('title')} header={<ExplorePageHeader />}>
             <Table>
-                {data.projects.map((project) =>
-                    nullable(project, (p) => (
-                        <TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
-                            <ProjectListItem
-                                href={routes.project(p.id)}
-                                id={p.id}
-                                title={p.title}
-                                flowId={p.flowId}
-                                stargizers={p._count.stargizers}
-                                owner={p.activity}
-                                starred={p._isStarred}
-                                watching={p._isWatching}
-                                participants={p.participants}
-                                averageScore={p.averageScore}
-                                actionButtonView="icons"
-                            />
-                        </TableRowItem>
-                    )),
+                {nullable(projectsToRender, (projects) =>
+                    projects.map((project) =>
+                        nullable(project, (p) => (
+                            <TableRowItem title={<TableRowItemTitle size="l">{p.title}</TableRowItemTitle>}>
+                                <ProjectListItem
+                                    href={routes.project(p.id)}
+                                    id={p.id}
+                                    title={p.title}
+                                    flowId={p.flowId}
+                                    stargizers={p._count.stargizers}
+                                    owner={p.activity}
+                                    starred={p._isStarred}
+                                    watching={p._isWatching}
+                                    participants={p.participants}
+                                    averageScore={p.averageScore}
+                                    actionButtonView="icons"
+                                />
+                            </TableRowItem>
+                        )),
+                    ),
                 )}
             </Table>
+            {nullable(fetchStatus === 'fetching', () => (
+                <Loader />
+            ))}
+            {nullable(hasNextPage, () => (
+                <LoadMoreButton onClick={onFetchNextPage} disabled={fetchStatus === 'fetching'} />
+            ))}
         </Page>
     );
 };
diff --git a/src/pages/explore/projects/index.tsx b/src/pages/explore/projects/index.tsx
@@ -3,7 +3,10 @@ import { declareSsrProps } from '../../../utils/declareSsrProps';
 
 export const getServerSideProps = declareSsrProps(
     async ({ ssrHelpers }) => {
-        await ssrHelpers.project.getAll.fetch();
+        await ssrHelpers.v2.project.getAll.fetch({
+            firstLevel: false,
+            limit: 20,
+        });
     },
     {
         private: true,

diff --git a/trpc/router/project.ts b/trpc/router/project.ts
@@ -126,7 +126,7 @@ export const project = router({
                 })
                 .optional(),
         )
-        .query(async ({ ctx, input: { firstLevel, goalsQuery } = {} }) => {
+        .query(async ({ ctx, input: { firstLevel = true, goalsQuery } = {} }) => {
             const { activityId, role } = ctx.session.user;
             let hideCriteriaFilterIds: string[] = [];
             if (goalsQuery?.hideCriteria) {