4488 connect calendar tab to backend

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,40 @@ 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(
+      query,
+      queryName,
+      'timelineCalendarEvents',
+      targetableObject,
+      TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE,
+    );
+
+  const { timelineCalendarEvents }: TimelineCalendarEventsWithTotal =
+    data?.[queryName] ?? [];
 
   const {
     calendarEventsByDayTime,
@@ -38,13 +72,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 +129,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 { CalendarEventOrTimelineCalendarEvent } from '@/activities/calendar/types/CalendarEventOrTimelineCalendarEvent';
 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';
 
 type CalendarCurrentEventCursorProps = {
-  calendarEvent: CalendarEvent;
+  calendarEvent: CalendarEventOrTimelineCalendarEvent;
 };
 
 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 { CalendarEventOrTimelineCalendarEvent } from '@/activities/calendar/types/CalendarEventOrTimelineCalendarEvent';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 
 type CalendarDayCardContentProps = {
-  calendarEvents: CalendarEvent[];
+  calendarEvents: CalendarEventOrTimelineCalendarEvent[];
   divider?: boolean;
 };
 

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

@@ -7,7 +7,7 @@ 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 { CalendarEventOrTimelineCalendarEvent } from '@/activities/calendar/types/CalendarEventOrTimelineCalendarEvent';
 import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendarEventEndDate';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
@@ -20,7 +20,7 @@ import { AvatarGroup } from '@/users/components/AvatarGroup';
 import { isDefined } from '~/utils/isDefined';
 
 type CalendarEventRowProps = {
-  calendarEvent: CalendarEvent;
+  calendarEvent: CalendarEventOrTimelineCalendarEvent;
   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,17 @@
 import { createContext } from 'react';
 
-import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { CalendarEventOrTimelineCalendarEvent } from '@/activities/calendar/types/CalendarEventOrTimelineCalendarEvent';
 
 type CalendarContextValue = {
-  calendarEventsByDayTime: Record<number, CalendarEvent[] | undefined>;
-  currentCalendarEvent?: CalendarEvent;
+  calendarEventsByDayTime: Record<
+    number,
+    CalendarEventOrTimelineCalendarEvent[] | undefined
+  >;
+  currentCalendarEvent?: CalendarEventOrTimelineCalendarEvent;
   displayCurrentEventCursor?: boolean;
   getNextCalendarEvent: (
-    calendarEvent: CalendarEvent,
-  ) => CalendarEvent | undefined;
+    calendarEvent: CalendarEventOrTimelineCalendarEvent,
+  ) => CalendarEventOrTimelineCalendarEvent | undefined;
   updateCurrentCalendarEvent: () => void;
 };
 

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

@@ -1,14 +1,16 @@
 import { useMemo, useState } from 'react';
 import { getYear, isThisMonth, startOfDay, startOfMonth } from 'date-fns';
 
-import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { CalendarEventOrTimelineCalendarEvent } from '@/activities/calendar/types/CalendarEventOrTimelineCalendarEvent';
 import { findUpcomingCalendarEvent } from '@/activities/calendar/utils/findUpcomingCalendarEvent';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
 import { isDefined } from '~/utils/isDefined';
 import { sortDesc } from '~/utils/sort';
 
-export const useCalendarEvents = (calendarEvents: CalendarEvent[]) => {
+export const useCalendarEvents = (
+  calendarEvents: CalendarEventOrTimelineCalendarEvent[],
+) => {
   const calendarEventsByDayTime = groupArrayItemsBy(
     calendarEvents,
     (calendarEvent) =>
@@ -29,14 +31,18 @@ export const useCalendarEvents = (calendarEvents: CalendarEvent[]) => {
 
   const monthTimesByYear = groupArrayItemsBy(sortedMonthTimes, getYear);
 
-  const getPreviousCalendarEvent = (calendarEvent: CalendarEvent) => {
+  const getPreviousCalendarEvent = (
+    calendarEvent: CalendarEventOrTimelineCalendarEvent,
+  ) => {
     const calendarEventIndex = calendarEvents.indexOf(calendarEvent);
     return calendarEventIndex < calendarEvents.length - 1
       ? calendarEvents[calendarEventIndex + 1]
       : undefined;
   };
 
-  const getNextCalendarEvent = (calendarEvent: CalendarEvent) => {
+  const getNextCalendarEvent = (
+    calendarEvent: CalendarEventOrTimelineCalendarEvent,
+  ) => {
     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/calendar/types/CalendarEventOrTimelineCalendarEvent.ts

@@ -0,0 +1,6 @@
+import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { TimelineCalendarEvent } from '~/generated/graphql';
+
+export type CalendarEventOrTimelineCalendarEvent =
+  | CalendarEvent
+  | TimelineCalendarEvent;

packages/twenty-front/src/modules/activities/emails/components/EmailThreadFetchMoreLoader.tsx → 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,
   });