feat(ProjectListItemCollapsible): support project loading status

taskany-inc · Jun 21, 2023 · 7c2dcb3 · 7c2dcb3
1 parent eeb5b06
commit 7c2dcb3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/src/components/ProjectListItem/ProjectListItem.tsx b/src/components/ProjectListItem/ProjectListItem.tsx
@@ -1,4 +1,14 @@
-import React, { Children, FC, MouseEvent, MouseEventHandler, ReactNode, useCallback, useMemo, useState } from 'react';
+import React, {
+    Children,
+    FC,
+    MouseEvent,
+    MouseEventHandler,
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react';
 import styled from 'styled-components';
 import Link from 'next/link';
 import { Badge, Button, EyeIcon, StarFilledIcon, Text, nullable } from '@taskany/bricks';
@@ -38,6 +48,8 @@ interface ProjectListItemCollapsableProps {
     project: NonNullable<ProjectByIdReturnType>;
     goals?: NonNullable<GoalByIdReturnType>[];
     children?: (id: string[], deep?: number) => ReactNode;
+    onCollapsedChange?: (value: boolean) => void;
+    loading?: boolean;
     onTagClick?: React.ComponentProps<typeof GoalListItem>['onTagClick'];
     onClickProvider?: (g: NonNullable<GoalByIdReturnType>) => MouseEventHandler<HTMLAnchorElement>;
     selectedResolver?: (id: string) => boolean;
@@ -98,7 +110,9 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
     onTagClick,
     onClickProvider,
     selectedResolver,
+    onCollapsedChange,
     children,
+    loading = false,
     goals,
     deep = 0,
 }) => {
@@ -118,6 +132,10 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
         }
     }, [onClickEnabled]);
 
+    useEffect(() => {
+        onCollapsedChange?.(collapsed);
+    }, [collapsed, onCollapsedChange]);
+
     const onHeaderButtonClick = useCallback((e: MouseEvent) => {
         e.stopPropagation();
 
@@ -126,7 +144,7 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
 
     return (
         <Collapsable
-            collapsed={collapsed}
+            collapsed={collapsed || loading}
             onClick={onClick}
             header={
                 <ProjectListContainer offset={offset}>

diff --git a/src/components/ProjectPage/ProjectPage.tsx b/src/components/ProjectPage/ProjectPage.tsx
@@ -36,7 +36,6 @@ const PageProjectListItem: FC<
     }
 > = ({ queryState, id, ...props }) => {
     const project = trpc.project.getById.useQuery(id);
-
     const { data: projectDeepInfo } = trpc.project.getDeepInfo.useQuery(
         {
             id,
@@ -48,12 +47,33 @@ const PageProjectListItem: FC<
         },
     );
 
+    const [fetchChildEnabled, setFetchChildEnabled] = useState(false);
+
+    const childrenQueries = trpc.useQueries((t) =>
+        (project.data?.children.map(({ id }) => id) || []).map((id) =>
+            t.project.getById(id, { enabled: fetchChildEnabled, refetchOnWindowFocus: false }),
+        ),
+    );
+
+    const loading = useMemo(() => childrenQueries.some(({ isLoading }) => isLoading), [childrenQueries]);
+
+    console.log('QQQ QUERIES', id, childrenQueries);
     const goals = useMemo(() => projectDeepInfo?.goals.filter((g) => g.projectId === id), [projectDeepInfo, id]);
 
+    const onCollapsedChange = useCallback((value: boolean) => {
+        setFetchChildEnabled(!value);
+    }, []);
+
     if (!project.data) return null;
 
     return (
-        <ProjectListItemCollapsable goals={goals} project={project.data} {...props}>
+        <ProjectListItemCollapsable
+            goals={goals}
+            project={project.data}
+            onCollapsedChange={onCollapsedChange}
+            loading={loading}
+            {...props}
+        >
             {(ids, deep) =>
                 ids.map((id) => <PageProjectListItem {...props} key={id} id={id} queryState={queryState} deep={deep} />)
             }