feat: add Relation Field Card plus button in Show Page (#3229)

Closes #3124

packages/twenty-front/src/modules/object-record/hooks/useUpsertRecordFieldFromState.ts

@@ -0,0 +1,24 @@
+import { useRecoilCallback } from 'recoil';
+
+import { entityFieldsFamilySelector } from '@/object-record/field/states/selectors/entityFieldsFamilySelector';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+export const useUpsertRecordFieldFromState = () =>
+  useRecoilCallback(
+    ({ set }) =>
+      <T extends { id: string }, F extends keyof T>({
+        record,
+        fieldName,
+      }: {
+        record: T;
+        fieldName: F extends string ? F : never;
+      }) =>
+        set(
+          entityFieldsFamilySelector({ entityId: record.id, fieldName }),
+          (previousField) =>
+            isDeeplyEqual(previousField, record[fieldName])
+              ? previousField
+              : record[fieldName],
+        ),
+    [],
+  );

packages/twenty-front/src/modules/object-record/hooks/useUpsertRecordFromState.ts

@@ -6,15 +6,10 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 // TODO: refactor with scoped state later
 export const useUpsertRecordFromState = () =>
   useRecoilCallback(
-    ({ set, snapshot }) =>
-      <T extends { id: string }>(entity: T) => {
-        const currentEntity = snapshot
-          .getLoadable(entityFieldsFamilyState(entity.id))
-          .valueOrThrow();
-
-        if (!isDeeplyEqual(currentEntity, entity)) {
-          set(entityFieldsFamilyState(entity.id), entity);
-        }
-      },
+    ({ set }) =>
+      <T extends { id: string }>(record: T) =>
+        set(entityFieldsFamilyState(record.id), (previousRecord) =>
+          isDeeplyEqual(previousRecord, record) ? previousRecord : record,
+        ),
     [],
   );