fix issues in users list.

client/package.json

@@ -28,6 +28,7 @@
     "basscss": "^8.0.2",
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "cross-env": "^7.0.2",
     "css-loader": "3.4.2",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
@@ -101,6 +102,7 @@
   },
   "scripts": {
     "start": "PORT=8000 node scripts/start.js",
+    "start-win": "cross-env PORT=8000 node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
     "flow": "flow"

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 = () => {
+ // 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 onClick={handleClose}>
-            <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
+              <T id={'cancel'} />
-              {payload.action === 'edit' ? <T id={'edit'} /> : <T id={'invite'} />}
+            </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);

client/src/containers/Preferences/Users/UsersList.js

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { useQuery } from 'react-query';
+import { queryCache,useQuery } from 'react-query';
 import DataTable from 'components/DataTable';
 import {
   Alert,
@@ -10,10 +10,14 @@ import {
   MenuDivider,
   Position,
   Intent,
-  Tag
+  Tag,
 } from '@blueprintjs/core';
 import { snakeCase } from 'lodash';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
 
 import Icon from 'components/Icon';
 import LoadingIndicator from 'components/LoadingIndicator';
@@ -27,7 +31,6 @@ import withUsersActions from 'containers/Users/withUsersActions';
 
 import { compose } from 'utils';
 
-
 function UsersListPreferences({
   // #withDialog
   openDialog,
@@ -46,9 +49,8 @@ function UsersListPreferences({
 }) {
   const [deleteUserState, setDeleteUserState] = useState(false);
   const [inactiveUserState, setInactiveUserState] = useState(false);
-  const { formatMessage } = useIntl()
+  const { formatMessage } = useIntl();
-  const fetchUsers = useQuery('users-table',
+  const fetchUsers = useQuery('users-table', () => requestFetchUsers());
-    () => requestFetchUsers());
 
   const onInactiveUser = (user) => {
     setInactiveUserState(user);
@@ -63,9 +65,18 @@ function UsersListPreferences({
   const handleConfirmUserActive = useCallback(() => {
     requestInactiveUser(inactiveUserState.id).then(() => {
       setInactiveUserState(false);
-      AppToaster.show({ message: formatMessage({id:'the_user_has_been_successfully_inactivated'}) });
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_user_has_been_successfully_inactivated',
+        }),
       });
-  }, [inactiveUserState, requestInactiveUser, requestFetchUsers,formatMessage]);
+    });
+  }, [
+    inactiveUserState,
+    requestInactiveUser,
+    requestFetchUsers,
+    formatMessage,
+  ]);
 
   const onDeleteUser = (user) => {
     setDeleteUserState(user);
@@ -75,16 +86,6 @@ function UsersListPreferences({
     setDeleteUserState(false);
   };
 
-  const onEditInviteUser = (user) => () => {
-    const form = Object.keys(user).reduce((obj, key) => {
-      const camelKey = snakeCase(key);
-      obj[camelKey] = user[key];
-      return obj;
-    }, {});
-
-    openDialog('user-form', { action: 'edit', user: form });
-  };
-
   const onEditUser = (user) => () => {
     const form = Object.keys(user).reduce((obj, key) => {
       const camelKey = snakeCase(key);
@@ -95,54 +96,77 @@ function UsersListPreferences({
     openDialog('userList-form', { action: 'edit', user: form });
   };
 
-  const handleConfirmUserDelete = () => {
+  // Handle confirm User delete
-    if (!deleteUserState) { return; }
+
+  const handleConfirmUserDelete =useCallback(()=>{
+    if (!deleteUserState) {
+      return;
+    }
     requestDeleteUser(deleteUserState.id).then((response) => {
       setDeleteUserState(false);
       AppToaster.show({
-        message: formatMessage({id:'the_user_has_been_successfully_deleted'}),
+        message: formatMessage({
+          id: 'the_user_has_been_successfully_deleted',
+        }),
+        intent:Intent.SUCCESS,
       });
-    });
+      queryCache.refetchQueries('users-table',{force:true})
-  };
+    }).catch((errors)=>{
+      setDeleteUserState(false)
+    })
+  },[deleteUserState,requestDeleteUser,formatMessage])
+
 
   const actionMenuList = useCallback(
     (user) => (
       <Menu>
         <MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
-        <MenuDivider />
+        <MenuItem
-        <MenuItem text={<T id={'edit_invite'} />} onClick={onEditInviteUser(user)} />
+          text={<T id={'inactivate_user'} />}
-        <MenuItem text={<T id={'inactivate_user'} />} onClick={() => onInactiveUser(user)} />
+          onClick={() => onInactiveUser(user)}
-        <MenuItem text={<T id={'delete_user'} />} onClick={() => onDeleteUser(user)} />
+        />
+        <MenuItem
+          text={<T id={'delete_user'} />}
+          onClick={() => onDeleteUser(user)}
+        />
       </Menu>
     ),
-    []
+    [],
   );
 
-  const columns = useMemo(() => [
+  const columns = useMemo(
+    () => [
       {
         id: 'full_name',
-      Header:formatMessage({id:'full_name'}),
+        Header: formatMessage({ id: 'full_name' }),
         accessor: 'full_name',
-      width: 170,
+        width: 150,
       },
       {
         id: 'email',
-      Header: formatMessage({id:'email'}),
+        Header: formatMessage({ id: 'email' }),
         accessor: 'email',
         width: 150,
       },
       {
         id: 'phone_number',
-      Header: formatMessage({id:'phone_number'}),
+        Header: formatMessage({ id: 'phone_number' }),
         accessor: 'phone_number',
-      width: 150,
+        width: 120,
       },
       {
         id: 'active',
         Header: 'Status',
-      accessor: (user) => user.active ?
+        accessor: (user) =>
-        <Tag intent={Intent.SUCCESS} minimal={true}><T id={'activate'} /></Tag> :
+          user.active ? (
-        <Tag intent={Intent.WARNING} minimal={true}><T id={'inactivate'} /></Tag>,
+            <Tag intent={Intent.SUCCESS} minimal={true}>
+              <T id={'activate'} />
+            </Tag>
+          ) : (
+            <Tag intent={Intent.WARNING} minimal={true}>
+              <T id={'inactivate'} />
+            </Tag>
+          ),
         width: 50,
         className: 'status',
       },
@@ -154,13 +178,15 @@ function UsersListPreferences({
             content={actionMenuList(cell.row.original)}
             position={Position.RIGHT_TOP}
           >
-          <Button icon={<Icon icon='ellipsis-h' />} />
+            <Button icon={<Icon icon="ellipsis-h" />} />
           </Popover>
         ),
         className: 'actions',
         width: 50,
       },
-  ], [actionMenuList,formatMessage]);
+    ],
+    [actionMenuList, formatMessage],
+  );
 
   const handelDataTableFetchData = useCallback(() => {
     onFetchData && onFetchData();
@@ -178,32 +204,31 @@ function UsersListPreferences({
       />
 
       <Alert
-        cancelButtonText={<T id={'cancel'}/>}
+        cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={<T id={'move_to_trash'}/>}
+        confirmButtonText={<T id={'delete'} />}
-        icon='trash'
+        icon="trash"
         intent={Intent.DANGER}
         isOpen={deleteUserState}
         onCancel={handleCancelUserDelete}
         onConfirm={handleConfirmUserDelete}
       >
         <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be
+          <FormattedHTMLMessage
-          able to restore it later, but it will become private to you.
+            id={'once_delete_this_account_you_will_able_to_restore_it'}
+          />
         </p>
       </Alert>
 
       <Alert
-        cancelButtonText={<T id={'cancel'}/>}
+        cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={<T id={'inactivate'}/>}
+        confirmButtonText={<T id={'inactivate'} />}
-        icon='trash'
         intent={Intent.WARNING}
         isOpen={inactiveUserState}
         onCancel={handleCancelInactiveUser}
         onConfirm={handleConfirmUserActive}
       >
         <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be
+          <T id={'are_sure_to_inactive_this_account'} />
-          able to restore it later, but it will become private to you.
         </p>
       </Alert>
     </LoadingIndicator>

client/src/lang/en/index.js

@@ -77,17 +77,16 @@ export default {
   new_exchange_rate: 'New Exchange Rate',
   delete_exchange_rate: 'Delete Exchange Rate',
   exchange_rate: 'Exchange Rate',
-  edit_invite: 'Edit invite',
   edit_category: 'Edit Category',
   delete_category: 'Delete Category',
   new_category: 'New Category',
   category_name: 'Category Name',
   parent_category: 'Parent Category',
   new: 'New',
-  invite_user: 'invite User',
+  invite_user: 'Invite User',
   your_access_to_your_team:
     'Your teammate will get an email that gives them access to your team.',
-  invite: 'invite',
+  invite: 'Invite',
   count: 'Count',
   item_type: 'Item Type',
   item_name: 'Item Name',

client/src/style/pages/invite-form.scss

@@ -1,18 +1,20 @@
-
 .dialog--invite-form {
-  &.bp3-dialog {
   width: 450px;
-  }
+
-  &:not(.dialog--loading) .bp3-dialog-body {
-    margin-bottom: 25px;
-  }
   .bp3-dialog-body {
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        min-width: 70px;
+      }
+      .bp3-form-content {
+        width: 250px;
 
         .bp3-dialog-footer-actions {
-      margin-right: 30px;
+          margin-right: 20px;
           display: flex;
           justify-content: flex-end;
         }
       }
+    }
+  }
 }
-