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
2024-03-26 14:50:32 +01:00
parent 5c5dcf5cb5
commit fefa37b300
20 changed files with 263 additions and 222 deletions
--- a/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
+++ b/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 = () => {
-  const { records: calendarEvents } = useFindManyRecords<CalendarEvent>({
-    objectNameSingular: CoreObjectNameSingular.CalendarEvent,
-    orderBy: { startsAt: 'DescNullsLast', endsAt: 'DescNullsLast' },
-    useRecordsWithoutConnection: true,
-  });
+export const Calendar = ({
+  targetableObject,
+}: {
+  targetableObject: ActivityTargetableObject;
+}) => {
+  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(
-    calendarEvents.map((calendarEvent) => ({
-      ...calendarEvent,
-      // TODO: retrieve CalendarChannel visibility from backend
-      visibility: 'SHARE_EVERYTHING',
-    })),
-  );
+  } = useCalendarEvents(timelineCalendarEvents || []);
+
+  if (firstQueryLoading) {
+    // TODO: implement loader
+    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>
  );
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarCurrentEventCursor.tsx
+++ b/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)`
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
+++ b/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;
 };

--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
+++ b/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;
 };

--- a/packages/twenty-front/src/modules/activities/calendar/constants/Calendar.ts
+++ b/packages/twenty-front/src/modules/activities/calendar/constants/Calendar.ts
@ -0,0 +1 @@
+export const TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE = 10;
--- a/packages/twenty-front/src/modules/activities/calendar/contexts/CalendarContext.ts
+++ b/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>;
-  currentCalendarEvent?: CalendarEvent;
+  calendarEventsByDayTime: Record<number, TimelineCalendarEvent[] | undefined>;
+  currentCalendarEvent?: TimelineCalendarEvent;
  displayCurrentEventCursor?: boolean;
  getNextCalendarEvent: (
-    calendarEvent: CalendarEvent,
-  ) => CalendarEvent | undefined;
+    calendarEvent: TimelineCalendarEvent,
+  ) => TimelineCalendarEvent | undefined;
  updateCurrentCalendarEvent: () => void;
 };

--- a/packages/twenty-front/src/modules/activities/calendar/hooks/useCalendarEvents.ts
+++ b/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]
--- a/packages/twenty-front/src/modules/activities/calendar/queries/fragments/calendarEventFragment.ts
+++ b/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
    }
--- a/packages/twenty-front/src/modules/activities/calendar/queries/getTimelineCalendarEventsFromCompanyId.ts
+++ b/packages/twenty-front/src/modules/activities/calendar/queries/getTimelineCalendarEventsFromCompanyId.ts
--- a/packages/twenty-front/src/modules/activities/calendar/queries/getTimelineCalendarEventsFromPersonId.ts
+++ b/packages/twenty-front/src/modules/activities/calendar/queries/getTimelineCalendarEventsFromPersonId.ts
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadFetchMoreLoader.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadFetchMoreLoader.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,
  });
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
+++ b/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 {
-  GetTimelineThreadsFromPersonIdQueryVariables,
-  TimelineThread,
-  TimelineThreadsWithTotal,
-} from '~/generated/graphql';
+import { 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 { emailThreadsPageState } = useEmailThreadStates({
-    emailThreadScopeId: getScopeIdFromComponentId(entity.id),
-  });
-
-  const [emailThreadsPage, setEmailThreadsPage] = useRecoilState(
-    emailThreadsPageState,
-  );
-
-  const [isFetchingMoreEmails, setIsFetchingMoreEmails] = useState(false);
-
-  const [threadQuery, queryName] =
-    entity.targetObjectNameSingular === CoreObjectNameSingular.Person
+  const [query, queryName] =
+    targetableObject.targetObjectNameSingular === CoreObjectNameSingular.Person
      ? [getTimelineThreadsFromPersonId, 'getTimelineThreadsFromPersonId']
      : [getTimelineThreadsFromCompanyId, 'getTimelineThreadsFromCompanyId'];

-  const threadQueryVariables = {
-    ...(entity.targetObjectNameSingular === CoreObjectNameSingular.Person
-      ? { personId: entity.id }
-      : { companyId: entity.id }),
-    page: 1,
-    pageSize: TIMELINE_THREADS_DEFAULT_PAGE_SIZE,
-  } as GetTimelineThreadsFromPersonIdQueryVariables;
+  const { data, firstQueryLoading, isFetchingMore, fetchMoreRecords } =
+    useCustomResolver<TimelineThreadsWithTotal>(
+      query,
+      queryName,
+      'timelineThreads',
+      targetableObject,
+      TIMELINE_THREADS_DEFAULT_PAGE_SIZE,
+    );

-  const {
-    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] ?? [];
+  const { totalNumberOfThreads, timelineThreads } = data?.[queryName] ?? {};

  if (firstQueryLoading) {
    return <EmailLoader />;
@ -187,8 +105,8 @@ export const EmailThreads = ({
            ))}
          </Card>
        )}
-        <EmailThreadFetchMoreLoader
-          loading={isFetchingMoreEmails || firstQueryLoading}
+        <FetchMoreLoader
+          loading={isFetchingMore || firstQueryLoading}
          onLastRowVisible={fetchMoreRecords}
        />
      </Section>
--- a/packages/twenty-front/src/modules/activities/emails/hooks/internal/tests/useEmailThreadStates.test.ts
+++ b/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,
-    );
-  });
-});
--- a/packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts
+++ b/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,
-    ),
-  };
-};
--- a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx
+++ b/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}
          />
--- a/packages/twenty-front/src/modules/activities/emails/states/emailThreadsPageComponentState.ts
+++ b/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 },
-  });
--- a/packages/twenty-front/src/modules/activities/hooks/useCustomResolver.ts
+++ b/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,
+  };
+};
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/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 === 'calendar' && <Calendar />}
+      {activeTabId === 'emails' && (
+        <EmailThreads targetableObject={targetableObject} />
+      )}
+      {activeTabId === 'calendar' && (
+        <Calendar targetableObject={targetableObject} />
+      )}
      {activeTabId === 'logs' && <Events targetableObject={targetableObject} />}
    </StyledShowPageRightContainer>
  );
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx
+++ b/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 (
--- a/packages/twenty-server/src/modules/connected-account/auto-companies-and-contacts-creation/services/create-company-and-contact.service.ts
+++ b/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;
-
-    filterOutContactsFromCompanyOrWorkspace(
-      contactsToCreate,
-      connectedAccountHandle,
-      workspaceMembers,
-    );
+    const contactsToCreateFromOtherCompanies =
+      filterOutContactsFromCompanyOrWorkspace(
+        contactsToCreate,
+        connectedAccountHandle,
+        workspaceMembers,
+      );

    const { uniqueContacts, uniqueHandles } = getUniqueContactsAndHandles(
      contactsToCreateFromOtherCompanies,
				`@ -0,0 +1 @@`
				`export const TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE = 10;`