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/tasks/hooks/useTasks.ts

@@ -1,12 +1,18 @@
+import { useEffect, useMemo } from 'react';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { DateTime } from 'luxon';
+import { useRecoilState } from 'recoil';
 
 import { useActivities } from '@/activities/hooks/useActivities';
+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 { Activity } from '@/activities/types/Activity';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { ObjectRecordQueryVariables } from '@/object-record/types/ObjectRecordQueryVariables';
 import { parseDate } from '~/utils/date-utils';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 type UseTasksProps = {
   filterDropdownId?: string;
@@ -21,27 +27,94 @@ export const useTasks = ({
     filterDropdownId,
   });
 
-  const assigneeIdFilter = selectedFilter
-    ? {
-        assigneeId: {
-          in: JSON.parse(selectedFilter.value),
-        },
-      }
-    : undefined;
+  const assigneeIdFilter = useMemo(
+    () =>
+      selectedFilter
+        ? {
+            assigneeId: {
+              in: JSON.parse(selectedFilter.value),
+            },
+          }
+        : undefined,
+    [selectedFilter],
+  );
 
   const skipActivityTargets = !isNonEmptyArray(targetableObjects);
 
+  const completedQueryVariables = useMemo(
+    () =>
+      ({
+        filter: {
+          completedAt: { is: 'NOT_NULL' },
+          type: { eq: 'Task' },
+          ...assigneeIdFilter,
+        },
+        orderBy: FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY,
+      }) as ObjectRecordQueryVariables,
+    [assigneeIdFilter],
+  );
+
+  const incompleteQueryVariables = useMemo(
+    () =>
+      ({
+        filter: {
+          completedAt: { is: 'NULL' },
+          type: { eq: 'Task' },
+          ...assigneeIdFilter,
+        },
+        orderBy: FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY,
+      }) as ObjectRecordQueryVariables,
+    [assigneeIdFilter],
+  );
+
+  const [
+    currentCompletedTaskQueryVariables,
+    setCurrentCompletedTaskQueryVariables,
+  ] = useRecoilState(currentCompletedTaskQueryVariablesState);
+
+  const [
+    currentIncompleteTaskQueryVariables,
+    setCurrentIncompleteTaskQueryVariables,
+  ] = useRecoilState(currentIncompleteTaskQueryVariablesState);
+
+  // TODO: fix useEffect, remove with better pattern
+  useEffect(() => {
+    if (
+      !isDeeplyEqual(
+        completedQueryVariables,
+        currentCompletedTaskQueryVariables,
+      )
+    ) {
+      setCurrentCompletedTaskQueryVariables(completedQueryVariables);
+    }
+  }, [
+    completedQueryVariables,
+    currentCompletedTaskQueryVariables,
+    setCurrentCompletedTaskQueryVariables,
+  ]);
+
+  useEffect(() => {
+    if (
+      !isDeeplyEqual(
+        incompleteQueryVariables,
+        currentIncompleteTaskQueryVariables,
+      )
+    ) {
+      setCurrentIncompleteTaskQueryVariables(incompleteQueryVariables);
+    }
+  }, [
+    incompleteQueryVariables,
+    currentIncompleteTaskQueryVariables,
+    setCurrentIncompleteTaskQueryVariables,
+  ]);
+
   const {
     activities: completeTasksData,
     initialized: initializedCompleteTasks,
   } = useActivities({
     targetableObjects,
-    activitiesFilters: {
-      completedAt: { is: 'NOT_NULL' },
-      type: { eq: 'Task' },
-      ...assigneeIdFilter,
-    },
-    activitiesOrderByVariables: FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY,
+    activitiesFilters: completedQueryVariables.filter ?? {},
+    activitiesOrderByVariables: completedQueryVariables.orderBy ?? {},
     skipActivityTargets,
   });
 
@@ -50,12 +123,8 @@ export const useTasks = ({
     initialized: initializedIncompleteTasks,
   } = useActivities({
     targetableObjects,
-    activitiesFilters: {
-      completedAt: { is: 'NULL' },
-      type: { eq: 'Task' },
-      ...assigneeIdFilter,
-    },
-    activitiesOrderByVariables: FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY,
+    activitiesFilters: incompleteQueryVariables.filter ?? {},
+    activitiesOrderByVariables: incompleteQueryVariables.orderBy ?? {},
     skipActivityTargets,
   });
 

packages/twenty-front/src/modules/activities/tasks/states/currentCompletedTaskQueryVariablesState.ts

@@ -0,0 +1,9 @@
+import { atom } from 'recoil';
+
+import { ObjectRecordQueryVariables } from '@/object-record/types/ObjectRecordQueryVariables';
+
+export const currentCompletedTaskQueryVariablesState =
+  atom<ObjectRecordQueryVariables | null>({
+    default: null,
+    key: 'currentCompletedTaskQueryVariablesState',
+  });

packages/twenty-front/src/modules/activities/tasks/states/currentIncompleteTaskQueryVariablesState.ts

@@ -0,0 +1,9 @@
+import { atom } from 'recoil';
+
+import { ObjectRecordQueryVariables } from '@/object-record/types/ObjectRecordQueryVariables';
+
+export const currentIncompleteTaskQueryVariablesState =
+  atom<ObjectRecordQueryVariables | null>({
+    default: null,
+    key: 'currentIncompleteTaskQueryVariablesState',
+  });