feat(ProjectListItemCollapsable): default state is opened

taskany-inc · Jun 26, 2023 · 15c178d · 15c178d
1 parent 872f0ee
commit 15c178d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 38 deletions.
diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
@@ -20,56 +20,47 @@ interface ProjectListItemCollapsableProps {
     project: NonNullable<ProjectByIdReturnType>;
     goals?: ReactNode;
     children?: ReactNode;
-    onCollapsedChange?: (value: boolean) => void;
-    onGoalsCollapsedChange?: (value: boolean) => void;
+    collapsed: boolean;
+    collapsedGoals: boolean;
+    onClick?: () => void;
+    onGoalsClick?: () => void;
     goalsCounter?: number;
     loading?: boolean;
     deep?: number;
 }
 
 export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProps> = ({
     project,
-    onCollapsedChange,
-    onGoalsCollapsedChange,
+    collapsed = true,
+    collapsedGoals = true,
+    onClick,
+    onGoalsClick,
     children,
     goals,
     loading = false,
     goalsCounter,
     deep = 0,
 }) => {
-    const [collapsed, setIsCollapsed] = useState(true);
-    const [collapsedGoals, setIsCollapsedGoals] = useState(true);
     const contentHidden = collapsed || loading;
 
     const offset = collapseOffset * (contentHidden ? deep - 1 : deep);
     const childs = useMemo(() => project.children.map(({ id }) => id), [project]);
 
     const onClickEnabled = childs.length;
 
-    useEffect(() => {
-        onCollapsedChange?.(collapsed);
-    }, [collapsed, onCollapsedChange]);
+    const onGoalsButtonClick = useCallback(
+        (e: MouseEvent) => {
+            e.stopPropagation();
 
-    useEffect(() => {
-        onGoalsCollapsedChange?.(collapsedGoals);
-    }, [collapsedGoals, onGoalsCollapsedChange]);
-
-    const onClick = useCallback(() => {
-        if (onClickEnabled) {
-            setIsCollapsed((value) => !value);
-        }
-    }, [onClickEnabled]);
-
-    const onHeaderButtonClick = useCallback((e: MouseEvent) => {
-        e.stopPropagation();
-
-        setIsCollapsedGoals((value) => !value);
-    }, []);
+            onGoalsClick?.();
+        },
+        [onGoalsClick],
+    );
 
     return (
         <Collapsable
             collapsed={contentHidden}
-            onClick={onClick}
+            onClick={onClickEnabled ? onClick : undefined}
             header={
                 <ProjectListContainer offset={offset}>
                     <ProjectListItem
@@ -80,7 +71,7 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
                         watching={project._isWatching}
                     >
                         <StyledGoalsButton
-                            onClick={onHeaderButtonClick}
+                            onClick={onGoalsButtonClick}
                             text={goalsCounter ? tr('Goals') : tr('No goals')}
                             disabled={!goalsCounter}
                             iconRight={goalsCounter ? <Badge size="s">{goalsCounter}</Badge> : null}

diff --git a/src/components/ProjectListItemConnected.tsx b/src/components/ProjectListItemConnected.tsx
@@ -16,39 +16,49 @@ export const ProjectListItemConnected: FC<{
     onClickProvider?: (g: NonNullable<GoalByIdReturnType>) => MouseEventHandler<HTMLAnchorElement>;
     selectedResolver?: (id: string) => boolean;
     deep?: number;
-}> = ({ queryState, project, onClickProvider, onTagClick, selectedResolver, deep = 0 }) => {
-    const [fetchGoalsEnabled, setFetchGoalsEnabled] = useState(false);
+    collapsed?: boolean;
+    collapsedGoals?: boolean;
+}> = ({
+    queryState,
+    project,
+    onClickProvider,
+    onTagClick,
+    selectedResolver,
+    deep = 0,
+    collapsed: defaultCollapsed = false,
+    collapsedGoals: defaultCollapsedGoals = false,
+}) => {
+    const [collapsed, setIsCollapsed] = useState(defaultCollapsed);
+    const [collapsedGoals, setIsCollapsedGoals] = useState(defaultCollapsedGoals);
 
     const { data: projectDeepInfo } = trpc.project.getDeepInfo.useQuery(
         {
             id: project.id,
             ...queryState,
         },
         {
-            enabled: fetchGoalsEnabled,
+            enabled: !collapsedGoals,
             keepPreviousData: true,
             staleTime: refreshInterval,
         },
     );
 
-    const [fetchChildEnabled, setFetchChildEnabled] = useState(false);
-
     const ids = useMemo(() => project?.children.map(({ id }) => id) || [], [project]);
     const { data: childrenProjects = [], status } = trpc.project.getByIds.useQuery(ids, {
-        enabled: fetchChildEnabled,
+        enabled: !collapsed,
     });
 
     const goals = useMemo(
         () => projectDeepInfo?.goals.filter((g) => g.projectId === project.id),
         [projectDeepInfo, project],
     );
 
-    const onCollapsedChange = useCallback((value: boolean) => {
-        setFetchChildEnabled(!value);
+    const onClick = useCallback(() => {
+        setIsCollapsed((value) => !value);
     }, []);
 
-    const onGoalsCollapsedChange = useCallback((value: boolean) => {
-        setFetchGoalsEnabled(!value);
+    const onGoalsClick = useCallback(() => {
+        setIsCollapsedGoals((value) => !value);
     }, []);
 
     const goalsCounter = goals ? goals.length : project._count.goals;
@@ -81,8 +91,10 @@ export const ProjectListItemConnected: FC<{
                 />
             ))}
             project={project}
-            onCollapsedChange={onCollapsedChange}
-            onGoalsCollapsedChange={onGoalsCollapsedChange}
+            collapsed={collapsed}
+            collapsedGoals={collapsedGoals}
+            onClick={onClick}
+            onGoalsClick={onGoalsClick}
             loading={status === 'loading'}
             goalsCounter={goalsCounter}
             deep={deep}
@@ -96,6 +108,8 @@ export const ProjectListItemConnected: FC<{
                     onTagClick={onTagClick}
                     onClickProvider={onClickProvider}
                     selectedResolver={selectedResolver}
+                    collapsedGoals
+                    collapsed
                 />
             ))}
         </ProjectListItemCollapsable>

diff --git a/src/components/ProjectsPage/ProjectsPage.tsx b/src/components/ProjectsPage/ProjectsPage.tsx
@@ -179,6 +179,8 @@ export const ProjectsPage = ({ user, locale, ssrTime }: ExternalPageProps) => {
                         onClickProvider={onGoalPrewiewShow}
                         selectedResolver={selectedGoalResolver}
                         queryState={queryState}
+                        collapsedGoals
+                        collapsed
                     />
                 ))}
             </PageContent>