feat(ProjectListItemCollapsible): prisma project.getByIds endpoint

taskany-inc · Jun 21, 2023 · a0634f8 · a0634f8
1 parent e2f9386
commit a0634f8
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 50 deletions.
diff --git a/src/components/CollapsableItem.tsx b/src/components/CollapsableItem.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode, useEffect, useRef, useState } from 'react';
+import { FC, ReactNode } from 'react';
 import styled, { css } from 'styled-components';
 import { gray7, radiusM } from '@taskany/colors';
 import { nullable } from '@taskany/bricks';

diff --git a/src/components/ProjectPage/ProjectPage.tsx b/src/components/ProjectPage/ProjectPage.tsx
@@ -54,23 +54,10 @@ const PageProjectListItem: FC<
 
     const [fetchChildEnabled, setFetchChildEnabled] = useState(false);
 
-    const childrenQueries = trpc.useQueries((t) =>
-        (project?.children.map(({ id }) => id) || []).map((id) =>
-            t.project.getById(id, { enabled: fetchChildEnabled, refetchOnWindowFocus: false }),
-        ),
-    );
-
-    const loading = useMemo(() => childrenQueries.some(({ status }) => status === 'loading'), [childrenQueries]);
-    const childrenProjects = useMemo(
-        () =>
-            childrenQueries.reduce((acum, { data }) => {
-                if (data) {
-                    acum.push(data);
-                }
-                return acum;
-            }, [] as NonNullable<ProjectByIdReturnType>[]),
-        [childrenQueries],
-    );
+    const ids = useMemo(() => project?.children.map(({ id }) => id) || [], [project]);
+    const { data: childrenProjects = [], status } = trpc.project.getByIds.useQuery(ids, {
+        enabled: fetchChildEnabled,
+    });
 
     const goals = useMemo(
         () => projectDeepInfo?.goals.filter((g) => g.projectId === project.id),
@@ -114,7 +101,7 @@ const PageProjectListItem: FC<
             project={project}
             onCollapsedChange={onCollapsedChange}
             onGoalsCollapsedChange={onGoalsCollapsedChange}
-            loading={loading}
+            loading={status === 'loading'}
             {...props}
             deep={deep}
         >

diff --git a/trpc/router/project.ts b/trpc/router/project.ts
@@ -43,6 +43,38 @@ export const addCalculatedProjectFields = <
     };
 };
 
+const projectFullSchema = {
+    stargizers: true,
+    watchers: true,
+    parent: true,
+    tags: true,
+    children: {
+        include: {
+            parent: true,
+        },
+    },
+    participants: {
+        include: {
+            user: true,
+            ghost: true,
+        },
+    },
+    activity: {
+        include: {
+            user: true,
+            ghost: true,
+        },
+    },
+    _count: {
+        select: {
+            stargizers: true,
+            watchers: true,
+            participants: true,
+            children: true,
+        },
+    },
+};
+
 export const project = router({
     suggestions: protectedProcedure.input(z.string()).query(({ input }) => {
         return prisma.project.findMany({
@@ -131,43 +163,25 @@ export const project = router({
             where: {
                 id,
             },
-            include: {
-                stargizers: true,
-                watchers: true,
-                parent: true,
-                tags: true,
-                children: {
-                    include: {
-                        parent: true,
-                    },
-                },
-                participants: {
-                    include: {
-                        user: true,
-                        ghost: true,
-                    },
-                },
-                activity: {
-                    include: {
-                        user: true,
-                        ghost: true,
-                    },
-                },
-                _count: {
-                    select: {
-                        stargizers: true,
-                        watchers: true,
-                        participants: true,
-                        children: true,
-                    },
-                },
-            },
+            include: projectFullSchema,
         });
 
         if (!project) return null;
 
         return addCalculatedProjectFields(project, ctx.session.user.activityId);
     }),
+    getByIds: protectedProcedure.input(z.array(z.string())).query(async ({ ctx, input }) => {
+        const projects = await prisma.project.findMany({
+            where: {
+                id: {
+                    in: input,
+                },
+            },
+            include: projectFullSchema,
+        });
+
+        return projects.map((project) => addCalculatedProjectFields(project, ctx.session.user.activityId));
+    }),
     getDeepInfo: protectedProcedure.input(projectDeepInfoSchema).query(async ({ ctx, input }) => {
         const [allProjectGoals, filtredProjectGoals] = await Promise.all([
             prisma.goal.findMany({