fix issues in users list.

client/src/containers/Dialogs/InviteUserDialog.js

@@ -12,6 +12,7 @@ import {
 } from '@blueprintjs/core';
 import { objectKeysTransform } from 'utils';
 import { pick, snakeCase } from 'lodash';
+import { queryCache } from 'react-query';
 
 import AppToaster from 'components/AppToaster';
 
@@ -80,6 +81,7 @@ function InviteUserDialog({
               message: formatMessage({id:'the_user_details_has_been_updated'}),
             });
             setSubmitting(false);
+            queryCache.refetchQueries('users-table',{force:true})
           })
           .catch((error) => {
             setSubmitting(false);
@@ -97,14 +99,15 @@ function InviteUserDialog({
     formik.resetForm();
   }, [formik.resetForm]);
 
-  const handleClose = () => {
-    closeDialog(name);
-  };
+ // Handles dialog close.
+ const handleClose = useCallback(() => {
+  closeDialog(name);
+}, [closeDialog, name]);
 
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? <T id={'edit_invite'} /> : ''}
+      title={payload.action === 'edit' ? <T id={'edit_user'} /> : ''}
       className={classNames({
         'dialog--loading': fetchHook.pending,
         'dialog--invite-user': true,
@@ -115,6 +118,7 @@ function InviteUserDialog({
       isLoading={fetchHook.pending}
       onClosed={onDialogClosed}
       onOpening={onDialogOpening}
+      onClose={handleClose}
     >
       <form onSubmit={formik.handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
@@ -179,7 +183,7 @@ function InviteUserDialog({
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
             <Button onClick={handleClose}><T id={'close'}/></Button>
-            <Button intent={Intent.PRIMARY} type='submit'>
+            <Button intent={Intent.PRIMARY} type='submit' disabled={formik.isSubmitting} >
               {payload.action === 'edit' ? <T id={'edit'}/> : ''}
             </Button>
           </div>

client/src/containers/Dialogs/UserFormDialog.js

@@ -1,4 +1,4 @@
-import React, {useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
@@ -37,7 +37,10 @@ function UserFormDialog({
   }, false);
 
   const validationSchema = Yup.object().shape({
-    email: Yup.string().email().required().label(formatMessage({id:'email'})),
+    email: Yup.string()
+      .email()
+      .required()
+      .label(formatMessage({ id: 'email' })),
   });
 
   const initialValues = {
@@ -45,7 +48,7 @@ function UserFormDialog({
     ...(payload.action === 'edit' &&
       pick(
         objectKeysTransform(payload.user, snakeCase),
-        Object.keys(validationSchema.fields)
+        Object.keys(validationSchema.fields),
       )),
   };
 
@@ -82,7 +85,10 @@ function UserFormDialog({
     resetForm();
   }, [resetForm]);
 
-  const handleClose = () => { closeDialog(name); };
+  // Handles dialog close.
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [closeDialog, name]);
 
   return (
     <Dialog
@@ -104,10 +110,11 @@ function UserFormDialog({
       isLoading={fetchHook.pending}
       onClosed={onDialogClosed}
       onOpening={onDialogOpening}
+      onClose={handleClose}
     >
       <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
-          <p class='mb2'>
+          <p class="mb2">
             <T id={'your_access_to_your_team'} />
           </p>
 
@@ -115,7 +122,7 @@ function UserFormDialog({
             label={<T id={'email'} />}
             className={classNames('form-group--email', Classes.FILL)}
             intent={errors.email && touched.email && Intent.DANGER}
-            helperText={<ErrorMessage name='email' {...{ errors, touched }} />}
+            helperText={<ErrorMessage name="email" {...{ errors, touched }} />}
             inline={true}
           >
             <InputGroup
@@ -128,9 +135,19 @@ function UserFormDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'cancel'} /></Button>
-            <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
-              {payload.action === 'edit' ? <T id={'edit'} /> : <T id={'invite'} />}
+            <Button onClick={handleClose}>
+              <T id={'cancel'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'invite'} />
+              )}
             </Button>
           </div>
         </div>
@@ -141,5 +158,5 @@ function UserFormDialog({
 
 export default compose(
   UserFormDialogConnect,
-  DialogReduxConnect
+  DialogReduxConnect,
 )(UserFormDialog);