Activity cache injection (#3791)

* WIP * Minor fixes * Added TODO * Fix post merge * Fix * Fixed warnings * Fixed comments * Fixed comments * Fixed naming * Removed comment * WIP * WIP 2 * Finished working version * Fixes * Fixed typing * Fixes * Fixes * Fixes * Naming fixes * WIP * Fix import * WIP * Working version on title * Fixed create record id overwrite * Removed unecessary callback * Masterpiece * Fixed delete on click outside drawer or delete * Cleaned * Cleaned * Cleaned * Minor fixes * Fixes * Fixed naming * WIP * Fix * Fixed create from target inline cell * Removed console.log * Fixed delete activity optimistic effect * Fixed no title * Fixed debounce and title body creation --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2024-02-09 14:51:30 +01:00
parent 9ceff84bbf
commit cca72da708
87 changed files with 2195 additions and 1058 deletions
--- a/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx
@ -1,71 +0,0 @@
-import { isNonEmptyArray } from '@apollo/client/utilities';
-import styled from '@emotion/styled';
-
-import CommentCounter from '@/activities/comment/CommentCounter';
-import { Activity } from '@/activities/types/Activity';
-import { UserChip } from '@/users/components/UserChip';
-import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { beautifyExactDate } from '~/utils/date-utils';
-
-type TimelineActivityCardFooterProps = {
-  activity: Pick<Activity, 'id' | 'dueAt' | 'comments'> & {
-    assignee?: Pick<WorkspaceMember, 'id' | 'name' | 'avatarUrl'> | null;
-  };
-};
-
-const StyledContainer = styled.div`
-  align-items: center;
-  border-top: 1px solid ${({ theme }) => theme.border.color.medium};
-  color: ${({ theme }) => theme.font.color.primary};
-  display: flex;
-  flex-direction: row;
-  gap: ${({ theme }) => theme.spacing(2)};
-  padding: ${({ theme }) => theme.spacing(2)};
-  width: calc(100% - ${({ theme }) => theme.spacing(4)});
-`;
-
-const StyledVerticalSeparator = styled.div`
-  border-left: 1px solid ${({ theme }) => theme.border.color.medium};
-  height: 24px;
-`;
-
-const StyledComment = styled.div`
-  margin-left: auto;
-`;
-export const TimelineActivityCardFooter = ({
-  activity,
-}: TimelineActivityCardFooterProps) => {
-  const hasComments = isNonEmptyArray(activity.comments || []);
-
-  return (
-    <>
-      {(activity.assignee || activity.dueAt || hasComments) && (
-        <StyledContainer>
-          {activity.assignee && (
-            <UserChip
-              id={activity.assignee.id}
-              name={
-                activity.assignee.name.firstName +
-                  ' ' +
-                  activity.assignee.name.lastName ?? ''
-              }
-              avatarUrl={activity.assignee.avatarUrl ?? ''}
-            />
-          )}
-
-          {activity.dueAt && (
-            <>
-              {activity.assignee && <StyledVerticalSeparator />}
-              {beautifyExactDate(activity.dueAt)}
-            </>
-          )}
-          <StyledComment>
-            {hasComments && (
-              <CommentCounter commentCount={activity.comments?.length || 0} />
-            )}
-          </StyledComment>
-        </StyledContainer>
-      )}
-    </>
-  );
-};
--- a/packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx
@ -1,7 +1,7 @@
 import { useSetRecoilState } from 'recoil';
 import { Button, ButtonGroup } from 'tsup.ui.index';

-import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { useOpenCreateActivityDrawerV2 } from '@/activities/hooks/useOpenCreateActivityDrawerV2';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import {
  IconCheckbox,
@ -19,7 +19,7 @@ export const TimelineCreateButtonGroup = ({
  const { getActiveTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
  const setActiveTabId = useSetRecoilState(getActiveTabIdState());

-  const openCreateActivity = useOpenCreateActivityDrawer();
+  const openCreateActivity = useOpenCreateActivityDrawerV2();

  return (
    <ButtonGroup variant={'secondary'}>
@ -30,6 +30,7 @@ export const TimelineCreateButtonGroup = ({
          openCreateActivity({
            type: 'Note',
            targetableObjects: [targetableObject],
+            timelineTargetableObject: targetableObject,
          })
        }
      />
@ -40,6 +41,7 @@ export const TimelineCreateButtonGroup = ({
          openCreateActivity({
            type: 'Task',
            targetableObjects: [targetableObject],
+            timelineTargetableObject: targetableObject,
          })
        }
      />
--- a/packages/twenty-front/src/modules/activities/timeline/hooks/useInjectIntoTimelineActivitiesQuery.ts
+++ b/packages/twenty-front/src/modules/activities/timeline/hooks/useInjectIntoTimelineActivitiesQuery.ts
@ -1,89 +0,0 @@
-import { useApolloClient } from '@apollo/client';
-import { isNonEmptyString } from '@sniptt/guards';
-
-import { makeTimelineActivitiesQueryVariables } from '@/activities/timeline/utils/makeTimelineActivitiesQueryVariables';
-import { Activity } from '@/activities/types/Activity';
-import { ActivityTarget } from '@/activities/types/ActivityTarget';
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { getRecordConnectionFromRecords } from '@/object-record/cache/utils/getRecordConnectionFromRecords';
-import { getRecordsFromRecordConnection } from '@/object-record/cache/utils/getRecordsFromRecordConnection';
-import { ObjectRecordConnection } from '@/object-record/types/ObjectRecordConnection';
-
-export const useInjectIntoTimelineActivitiesQuery = () => {
-  const apolloClient = useApolloClient();
-
-  const {
-    objectMetadataItem: objectMetadataItemActivity,
-    findManyRecordsQuery: findManyActivitiesQuery,
-  } = useObjectMetadataItem({
-    objectNameSingular: CoreObjectNameSingular.Activity,
-  });
-
-  const injectIntoTimelineActivitiesQuery = ({
-    activityTargets,
-    activityToInject,
-  }: {
-    activityTargets: ActivityTarget[];
-    activityToInject: Activity;
-  }) => {
-    const activityIds = activityTargets
-      ?.map((activityTarget) => activityTarget.activityId)
-      .filter(isNonEmptyString);
-
-    const timelineActivitiesQueryVariables =
-      makeTimelineActivitiesQueryVariables({
-        activityIds,
-      });
-
-    const exitistingActivitiesQueryResult = apolloClient.readQuery({
-      query: findManyActivitiesQuery,
-      variables: timelineActivitiesQueryVariables,
-    });
-
-    const extistingActivities = exitistingActivitiesQueryResult
-      ? getRecordsFromRecordConnection({
-          recordConnection: exitistingActivitiesQueryResult[
-            objectMetadataItemActivity.namePlural
-          ] as ObjectRecordConnection<Activity>,
-        })
-      : [];
-
-    const newActivity = {
-      ...activityToInject,
-      __typename: 'Activity',
-    };
-
-    const newActivitiesSortedAsActivitiesQuery = [
-      newActivity,
-      ...extistingActivities,
-    ];
-
-    const newActivityIdsSortedAsActivityTargetsQuery = [
-      ...extistingActivities,
-      newActivity,
-    ].map((activity) => activity.id);
-
-    const newTimelineActivitiesQueryVariables =
-      makeTimelineActivitiesQueryVariables({
-        activityIds: newActivityIdsSortedAsActivityTargetsQuery,
-      });
-
-    const newActivityConnectionForCache = getRecordConnectionFromRecords({
-      objectNameSingular: CoreObjectNameSingular.Activity,
-      records: newActivitiesSortedAsActivitiesQuery,
-    });
-
-    apolloClient.writeQuery({
-      query: findManyActivitiesQuery,
-      variables: newTimelineActivitiesQueryVariables,
-      data: {
-        [objectMetadataItemActivity.namePlural]: newActivityConnectionForCache,
-      },
-    });
-  };
-
-  return {
-    injectIntoTimelineActivitiesNextQuery: injectIntoTimelineActivitiesQuery,
-  };
-};
--- a/packages/twenty-front/src/modules/activities/timeline/hooks/useInjectIntoTimelineActivitiesQueryAfterDrawerMount.ts
+++ b/packages/twenty-front/src/modules/activities/timeline/hooks/useInjectIntoTimelineActivitiesQueryAfterDrawerMount.ts
@ -0,0 +1,124 @@
+import { isNonEmptyString } from '@sniptt/guards';
+
+import { makeTimelineActivitiesQueryVariables } from '@/activities/timeline/utils/makeTimelineActivitiesQueryVariables';
+import { Activity } from '@/activities/types/Activity';
+import { ActivityTarget } from '@/activities/types/ActivityTarget';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
+import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useReadFindManyRecordsQueryInCache } from '@/object-record/cache/hooks/useReadFindManyRecordsQueryInCache';
+import { useUpsertFindManyRecordsQueryInCache } from '@/object-record/cache/hooks/useUpsertFindManyRecordsQueryInCache';
+
+export const useInjectIntoTimelineActivitiesQueryAfterDrawerMount = () => {
+  const { objectMetadataItem: objectMetadataItemActivity } =
+    useObjectMetadataItemOnly({
+      objectNameSingular: CoreObjectNameSingular.Activity,
+    });
+
+  const {
+    upsertFindManyRecordsQueryInCache: overwriteFindManyActivitiesInCache,
+  } = useUpsertFindManyRecordsQueryInCache({
+    objectMetadataItem: objectMetadataItemActivity,
+  });
+
+  const { objectMetadataItem: objectMetadataItemActivityTarget } =
+    useObjectMetadataItemOnly({
+      objectNameSingular: CoreObjectNameSingular.ActivityTarget,
+    });
+
+  const {
+    readFindManyRecordsQueryInCache: readFindManyActivityTargetsQueryInCache,
+  } = useReadFindManyRecordsQueryInCache({
+    objectMetadataItem: objectMetadataItemActivityTarget,
+  });
+
+  const {
+    readFindManyRecordsQueryInCache: readFindManyActivitiesQueryInCache,
+  } = useReadFindManyRecordsQueryInCache({
+    objectMetadataItem: objectMetadataItemActivity,
+  });
+
+  const {
+    upsertFindManyRecordsQueryInCache:
+      overwriteFindManyActivityTargetsQueryInCache,
+  } = useUpsertFindManyRecordsQueryInCache({
+    objectMetadataItem: objectMetadataItemActivityTarget,
+  });
+
+  const injectIntoTimelineActivitiesQueryAfterDrawerMount = ({
+    activityToInject,
+    activityTargetsToInject,
+    timelineTargetableObject,
+  }: {
+    activityToInject: Activity;
+    activityTargetsToInject: ActivityTarget[];
+    timelineTargetableObject: ActivityTargetableObject;
+  }) => {
+    const newActivity = {
+      ...activityToInject,
+      __typename: 'Activity',
+    };
+
+    const targetObjectFieldName = getActivityTargetObjectFieldIdName({
+      nameSingular: timelineTargetableObject.targetObjectNameSingular,
+    });
+
+    const activitiyTargetsForTargetableObjectQueryVariables = {
+      filter: {
+        [targetObjectFieldName]: {
+          eq: timelineTargetableObject.id,
+        },
+      },
+    };
+
+    const existingActivityTargetsForTargetableObject =
+      readFindManyActivityTargetsQueryInCache({
+        queryVariables: activitiyTargetsForTargetableObjectQueryVariables,
+      });
+
+    const newActivityTargetsForTargetableObject = [
+      ...existingActivityTargetsForTargetableObject,
+      ...activityTargetsToInject,
+    ];
+
+    const existingActivityIds = existingActivityTargetsForTargetableObject
+      ?.map((activityTarget) => activityTarget.activityId)
+      .filter(isNonEmptyString);
+
+    const timelineActivitiesQueryVariablesBeforeDrawerMount =
+      makeTimelineActivitiesQueryVariables({
+        activityIds: existingActivityIds,
+      });
+
+    const existingActivities = readFindManyActivitiesQueryInCache({
+      queryVariables: timelineActivitiesQueryVariablesBeforeDrawerMount,
+    });
+
+    const activityIdsAfterDrawerMount = [
+      ...existingActivityIds,
+      newActivity.id,
+    ];
+
+    const timelineActivitiesQueryVariablesAfterDrawerMount =
+      makeTimelineActivitiesQueryVariables({
+        activityIds: activityIdsAfterDrawerMount,
+      });
+
+    overwriteFindManyActivityTargetsQueryInCache({
+      objectRecordsToOverwrite: newActivityTargetsForTargetableObject,
+      queryVariables: activitiyTargetsForTargetableObjectQueryVariables,
+    });
+
+    const newActivities = [newActivity, ...existingActivities];
+
+    overwriteFindManyActivitiesInCache({
+      objectRecordsToOverwrite: newActivities,
+      queryVariables: timelineActivitiesQueryVariablesAfterDrawerMount,
+    });
+  };
+
+  return {
+    injectIntoTimelineActivitiesQueryAfterDrawerMount,
+  };
+};
--- a/packages/twenty-front/src/modules/activities/timeline/hooks/useTimelineActivities.ts
+++ b/packages/twenty-front/src/modules/activities/timeline/hooks/useTimelineActivities.ts
@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { isNonEmptyArray, isNonEmptyString } from '@sniptt/guards';

-import { useActivityTargets } from '@/activities/hooks/useActivityTargets';
+import { useActivityTargetsForTargetableObject } from '@/activities/hooks/useActivityTargetsForTargetableObject';
 import { makeTimelineActivitiesQueryVariables } from '@/activities/timeline/utils/makeTimelineActivitiesQueryVariables';
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
@ -17,14 +17,12 @@ export const useTimelineActivities = ({
    activityTargets,
    loadingActivityTargets,
    initialized: initializedActivityTargets,
-  } = useActivityTargets({
+  } = useActivityTargetsForTargetableObject({
    targetableObject,
  });

  const [initialized, setInitialized] = useState(false);

-  const [activities, setActivities] = useState<Activity[]>([]);
-
  const activityIds = activityTargets
    ?.map((activityTarget) => activityTarget.activityId)
    .filter(isNonEmptyString);
@ -35,7 +33,7 @@ export const useTimelineActivities = ({
    },
  );

-  const { records: activitiesFromRequest, loading: loadingActivities } =
+  const { records: activities, loading: loadingActivities } =
    useFindManyRecords<Activity>({
      skip: loadingActivityTargets || !isNonEmptyArray(activityTargets),
      objectNameSingular: CoreObjectNameSingular.Activity,
@ -48,12 +46,6 @@ export const useTimelineActivities = ({
      },
    });

-  useEffect(() => {
-    if (!loadingActivities) {
-      setActivities(activitiesFromRequest);
-    }
-  }, [activitiesFromRequest, loadingActivities]);
-
  const noActivityTargets =
    initializedActivityTargets && !isNonEmptyArray(activityTargets);

--- a/packages/twenty-front/src/modules/activities/timeline/utils/makeTimelineActivitiesQueryVariables.ts
+++ b/packages/twenty-front/src/modules/activities/timeline/utils/makeTimelineActivitiesQueryVariables.ts
@ -12,7 +12,7 @@ export const makeTimelineActivitiesQueryVariables = ({
      },
    },
    orderBy: {
-      createdAt: 'AscNullsFirst',
+      createdAt: 'DescNullsFirst',
    },
  };
 };