Rename component + add comment

twentyhq · Apr 11, 2024 · 28d98d5 · 28d98d5
1 parent e633cd2
commit 28d98d5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/...rc/modules/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard.tsx b/...rc/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/...s/SettingsIntegrationSyncStatusToggle.tsx → ...ntegrationRemoteTableSyncStatusToggle.tsx b/...s/SettingsIntegrationSyncStatusToggle.tsx → ...ntegrationRemoteTableSyncStatusToggle.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);