Replaced SettingsTable with DataTable.

src/app/(app)/settings/teams/[id]/TeamMembers.js

@@ -1,46 +1,25 @@
-import { Loading, useToasts } from 'react-basics';
 import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
-import useApiFilter from 'components/hooks/useApiFilter';
 import TeamMembersTable from './TeamMembersTable';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import DataTable from 'components/common/DataTable';
 
 export function TeamMembers({ teamId, readOnly }) {
-  const { showToast } = useToasts();
-  const { formatMessage, messages } = useMessages();
-  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
-    useApiFilter();
-  const { get, useQuery } = useApi();
-  const { data, isLoading, refetch } = useQuery(
-    ['teams:users', teamId, filter, page, pageSize],
-    () =>
-      get(`/teams/${teamId}/users`, {
-        filter,
-        page,
-        pageSize,
-      }),
+  const { get } = useApi();
+  const { getProps } = useFilterQuery(
+    ['team:users', teamId],
+    params => {
+      return get(`/teams/${teamId}/users`, {
+        ...params,
+      });
+    },
+    { enabled: !!teamId },
   );
 
-  if (isLoading) {
-    return <Loading icon="dots" style={{ minHeight: 300 }} />;
-  }
-
-  const handleSave = async () => {
-    await refetch();
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-  };
-
   return (
     <>
-      <TeamMembersTable
-        onSave={handleSave}
-        teamId={teamId}
-        data={data}
-        readOnly={readOnly}
-        onFilterChange={handleFilterChange}
-        onPageChange={handlePageChange}
-        onPageSizeChange={handlePageSizeChange}
-        filterValue={filter}
-      />
+      <DataTable {...getProps()}>
+        {({ data }) => <TeamMembersTable data={data} readOnly={readOnly} />}
+      </DataTable>
     </>
   );
 }