improve typing using generics

twentyhq · Mar 25, 2024 · 7551720 · 7551720
1 parent 5e65cda
commit 7551720
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 34 deletions.
diff --git a/...ont/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx b/...ont/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/...ont/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx b/...ont/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/...front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx b/...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
@@ -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/...twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/...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}`;