Improved activity editor re-renders (#4149)

* Refactor task count

* Fixed show page rerender

* Less rerenders and way better title and body UX

* Finished breaking down activity editor subscriptions

* Removed console.log

* Last console.log

* Fixed bugs and cleaned

packages/twenty-front/src/modules/activities/tasks/components/CurrentUserDueTaskCountEffect.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { DateTime } from 'luxon';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { currentUserDueTaskCountState } from '@/activities/tasks/states/currentUserTaskCountState';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { parseDate } from '~/utils/date-utils';
+
+export const CurrentUserDueTaskCountEffect = () => {
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+
+  const [currentUserDueTaskCount, setCurrentUserDueTaskCount] = useRecoilState(
+    currentUserDueTaskCountState,
+  );
+
+  const { records: tasks } = useFindManyRecords({
+    objectNameSingular: CoreObjectNameSingular.Activity,
+    filter: {
+      type: { eq: 'Task' },
+      completedAt: { is: 'NULL' },
+      assigneeId: { eq: currentWorkspaceMember?.id },
+    },
+  });
+
+  const computedCurrentUserDueTaskCount = tasks.filter((task) => {
+    if (!task.dueAt) {
+      return false;
+    }
+    const dueDate = parseDate(task.dueAt).toJSDate();
+    const today = DateTime.now().endOf('day').toJSDate();
+    return dueDate <= today;
+  }).length;
+
+  useEffect(() => {
+    if (currentUserDueTaskCount !== computedCurrentUserDueTaskCount) {
+      setCurrentUserDueTaskCount(computedCurrentUserDueTaskCount);
+    }
+  }, [
+    computedCurrentUserDueTaskCount,
+    currentUserDueTaskCount,
+    setCurrentUserDueTaskCount,
+  ]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -85,7 +85,7 @@ export const TaskRow = ({ task }: { task: Activity }) => {
   return (
     <StyledContainer
       onClick={() => {
-        openActivityRightDrawer(task);
+        openActivityRightDrawer(task.id);
       }}
     >
       <div

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

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const currentUserDueTaskCountState = atom<number>({
+  default: 0,
+  key: 'currentUserDueTaskCountState',
+});