fix(GoalTableList): move open preview click handler inside `<GoalTabl…

…eList />`
taskany-inc · Feb 29, 2024 · 77746e5 · 77746e5
1 parent 2581e17
commit 77746e5
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 86 deletions.
diff --git a/src/components/DashboardPage/DashboardPage.tsx b/src/components/DashboardPage/DashboardPage.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { ListView, nullable } from '@taskany/bricks';
 import { TreeViewElement } from '@taskany/bricks/harmony';
 
@@ -61,7 +61,7 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
 
     useFMPMetric(!!data);
 
-    const { setPreview, preview, on } = useGoalPreview();
+    const { setPreview, on } = useGoalPreview();
 
     useEffect(() => {
         const unsubUpdate = on('on:goal:update', () => {
@@ -78,23 +78,6 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
         };
     }, [on, utils.project.getUserProjectsWithGoals]);
 
-    useEffect(() => {
-        const isGoalDeletedAlready = preview && !goals?.some((g) => g.id === preview.id);
-
-        if (isGoalDeletedAlready) setPreview(null);
-    }, [goals, preview, setPreview]);
-
-    const onGoalPreviewShow = useCallback(
-        (goal: Parameters<typeof setPreview>[1]): MouseEventHandler<HTMLAnchorElement> =>
-            (e) => {
-                if (e.metaKey || e.ctrlKey || !goal?._shortId) return;
-
-                e.preventDefault();
-                setPreview(goal._shortId, goal);
-            },
-        [setPreview],
-    );
-
     const onFilterStar = useCallback(async () => {
         await utils.filter.getById.invalidate();
     }, [utils]);
@@ -147,7 +130,7 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
                             href={routes.project(project.id)}
                             goals={nullable(goals, (g) => (
                                 <TreeViewElement>
-                                    <GoalTableList goals={g} onGoalPreviewShow={onGoalPreviewShow} />
+                                    <GoalTableList goals={g} />
                                 </TreeViewElement>
                             ))}
                         >

diff --git a/src/components/FlatGoalList.tsx b/src/components/FlatGoalList.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, MouseEventHandler, useCallback, useEffect, useMemo, useState } from 'react';
+import { ComponentProps, useCallback, useEffect, useMemo, useState } from 'react';
 import { ListView, nullable } from '@taskany/bricks';
 
 import { QueryState } from '../hooks/useUrlFilterParams';
@@ -20,7 +20,7 @@ const pageSize = 20;
 
 export const FlatGoalList: React.FC<GoalListProps> = ({ queryState, onTagClick }) => {
     const utils = trpc.useContext();
-    const { preview, setPreview, on } = useGoalPreview();
+    const { setPreview, on } = useGoalPreview();
 
     const [, setPage] = useState(0);
     const { data, fetchNextPage, hasNextPage } = trpc.goal.getBatch.useInfiniteQuery(
@@ -59,23 +59,6 @@ export const FlatGoalList: React.FC<GoalListProps> = ({ queryState, onTagClick }
         setPage((prev) => prev++);
     }, [fetchNextPage]);
 
-    useEffect(() => {
-        const isGoalDeletedAlready = preview && !goalsOnScreen?.some((g) => g.id === preview.id);
-
-        if (isGoalDeletedAlready) setPreview(null);
-    }, [goalsOnScreen, preview, setPreview]);
-
-    const onGoalPreviewShow = useCallback(
-        (goal: Parameters<typeof setPreview>[1]): MouseEventHandler<HTMLAnchorElement> =>
-            (e) => {
-                if (e.metaKey || e.ctrlKey || !goal?._shortId) return;
-
-                e.preventDefault();
-                setPreview(goal._shortId, goal);
-            },
-        [setPreview],
-    );
-
     const handleItemEnter = useCallback(
         (goal: NonNullable<GoalByIdReturnType>) => {
             setPreview(goal._shortId, goal);
@@ -86,7 +69,7 @@ export const FlatGoalList: React.FC<GoalListProps> = ({ queryState, onTagClick }
     return (
         <ListView onKeyboardClick={handleItemEnter}>
             {nullable(goalsOnScreen, (goals) => (
-                <GoalTableList goals={goals} onTagClick={onTagClick} onGoalPreviewShow={onGoalPreviewShow} />
+                <GoalTableList goals={goals} onTagClick={onTagClick} />
             ))}
 
             {nullable(hasNextPage, () => (

diff --git a/src/components/GoalTableList/GoalTableList.tsx b/src/components/GoalTableList/GoalTableList.tsx
@@ -1,5 +1,5 @@
 import { Badge, State, Table, Tag, Text, User, UserGroup } from '@taskany/bricks/harmony';
-import { MouseEventHandler, useMemo } from 'react';
+import { MouseEventHandler, useCallback, useEffect, useMemo } from 'react';
 import { Link, ListViewItem, nullable } from '@taskany/bricks';
 import { IconMessageTextOutline } from '@taskany/icons';
 
@@ -21,18 +21,44 @@ import s from './GoalTableList.module.css';
 
 interface GoalTableListProps<T> {
     goals: T[];
-    onGoalPreviewShow: (goal: T) => MouseEventHandler<HTMLAnchorElement>;
+    onGoalPreviewShow?: (goal: T) => MouseEventHandler<HTMLAnchorElement>;
+    onGoalClick?: MouseEventHandler<HTMLAnchorElement>;
     onTagClick?: (tag: { id: string }) => MouseEventHandler<HTMLDivElement>;
 }
 
 export const GoalTableList = <T extends Partial<NonNullable<GoalByIdReturnType>>>({
     goals,
-    onGoalPreviewShow,
+    onGoalClick,
     onTagClick,
     ...attrs
 }: GoalTableListProps<T>) => {
     const locale = useLocale();
-    const { shortId, preview } = useGoalPreview();
+    const { shortId, preview, setPreview, on } = useGoalPreview();
+
+    useEffect(() => {
+        const unsubDelete = on('on:goal:delete', (updatedId) => {
+            const idInList = goals.find(({ _shortId }) => _shortId === updatedId);
+            if (idInList) {
+                setPreview(null);
+            }
+        });
+
+        return () => {
+            unsubDelete();
+        };
+    }, [goals, preview, setPreview, on]);
+
+    const onGoalPreviewShow = useCallback(
+        (goal: Parameters<typeof setPreview>[1]): MouseEventHandler<HTMLAnchorElement> =>
+            (e) => {
+                if (e.metaKey || e.ctrlKey || !goal?._shortId) return;
+
+                e.preventDefault();
+                setPreview(goal._shortId, goal);
+                onGoalClick?.(e);
+            },
+        [setPreview, onGoalClick],
+    );
 
     const data = useMemo(
         () =>

diff --git a/src/components/GroupedGoalList.tsx b/src/components/GroupedGoalList.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, MouseEventHandler, useCallback, useEffect, useMemo } from 'react';
+import { ComponentProps, useCallback, useEffect, useMemo } from 'react';
 import { ListView, nullable } from '@taskany/bricks';
 
 import { QueryState } from '../hooks/useUrlFilterParams';
@@ -51,17 +51,6 @@ export const GroupedGoalList: React.FC<GroupedGoalListProps> = ({ queryState, on
 
     useFMPMetric(!!data);
 
-    const onGoalPreviewShow = useCallback(
-        (goal: Parameters<typeof setPreview>[1]): MouseEventHandler<HTMLAnchorElement> =>
-            (e) => {
-                if (e.metaKey || e.ctrlKey || !goal?._shortId) return;
-
-                e.preventDefault();
-                setPreview(goal._shortId, goal);
-            },
-        [setPreview],
-    );
-
     const projectsOnScreen = useMemo(() => {
         const pages = data?.pages || [];
 
@@ -81,7 +70,6 @@ export const GroupedGoalList: React.FC<GroupedGoalListProps> = ({ queryState, on
                 <ProjectListItemConnected
                     key={project.id}
                     project={project}
-                    onClickProvider={onGoalPreviewShow}
                     queryState={queryState}
                     onTagClick={onTagClick}
                 />

diff --git a/src/components/ProjectListItemConnected.tsx b/src/components/ProjectListItemConnected.tsx
@@ -30,7 +30,6 @@ const onProjectClickHandler = (e: React.MouseEvent) => {
 export const ProjectListItemConnected: FC<ProjectListItemConnectedProps> = ({
     queryState,
     project,
-    onClickProvider,
     onTagClick,
     ...props
 }) => {
@@ -80,14 +79,7 @@ export const ProjectListItemConnected: FC<ProjectListItemConnectedProps> = ({
             project={project}
             goals={nullable(projectDeepInfo?.goals, (goals) => (
                 <TreeViewElement>
-                    <GoalTableList
-                        goals={goals}
-                        onTagClick={onTagClick}
-                        onGoalPreviewShow={(goal) => (e) => {
-                            onClickProvider?.(goal)(e);
-                            onProjectClickHandler(e);
-                        }}
-                    />
+                    <GoalTableList goals={goals} onTagClick={onTagClick} onGoalClick={onProjectClickHandler} />
                 </TreeViewElement>
             ))}
             {...props}
@@ -99,13 +91,7 @@ export const ProjectListItemConnected: FC<ProjectListItemConnectedProps> = ({
                 )}
             </TreeViewElement>
             {childrenProjects.map((p) => (
-                <ProjectListItemConnected
-                    key={p.id}
-                    project={p}
-                    queryState={queryState}
-                    onClickProvider={onClickProvider}
-                    titleSize="m"
-                />
+                <ProjectListItemConnected key={p.id} project={p} queryState={queryState} titleSize="m" />
             ))}
         </ProjectListItemCollapsable>
     );

diff --git a/src/components/ProjectPage/ProjectPage.tsx b/src/components/ProjectPage/ProjectPage.tsx
@@ -1,4 +1,4 @@
-import { MouseEventHandler, useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { ListView, nullable } from '@taskany/bricks';
 
 import { Page } from '../Page/Page';
@@ -75,17 +75,6 @@ export const ProjectPage = ({ user, ssrTime, params: { id }, defaultPresetFallba
         };
     }, [on, utils.project.getDeepInfo, utils.project.getById]);
 
-    const onGoalPreviewShow = useCallback(
-        (goal: Parameters<typeof setPreview>[1]): MouseEventHandler<HTMLAnchorElement> =>
-            (e) => {
-                if (e.metaKey || e.ctrlKey || !goal?._shortId) return;
-
-                e.preventDefault();
-                setPreview(goal._shortId, goal);
-            },
-        [setPreview],
-    );
-
     useEffect(() => {
         if (!project || project.personal) return;
 
@@ -174,7 +163,6 @@ export const ProjectPage = ({ user, ssrTime, params: { id }, defaultPresetFallba
                             visible
                             project={p}
                             onTagClick={setTagsFilterOutside}
-                            onClickProvider={onGoalPreviewShow}
                             queryState={queryState}
                         />
                     ))}