NEOS-510 Fixes table links not working by memoizing getColumns calls (#…

…918)
nucleuscloud · Dec 19, 2023 · 726b28c · 726b28c
1 parent bab1a1b
commit 726b28c
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 37 deletions.
diff --git a/frontend/apps/web/app/[account]/connections/page.tsx b/frontend/apps/web/app/[account]/connections/page.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
 import { useGetConnections } from '@/libs/hooks/useGetConnections';
 import { PlusIcon } from '@radix-ui/react-icons';
 import NextLink from 'next/link';
-import { ReactElement } from 'react';
+import { ReactElement, useMemo } from 'react';
 import { getColumns } from './components/ConnectionsTable/columns';
 import { DataTable } from './components/ConnectionsTable/data-table';
 
@@ -35,19 +35,23 @@ function ConnectionTable(props: ConnectionTableProps): ReactElement {
   const { account } = useAccount();
   const { isLoading, data, mutate } = useGetConnections(account?.id ?? '');
 
+  const columns = useMemo(
+    () =>
+      getColumns({
+        accountName: account?.name ?? '',
+        onConnectionDeleted() {
+          mutate();
+        },
+      }),
+    [account?.name ?? '']
+  );
+
   if (isLoading) {
     return <SkeletonTable />;
   }
 
   const connections = data?.connections ?? [];
 
-  const columns = getColumns({
-    accountName: account?.name ?? '',
-    onConnectionDeleted() {
-      mutate();
-    },
-  });
-
   return (
     <div>
       <DataTable columns={columns} data={connections} />

diff --git a/frontend/apps/web/app/[account]/jobs/page.tsx b/frontend/apps/web/app/[account]/jobs/page.tsx
@@ -10,7 +10,7 @@ import { useGetJobs } from '@/libs/hooks/useGetJobs';
 import { JobStatus } from '@neosync/sdk';
 import { PlusIcon } from '@radix-ui/react-icons';
 import NextLink from 'next/link';
-import { ReactElement } from 'react';
+import { ReactElement, useMemo } from 'react';
 import { getColumns } from './components/DataTable/columns';
 import { DataTable } from './components/DataTable/data-table';
 
@@ -34,6 +34,16 @@ function JobTable(props: JobTableProps): ReactElement {
   const { account } = useAccount();
   const { isLoading, data, mutate } = useGetJobs(account?.id ?? '');
   const { data: statusData } = useGetJobStatuses(account?.id ?? '');
+  const columns = useMemo(
+    () =>
+      getColumns({
+        accountName: account?.name ?? '',
+        onDeleted() {
+          mutate();
+        },
+      }),
+    [account?.name ?? '']
+  );
 
   if (isLoading) {
     return <SkeletonTable />;
@@ -56,13 +66,6 @@ function JobTable(props: JobTableProps): ReactElement {
     };
   });
 
-  const columns = getColumns({
-    accountName: account?.name ?? '',
-    onDeleted() {
-      mutate();
-    },
-  });
-
   return (
     <div>
       <DataTable columns={columns} data={jobData} />

diff --git a/frontend/apps/web/app/[account]/runs/[id]/components/JobRunActivityTable.tsx b/frontend/apps/web/app/[account]/runs/[id]/components/JobRunActivityTable.tsx
@@ -1,6 +1,6 @@
 import SkeletonTable from '@/components/skeleton/SkeletonTable';
 import { JobRunEvent } from '@neosync/sdk';
-import { ReactElement } from 'react';
+import { ReactElement, useMemo } from 'react';
 import { getColumns } from './JobRunActivityTable/columns';
 import { DataTable } from './JobRunActivityTable/data-table';
 
@@ -13,10 +13,11 @@ export default function JobRunActivityTable(
 ): ReactElement {
   const { jobRunEvents } = props;
 
+  const columns = useMemo(() => getColumns({}), []);
+
   if (!jobRunEvents) {
     return <SkeletonTable />;
   }
-  const columns = getColumns({});
   const isError = jobRunEvents.some((e) => e.tasks.some((t) => t.error));
 
   return (

diff --git a/frontend/apps/web/app/[account]/runs/components/RunsTable.tsx b/frontend/apps/web/app/[account]/runs/components/RunsTable.tsx
@@ -6,7 +6,7 @@ import {
   onJobRunsPaused,
   useGetJobRuns,
 } from '@/libs/hooks/useGetJobRuns';
-import { ReactElement, useState } from 'react';
+import { ReactElement, useMemo, useState } from 'react';
 import { getColumns } from './JobRunsTable/columns';
 import { DataTable } from './JobRunsTable/data-table';
 
@@ -33,20 +33,24 @@ export default function RunsTable(props: RunsTableProps): ReactElement {
     }
   );
 
+  const columns = useMemo(
+    () =>
+      getColumns({
+        onDeleted() {
+          mutate();
+        },
+        accountId: account?.id ?? '',
+        accountName: account?.name ?? '',
+      }),
+    [account?.id ?? '', account?.name ?? '']
+  );
+
   if (isLoading) {
     return <SkeletonTable />;
   }
 
   const runs = data?.jobRuns ?? [];
 
-  const columns = getColumns({
-    onDeleted() {
-      mutate();
-    },
-    accountId: account?.id || '',
-    accountName: account?.name ?? '',
-  });
-
   function refreshClick(): void {
     mutate();
   }

diff --git a/frontend/apps/web/app/[account]/settings/api-keys/page.tsx b/frontend/apps/web/app/[account]/settings/api-keys/page.tsx
@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useGetAccountApiKeys } from '@/libs/hooks/useGetAccountApiKeys';
 import { PlusIcon } from '@radix-ui/react-icons';
 import Link from 'next/link';
-import { ReactElement } from 'react';
+import { ReactElement, useMemo } from 'react';
 import { getColumns } from './components/ApiKeysTable/columns';
 import { DataTable } from './components/ApiKeysTable/data-table';
 
@@ -30,19 +30,23 @@ function ApiKeyTable(props: ApiKeyTableProps): ReactElement {
   const { account } = useAccount();
   const { isLoading, data, mutate } = useGetAccountApiKeys(account?.id ?? '');
 
+  const columns = useMemo(
+    () =>
+      getColumns({
+        accountName: account?.name ?? '',
+        onDeleted() {
+          mutate();
+        },
+      }),
+    [account?.name ?? '']
+  );
+
   if (isLoading) {
     return <SkeletonTable />;
   }
 
   const apiKeys = data?.apiKeys ?? [];
 
-  const columns = getColumns({
-    accountName: account?.name ?? '',
-    onDeleted() {
-      mutate();
-    },
-  });
-
   return (
     <div>
       <DataTable columns={columns} data={apiKeys} />

diff --git a/frontend/apps/web/app/[account]/settings/members/components/InviteTable.tsx b/frontend/apps/web/app/[account]/settings/members/components/InviteTable.tsx
@@ -132,7 +132,10 @@ function DataTable(props: DataTableProps): React.ReactElement {
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
 
-  const columns = getColumns({ accountId, onDeleted });
+  const columns = React.useMemo(
+    () => getColumns({ accountId, onDeleted }),
+    [accountId]
+  );
 
   const table = useReactTable({
     data,

diff --git a/frontend/apps/web/app/[account]/settings/members/components/MemberTable.tsx b/frontend/apps/web/app/[account]/settings/members/components/MemberTable.tsx
@@ -124,7 +124,10 @@ function DataTable(props: DataTableProps): React.ReactElement {
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
 
-  const columns = getColumns({ accountId, onDeleted });
+  const columns = React.useMemo(
+    () => getColumns({ accountId, onDeleted }),
+    [accountId]
+  );
 
   const table = useReactTable({
     data,