Merge remote-tracking branch 'origin/fix/last_tasks'

client/src/containers/Dialogs/UserFormDialog.js

@@ -13,11 +13,11 @@ import {
 import { objectKeysTransform } from 'utils';
 import { pick, snakeCase } from 'lodash';
 import classNames from 'classnames';
+import { queryCache, useQuery } from 'react-query';
 
 import AppToaster from 'components/AppToaster';
 import DialogReduxConnect from 'components/DialogReduxConnect';
 import ErrorMessage from 'components/ErrorMessage';
-import useAsync from 'hooks/async';
 import UserFormDialogConnect from 'connectors/UserFormDialog.connector';
 import { compose } from 'utils';
 
@@ -30,12 +30,12 @@ function UserFormDialog({
   closeDialog,
 }) {
   const { formatMessage } = useIntl();
-  const fetchHook = useAsync(async () => {
-    await Promise.all([
-      ...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
-    ]);
-  }, false);
 
+  const fetchHook = useQuery(
+    payload.action === 'edit' && ['user', payload.user.id],
+    (key, id) => requestFetchUser(id),
+    { manual: true },
+  );
   const validationSchema = Yup.object().shape({
     email: Yup.string()
       .email()
@@ -63,23 +63,31 @@ function UserFormDialog({
     enableReinitialize: true,
     initialValues,
     validationSchema,
-    onSubmit: (values) => {
+    onSubmit: (values, { setSubmitting }) => {
       const form = { ...values };
 
-      requestSubmitInvite(form).then((response) => {
-        AppToaster.show({
-          message: formatMessage({
-            id: 'teammate_invited_to_organization_account',
-          }),
-          intent: Intent.SUCCESS,
+      requestSubmitInvite(form)
+        .then((response) => {
+          closeDialog(name);
+          AppToaster.show({
+            message: formatMessage({
+              id: 'teammate_invited_to_organization_account',
+            }),
+            intent: Intent.SUCCESS,
+          });
+          setSubmitting(false);
+          queryCache.refetchQueries('users-table', { force: true });
+        })
+        .catch((errors) => {
+          setSubmitting(false);
         });
-        closeDialog(name);
-      });
     },
   });
-  const onDialogOpening = () => {
-    fetchHook.execute();
-  };
+
+  // Handle the dialog opening.
+  const onDialogOpening = useCallback(() => {
+    fetchHook.refetch();
+  }, [fetchHook]);
 
   const onDialogClosed = useCallback(() => {
     resetForm();
@@ -104,6 +112,7 @@ function UserFormDialog({
         'dialog--loading': fetchHook.pending,
         'dialog--invite-form': true,
       })}
+      //
       autoFocus={true}
       canEscapeKeyClose={true}
       isOpen={isOpen}