From 28d98d58ae43892aa2271fbdc47648f0abef6e16 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomast@twenty.com>
Date: Thu, 11 Apr 2024 10:44:24 +0200
Subject: [PATCH] Rename component + add comment

---
 .../SettingsIntegrationDatabaseTablesListCard.tsx   | 13 +++++++------
 ...tingsIntegrationRemoteTableSyncStatusToggle.tsx} |  6 +++---
 2 files changed, 10 insertions(+), 9 deletions(-)
 rename packages/twenty-front/src/modules/settings/integrations/components/{SettingsIntegrationSyncStatusToggle.tsx => SettingsIntegrationRemoteTableSyncStatusToggle.tsx} (82%)

diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard.tsx
index c6e7ebbaf36b..764406e73367 100644
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard.tsx
@@ -5,8 +5,9 @@ import { z } from 'zod';
 import { useSyncRemoteTable } from '@/databases/hooks/useSyncRemoteTable';
 import { useUnsyncRemoteTable } from '@/databases/hooks/useUnsyncRemoteTable';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
-import { SettingsIntegrationSyncStatusToggle } from '@/settings/integrations/components/SettingsIntegrationSyncStatusToggle';
+import { SettingsIntegrationRemoteTableSyncStatusToggle } from '@/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle';
 import { RemoteTable, RemoteTableStatus } from '~/generated-metadata/graphql';
+import { isDefined } from '~/utils/isDefined';
 
 export const settingsIntegrationsDatabaseTablesSchema = z.object({
   syncedTablesByName: z.record(z.boolean()),
@@ -34,6 +35,7 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
   const { syncRemoteTable } = useSyncRemoteTable();
   const { unsyncRemoteTable } = useUnsyncRemoteTable();
 
+  // We need to use a state because the table status update re-render the whole list of toggles
   const [items] = useState(
     tables.map((table) => ({
       id: table.name,
@@ -43,10 +45,9 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
 
   const onSyncUpdate = useCallback(
     async (value: boolean, tableName: string) => {
-      const table = items.filter((table) => table.name === tableName)[0];
+      const table = items.find((table) => table.name === tableName);
 
-      // eslint-disable-next-line @nx/workspace-explicit-boolean-predicates-in-if
-      if (!table) return;
+      if (!isDefined(table)) return;
 
       if (value) {
         await syncRemoteTable({
@@ -72,8 +73,8 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
       item: { id: string; name: string; status: RemoteTableStatus };
     }) => (
       <StyledRowRightContainer>
-        <SettingsIntegrationSyncStatusToggle
-          item={item}
+        <SettingsIntegrationRemoteTableSyncStatusToggle
+          table={item}
           onSyncUpdate={onSyncUpdate}
         />
       </StyledRowRightContainer>
diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationSyncStatusToggle.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx
similarity index 82%
rename from packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationSyncStatusToggle.tsx
rename to packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx
index 8136dd15d66f..3b4e403ced03 100644
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationSyncStatusToggle.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx
@@ -3,11 +3,11 @@ import { useState } from 'react';
 import { Toggle } from '@/ui/input/components/Toggle';
 import { RemoteTableStatus } from '~/generated-metadata/graphql';
 
-export const SettingsIntegrationSyncStatusToggle = ({
-  item: table,
+export const SettingsIntegrationRemoteTableSyncStatusToggle = ({
+  table,
   onSyncUpdate,
 }: {
-  item: { id: string; name: string; status: RemoteTableStatus };
+  table: { id: string; name: string; status: RemoteTableStatus };
   onSyncUpdate: (value: boolean, tableName: string) => Promise<void>;
 }) => {
   const [isToggleLoading, setIsToggleLoading] = useState(false);