fix(ProjectListItemConnected): add query state to goals counter

taskany-inc · Jun 27, 2023 · dc71266 · dc71266
1 parent 4109d7a
commit dc71266
Show file tree

Hide file tree

Showing 15 changed files with 294 additions and 194 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,6 @@
     "@aws-sdk/client-s3": "3.347.1",
     "@hookform/resolvers": "3.1.1",
     "@next-auth/prisma-adapter": "1.0.6",
-    "@prisma/client": "4.14.1",
     "@sentry/nextjs": "7.50.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.5",
@@ -72,6 +71,7 @@
     "@commitlint/config-conventional": "17.6.1",
     "@faker-js/faker": "7.6.0",
     "@next/bundle-analyzer": "13.2.1",
+    "@prisma/client": "4.16.1",
     "@svgr/webpack": "7.0.0",
     "@types/cors": "2.8.13",
     "@types/jest": "29.5.1",
@@ -105,7 +105,7 @@
     "jest": "29.5.0",
     "lint-staged": "13.1.2",
     "prettier": "2.8.8",
-    "prisma": "4.15.0",
+    "prisma": "4.16.1",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
     "typescript": "5.1.3",

diff --git a/src/components/ProjectCreateForm/ProjectCreateForm.tsx b/src/components/ProjectCreateForm/ProjectCreateForm.tsx
@@ -101,9 +101,14 @@ const ProjectCreateForm: React.FC = () => {
 
     const isKeyEnoughLength = Boolean(keyWatcher?.length >= 3);
     const flowRecomendations = trpc.flow.recommedations.useQuery();
-    const existingProject = trpc.project.getById.useQuery(keyWatcher, {
-        enabled: isKeyEnoughLength,
-    });
+    const existingProject = trpc.project.getById.useQuery(
+        {
+            id: keyWatcher,
+        },
+        {
+            enabled: isKeyEnoughLength,
+        },
+    );
 
     const isKeyUnique = Boolean(!existingProject?.data);
 

diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
@@ -23,7 +23,6 @@ interface ProjectListItemCollapsableProps {
     collapsedGoals: boolean;
     onClick?: () => void;
     onGoalsClick?: () => void;
-    goalsCounter?: number;
     loading?: boolean;
     deep?: number;
 }
@@ -37,7 +36,6 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
     children,
     goals,
     loading = false,
-    goalsCounter,
     deep = 0,
 }) => {
     const contentHidden = collapsed || loading;
@@ -70,12 +68,12 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
                         watching={project._isWatching}
                     >
                         <StyledGoalsButtonContainer>
-                            {goalsCounter ? (
+                            {project._count.goals ? (
                                 <Button
                                     ghost={collapsedGoals}
                                     onClick={onGoalsButtonClick}
                                     text={tr('Goals')}
-                                    iconRight={<Badge size="s">{goalsCounter}</Badge>}
+                                    iconRight={<Badge size="s">{project._count.goals}</Badge>}
                                 />
                             ) : (
                                 <Text color={gray7}>{tr('No goals')}</Text>

diff --git a/src/components/ProjectListItemConnected.tsx b/src/components/ProjectListItemConnected.tsx
@@ -1,4 +1,4 @@
-import { FC, MouseEventHandler, useState, useMemo, useCallback } from 'react';
+import { FC, MouseEventHandler, useState, useMemo, useCallback, useEffect } from 'react';
 
 import { GoalByIdReturnType, ProjectByIdReturnType } from '../../trpc/inferredTypes';
 import { trpc } from '../utils/trpcClient';
@@ -34,7 +34,7 @@ export const ProjectListItemConnected: FC<{
     const { data: projectDeepInfo } = trpc.project.getDeepInfo.useQuery(
         {
             id: project.id,
-            ...queryState,
+            goalsQuery: queryState,
         },
         {
             enabled: !collapsedGoals,
@@ -44,9 +44,12 @@ export const ProjectListItemConnected: FC<{
     );
 
     const ids = useMemo(() => project?.children.map(({ id }) => id) || [], [project]);
-    const { data: childrenProjects = [], status } = trpc.project.getByIds.useQuery(ids, {
-        enabled: !collapsed,
-    });
+    const { data: childrenProjects = [], status } = trpc.project.getByIds.useQuery(
+        { ids, goalsQuery: queryState },
+        {
+            enabled: !collapsed,
+        },
+    );
 
     const goals = useMemo(
         () => projectDeepInfo?.goals.filter((g) => g.projectId === project.id),
@@ -61,8 +64,6 @@ export const ProjectListItemConnected: FC<{
         setIsCollapsedGoals((value) => !value);
     }, []);
 
-    const goalsCounter = goals ? goals.length : project._count.goals;
-
     return (
         <ProjectListItemCollapsable
             href={routes.project(project.id)}
@@ -96,7 +97,6 @@ export const ProjectListItemConnected: FC<{
             onClick={onClick}
             onGoalsClick={onGoalsClick}
             loading={status === 'loading'}
-            goalsCounter={goalsCounter}
             deep={deep}
         >
             {childrenProjects.map((p) => (

diff --git a/src/components/ProjectPage/ProjectPage.tsx b/src/components/ProjectPage/ProjectPage.tsx
@@ -63,11 +63,15 @@ export const ProjectPage = ({ user, ssrTime, params: { id } }: ExternalPageProps
         preset: preset?.data,
     });
 
-    const project = trpc.project.getById.useQuery(id);
+    const project = trpc.project.getById.useQuery({
+        id,
+        goalsQuery: queryState,
+    });
+
     const { data: projectDeepInfo, isLoading } = trpc.project.getDeepInfo.useQuery(
         {
             id,
-            ...queryState,
+            goalsQuery: queryState,
         },
         {
             keepPreviousData: true,

diff --git a/src/components/ProjectSettingsPage/ProjectSettingsPage.tsx b/src/components/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -43,7 +43,7 @@ export const ProjectSettingsPage = ({ user, ssrTime, params: { id } }: ExternalP
     const [currentProjectCache, setCurrentProjectCache] = useLocalStorage('currentProjectCache');
     const [recentProjectsCache, setRecentProjectsCache] = useLocalStorage('recentProjectsCache', {});
 
-    const project = trpc.project.getById.useQuery(id);
+    const project = trpc.project.getById.useQuery({ id });
 
     const { updateProject, deleteProject, transferOwnership } = useProjectResource(id);
 

diff --git a/src/components/ProjectsPage/ProjectsPage.tsx b/src/components/ProjectsPage/ProjectsPage.tsx
@@ -30,10 +30,6 @@ export const ProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {
     const [preview, setPreview] = useState<GoalByIdReturnType | null>(null);
     const { toggleFilterStar } = useFilterResource();
 
-    const { data: projects = [] } = trpc.project.getAll.useQuery({
-        firstLevel: true,
-    });
-
     const utils = trpc.useContext();
     const preset = trpc.filter.getById.useQuery(String(nextRouter.query.filter), {
         enabled: Boolean(nextRouter.query.filter),
@@ -63,6 +59,11 @@ export const ProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {
         preset: preset?.data,
     });
 
+    const { data: projects = [] } = trpc.project.getAll.useQuery({
+        firstLevel: true,
+        goalsQuery: queryState,
+    });
+
     const shadowPreset = userFilters.data?.filter((f) => f.params === queryString)[0];
 
     const onGoalPrewiewShow = useCallback(

diff --git a/src/hooks/useProjectResource.ts b/src/hooks/useProjectResource.ts
@@ -17,7 +17,7 @@ export const useProjectResource = (id: string) => {
     const transferOwnershipMutation = trpc.project.transferOwnership.useMutation();
 
     const invalidate = useCallback(() => {
-        utils.project.getById.invalidate(id);
+        utils.project.getById.invalidate({ id });
     }, [id, utils.project.getById]);
 
     const createProject = useCallback(

diff --git a/src/pages/explore/projects.tsx b/src/pages/explore/projects.tsx
@@ -1,9 +1,16 @@
 import { ExploreProjectsPage } from '../../components/ExporeProjectsPage/ExporeProjectsPage';
 import { declareSsrProps } from '../../utils/declareSsrProps';
+import { parseFilterValues } from '../../hooks/useUrlFilterParams';
 
 export const getServerSideProps = declareSsrProps(
-    async ({ ssrHelpers }) => {
-        await ssrHelpers.project.getAll.fetch();
+    async ({ ssrHelpers, query }) => {
+        const preset =
+            typeof query.filter === 'string' ? await ssrHelpers.filter.getById.fetch(query.filter) : undefined;
+
+        await ssrHelpers.project.getAll.fetch({
+            firstLevel: true,
+            goalsQuery: parseFilterValues(preset ? Object.fromEntries(new URLSearchParams(preset.params)) : query),
+        });
     },
     {
         private: true,

diff --git a/src/pages/projects/[id]/index.tsx b/src/pages/projects/[id]/index.tsx
@@ -7,10 +7,11 @@ export const getServerSideProps = declareSsrProps(
         const preset =
             typeof query.filter === 'string' ? await ssrHelpers.filter.getById.fetch(query.filter) : undefined;
         await ssrHelpers.filter.getUserFilters.fetch();
-        const project = await ssrHelpers.project.getById.fetch(id);
+        const goalsQuery = parseFilterValues(preset ? Object.fromEntries(new URLSearchParams(preset.params)) : query);
+        const project = await ssrHelpers.project.getById.fetch({ id, goalsQuery });
         await ssrHelpers.project.getDeepInfo.fetch({
             id,
-            ...parseFilterValues(preset ? Object.fromEntries(new URLSearchParams(preset.params)) : query),
+            goalsQuery,
         });
 
         if (!project) {

diff --git a/src/pages/projects/[id]/settings.tsx b/src/pages/projects/[id]/settings.tsx
@@ -3,7 +3,7 @@ import { declareSsrProps } from '../../../utils/declareSsrProps';
 
 export const getServerSideProps = declareSsrProps(
     async ({ ssrHelpers, params: { id } }) => {
-        const data = await ssrHelpers.project.getById.fetch(id);
+        const data = await ssrHelpers.project.getById.fetch({ id });
 
         if (!data) {
             return {

diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
@@ -3,8 +3,16 @@ import { parseFilterValues } from '../../hooks/useUrlFilterParams';
 import { declareSsrProps } from '../../utils/declareSsrProps';
 
 export const getServerSideProps = declareSsrProps(
-    async ({ ssrHelpers }) => {
-        await ssrHelpers.project.getAll.fetch();
+    async ({ ssrHelpers, query }) => {
+        const preset =
+            typeof query.filter === 'string' ? await ssrHelpers.filter.getById.fetch(query.filter) : undefined;
+        await ssrHelpers.filter.getUserFilters.fetch();
+        const goalsQuery = parseFilterValues(preset ? Object.fromEntries(new URLSearchParams(preset.params)) : query);
+
+        await ssrHelpers.project.getAll.fetch({
+            firstLevel: true,
+            goalsQuery,
+        });
     },
     {
         private: true,