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/modules/activities/calendar/components/Calendar.tsx

@@ -2,13 +2,25 @@ import styled from '@emotion/styled';
 import { format, getYear } from 'date-fns';
 
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
+import { TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE } from '@/activities/calendar/constants/Calendar';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
 import { useCalendarEvents } from '@/activities/calendar/hooks/useCalendarEvents';
-import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { getTimelineCalendarEventsFromCompanyId } from '@/activities/calendar/queries/getTimelineCalendarEventsFromCompanyId';
+import { getTimelineCalendarEventsFromPersonId } from '@/activities/calendar/queries/getTimelineCalendarEventsFromPersonId';
+import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
+import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { H3Title } from '@/ui/display/typography/components/H3Title';
+import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+import {
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 import { Section } from '@/ui/layout/section/components/Section';
+import { TimelineCalendarEventsWithTotal } from '~/generated/graphql';
 
 const StyledContainer = styled.div`
   box-sizing: border-box;
@@ -17,18 +29,39 @@ const StyledContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(8)};
   padding: ${({ theme }) => theme.spacing(6)};
   width: 100%;
+  overflow: scroll;
 `;
 
 const StyledYear = styled.span`
   color: ${({ theme }) => theme.font.color.light};
 `;
 
-export const Calendar = () => {
+export const Calendar = ({
-  const { records: calendarEvents } = useFindManyRecords<CalendarEvent>({
+  targetableObject,
-    objectNameSingular: CoreObjectNameSingular.CalendarEvent,
+}: {
-    orderBy: { startsAt: 'DescNullsLast', endsAt: 'DescNullsLast' },
+  targetableObject: ActivityTargetableObject;
-    useRecordsWithoutConnection: true,
+}) => {
-  });
+  const [query, queryName] =
+    targetableObject.targetObjectNameSingular === CoreObjectNameSingular.Person
+      ? [
+          getTimelineCalendarEventsFromPersonId,
+          'getTimelineCalendarEventsFromPersonId',
+        ]
+      : [
+          getTimelineCalendarEventsFromCompanyId,
+          'getTimelineCalendarEventsFromCompanyId',
+        ];
+
+  const { data, firstQueryLoading, isFetchingMore, fetchMoreRecords } =
+    useCustomResolver<TimelineCalendarEventsWithTotal>(
+      query,
+      queryName,
+      'timelineCalendarEvents',
+      targetableObject,
+      TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE,
+    );
+
+  const { timelineCalendarEvents } = data?.[queryName] ?? {};
 
   const {
     calendarEventsByDayTime,
@@ -38,13 +71,30 @@ export const Calendar = () => {
     monthTimes,
     monthTimesByYear,
     updateCurrentCalendarEvent,
-  } = useCalendarEvents(
+  } = useCalendarEvents(timelineCalendarEvents || []);
-    calendarEvents.map((calendarEvent) => ({
+
-      ...calendarEvent,
+  if (firstQueryLoading) {
-      // TODO: retrieve CalendarChannel visibility from backend
+    // TODO: implement loader
-      visibility: 'SHARE_EVERYTHING',
+    return;
-    })),
+  }
-  );
+
+  if (!firstQueryLoading && !timelineCalendarEvents?.length) {
+    // TODO: change animated placeholder
+    return (
+      <AnimatedPlaceholderEmptyContainer>
+        <AnimatedPlaceholder type="noMatchRecord" />
+        <AnimatedPlaceholderEmptyTextContainer>
+          <AnimatedPlaceholderEmptyTitle>
+            No Events
+          </AnimatedPlaceholderEmptyTitle>
+          <AnimatedPlaceholderEmptySubTitle>
+            No events have been scheduled with this{' '}
+            {targetableObject.targetObjectNameSingular} yet.
+          </AnimatedPlaceholderEmptySubTitle>
+        </AnimatedPlaceholderEmptyTextContainer>
+      </AnimatedPlaceholderEmptyContainer>
+    );
+  }
 
   return (
     <CalendarContext.Provider
@@ -78,6 +128,10 @@ export const Calendar = () => {
             </Section>
           );
         })}
+        <FetchMoreLoader
+          loading={isFetchingMore || firstQueryLoading}
+          onLastRowVisible={fetchMoreRecords}
+        />
       </StyledContainer>
     </CalendarContext.Provider>
   );

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

@@ -10,14 +10,14 @@ import {
 import { AnimatePresence, motion } from 'framer-motion';
 
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
-import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendarEventEndDate';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
 import { hasCalendarEventStarted } from '@/activities/calendar/utils/hasCalendarEventStarted';
+import { TimelineCalendarEvent } from '~/generated-metadata/graphql';
 
 type CalendarCurrentEventCursorProps = {
-  calendarEvent: CalendarEvent;
+  calendarEvent: TimelineCalendarEvent;
 };
 
 const StyledCurrentEventCursor = styled(motion.div)`

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

@@ -3,12 +3,12 @@ import styled from '@emotion/styled';
 import { differenceInSeconds, endOfDay, format } from 'date-fns';
 
 import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
-import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { TimelineCalendarEvent } from '~/generated-metadata/graphql';
 
 type CalendarDayCardContentProps = {
-  calendarEvents: CalendarEvent[];
+  calendarEvents: TimelineCalendarEvent[];
   divider?: boolean;
 };
 

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

@@ -7,7 +7,6 @@ import { useRecoilValue } from 'recoil';
 import { CalendarCurrentEventCursor } from '@/activities/calendar/components/CalendarCurrentEventCursor';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
 import { useOpenCalendarEventRightDrawer } from '@/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer';
-import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendarEventEndDate';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
@@ -17,10 +16,11 @@ import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { Avatar } from '@/users/components/Avatar';
 import { AvatarGroup } from '@/users/components/AvatarGroup';
+import { TimelineCalendarEvent } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
 
 type CalendarEventRowProps = {
-  calendarEvent: CalendarEvent;
+  calendarEvent: TimelineCalendarEvent;
   className?: string;
 };
 

packages/twenty-front/src/modules/activities/calendar/constants/Calendar.ts

@@ -0,0 +1 @@
+export const TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE = 10;

packages/twenty-front/src/modules/activities/calendar/contexts/CalendarContext.ts

@@ -1,14 +1,14 @@
 import { createContext } from 'react';
 
-import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { TimelineCalendarEvent } from '~/generated-metadata/graphql';
 
 type CalendarContextValue = {
-  calendarEventsByDayTime: Record<number, CalendarEvent[] | undefined>;
+  calendarEventsByDayTime: Record<number, TimelineCalendarEvent[] | undefined>;
-  currentCalendarEvent?: CalendarEvent;
+  currentCalendarEvent?: TimelineCalendarEvent;
   displayCurrentEventCursor?: boolean;
   getNextCalendarEvent: (
-    calendarEvent: CalendarEvent,
+    calendarEvent: TimelineCalendarEvent,
-  ) => CalendarEvent | undefined;
+  ) => TimelineCalendarEvent | undefined;
   updateCurrentCalendarEvent: () => void;
 };
 

packages/twenty-front/src/modules/activities/calendar/hooks/useCalendarEvents.ts

@@ -8,7 +8,14 @@ import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
 import { isDefined } from '~/utils/isDefined';
 import { sortDesc } from '~/utils/sort';
 
-export const useCalendarEvents = (calendarEvents: CalendarEvent[]) => {
+type CalendarEventGeneric = Omit<
+  CalendarEvent,
+  'attendees' | 'externalCreatedAt'
+>;
+
+export const useCalendarEvents = <T extends CalendarEventGeneric>(
+  calendarEvents: T[],
+) => {
   const calendarEventsByDayTime = groupArrayItemsBy(
     calendarEvents,
     (calendarEvent) =>
@@ -29,14 +36,14 @@ export const useCalendarEvents = (calendarEvents: CalendarEvent[]) => {
 
   const monthTimesByYear = groupArrayItemsBy(sortedMonthTimes, getYear);
 
-  const getPreviousCalendarEvent = (calendarEvent: CalendarEvent) => {
+  const getPreviousCalendarEvent = (calendarEvent: T) => {
     const calendarEventIndex = calendarEvents.indexOf(calendarEvent);
     return calendarEventIndex < calendarEvents.length - 1
       ? calendarEvents[calendarEventIndex + 1]
       : undefined;
   };
 
-  const getNextCalendarEvent = (calendarEvent: CalendarEvent) => {
+  const getNextCalendarEvent = (calendarEvent: T) => {
     const calendarEventIndex = calendarEvents.indexOf(calendarEvent);
     return calendarEventIndex > 0
       ? calendarEvents[calendarEventIndex - 1]

packages/twenty-front/src/modules/activities/calendar/queries/fragments/calendarEventFragment.ts

@@ -11,6 +11,7 @@ export const calendarEventFragment = gql`
     startsAt
     endsAt
     isFullDay
+    visibility
     attendees {
       ...AttendeeFragment
     }

packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
 
-type EmailThreadFetchMoreLoaderProps = {
+type FetchMoreLoaderProps = {
   loading: boolean;
   onLastRowVisible: (...args: any[]) => any;
 };
@@ -18,10 +18,10 @@ const StyledText = styled.div`
   padding-left: ${({ theme }) => theme.spacing(2)};
 `;
 
-export const EmailThreadFetchMoreLoader = ({
+export const FetchMoreLoader = ({
   loading,
   onLastRowVisible,
-}: EmailThreadFetchMoreLoaderProps) => {
+}: FetchMoreLoaderProps) => {
   const { ref: tbodyRef } = useInView({
     onChange: onLastRowVisible,
   });

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -1,22 +1,18 @@
-import { useState } from 'react';
-import { useQuery } from '@apollo/client';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
 
+import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { EmailLoader } from '@/activities/emails/components/EmailLoader';
-import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
 import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
 import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/Messaging';
-import { useEmailThreadStates } from '@/activities/emails/hooks/internal/useEmailThreadStates';
 import { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';
 import { getTimelineThreadsFromPersonId } from '@/activities/emails/queries/getTimelineThreadsFromPersonId';
+import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import {
   H1Title,
   H1TitleFontColor,
 } from '@/ui/display/typography/components/H1Title';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
 import {
   AnimatedPlaceholderEmptyContainer,
@@ -26,12 +22,7 @@ import {
 } from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
-import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
+import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql';
-import {
-  GetTimelineThreadsFromPersonIdQueryVariables,
-  TimelineThread,
-  TimelineThreadsWithTotal,
-} from '~/generated/graphql';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -52,98 +43,25 @@ const StyledEmailCount = styled.span`
 `;
 
 export const EmailThreads = ({
-  entity,
+  targetableObject,
 }: {
-  entity: ActivityTargetableObject;
+  targetableObject: ActivityTargetableObject;
 }) => {
-  const { enqueueSnackBar } = useSnackBar();
+  const [query, queryName] =
-
+    targetableObject.targetObjectNameSingular === CoreObjectNameSingular.Person
-  const { emailThreadsPageState } = useEmailThreadStates({
-    emailThreadScopeId: getScopeIdFromComponentId(entity.id),
-  });
-
-  const [emailThreadsPage, setEmailThreadsPage] = useRecoilState(
-    emailThreadsPageState,
-  );
-
-  const [isFetchingMoreEmails, setIsFetchingMoreEmails] = useState(false);
-
-  const [threadQuery, queryName] =
-    entity.targetObjectNameSingular === CoreObjectNameSingular.Person
       ? [getTimelineThreadsFromPersonId, 'getTimelineThreadsFromPersonId']
       : [getTimelineThreadsFromCompanyId, 'getTimelineThreadsFromCompanyId'];
 
-  const threadQueryVariables = {
+  const { data, firstQueryLoading, isFetchingMore, fetchMoreRecords } =
-    ...(entity.targetObjectNameSingular === CoreObjectNameSingular.Person
+    useCustomResolver<TimelineThreadsWithTotal>(
-      ? { personId: entity.id }
+      query,
-      : { companyId: entity.id }),
+      queryName,
-    page: 1,
+      'timelineThreads',
-    pageSize: TIMELINE_THREADS_DEFAULT_PAGE_SIZE,
+      targetableObject,
-  } as GetTimelineThreadsFromPersonIdQueryVariables;
+      TIMELINE_THREADS_DEFAULT_PAGE_SIZE,
+    );
 
-  const {
+  const { totalNumberOfThreads, timelineThreads } = data?.[queryName] ?? {};
-    data,
-    loading: firstQueryLoading,
-    fetchMore,
-  } = useQuery(threadQuery, {
-    variables: threadQueryVariables,
-    onError: (error) => {
-      enqueueSnackBar(error.message || 'Error loading email threads', {
-        variant: 'error',
-      });
-    },
-  });
-
-  const fetchMoreRecords = async () => {
-    if (
-      emailThreadsPage.hasNextPage &&
-      !isFetchingMoreEmails &&
-      !firstQueryLoading
-    ) {
-      setIsFetchingMoreEmails(true);
-
-      await fetchMore({
-        variables: {
-          ...threadQueryVariables,
-          page: emailThreadsPage.pageNumber + 1,
-        },
-        updateQuery: (prev, { fetchMoreResult }) => {
-          if (!fetchMoreResult?.[queryName]?.timelineThreads?.length) {
-            setEmailThreadsPage((emailThreadsPage) => ({
-              ...emailThreadsPage,
-              hasNextPage: false,
-            }));
-            return {
-              [queryName]: {
-                ...prev?.[queryName],
-                timelineThreads: [
-                  ...(prev?.[queryName]?.timelineThreads ?? []),
-                ],
-              },
-            };
-          }
-
-          return {
-            [queryName]: {
-              ...prev?.[queryName],
-              timelineThreads: [
-                ...(prev?.[queryName]?.timelineThreads ?? []),
-                ...(fetchMoreResult?.[queryName]?.timelineThreads ?? []),
-              ],
-            },
-          };
-        },
-      });
-      setEmailThreadsPage((emailThreadsPage) => ({
-        ...emailThreadsPage,
-        pageNumber: emailThreadsPage.pageNumber + 1,
-      }));
-      setIsFetchingMoreEmails(false);
-    }
-  };
-
-  const { totalNumberOfThreads, timelineThreads }: TimelineThreadsWithTotal =
-    data?.[queryName] ?? [];
 
   if (firstQueryLoading) {
     return <EmailLoader />;
@@ -187,8 +105,8 @@ export const EmailThreads = ({
             ))}
           </Card>
         )}
-        <EmailThreadFetchMoreLoader
+        <FetchMoreLoader
-          loading={isFetchingMoreEmails || firstQueryLoading}
+          loading={isFetchingMore || firstQueryLoading}
           onLastRowVisible={fetchMoreRecords}
         />
       </Section>

packages/twenty-front/src/modules/activities/emails/hooks/internal/__tests__/useEmailThreadStates.test.ts

@@ -1,37 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { useEmailThreadStates } from '@/activities/emails/hooks/internal/useEmailThreadStates';
-
-const mockScopeId = 'mockScopeId';
-const mockGetEmailThreadsPageState = jest.fn();
-
-jest.mock(
-  '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId',
-  () => ({
-    useAvailableScopeIdOrThrow: () => mockScopeId,
-  }),
-);
-
-jest.mock(
-  '@/ui/utilities/state/component-state/utils/extractComponentState',
-  () => ({
-    extractComponentState: () => mockGetEmailThreadsPageState,
-  }),
-);
-
-describe('useEmailThreadStates hook', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('returns the correct scopeId and getEmailThreadsPageState', () => {
-    const { result } = renderHook(() =>
-      useEmailThreadStates({ emailThreadScopeId: 'mockEmailThreadScopeId' }),
-    );
-
-    expect(result.current.scopeId).toBe(mockScopeId);
-    expect(result.current.emailThreadsPageState).toBe(
-      mockGetEmailThreadsPageState,
-    );
-  });
-});

packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts

@@ -1,25 +0,0 @@
-import { emailThreadsPageComponentState } from '@/activities/emails/states/emailThreadsPageComponentState';
-import { TabListScopeInternalContext } from '@/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
-
-type useEmailThreadStatesProps = {
-  emailThreadScopeId?: string;
-};
-
-export const useEmailThreadStates = ({
-  emailThreadScopeId,
-}: useEmailThreadStatesProps) => {
-  const scopeId = useAvailableScopeIdOrThrow(
-    TabListScopeInternalContext,
-    emailThreadScopeId,
-  );
-
-  return {
-    scopeId,
-    emailThreadsPageState: extractComponentState(
-      emailThreadsPageComponentState,
-      scopeId,
-    ),
-  };
-};

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { useRecoilCallback } from 'recoil';
 
+import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { EmailLoader } from '@/activities/emails/components/EmailLoader';
-import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
 import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
 import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
 import { useRightDrawerEmailThread } from '@/activities/emails/right-drawer/hooks/useRightDrawerEmailThread';
@@ -62,7 +62,7 @@ export const RightDrawerEmailThread = () => {
               sentAt={message.receivedAt}
             />
           ))}
-          <EmailThreadFetchMoreLoader
+          <FetchMoreLoader
             loading={loading}
             onLastRowVisible={fetchMoreMessages}
           />

packages/twenty-front/src/modules/activities/emails/states/emailThreadsPageComponentState.ts

@@ -1,12 +0,0 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
-
-export type EmailThreadsPageType = {
-  pageNumber: number;
-  hasNextPage: boolean;
-};
-
-export const emailThreadsPageComponentState =
-  createComponentState<EmailThreadsPageType>({
-    key: 'emailThreadsPageComponentState',
-    defaultValue: { pageNumber: 1, hasNextPage: true },
-  });

packages/twenty-front/src/modules/activities/hooks/useCustomResolver.ts

@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import {
+  DocumentNode,
+  OperationVariables,
+  TypedDocumentNode,
+  useQuery,
+} from '@apollo/client';
+
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+
+type CustomResolverQueryResult<
+  T extends {
+    [key: string]: any;
+  },
+> = {
+  [queryName: string]: T;
+};
+
+export const useCustomResolver = <
+  T extends {
+    [key: string]: any;
+  },
+>(
+  query:
+    | DocumentNode
+    | TypedDocumentNode<CustomResolverQueryResult<T>, OperationVariables>,
+  queryName: string,
+  objectName: string,
+  activityTargetableObject: ActivityTargetableObject,
+  pageSize: number,
+): {
+  data: CustomResolverQueryResult<T> | undefined;
+  firstQueryLoading: boolean;
+  isFetchingMore: boolean;
+  fetchMoreRecords: () => Promise<void>;
+} => {
+  const { enqueueSnackBar } = useSnackBar();
+
+  const [page, setPage] = useState({
+    pageNumber: 1,
+    hasNextPage: true,
+  });
+
+  const [isFetchingMore, setIsFetchingMore] = useState(false);
+
+  const queryVariables = {
+    ...(activityTargetableObject.targetObjectNameSingular ===
+    CoreObjectNameSingular.Person
+      ? { personId: activityTargetableObject.id }
+      : { companyId: activityTargetableObject.id }),
+    page: 1,
+    pageSize,
+  };
+
+  const {
+    data,
+    loading: firstQueryLoading,
+    fetchMore,
+  } = useQuery<CustomResolverQueryResult<T>>(query, {
+    variables: queryVariables,
+    onError: (error) => {
+      enqueueSnackBar(error.message || `Error loading ${objectName}`, {
+        variant: 'error',
+      });
+    },
+  });
+
+  const fetchMoreRecords = async () => {
+    if (page.hasNextPage && !isFetchingMore && !firstQueryLoading) {
+      setIsFetchingMore(true);
+
+      await fetchMore({
+        variables: {
+          ...queryVariables,
+          page: page.pageNumber + 1,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult?.[queryName]?.[objectName]?.length) {
+            setPage((page) => ({
+              ...page,
+              hasNextPage: false,
+            }));
+
+            return {
+              [queryName]: {
+                ...prev?.[queryName],
+                [objectName]: [...(prev?.[queryName]?.[objectName] ?? [])],
+              },
+            };
+          }
+
+          return {
+            [queryName]: {
+              ...prev?.[queryName],
+              [objectName]: [
+                ...(prev?.[queryName]?.[objectName] ?? []),
+                ...(fetchMoreResult?.[queryName]?.[objectName] ?? []),
+              ],
+            },
+          };
+        },
+      });
+
+      setPage((page) => ({
+        ...page,
+        pageNumber: page.pageNumber + 1,
+      }));
+
+      setIsFetchingMore(false);
+    }
+  };
+
+  return {
+    data,
+    firstQueryLoading,
+    isFetchingMore,
+    fetchMoreRecords,
+  };
+};

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -138,8 +138,12 @@ export const ShowPageRightContainer = ({
       {activeTabId === 'files' && (
         <Attachments targetableObject={targetableObject} />
       )}
-      {activeTabId === 'emails' && <EmailThreads entity={targetableObject} />}
+      {activeTabId === 'emails' && (
-      {activeTabId === 'calendar' && <Calendar />}
+        <EmailThreads targetableObject={targetableObject} />
+      )}
+      {activeTabId === 'calendar' && (
+        <Calendar targetableObject={targetableObject} />
+      )}
       {activeTabId === 'logs' && <Events targetableObject={targetableObject} />}
     </StyledShowPageRightContainer>
   );

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 (

packages/twenty-server/src/modules/connected-account/auto-companies-and-contacts-creation/services/create-company-and-contact.service.ts

@@ -60,13 +60,12 @@ export class CreateCompanyAndContactService {
         transactionManager,
       );
 
-    const contactsToCreateFromOtherCompanies = contactsToCreate;
+    const contactsToCreateFromOtherCompanies =
-
+      filterOutContactsFromCompanyOrWorkspace(
-    filterOutContactsFromCompanyOrWorkspace(
+        contactsToCreate,
-      contactsToCreate,
+        connectedAccountHandle,
-      connectedAccountHandle,
+        workspaceMembers,
-      workspaceMembers,
+      );
-    );
 
     const { uniqueContacts, uniqueHandles } = getUniqueContactsAndHandles(
       contactsToCreateFromOtherCompanies,