Updated query hooks for teams and websites.

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

@@ -1,35 +1,33 @@
-import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi, useMessages } from 'components/hooks';
+import ConfirmationForm from 'components/common/ConfirmationForm';
+import { touch } from 'store/cache';
 
 export function UserDeleteForm({ userId, username, onSave, onClose }) {
-  const { formatMessage, FormattedMessage, labels, messages } = useMessages();
+  const { FormattedMessage, messages, labels, formatMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
 
-  const handleSubmit = async (data: any) => {
-    mutate(data, {
+  const handleConfirm = async () => {
+    mutate(null, {
       onSuccess: async () => {
-        onSave();
-        onClose();
+        touch('users');
+        onSave?.();
+        onClose?.();
       },
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <p>
+    <ConfirmationForm
+      message={
         <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{username}</b> }} />
-      </p>
-      <FormButtons flex>
-        <SubmitButton variant="danger" disabled={isPending}>
-          {formatMessage(labels.delete)}
-        </SubmitButton>
-        <Button disabled={isPending} onClick={onClose}>
-          {formatMessage(labels.cancel)}
-        </Button>
-      </FormButtons>
-    </Form>
+      }
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      buttonLabel={formatMessage(labels.delete)}
+      isLoading={isPending}
+      error={error}
+    />
   );
 }