Refactor/finish activities optimistic (#4106)

* Finished optimistic effects

* Fixed tests

* Added unit test on useActivityConnectionUtils to prepare for refactor

* Fixed console.log

packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx

@@ -1,17 +1,23 @@
+import { useLocation } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useDeleteActivityFromCache } from '@/activities/hooks/useDeleteActivityFromCache';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { useRemoveFromActivitiesQueries } from '@/activities/hooks/useRemoveFromActivitiesQueries';
+import { useRemoveFromActivityTargetsQueries } from '@/activities/hooks/useRemoveFromActivityTargetsQueries';
+import { currentNotesQueryVariablesState } from '@/activities/notes/states/currentNotesQueryVariablesState';
 import { activityInDrawerState } from '@/activities/states/activityInDrawerState';
 import { activityTargetableEntityArrayState } from '@/activities/states/activityTargetableEntityArrayState';
 import { isActivityInCreateModeState } from '@/activities/states/isActivityInCreateModeState';
 import { isUpsertingActivityInDBState } from '@/activities/states/isCreatingActivityInDBState';
 import { temporaryActivityForEditorState } from '@/activities/states/temporaryActivityForEditorState';
 import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
-import { useRemoveFromTimelineActivitiesQueries } from '@/activities/timeline/hooks/useRemoveFromTimelineActivitiesQueries';
-import { timelineTargetableObjectState } from '@/activities/timeline/states/timelineTargetableObjectState';
+import { currentCompletedTaskQueryVariablesState } from '@/activities/tasks/states/currentCompletedTaskQueryVariablesState';
+import { currentIncompleteTaskQueryVariablesState } from '@/activities/tasks/states/currentIncompleteTaskQueryVariablesState';
+import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY';
+import { objectShowPageTargetableObjectState } from '@/activities/timeline/states/objectShowPageTargetableObjectState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
@@ -37,13 +43,11 @@ export const ActivityActionBar = () => {
   const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
   const { deleteOneRecord: deleteOneActivity } = useDeleteOneRecord({
     objectNameSingular: CoreObjectNameSingular.Activity,
-    refetchFindManyQuery: true,
   });
 
   const { deleteManyRecords: deleteManyActivityTargets } = useDeleteManyRecords(
     {
       objectNameSingular: CoreObjectNameSingular.ActivityTarget,
-      refetchFindManyQuery: true,
     },
   );
 
@@ -56,15 +60,34 @@ export const ActivityActionBar = () => {
   const [isUpsertingActivityInDB] = useRecoilState(
     isUpsertingActivityInDBState,
   );
-  const timelineTargetableObject = useRecoilValue(
-    timelineTargetableObjectState,
+  const objectShowPageTargetableObject = useRecoilValue(
+    objectShowPageTargetableObjectState,
   );
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  const { removeFromTimelineActivitiesQueries } =
-    useRemoveFromTimelineActivitiesQueries();
+  const currentCompletedTaskQueryVariables = useRecoilValue(
+    currentCompletedTaskQueryVariablesState,
+  );
+
+  const currentIncompleteTaskQueryVariables = useRecoilValue(
+    currentIncompleteTaskQueryVariablesState,
+  );
+
+  const currentNotesQueryVariables = useRecoilValue(
+    currentNotesQueryVariablesState,
+  );
+
+  const { pathname } = useLocation();
+  const { removeFromActivitiesQueries } = useRemoveFromActivitiesQueries();
+  const { removeFromActivityTargetsQueries } =
+    useRemoveFromActivityTargetsQueries();
+
+  const weAreOnObjectShowPage = pathname.startsWith('/object');
+  const weAreOnTaskPage = pathname.startsWith('/tasks');
+
+  const deleteActivity = async () => {
+    setIsRightDrawerOpen(false);
 
-  const deleteActivity = () => {
     if (viewableActivityId) {
       if (isActivityInCreateMode && isDefined(temporaryActivityForEditor)) {
         deleteActivityFromCache(temporaryActivityForEditor);
@@ -74,22 +97,77 @@ export const ActivityActionBar = () => {
           const activityTargetIdsToDelete =
             activityInDrawer?.activityTargets.map(mapToRecordId) ?? [];
 
-          if (isDefined(timelineTargetableObject)) {
-            removeFromTimelineActivitiesQueries({
-              activityTargetsToRemove: activityInDrawer?.activityTargets ?? [],
+          if (weAreOnTaskPage) {
+            removeFromActivitiesQueries({
               activityIdToRemove: viewableActivityId,
+              targetableObjects: [],
+              activitiesFilters: currentCompletedTaskQueryVariables?.filter,
+              activitiesOrderByVariables:
+                currentCompletedTaskQueryVariables?.orderBy,
+            });
+
+            removeFromActivitiesQueries({
+              activityIdToRemove: viewableActivityId,
+              targetableObjects: [],
+              activitiesFilters: currentIncompleteTaskQueryVariables?.filter,
+              activitiesOrderByVariables:
+                currentIncompleteTaskQueryVariables?.orderBy,
+            });
+          } else if (
+            weAreOnObjectShowPage &&
+            isDefined(objectShowPageTargetableObject)
+          ) {
+            removeFromActivitiesQueries({
+              activityIdToRemove: viewableActivityId,
+              targetableObjects: [objectShowPageTargetableObject],
+              activitiesFilters: {},
+              activitiesOrderByVariables:
+                FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY,
+            });
+
+            if (isDefined(currentCompletedTaskQueryVariables)) {
+              removeFromActivitiesQueries({
+                activityIdToRemove: viewableActivityId,
+                targetableObjects: [objectShowPageTargetableObject],
+                activitiesFilters: currentCompletedTaskQueryVariables?.filter,
+                activitiesOrderByVariables:
+                  currentCompletedTaskQueryVariables?.orderBy,
+              });
+            }
+
+            if (isDefined(currentIncompleteTaskQueryVariables)) {
+              removeFromActivitiesQueries({
+                activityIdToRemove: viewableActivityId,
+                targetableObjects: [objectShowPageTargetableObject],
+                activitiesFilters: currentIncompleteTaskQueryVariables?.filter,
+                activitiesOrderByVariables:
+                  currentIncompleteTaskQueryVariables?.orderBy,
+              });
+            }
+
+            if (isDefined(currentNotesQueryVariables)) {
+              removeFromActivitiesQueries({
+                activityIdToRemove: viewableActivityId,
+                targetableObjects: [objectShowPageTargetableObject],
+                activitiesFilters: currentNotesQueryVariables?.filter,
+                activitiesOrderByVariables: currentNotesQueryVariables?.orderBy,
+              });
+            }
+
+            removeFromActivityTargetsQueries({
+              activityTargetsToRemove: activityInDrawer?.activityTargets ?? [],
+              targetableObjects: [objectShowPageTargetableObject],
             });
           }
 
           if (isNonEmptyArray(activityTargetIdsToDelete)) {
-            deleteManyActivityTargets(activityTargetIdsToDelete);
+            await deleteManyActivityTargets(activityTargetIdsToDelete);
           }
-          deleteOneActivity?.(viewableActivityId);
+
+          await deleteOneActivity?.(viewableActivityId);
         }
       }
     }
-
-    setIsRightDrawerOpen(false);
   };
 
   const record = useRecoilValue(
@@ -98,7 +176,7 @@ export const ActivityActionBar = () => {
 
   const addActivity = () => {
     setIsRightDrawerOpen(false);
-    if (record && timelineTargetableObject) {
+    if (record && objectShowPageTargetableObject) {
       openCreateActivity({
         type: record.type,
         customAssignee: record.assignee,

packages/twenty-front/src/modules/activities/right-drawer/components/__stories__/RightDrawerActivityTopBar.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { RightDrawerActivityTopBar } from '../RightDrawerActivityTopBar';
@@ -14,7 +14,7 @@ const meta: Meta<typeof RightDrawerActivityTopBar> = {
         <Story />
       </div>
     ),
-    ComponentDecorator,
+    ComponentWithRouterDecorator,
   ],
   parameters: {
     msw: graphqlMocks,