4488 connect calendar tab to backend (#4624)

* create states and hooks

* implement fetch more records

* add empty state

* update types

* fix error

* add fetchmoreloader and add scroll to container

* fix visibility in calendarEventFragment

* fix fetchMoreRecords

* update TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE

* add test

* modify empty state subtitle

* replace entity by activityTargetableObject

* create useCustomResolver hook

* refactor

* refactoring

* use generic component

* rename FetchMoreLoader

* remove deprecated states and hooks

* fix typing

* update typing

* update error message

* renaming

* improve typing

* fix bug on contact creation from same company

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx

@@ -4,7 +4,6 @@ import { useRecoilValue } from 'recoil';
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
-import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@@ -18,6 +17,10 @@ import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import {
+  TimelineCalendarEvent,
+  TimelineCalendarEventVisibility,
+} from '~/generated-metadata/graphql';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
 export const SettingsAccountsCalendars = () => {
@@ -37,25 +40,32 @@ export const SettingsAccountsCalendars = () => {
     endOfDay(exampleStartDate),
   ]);
   const exampleDayTime = startOfDay(exampleStartDate).getTime();
-  const exampleCalendarEvent: CalendarEvent = {
+  const exampleCalendarEvent: TimelineCalendarEvent = {
     id: '',
     attendees: [
       {
+        firstName: currentWorkspaceMember?.name.firstName || '',
+        lastName: currentWorkspaceMember?.name.lastName || '',
         displayName: currentWorkspaceMember
           ? [
               currentWorkspaceMember.name.firstName,
               currentWorkspaceMember.name.lastName,
             ].join(' ')
           : '',
-        workspaceMemberId: currentWorkspaceMember?.id ?? '',
+        avatarUrl: currentWorkspaceMember?.avatarUrl || '',
+        handle: '',
       },
     ],
     endsAt: exampleEndDate.toISOString(),
-    externalCreatedAt: new Date().toISOString(),
     isFullDay: false,
     startsAt: exampleStartDate.toISOString(),
+    conferenceSolution: '',
+    conferenceUri: '',
+    description: '',
+    isCanceled: false,
+    location: '',
     title: 'Onboarding call',
-    visibility: 'SHARE_EVERYTHING',
+    visibility: TimelineCalendarEventVisibility.ShareEverything,
   };
 
   return (