Fix calendar events right drawer empty fields (#6271)

Fix calendar events right drawer empty fields

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetailsEffect.tsx

@@ -0,0 +1,23 @@
+import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
+import { useEffect } from 'react';
+
+type CalendarEventDetailsEffectProps = {
+  record: CalendarEvent;
+};
+
+export const CalendarEventDetailsEffect = ({
+  record,
+}: CalendarEventDetailsEffectProps) => {
+  const { upsertRecords } = useUpsertRecordsInStore();
+
+  useEffect(() => {
+    if (!record) {
+      return;
+    }
+
+    upsertRecords([record]);
+  }, [record, upsertRecords]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx

@@ -1,15 +1,18 @@
 import { useRecoilValue } from 'recoil';
 
 import { CalendarEventDetails } from '@/activities/calendar/components/CalendarEventDetails';
+import { CalendarEventDetailsEffect } from '@/activities/calendar/components/CalendarEventDetailsEffect';
 import { FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE } from '@/activities/calendar/graphql/operation-signatures/FindOneCalendarEventOperationSignature';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
+import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 
 export const RightDrawerCalendarEvent = () => {
   const { upsertRecords } = useUpsertRecordsInStore();
   const viewableRecordId = useRecoilValue(viewableRecordIdState);
+
   const { record: calendarEvent } = useFindOneRecord<CalendarEvent>({
     objectNameSingular:
       FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE.objectNameSingular,
@@ -22,5 +25,11 @@ export const RightDrawerCalendarEvent = () => {
     return null;
   }
 
-  return <CalendarEventDetails calendarEvent={calendarEvent} />;
+  return (
+    <>
+      <CalendarEventDetailsEffect record={calendarEvent} />
+      <RecordValueSetterEffect recordId={calendarEvent.id} />
+      <CalendarEventDetails calendarEvent={calendarEvent} />
+    </>
+  );
 };