From 65acd564e8039e17c652354f0feb28e6e1862e40 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Mon, 15 Jul 2024 18:58:55 +0200
Subject: [PATCH] Fix calendar events right drawer empty fields

---
 .../components/CalendarEventDetailsEffect.tsx | 23 +++++++++++++++++++
 .../components/RightDrawerCalendarEvent.tsx   | 11 ++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetailsEffect.tsx

diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetailsEffect.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetailsEffect.tsx
new file mode 100644
index 000000000000..970cfc412b55
--- /dev/null
+++ b/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 <></>;
+};
diff --git a/packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx b/packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx
index 2407dfe55c73..24f78d71539e 100644
--- a/packages/twenty-front/src/modules/activities/calendar/right-drawer/components/RightDrawerCalendarEvent.tsx
+++ b/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} />
+    </>
+  );
 };