Typescript refactor.

src/app/(main)/settings/users/UserAddButton.tsx

@@ -3,7 +3,7 @@ import UserAddForm from './UserAddForm';
 import useMessages from 'components/hooks/useMessages';
 import { setValue } from 'store/cache';
 
-export function UserAddButton({ onSave }) {
+export function UserAddButton({ onSave }: { onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
   const { showToast } = useToasts();
 

src/app/(main)/settings/users/UserAddForm.tsx

@@ -16,7 +16,9 @@ import useMessages from 'components/hooks/useMessages';
 
 export function UserAddForm({ onSave, onClose }) {
   const { post, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation(data => post(`/users`, data));
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) => post(`/users`, data),
+  });
   const { formatMessage, labels } = useMessages();
 
   const handleSubmit = async data => {
@@ -65,7 +67,7 @@ export function UserAddForm({ onSave, onClose }) {
         <SubmitButton variant="primary" disabled={false}>
           {formatMessage(labels.save)}
         </SubmitButton>
-        <Button disabled={isLoading} onClick={onClose}>
+        <Button disabled={isPending} onClick={onClose}>
           {formatMessage(labels.cancel)}
         </Button>
       </FormButtons>

src/app/(main)/settings/users/UserDeleteButton.tsx

@@ -3,7 +3,15 @@ import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import UserDeleteForm from './UserDeleteForm';
 
-export function UserDeleteButton({ userId, username, onDelete }) {
+export function UserDeleteButton({
+  userId,
+  username,
+  onDelete,
+}: {
+  userId: string;
+  username: string;
+  onDelete?: () => void;
+}) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 

src/app/(main)/settings/users/UserDeleteForm.tsx

@@ -1,14 +1,13 @@
-import { useMutation } from '@tanstack/react-query';
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 
 export function UserDeleteForm({ userId, username, onSave, onClose }) {
   const { formatMessage, FormattedMessage, labels, messages } = useMessages();
-  const { del } = useApi();
-  const { mutate, error, isLoading } = useMutation(() => del(`/users/${userId}`));
+  const { del, useMutation } = useApi();
+  const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         onSave();
@@ -23,10 +22,10 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
         <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{username}</b> }} />
       </p>
       <FormButtons flex>
-        <SubmitButton variant="danger" disabled={isLoading}>
+        <SubmitButton variant="danger" disabled={isPending}>
           {formatMessage(labels.delete)}
         </SubmitButton>
-        <Button disabled={isLoading} onClick={onClose}>
+        <Button disabled={isPending} onClick={onClose}>
           {formatMessage(labels.cancel)}
         </Button>
       </FormButtons>

src/app/(main)/settings/users/UserEditForm.tsx

@@ -13,14 +13,30 @@ import useApi from 'components/hooks/useApi';
 import { ROLES } from 'lib/constants';
 import useMessages from 'components/hooks/useMessages';
 
-export function UserEditForm({ userId, data, onSave }) {
+export function UserEditForm({
+  userId,
+  data,
+  onSave,
+}: {
+  userId: string;
+  data: any[];
+  onSave: (data: any) => void;
+}) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation(({ username, password, role }) =>
-    post(`/users/${userId}`, { username, password, role }),
-  );
+  const { mutate, error } = useMutation({
+    mutationFn: ({
+      username,
+      password,
+      role,
+    }: {
+      username: string;
+      password: string;
+      role: string;
+    }) => post(`/users/${userId}`, { username, password, role }),
+  });
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         onSave(data);

src/app/(main)/settings/users/UserWebsites.js

@@ -1,36 +0,0 @@
-import Page from 'components/layout/Page';
-import useApi from 'components/hooks/useApi';
-import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import useApiFilter from 'components/hooks/useApiFilter';
-
-export function UserWebsites({ userId }) {
-  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
-    useApiFilter();
-  const { get, useQuery } = useApi();
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['user:websites', userId, filter, page, pageSize],
-    queryFn: () =>
-      get(`/users/${userId}/websites`, {
-        filter,
-        page,
-        pageSize,
-      }),
-  });
-  const hasData = data && data.length !== 0;
-
-  return (
-    <Page loading={isLoading} error={error}>
-      {hasData && (
-        <WebsitesTable
-          data={data.data}
-          onFilterChange={handleFilterChange}
-          onPageChange={handlePageChange}
-          onPageSizeChange={handlePageSizeChange}
-          filterValue={filter}
-        />
-      )}
-    </Page>
-  );
-}
-
-export default UserWebsites;

src/app/(main)/settings/users/UserWebsites.tsx

@@ -0,0 +1,26 @@
+import Page from 'components/layout/Page';
+import useApi from 'components/hooks/useApi';
+import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import DataTable from 'components/common/DataTable';
+
+export function UserWebsites({ userId }) {
+  const { get } = useApi();
+  const queryResult = useFilterQuery({
+    queryKey: ['user:websites', userId],
+    queryFn: (params: any) => get(`/users/${userId}/websites`, params),
+  });
+  const hasData = queryResult.result && queryResult.result.data.length !== 0;
+
+  return (
+    <Page isLoading={queryResult.query.isLoading} error={queryResult.query.error}>
+      {hasData && (
+        <DataTable queryResult={queryResult}>
+          {({ data }) => <WebsitesTable data={data} />}
+        </DataTable>
+      )}
+    </Page>
+  );
+}
+
+export default UserWebsites;

src/app/(main)/settings/users/UsersDataTable.tsx

@@ -8,10 +8,10 @@ import useCache from 'store/cache';
 
 export function UsersDataTable() {
   const { get } = useApi();
-  const modified = useCache(state => state?.users);
+  const modified = useCache((state: any) => state?.users);
   const queryResult = useFilterQuery({
     queryKey: ['users', { modified }],
-    queryFn: params => get(`/users`, params),
+    queryFn: (params: { [key: string]: any }) => get(`/users`, params),
   });
 
   return (

src/app/(main)/settings/users/UsersHeader.tsx

@@ -3,7 +3,7 @@ import PageHeader from 'components/layout/PageHeader';
 import useMessages from 'components/hooks/useMessages';
 import UserAddButton from './UserAddButton';
 
-export function UsersHeader({ onAdd }) {
+export function UsersHeader({ onAdd }: { onAdd?: () => void }) {
   const { formatMessage, labels } = useMessages();
 
   return (

src/app/(main)/settings/users/UsersTable.tsx

@@ -6,7 +6,7 @@ import useMessages from 'components/hooks/useMessages';
 import useLocale from 'components/hooks/useLocale';
 import UserDeleteButton from './UserDeleteButton';
 
-export function UsersTable({ data = [] }) {
+export function UsersTable({ data = [] }: { data: any[] }) {
   const { formatMessage, labels } = useMessages();
   const { dateLocale } = useLocale();
   const breakpoint = useBreakpoint();

src/app/(main)/settings/users/[id]/UserSettings.js

@@ -21,7 +21,7 @@ export function UserSettings({ userId }) {
         return get(`/users/${userId}`);
       }
     },
-    cacheTime: 0,
+    gcTime: 0,
   });
 
   const handleSave = data => {