4486 connect settingsaccountscalendars to backend (#4605)

* add useFindOneRecord and useUpdateOneRecord

* remove mock

* use calendar channel information in display

* renaming

* refactoring

* handleSyncEventsToggle

* improve typing using generics

* modifications after review

* rename components

* renaming

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

@@ -1,13 +1,14 @@
 import { addMinutes, endOfDay, min, startOfDay } from 'date-fns';
 import { useRecoilValue } from 'recoil';
 
+import { CalendarChannel } from '@/accounts/types/CalendarChannel';
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsCalendarAccountsListCard } from '@/settings/accounts/components/SettingsAccountsCalendarAccountsListCard';
+import { SettingsAccountsCalendarChannelsListCard } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsListCard';
 import { SettingsAccountsCalendarDisplaySettings } from '@/settings/accounts/components/SettingsAccountsCalendarDisplaySettings';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -21,11 +22,10 @@ import {
   TimelineCalendarEvent,
   TimelineCalendarEventVisibility,
 } from '~/generated-metadata/graphql';
-import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
 export const SettingsAccountsCalendars = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
-  const { records: _accounts } = useFindManyRecords<ConnectedAccount>({
+  const { records: accounts } = useFindManyRecords<ConnectedAccount>({
     objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
     filter: {
       accountOwnerId: {
@@ -34,6 +34,15 @@ export const SettingsAccountsCalendars = () => {
     },
   });
 
+  const { records: calendarChannels } = useFindManyRecords<CalendarChannel>({
+    objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+    filter: {
+      connectedAccountId: {
+        in: accounts.map((account) => account.id),
+      },
+    },
+  });
+
   const exampleStartDate = new Date();
   const exampleEndDate = min([
     addMinutes(exampleStartDate, 30),
@@ -85,10 +94,9 @@ export const SettingsAccountsCalendars = () => {
             title="Calendar settings"
             description="Sync your calendars and set your preferences"
           />
-          <SettingsAccountsCalendarAccountsListCard />
+          <SettingsAccountsCalendarChannelsListCard />
         </Section>
-        {/* TODO: retrieve connected accounts data from back-end when the Calendar feature is ready. */}
-        {!!mockedConnectedAccounts.length && (
+        {!!calendarChannels.length && (
           <>
             <Section>
               <H2Title

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

@@ -1,22 +1,27 @@
-import { useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {
-  EventSettingsVisibilityValue,
-  SettingsAccountsEventVisibilitySettingsCard,
-} from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
+  CalendarChannel,
+  CalendarChannelVisibility,
+} from '@/accounts/types/CalendarChannel';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
 import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { IconRefresh, IconSettings, IconUser } from '@/ui/display/icon';
 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 { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
 const StyledCardMedia = styled(SettingsAccountsCardMedia)`
   height: ${({ theme }) => theme.spacing(6)};
@@ -24,10 +29,52 @@ const StyledCardMedia = styled(SettingsAccountsCardMedia)`
 
 export const SettingsAccountsCalendarsSettings = () => {
   const theme = useTheme();
-  const { accountUuid = '' } = useParams();
-  const connectedAccount = mockedConnectedAccounts.find(
-    ({ id }) => id === accountUuid,
-  );
+  const navigate = useNavigate();
+
+  const { accountUuid: calendarChannelId = '' } = useParams();
+
+  const { record: calendarChannel, loading } =
+    useFindOneRecord<CalendarChannel>({
+      objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+      objectRecordId: calendarChannelId,
+    });
+
+  const { updateOneRecord } = useUpdateOneRecord<CalendarChannel>({
+    objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+  });
+
+  const handleVisibilityChange = (value: CalendarChannelVisibility) => {
+    updateOneRecord({
+      idToUpdate: calendarChannelId,
+      updateOneRecordInput: {
+        visibility: value,
+      },
+    });
+  };
+
+  const handleContactAutoCreationToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: calendarChannelId,
+      updateOneRecordInput: {
+        isContactAutoCreationEnabled: value,
+      },
+    });
+  };
+
+  const handleSyncEventsToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: calendarChannelId,
+      updateOneRecordInput: {
+        isSyncEnabled: value,
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (!loading && !calendarChannel) navigate(AppPath.NotFound);
+  }, [loading, calendarChannel, navigate]);
+
+  if (!calendarChannel) return null;
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -42,7 +89,7 @@ export const SettingsAccountsCalendarsSettings = () => {
               children: 'Calendars',
               href: getSettingsPagePath(SettingsPath.AccountsCalendars),
             },
-            { children: connectedAccount?.handle || '' },
+            { children: calendarChannel?.handle || '' },
           ]}
         />
         <Section>
@@ -51,8 +98,8 @@ export const SettingsAccountsCalendarsSettings = () => {
             description="Define what will be visible to other users in your workspace"
           />
           <SettingsAccountsEventVisibilitySettingsCard
-            value={EventSettingsVisibilityValue.Everything}
-            onChange={(_value) => {}}
+            value={calendarChannel.visibility}
+            onChange={handleVisibilityChange}
           />
         </Section>
         <Section>
@@ -70,8 +117,8 @@ export const SettingsAccountsCalendarsSettings = () => {
               </StyledCardMedia>
             }
             title="Auto-creation"
-            value={false}
-            onToggle={(_value) => {}}
+            value={!!calendarChannel.isContactAutoCreationEnabled}
+            onToggle={handleContactAutoCreationToggle}
           />
         </Section>
         <Section>
@@ -89,8 +136,8 @@ export const SettingsAccountsCalendarsSettings = () => {
               </StyledCardMedia>
             }
             title="Sync events"
-            value={false}
-            onToggle={(_value) => {}}
+            value={!!calendarChannel.isSyncEnabled}
+            onToggle={handleSyncEventsToggle}
           />
         </Section>
       </SettingsPageContainer>

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

@@ -1,4 +1,4 @@
-import { SettingsAccountsEmailsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsEmailsAccountsListCard';
+import { SettingsAccountsMessageChannelsListCard } from '@/settings/accounts/components/SettingsAccountsMessageChannelsListCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -20,7 +20,7 @@ export const SettingsAccountsEmails = () => (
           title="Emails sync"
           description="Sync your inboxes and set your privacy settings"
         />
-        <SettingsAccountsEmailsAccountsListCard />
+        <SettingsAccountsMessageChannelsListCard />
       </Section>
     </SettingsPageContainer>
   </SubMenuTopBarContainer>