From 7551720f857f9bd22ee75afda5ad537c5d878ce5 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Mon, 25 Mar 2024 18:10:03 +0100
Subject: [PATCH] improve typing using generics

---
 ...ttingsAccountsCalendarAccountsListCard.tsx |  4 +-
 ...ttingsAccountsConnectedAccountsSection.tsx |  2 +-
 ...SettingsAccountsEmailsAccountsListCard.tsx |  4 +-
 .../components/SettingsAccountsListCard.tsx   | 46 ++++++++-----------
 .../SettingsAccountsRowDropdownMenu.tsx       |  4 +-
 5 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx
index 448cab5961ef..fc5bdbac0825 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx
@@ -45,13 +45,13 @@ export const SettingsAccountsCalendarAccountsListCard = () => {
 
   return (
     <SettingsAccountsListCard
-      accountsOrChannels={calendarChannels}
+      items={calendarChannels}
       isLoading={accountsLoading || calendarChannelsLoading}
       onRowClick={(calendarChannel) =>
         navigate(`/settings/accounts/calendars/${calendarChannel.id}`)
       }
       RowIcon={IconGoogleCalendar}
-      RowRightComponent={({ accountOrChannel: calendarChannel }) => (
+      RowRightComponent={({ item: calendarChannel }) => (
         <StyledRowRightContainer>
           <SettingsAccountsSynchronizationStatus
             synced={!!calendarChannel.isSyncEnabled}
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
index 38f3583c7656..7ffb55c4da70 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
@@ -18,7 +18,7 @@ export const SettingsAccountsConnectedAccountsSection = ({
       description="Manage your internet accounts."
     />
     <SettingsAccountsListCard
-      accountsOrChannels={accounts}
+      items={accounts}
       isLoading={loading}
       RowRightComponent={SettingsAccountsRowDropdownMenu}
       hasFooter
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx
index 6010b4262e42..783956ef572b 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx
@@ -52,13 +52,13 @@ export const SettingsAccountsEmailsAccountsListCard = () => {
 
   return (
     <SettingsAccountsListCard
-      accountsOrChannels={messageChannelsWithSyncedEmails}
+      items={messageChannelsWithSyncedEmails}
       isLoading={accountsLoading || messageChannelsLoading}
       onRowClick={(messageChannel) =>
         navigate(`/settings/accounts/emails/${messageChannel.id}`)
       }
       RowIcon={IconGmail}
-      RowRightComponent={({ accountOrChannel: messageChannel }) => (
+      RowRightComponent={({ item: messageChannel }) => (
         <StyledRowRightContainer>
           <SettingsAccountsSynchronizationStatus
             synced={messageChannel.isSynced}
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx
index d920ee3fe1f3..3bacd117908f 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx
@@ -3,9 +3,6 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { CalendarChannel } from '@/accounts/types/CalendarChannel';
-import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
-import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -44,50 +41,45 @@ const StyledButton = styled.button`
   }
 `;
 
-type SettingsAccountsListCardProps<
-  AccountOrChannel extends Pick<
-    ConnectedAccount | CalendarChannel | MessageChannel,
-    'handle' | 'id'
-  >,
-> = {
-  accountsOrChannels: AccountOrChannel[];
+type ItemType = {
+  handle: string;
+  id: string;
+};
+
+type SettingsAccountsListCardProps<T extends ItemType> = {
+  items: T[];
   hasFooter?: boolean;
   isLoading?: boolean;
-  onRowClick?: (accountOrChannel: AccountOrChannel) => void;
+  onRowClick?: (item: T) => void;
   RowIcon?: IconComponent;
-  RowRightComponent: ComponentType<{ accountOrChannel: AccountOrChannel }>;
+  RowRightComponent: ComponentType<{ item: T }>;
 };
 
-export const SettingsAccountsListCard = <
-  Account extends Pick<
-    ConnectedAccount | CalendarChannel | MessageChannel,
-    'handle' | 'id'
-  >,
->({
-  accountsOrChannels,
+export const SettingsAccountsListCard = <T extends ItemType>({
+  items,
   hasFooter,
   isLoading,
   onRowClick,
   RowIcon = IconGoogle,
   RowRightComponent,
-}: SettingsAccountsListCardProps<Account>) => {
+}: SettingsAccountsListCardProps<T>) => {
   const theme = useTheme();
   const navigate = useNavigate();
 
   if (isLoading === true) return <SettingsAccountsListSkeletonCard />;
 
-  if (!accountsOrChannels.length) return <SettingsAccountsListEmptyStateCard />;
+  if (!items.length) return <SettingsAccountsListEmptyStateCard />;
 
   return (
     <Card>
-      {accountsOrChannels.map((account, index) => (
+      {items.map((item, index) => (
         <SettingsAccountRow
-          key={account.id}
+          key={item.id}
           LeftIcon={RowIcon}
-          account={account}
-          rightComponent={<RowRightComponent accountOrChannel={account} />}
-          divider={index < accountsOrChannels.length - 1}
-          onClick={() => onRowClick?.(account)}
+          account={item}
+          rightComponent={<RowRightComponent item={item} />}
+          divider={index < items.length - 1}
+          onClick={() => onRowClick?.(item)}
         />
       ))}
       {hasFooter && (
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
index 07520d07a3e3..d68ec50c0f61 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
@@ -12,12 +12,12 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsAccountsRowDropdownMenuProps = {
-  accountOrChannel: Pick<ConnectedAccount, 'id' | 'messageChannels'>;
+  item: Pick<ConnectedAccount, 'id' | 'messageChannels'>;
   className?: string;
 };
 
 export const SettingsAccountsRowDropdownMenu = ({
-  accountOrChannel: account,
+  item: account,
   className,
 }: SettingsAccountsRowDropdownMenuProps) => {
   const dropdownId = `settings-account-row-${account.id}`;