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/right-drawer/components/ActivityActionBar.tsx
+++ b/packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
@ -1,11 +1,16 @@
+import { useApolloClient } from '@apollo/client';
 import { useRecoilState, useRecoilValue } from 'recoil';

+import { useDeleteActivityFromCache } from '@/activities/hooks/useDeleteActivityFromCache';
+import { isCreatingActivityState } from '@/activities/states/isCreatingActivityState';
+import { temporaryActivityForEditorState } from '@/activities/states/temporaryActivityForEditorState';
 import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { IconTrash } from '@/ui/display/icon';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
+import { isDefined } from '~/utils/isDefined';

 export const ActivityActionBar = () => {
  const viewableActivityId = useRecoilValue(viewableActivityIdState);
@ -15,9 +20,27 @@ export const ActivityActionBar = () => {
    refetchFindManyQuery: true,
  });

+  const [temporaryActivityForEditor, setTemporaryActivityForEditor] =
+    useRecoilState(temporaryActivityForEditorState);
+
+  const { deleteActivityFromCache } = useDeleteActivityFromCache();
+
+  const [isCreatingActivity] = useRecoilState(isCreatingActivityState);
+
+  const apolloClient = useApolloClient();
+
  const deleteActivity = () => {
    if (viewableActivityId) {
-      deleteOneActivity?.(viewableActivityId);
+      if (isCreatingActivity && isDefined(temporaryActivityForEditor)) {
+        deleteActivityFromCache(temporaryActivityForEditor);
+        setTemporaryActivityForEditor(null);
+      } else {
+        deleteOneActivity?.(viewableActivityId);
+        // TODO: find a better way to do this with custom optimistic rendering for activities
+        apolloClient.refetchQueries({
+          include: ['FindManyActivities'],
+        });
+      }
    }

    setIsRightDrawerOpen(false);
--- a/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx
+++ b/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx
@ -1,12 +1,7 @@
-import React from 'react';
 import styled from '@emotion/styled';
-import { useSetRecoilState } from 'recoil';

 import { ActivityEditor } from '@/activities/components/ActivityEditor';
-import { Activity } from '@/activities/types/Activity';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
-import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useActivityById } from '@/activities/hooks/useActivityById';

 const StyledContainer = styled.div`
  box-sizing: border-box;
@ -21,23 +16,16 @@ const StyledContainer = styled.div`
 type RightDrawerActivityProps = {
  activityId: string;
  showComment?: boolean;
-  autoFillTitle?: boolean;
+  fillTitleFromBody?: boolean;
 };

 export const RightDrawerActivity = ({
  activityId,
  showComment = true,
-  autoFillTitle = false,
+  fillTitleFromBody = false,
 }: RightDrawerActivityProps) => {
-  const setEntityFields = useSetRecoilState(recordStoreFamilyState(activityId));
-
-  const { record: activity } = useFindOneRecord({
-    objectNameSingular: CoreObjectNameSingular.Activity,
-    objectRecordId: activityId,
-    skip: !activityId,
-    onCompleted: (activity: Activity) => {
-      setEntityFields(activity ?? {});
-    },
+  const { activity } = useActivityById({
+    activityId,
  });

  if (!activity) {
@ -49,7 +37,7 @@ export const RightDrawerActivity = ({
      <ActivityEditor
        activity={activity}
        showComment={showComment}
-        autoFillTitle={autoFillTitle}
+        fillTitleFromBody={fillTitleFromBody}
      />
    </StyledContainer>
  );
--- a/packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx
+++ b/packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx
@ -13,7 +13,7 @@ export const RightDrawerCreateActivity = () => {
        <RightDrawerActivity
          activityId={viewableActivityId}
          showComment={false}
-          autoFillTitle={true}
+          fillTitleFromBody={true}
        />
      )}
    </>