Typescript refactor.

src/app/(main)/settings/profile/PasswordEditForm.tsx

@@ -6,10 +6,10 @@ import useMessages from 'components/hooks/useMessages';
 export function PasswordEditForm({ onSave, onClose }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
+  const { mutate, error, isLoading } = useMutation((data: any) => post('/me/password', data));
   const ref = useRef(null);
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         onSave();
@@ -18,7 +18,7 @@ export function PasswordEditForm({ onSave, onClose }) {
     });
   };
 
-  const samePassword = value => {
+  const samePassword = (value: string) => {
     if (value !== ref?.current?.getValues('newPassword')) {
       return formatMessage(messages.noMatchPassword);
     }

src/app/(main)/settings/teams/TeamAddForm.tsx

@@ -1,4 +1,3 @@
-import { useRef } from 'react';
 import {
   Form,
   FormRow,
@@ -12,11 +11,12 @@ import { setValue } from 'store/cache';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 
-export function TeamAddForm({ onSave, onClose }) {
+export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
   const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
-  const ref = useRef(null);
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) => post('/teams', data),
+  });
 
   const handleSubmit = async data => {
     mutate(data, {
@@ -29,17 +29,17 @@ export function TeamAddForm({ onSave, onClose }) {
   };
 
   return (
-    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error}>
       <FormRow label={formatMessage(labels.name)}>
         <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
           <TextField autoComplete="off" />
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <SubmitButton variant="primary" disabled={isLoading}>
+        <SubmitButton variant="primary" disabled={isPending}>
           {formatMessage(labels.save)}
         </SubmitButton>
-        <Button disabled={isLoading} onClick={onClose}>
+        <Button disabled={isPending} onClick={onClose}>
           {formatMessage(labels.cancel)}
         </Button>
       </FormButtons>

src/app/(main)/settings/teams/TeamDeleteButton.tsx

@@ -2,7 +2,15 @@ import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import TeamDeleteForm from './TeamDeleteForm';
 
-export function TeamDeleteButton({ teamId, teamName, onDelete }) {
+export function TeamDeleteButton({
+  teamId,
+  teamName,
+  onDelete,
+}: {
+  teamId: string;
+  teamName: string;
+  onDelete?: () => void;
+}) {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -14,7 +22,7 @@ export function TeamDeleteButton({ teamId, teamName, onDelete }) {
         <Text>{formatMessage(labels.delete)}</Text>
       </Button>
       <Modal title={formatMessage(labels.deleteTeam)}>
-        {close => (
+        {(close: any) => (
           <TeamDeleteForm teamId={teamId} teamName={teamName} onSave={onDelete} onClose={close} />
         )}
       </Modal>

src/app/(main)/settings/teams/TeamDeleteForm.tsx

@@ -3,10 +3,22 @@ import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 import { setValue } from 'store/cache';
 
-export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
+export function TeamDeleteForm({
+  teamId,
+  teamName,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  teamName: string;
+  onSave: () => void;
+  onClose: () => void;
+}) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { del, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) => del(`/teams/${teamId}`, data),
+  });
 
   const handleSubmit = async data => {
     mutate(data, {
@@ -24,7 +36,7 @@ export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
         <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
       </p>
       <FormButtons flex>
-        <SubmitButton variant="danger" disabled={isLoading}>
+        <SubmitButton variant="danger" disabled={isPending}>
           {formatMessage(labels.delete)}
         </SubmitButton>
         <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>

src/app/(main)/settings/teams/TeamJoinForm.tsx

@@ -12,10 +12,10 @@ import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 import { setValue } from 'store/cache';
 
-export function TeamJoinForm({ onSave, onClose }) {
+export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
   const { formatMessage, labels, getMessage } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => post('/teams/join', data));
+  const { mutate, error } = useMutation({ mutationFn: (data: any) => post('/teams/join', data) });
   const ref = useRef(null);
 
   const handleSubmit = async data => {

src/app/(main)/settings/teams/TeamLeaveButton.tsx

@@ -4,7 +4,15 @@ import useLocale from 'components/hooks/useLocale';
 import useUser from 'components/hooks/useUser';
 import TeamDeleteForm from './TeamLeaveForm';
 
-export function TeamLeaveButton({ teamId, teamName, onLeave }) {
+export function TeamLeaveButton({
+  teamId,
+  teamName,
+  onLeave,
+}: {
+  teamId: string;
+  teamName: string;
+  onLeave?: () => void;
+}) {
   const { formatMessage, labels } = useMessages();
   const { dir } = useLocale();
   const { user } = useUser();

src/app/(main)/settings/teams/TeamLeaveForm.tsx

@@ -3,22 +3,33 @@ import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 import { setValue } from 'store/cache';
 
-export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
+export function TeamLeaveForm({
+  teamId,
+  userId,
+  teamName,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  userId: string;
+  teamName: string;
+  onSave: () => void;
+  onClose: () => void;
+}) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { del, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation(() => del(`/teams/${teamId}/users/${userId}`));
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
+  });
 
   const handleSubmit = async () => {
-    mutate(
-      {},
-      {
-        onSuccess: async () => {
-          setValue('team:members', Date.now());
-          onSave();
-          onClose();
-        },
+    mutate(null, {
+      onSuccess: async () => {
+        setValue('team:members', Date.now());
+        onSave();
+        onClose();
       },
-    );
+    });
   };
 
   return (
@@ -27,7 +38,7 @@ export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
         <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
       </p>
       <FormButtons flex>
-        <SubmitButton variant="danger" disabled={isLoading}>
+        <SubmitButton variant="danger" disabled={isPending}>
           {formatMessage(labels.leave)}
         </SubmitButton>
         <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>

src/app/(main)/settings/teams/TeamsAddButton.tsx

@@ -3,7 +3,7 @@ import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
 import TeamAddForm from './TeamAddForm';
 
-export function TeamsAddButton({ onAdd }) {
+export function TeamsAddButton({ onAdd }: { onAdd?: () => void }) {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -15,7 +15,7 @@ export function TeamsAddButton({ onAdd }) {
         <Text>{formatMessage(labels.createTeam)}</Text>
       </Button>
       <Modal title={formatMessage(labels.createTeam)}>
-        {close => <TeamAddForm onSave={onAdd} onClose={close} />}
+        {(close: () => void) => <TeamAddForm onSave={onAdd} onClose={close} />}
       </Modal>
     </ModalTrigger>
   );

src/app/(main)/settings/teams/TeamsDataTable.tsx

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

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -7,7 +7,7 @@ import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from
 import TeamDeleteButton from './TeamDeleteButton';
 import TeamLeaveButton from './TeamLeaveButton';
 
-export function TeamsTable({ data = [] }) {
+export function TeamsTable({ data = [] }: { data: any[] }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const breakpoint = useBreakpoint();

src/app/(main)/settings/teams/WebsiteTags.tsx

@@ -1,7 +1,15 @@
 import { Button, Icon, Icons, Text } from 'react-basics';
 import styles from './WebsiteTags.module.css';
 
-export function WebsiteTags({ items = [], websites = [], onClick }) {
+export function WebsiteTags({
+  items = [],
+  websites = [],
+  onClick,
+}: {
+  items: any[];
+  websites: any[];
+  onClick: (e: Event) => void;
+}) {
   if (websites.length === 0) {
     return null;
   }

src/app/(main)/settings/teams/[id]/TeamMemberRemoveButton.tsx

@@ -3,28 +3,37 @@ import useMessages from 'components/hooks/useMessages';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 import { setValue } from 'store/cache';
 
-export function TeamMemberRemoveButton({ teamId, userId, disabled, onSave }) {
+export function TeamMemberRemoveButton({
+  teamId,
+  userId,
+  disabled,
+  onSave,
+}: {
+  teamId: string;
+  userId: string;
+  disabled?: boolean;
+  onSave?: () => void;
+}) {
   const { formatMessage, labels } = useMessages();
   const { del, useMutation } = useApi();
-  const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/users/${userId}`));
+  const { mutate, isPending } = useMutation({
+    mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
+  });
 
   const handleRemoveTeamMember = () => {
-    mutate(
-      {},
-      {
-        onSuccess: () => {
-          setValue('team:members', Date.now());
-          onSave?.();
-        },
+    mutate(null, {
+      onSuccess: () => {
+        setValue('team:members', Date.now());
+        onSave?.();
       },
-    );
+    });
   };
 
   return (
     <LoadingButton
       onClick={() => handleRemoveTeamMember()}
       disabled={disabled}
-      isLoading={isLoading}
+      isLoading={isPending}
     >
       <Icon>
         <Icons.Close />

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

@@ -4,7 +4,7 @@ import useFilterQuery from 'components/hooks/useFilterQuery';
 import DataTable from 'components/common/DataTable';
 import useCache from 'store/cache';
 
-export function TeamMembers({ teamId, readOnly }) {
+export function TeamMembers({ teamId, readOnly }: { teamId: string; readOnly: boolean }) {
   const { get } = useApi();
   const modified = useCache(state => state?.['team:members']);
   const queryResult = useFilterQuery({

src/app/(main)/settings/teams/[id]/TeamMembersTable.tsx

@@ -4,7 +4,15 @@ import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 
-export function TeamMembersTable({ data = [], teamId, readOnly }) {
+export function TeamMembersTable({
+  data = [],
+  teamId,
+  readOnly,
+}: {
+  data: any[];
+  teamId: string;
+  readOnly: boolean;
+}) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const breakpoint = useBreakpoint();

src/app/(main)/settings/teams/[id]/TeamSettings.tsx

@@ -10,7 +10,7 @@ import TeamEditForm from './TeamEditForm';
 import TeamMembers from './TeamMembers';
 import TeamWebsites from './TeamWebsites';
 
-export function TeamSettings({ teamId }) {
+export function TeamSettings({ teamId }: { teamId: string }) {
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const [values, setValues] = useState(null);
@@ -24,7 +24,7 @@ export function TeamSettings({ teamId }) {
         return get(`/teams/${teamId}`);
       }
     },
-    cacheTime: 0,
+    gcTime: 0,
   });
   const canEdit = data?.teamUser?.find(
     ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
@@ -48,7 +48,7 @@ export function TeamSettings({ teamId }) {
   return (
     <Flexbox direction="column">
       <PageHeader title={values?.name} />
-      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+      <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
         <Item key="details">{formatMessage(labels.details)}</Item>
         <Item key="members">{formatMessage(labels.members)}</Item>
         <Item key="websites">{formatMessage(labels.websites)}</Item>

src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.tsx

@@ -7,11 +7,21 @@ import Empty from 'components/common/Empty';
 import { setValue } from 'store/cache';
 import { useUser } from 'components/hooks';
 
-export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
+export function TeamWebsiteAddForm({
+  teamId,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  onSave: () => void;
+  onClose: () => void;
+}) {
   const { user } = useUser();
   const { formatMessage, labels } = useMessages();
   const { get, post, useQuery, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/teams/${teamId}/websites`, data),
+  });
   const { data: websites, isLoading } = useQuery({
     queryKey: ['websites'],
     queryFn: () => get('/websites'),
@@ -42,7 +52,7 @@ export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
       {!isLoading && !hasData && <Empty />}
       {hasData && (
         <Form onSubmit={handleSubmit} error={error}>
-          <WebsitesDataTable userId={user.id} showHeader={false} showActions={false}>
+          <WebsitesDataTable userId={user.id} showActions={false}>
             <GridColumn name="select" label={formatMessage(labels.selectWebsite)} alignment="end">
               {row => (
                 <Toggle

src/app/(main)/settings/teams/[id]/TeamWebsites.tsx

@@ -8,7 +8,7 @@ import useFilterQuery from 'components/hooks/useFilterQuery';
 import DataTable from 'components/common/DataTable';
 import useCache from 'store/cache';
 
-export function TeamWebsites({ teamId }) {
+export function TeamWebsites({ teamId, readOnly }: { teamId: string; readOnly: boolean }) {
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const { get } = useApi();
@@ -24,7 +24,7 @@ export function TeamWebsites({ teamId }) {
   });
 
   const handleChange = () => {
-    queryResult.refetch();
+    queryResult.query.refetch();
   };
 
   return (
@@ -43,7 +43,9 @@ export function TeamWebsites({ teamId }) {
         </ModalTrigger>
       </ActionForm>
       <DataTable queryResult={queryResult}>
-        {({ data }) => <TeamWebsitesTable data={data} onRemove={handleChange} />}
+        {({ data }) => (
+          <TeamWebsitesTable data={data} onRemove={handleChange} readOnly={readOnly} />
+        )}
       </DataTable>
     </>
   );

src/app/(main)/settings/teams/[id]/TeamWebsitesTable.tsx

@@ -4,7 +4,15 @@ import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
 
-export function TeamWebsitesTable({ data = [], onRemove }) {
+export function TeamWebsitesTable({
+  data = [],
+  readOnly,
+  onRemove,
+}: {
+  data: any[];
+  readOnly: boolean;
+  onRemove: () => void;
+}) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
@@ -17,7 +25,7 @@ export function TeamWebsitesTable({ data = [], onRemove }) {
           const { id: teamId, teamUser } = row.teamWebsite[0].team;
           const { id: websiteId, userId } = row;
           const owner = teamUser[0];
-          const canRemove = user.id === userId || user.id === owner.userId;
+          const canRemove = !readOnly && (user.id === userId || user.id === owner.userId);
           return (
             <>
               {canRemove && (

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 => {

src/app/(main)/settings/websites/WebsiteAddButton.tsx

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

src/app/(main)/settings/websites/WebsiteAddForm.tsx

@@ -14,7 +14,9 @@ import useMessages from 'components/hooks/useMessages';
 export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClose?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) => post('/websites', data),
+  });
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
@@ -26,7 +28,7 @@ export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClo
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error as string}>
+    <Form onSubmit={handleSubmit} error={error}>
       <FormRow label={formatMessage(labels.name)}>
         <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
           <TextField autoComplete="off" />
@@ -48,7 +50,7 @@ export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClo
           {formatMessage(labels.save)}
         </SubmitButton>
         {onClose && (
-          <Button disabled={isLoading} onClick={onClose}>
+          <Button disabled={isPending} onClick={onClose}>
             {formatMessage(labels.cancel)}
           </Button>
         )}

src/app/(main)/settings/websites/WebsiteSettings.js

@@ -20,7 +20,7 @@ export function WebsiteSettings({ websiteId, openExternal = false, analyticsUrl
     queryKey: ['website', websiteId],
     queryFn: () => get(`/websites/${websiteId}`),
     enabled: !!websiteId,
-    cacheTime: 0,
+    gcTime: 0,
   });
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -1,8 +1,18 @@
+import { ReactNode } from 'react';
 import Link from 'next/link';
 import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 
+export interface WebsitesTableProps {
+  data: any[];
+  showTeam?: boolean;
+  showActions?: boolean;
+  allowEdit?: boolean;
+  allowView?: boolean;
+  children?: ReactNode;
+}
+
 export function WebsitesTable({
   data = [],
   showTeam,
@@ -10,7 +20,7 @@ export function WebsitesTable({
   allowEdit,
   allowView,
   children,
-}) {
+}: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const breakpoint = useBreakpoint();

src/app/(main)/settings/websites/[id]/ShareUrl.tsx

@@ -20,9 +20,9 @@ export function ShareUrl({ websiteId, data, analyticsUrl, onSave }) {
   const { name, shareId } = data;
   const [id, setId] = useState(shareId);
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation(({ shareId }) =>
-    post(`/websites/${websiteId}`, { shareId }),
-  );
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
+  });
   const ref = useRef(null);
   const url = useMemo(
     () =>
@@ -32,7 +32,7 @@ export function ShareUrl({ websiteId, data, analyticsUrl, onSave }) {
     [id, name],
   );
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         onSave(data);
@@ -50,7 +50,7 @@ export function ShareUrl({ websiteId, data, analyticsUrl, onSave }) {
     setId(id);
   };
 
-  const handleCheck = checked => {
+  const handleCheck = (checked: boolean) => {
     const data = { shareId: checked ? generateId() : null };
     mutate(data, {
       onSuccess: async () => {

src/app/(main)/settings/websites/[id]/TrackingCode.tsx

@@ -2,7 +2,13 @@ import { TextArea } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useConfig from 'components/hooks/useConfig';
 
-export function TrackingCode({ websiteId, analyticsUrl }) {
+export function TrackingCode({
+  websiteId,
+  analyticsUrl,
+}: {
+  websiteId: string;
+  analyticsUrl: string;
+}) {
   const { formatMessage, messages } = useMessages();
   const config = useConfig();
 

src/app/(main)/settings/websites/[id]/WebsiteData.tsx

@@ -3,7 +3,13 @@ import WebsiteDeleteForm from './WebsiteDeleteForm';
 import WebsiteResetForm from './WebsiteResetForm';
 import useMessages from 'components/hooks/useMessages';
 
-export function WebsiteData({ websiteId, onSave }) {
+export function WebsiteData({
+  websiteId,
+  onSave,
+}: {
+  websiteId: string;
+  onSave?: (value: string) => void;
+}) {
   const { formatMessage, labels, messages } = useMessages();
 
   const handleReset = async () => {

src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx

@@ -12,10 +12,20 @@ import useMessages from 'components/hooks/useMessages';
 
 const CONFIRM_VALUE = 'DELETE';
 
-export function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
+export function WebsiteDeleteForm({
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  websiteId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { del, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => del(`/websites/${websiteId}`, data));
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => del(`/websites/${websiteId}`, data),
+  });
 
   const handleSubmit = async data => {
     mutate(data, {

src/app/(main)/settings/websites/[id]/WebsiteEditForm.tsx

@@ -4,10 +4,20 @@ import useApi from 'components/hooks/useApi';
 import { DOMAIN_REGEX } from 'lib/constants';
 import useMessages from 'components/hooks/useMessages';
 
-export function WebsiteEditForm({ websiteId, data, onSave }) {
+export function WebsiteEditForm({
+  websiteId,
+  data,
+  onSave,
+}: {
+  websiteId: string;
+  data: any[];
+  onSave?: (data: any) => void;
+}) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
+  });
   const ref = useRef(null);
 
   const handleSubmit = async data => {

src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx

@@ -12,12 +12,22 @@ import useMessages from 'components/hooks/useMessages';
 
 const CONFIRM_VALUE = 'RESET';
 
-export function WebsiteResetForm({ websiteId, onSave, onClose }) {
+export function WebsiteResetForm({
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  websiteId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => post(`/websites/${websiteId}/reset`, data));
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/websites/${websiteId}/reset`, data),
+  });
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         onSave();