WIP Fix & last tasks

client/src/containers/Dialogs/AccountFormDialog.js

@@ -28,8 +28,7 @@ import Icon from 'components/Icon';
 import ErrorMessage from 'components/ErrorMessage';
 import { fetchAccountTypes } from 'store/accounts/accounts.actions';
 
-
-import {ListSelect} from 'components';
+import { ListSelect } from 'components';
 
 function AccountFormDialog({
   name,
@@ -52,15 +51,18 @@ function AccountFormDialog({
 
   // #withDialog
   closeDialog,
-}) { 
+}) {
   const { formatMessage } = useIntl();
   const accountFormValidationSchema = Yup.object().shape({
-    name: Yup.string().required().label(formatMessage({id:'account_name_'})),
+    name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'account_name_' })),
     code: Yup.number(),
     account_type_id: Yup.string()
       .nullable()
-      .required().label(formatMessage({id:'account_type_id'})),
-    description: Yup.string().trim()
+      .required()
+      .label(formatMessage({ id: 'account_type_id' })),
+    description: Yup.string().trim(),
   });
 
   const initialValues = useMemo(
@@ -69,14 +71,14 @@ function AccountFormDialog({
       name: '',
       description: '',
     }),
-    []
+    [],
   );
 
   const [selectedAccountType, setSelectedAccountType] = useState(null);
   const [selectedSubaccount, setSelectedSubaccount] = useState(
     payload.action === 'new_child'
       ? accounts.find((a) => a.id === payload.id)
-      : null
+      : null,
   );
 
   const transformApiErrors = (errors) => {
@@ -96,48 +98,67 @@ function AccountFormDialog({
     validationSchema: accountFormValidationSchema,
     onSubmit: (values, { setSubmitting, setErrors }) => {
       const exclude = ['subaccount'];
-      const toastAccountName = (values.code) ? `${values.code} - ${values.name}` : values.name;
+      const toastAccountName = values.code
+        ? `${values.code} - ${values.name}`
+        : values.name;
 
       if (payload.action === 'edit') {
         requestEditAccount({
           payload: payload.id,
-          form: { ...omit(values, [...exclude, 'account_type_id']) }
+          form: { ...omit(values, [...exclude, 'account_type_id']) },
         }).then((response) => {
           closeDialog(name);
           AppToaster.show({
-            message: formatMessage({
-              id: 'service_has_been_successful_edited',
-            }, {
-              name: toastAccountName,
-              service: formatMessage({ id: 'account' }),
-            }),
+            message: formatMessage(
+              {
+                id: 'service_has_been_successful_edited',
+              },
+              {
+                name: toastAccountName,
+                service: formatMessage({ id: 'account' }),
+              },
+            ),
             intent: Intent.SUCCESS,
           });
         });
       } else {
-        requestSubmitAccount({ form: { ...omit(values, exclude) } }).then((response) => {
-          closeDialog(name);
-          AppToaster.show({
-            message: formatMessage({
-              id: 'service_has_been_successful_created',  
-            }, {
-              name: toastAccountName,
-              service: formatMessage({ id: 'account' }),
-            }),
-            intent: Intent.SUCCESS,
-            position: Position.BOTTOM,
-          });
-        });
+        requestSubmitAccount({ form: { ...omit(values, exclude) } }).then(
+          (response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: formatMessage(
+                {
+                  id: 'service_has_been_successful_created',
+                },
+                {
+                  name: toastAccountName,
+                  service: formatMessage({ id: 'account' }),
+                },
+              ),
+              intent: Intent.SUCCESS,
+              position: Position.BOTTOM,
+            });
+          },
+        );
       }
     },
   });
   const { errors, values, touched } = useMemo(() => formik, [formik]);
 
+  // const filteredAccounts = accounts.filter(
+  //   (account) => account.accountTypeId === formik.values.account_type_id,
+  // );
+
+  const filteredAccounts = accounts.filter((account) => {
+    return account.account_type_id === values.account_type_id;
+  });
+  console.log(filteredAccounts, 'ERR');
+  console.log(accounts,'ER/u');
   // Set default account type.
   useEffect(() => {
     if (account && account.account_type_id) {
       const defaultType = accountsTypes.find(
-        (t) => t.id === account.account_type_id
+        (t) => t.id === account.account_type_id,
       );
 
       defaultType && setSelectedAccountType(defaultType);
@@ -187,7 +208,7 @@ function AccountFormDialog({
         );
       }
     },
-    []
+    [],
   );
 
   // Handles dialog close.
@@ -199,7 +220,7 @@ function AccountFormDialog({
   const fetchAccountsList = useQuery(
     'accounts-list',
     () => requestFetchAccounts(),
-    { manual: true }
+    { manual: true },
   );
 
   // Fetches accounts types.
@@ -208,14 +229,14 @@ function AccountFormDialog({
     async () => {
       await requestFetchAccountTypes();
     },
-    { manual: true }
+    { manual: true },
   );
 
   // Fetch the given account id on edit mode.
   const fetchAccount = useQuery(
     payload.action === 'edit' && ['account', payload.id],
     (key, id) => requestFetchAccount(id),
-    { manual: true }
+    { manual: true },
   );
 
   const isFetching =
@@ -228,13 +249,13 @@ function AccountFormDialog({
     fetchAccountsList.refetch();
     fetchAccountsTypes.refetch();
     fetchAccount.refetch();
-  }, [ fetchAccount, fetchAccountsList, fetchAccountsTypes]);
+  }, [fetchAccount, fetchAccountsList, fetchAccountsTypes]);
 
   const onChangeAccountType = useCallback(
     (accountType) => {
       formik.setFieldValue('account_type_id', accountType.id);
     },
-    [formik]
+    [formik],
   );
 
   // Handles change sub-account.
@@ -243,7 +264,7 @@ function AccountFormDialog({
       setSelectedSubaccount(account);
       formik.setFieldValue('parent_account_id', account.id);
     },
-    [setSelectedSubaccount, formik]
+    [setSelectedSubaccount, formik],
   );
 
   const onDialogClosed = useCallback(() => {
@@ -252,22 +273,28 @@ function AccountFormDialog({
     setSelectedAccountType(null);
   }, [formik]);
 
-  const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);
+  const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
 
   const subAccountLabel = useMemo(() => {
     return (
       <span>
-        <T id={'sub_account'}/> <Icon icon='info-circle' iconSize={12} />
+        <T id={'sub_account'} /> <Icon icon="info-circle" iconSize={12} />
       </span>
     );
   }, []);
 
-  const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
+  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
 
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? <T id={'edit_account'}/> : <T id={'new_account'}/>}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_account'} />
+        ) : (
+          <T id={'new_account'} />
+        )
+      }
       className={{
         'dialog--loading': isFetching,
         'dialog--account-form': true,
@@ -283,41 +310,40 @@ function AccountFormDialog({
       <form onSubmit={formik.handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={<T id={'account_type'}/>}
+            label={<T id={'account_type'} />}
             labelInfo={requiredSpan}
             className={classNames(
               'form-group--account-type',
               'form-group--select-list',
-              Classes.FILL
+              Classes.FILL,
             )}
             inline={true}
-            helperText={<ErrorMessage name='account_type_id' {...formik} />}
+            helperText={<ErrorMessage name="account_type_id" {...formik} />}
             intent={
               errors.account_type_id && touched.account_type_id && Intent.DANGER
             }
           >
             <ListSelect
               items={accountsTypes}
-              noResults={<MenuItem disabled={true} text='No results.' />}
+              noResults={<MenuItem disabled={true} text="No results." />}
               itemRenderer={accountTypeItem}
               itemPredicate={filterAccountTypeItems}
               popoverProps={{ minimal: true }}
               onItemSelect={onChangeAccountType}
-
               selectedItem={formik.values.account_type_id}
               selectedItemProp={'id'}
-              
               defaultText={<T id={'select_account_type'} />}
               labelProp={'name'}
-              buttonProps={{ disabled: payload.action === 'edit' }} />
+              buttonProps={{ disabled: payload.action === 'edit' }}
+            />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'account_name'}/>}
+            label={<T id={'account_name'} />}
             labelInfo={requiredSpan}
             className={'form-group--account-name'}
             intent={errors.name && touched.name && Intent.DANGER}
-            helperText={<ErrorMessage name='name' {...formik} />}
+            helperText={<ErrorMessage name="name" {...formik} />}
             inline={true}
           >
             <InputGroup
@@ -328,10 +354,10 @@ function AccountFormDialog({
           </FormGroup>
 
           <FormGroup
-            label={<T id={'account_code'}/>}
+            label={<T id={'account_code'} />}
             className={'form-group--account-code'}
             intent={errors.code && touched.code && Intent.DANGER}
-            helperText={<ErrorMessage name='code' {...formik} />}
+            helperText={<ErrorMessage name="code" {...formik} />}
             inline={true}
             labelInfo={infoIcon}
           >
@@ -356,37 +382,31 @@ function AccountFormDialog({
 
           {values.subaccount && (
             <FormGroup
-              label={<T id={'parent_account'}/>}
+              label={<T id={'parent_account'} />}
               className={classNames(
                 'form-group--parent-account',
                 'form-group--select-list',
-                Classes.FILL
+                Classes.FILL,
               )}
               inline={true}
             >
-              <Select
-                items={accounts}
-                noResults={<MenuItem disabled={true} text='No results.' />}
+              <ListSelect
+                items={filteredAccounts}
+                noResults={<MenuItem disabled={true} text="No results." />}
                 itemRenderer={accountItem}
                 itemPredicate={filterAccountsPredicater}
                 popoverProps={{ minimal: true }}
                 onItemSelect={onChangeSubaccount}
-                {...formik.getFieldProps('parent_account_id')}
-              >
-                <Button
-                  rightIcon='caret-down'
-                  text={
-                    selectedSubaccount
-                      ? selectedSubaccount.name
-                      : <T id={'select_parent_account'}/>
-                  }
-                />
-              </Select>
+                selectedItem={formik.values.parent_account_id}
+                selectedItemProp={'id'}
+                defaultText={<T id={'select_parent_account'} />}
+                labelProp={'name'}
+              />
             </FormGroup>
           )}
 
           <FormGroup
-            label={<T id={'description'}/>}
+            label={<T id={'description'} />}
             className={'form-group--description'}
             intent={formik.errors.description && Intent.DANGER}
             helperText={formik.errors.description && formik.errors.credential}
@@ -402,13 +422,19 @@ function AccountFormDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'close'}/></Button>
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
             <Button
               intent={Intent.PRIMARY}
               disabled={formik.isSubmitting}
-              type='submit'
+              type="submit"
             >
-              {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'submit'} />
+              )}
             </Button>
           </div>
         </div>

client/src/containers/Dialogs/CurrencyDialog.js

@@ -9,11 +9,10 @@ import {
 import * as Yup from 'yup';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import { connect } from 'react-redux';
 import { pick } from 'lodash';
 
-
 import AppToaster from 'components/AppToaster';
 import Dialog from 'components/Dialog';
 import DialogReduxConnect from 'components/DialogReduxConnect';
@@ -27,8 +26,6 @@ import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 
 import { compose } from 'utils';
 
-
-
 function CurrencyDialog({
   name,
   payload,
@@ -46,18 +43,28 @@ function CurrencyDialog({
   requestSubmitCurrencies,
   requestEditCurrency,
 }) {
-  const {formatMessage} = useIntl();
+  const { formatMessage } = useIntl();
+
+    const fetchCurrencies = useQuery('currencies', () =>
+    requestFetchCurrencies(),
+  );
 
   const validationSchema = Yup.object().shape({
-    currency_name: Yup.string().required().label(formatMessage({id:'currency_name_'})),
+    currency_name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'currency_name_' })),
     currency_code: Yup.string()
       .max(4)
-      .required().label(formatMessage({id:'currency_code_'})),
+      .required()
+      .label(formatMessage({ id: 'currency_code_' })),
   });
-  const initialValues = useMemo(() => ({
-    currency_name: '',
-    currency_code: '',
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      currency_name: '',
+      currency_code: '',
+    }),
+    [],
+  );
 
   const {
     errors,
@@ -75,29 +82,37 @@ function CurrencyDialog({
     validationSchema: validationSchema,
     onSubmit: (values, { setSubmitting }) => {
       if (payload.action === 'edit') {
-        requestEditCurrency(currency.id, values).then((response) => {
-          closeDialog(name);
-          AppToaster.show({
-            message: formatMessage({id:'the_currency_has_been_successfully_edited'}),
-            intent: Intent.SUCCESS,
+        requestEditCurrency(currency.id, values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_currency_has_been_successfully_edited',
+              }),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            queryCache.refetchQueries('currencies', { force: true });
+          })
+          .catch((error) => {
+            setSubmitting(false);
           });
-          setSubmitting(false);
-        })
-        .catch((error) => {
-          setSubmitting(false);
-        });
       } else {
-        requestSubmitCurrencies(values).then((response) => {
-          closeDialog(name);
-          AppToaster.show({
-            message: formatMessage({id:'the_currency_has_been_successfully_created'}),
-            intent: Intent.SUCCESS,
+        requestSubmitCurrencies(values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_currency_has_been_successfully_created',
+              }),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            queryCache.refetchQueries('currencies', { force: true });
+          })
+          .catch((error) => {
+            setSubmitting(false);
           });
-          setSubmitting(false);
-        })
-        .catch((error) => {
-          setSubmitting(false);
-        });
       }
     },
   });
@@ -106,10 +121,6 @@ function CurrencyDialog({
     closeDialog(name);
   }, [name, closeDialog]);
 
-  const fetchCurrencies = useQuery('currencies',
-    () => { requestFetchCurrencies(); },
-    { manual: true });
-
   const onDialogOpening = useCallback(() => {
     fetchCurrencies.refetch();
   }, [fetchCurrencies]);
@@ -117,19 +128,25 @@ function CurrencyDialog({
   const onDialogClosed = useCallback(() => {
     resetForm();
     closeDialog(name);
-  }, [closeDialog, name,resetForm]);
+  }, [closeDialog, name, resetForm]);
 
   const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
 
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? <T id={'edit_currency'}/> : <T id={'new_currency'}/>}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_currency'} />
+        ) : (
+          <T id={'new_currency'} />
+        )
+      }
       className={classNames(
         {
           'dialog--loading': fetchCurrencies.isFetching,
         },
-        'dialog--currency-form'
+        'dialog--currency-form',
       )}
       isOpen={isOpen}
       onClosed={onDialogClosed}
@@ -140,31 +157,43 @@ function CurrencyDialog({
       <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={<T id={'currency_name'}/>}
+            label={<T id={'currency_name'} />}
             labelInfo={requiredSpan}
             className={'form-group--currency-name'}
-            intent={(errors.currency_name && touched.currency_name) && Intent.DANGER}
-            helperText={<ErrorMessage name='currency_name' {...{errors, touched}} />}
+            intent={
+              errors.currency_name && touched.currency_name && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name="currency_name" {...{ errors, touched }} />
+            }
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={(errors.currency_name && touched.currency_name) && Intent.DANGER}
+              intent={
+                errors.currency_name && touched.currency_name && Intent.DANGER
+              }
               {...getFieldProps('currency_name')}
             />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'currency_code'}/>}
+            label={<T id={'currency_code'} />}
             labelInfo={requiredSpan}
             className={'form-group--currency-code'}
-            intent={(errors.currency_code && touched.currency_code) && Intent.DANGER}
-            helperText={<ErrorMessage name='currency_code' {...{errors, touched}} />}
+            intent={
+              errors.currency_code && touched.currency_code && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name="currency_code" {...{ errors, touched }} />
+            }
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={(errors.currency_code && touched.currency_code) && Intent.DANGER}
+              intent={
+                errors.currency_code && touched.currency_code && Intent.DANGER
+              }
               {...getFieldProps('currency_code')}
             />
           </FormGroup>
@@ -172,9 +201,19 @@ function CurrencyDialog({
 
         <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={'submit'} /> }
+            <Button onClick={handleClose}>
+              <T id={'cancel'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'submit'} />
+              )}
             </Button>
           </div>
         </div>
@@ -190,8 +229,8 @@ const mapStateToProps = (state, props) => {
     name: 'currency-form',
     payload: { action: 'new', currencyCode: null, ...dialogPayload },
     currencyCode: dialogPayload?.currencyCode || null,
-  }
-}
+  };
+};
 
 const withCurrencyFormDialog = connect(mapStateToProps);
 

client/src/containers/Dialogs/ExchangeRateDialog.js

@@ -12,20 +12,19 @@ import { pick } from 'lodash';
 import * as Yup from 'yup';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
-import { Select } from '@blueprintjs/select';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import moment from 'moment';
 import { DateInput } from '@blueprintjs/datetime';
 import { momentFormatter } from 'utils';
 
 import AppToaster from 'components/AppToaster';
+
 import Dialog from 'components/Dialog';
 import ErrorMessage from 'components/ErrorMessage';
 import classNames from 'classnames';
-
+import { ListSelect } from 'components';
 import withExchangeRatesDialog from './ExchangeRateDialog.container';
 
-
 function ExchangeRateDialog({
   name,
   payload,
@@ -43,24 +42,37 @@ function ExchangeRateDialog({
   requestEditExchangeRate,
   requestFetchCurrencies,
   editExchangeRate,
-
 }) {
   const { formatMessage } = useIntl();
   const [selectedItems, setSelectedItems] = useState({});
 
   const validationSchema = Yup.object().shape({
-    exchange_rate: Yup.number().required().label(formatMessage({id:'exchange_rate_'})),
-    currency_code: Yup.string().max(3).required(formatMessage({id:'currency_code_'})),
-    date: Yup.date().required().label(formatMessage({id:'date'})),
+    exchange_rate: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'exchange_rate_' })),
+    currency_code: Yup.string()
+      .max(3)
+      .required(formatMessage({ id: 'currency_code_' })),
+    date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'date' })),
   });
 
-  const initialValues = useMemo(() => ({
-    exchange_rate: '',
-    currency_code: '',
-    date: moment(new Date()).format('YYYY-MM-DD'),
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      exchange_rate: '',
+      currency_code: '',
+      date: moment(new Date()).format('YYYY-MM-DD'),
+    }),
+    [],
+  );
+
+  const fetchExchangeRatesDialog = useQuery('exchange-rates-dialog', () =>
+    requestFetchExchangeRates(),
+  );
 
   const {
+    values,
     touched,
     errors,
     isSubmitting,
@@ -75,15 +87,19 @@ function ExchangeRateDialog({
       ...(payload.action === 'edit' &&
         pick(editExchangeRate, Object.keys(initialValues))),
     },
-    onSubmit: (values, { setSubmitting }) => {
+    onSubmit: (values, { setSubmitting, setErrors }) => {
       if (payload.action === 'edit') {
         requestEditExchangeRate(payload.id, values)
           .then((response) => {
             closeDialog(name);
             AppToaster.show({
-              message: formatMessage({id:'the_exchange_rate_has_been_successfully_edited'})
+              message: formatMessage({
+                id: 'the_exchange_rate_has_been_successfully_edited',
+              }),
+              intent: Intent.SUCCESS,
             });
             setSubmitting(false);
+            queryCache.removeQueries('exchange-rates-dialog', { force: true });
           })
           .catch((error) => {
             setSubmitting(false);
@@ -93,30 +109,40 @@ function ExchangeRateDialog({
           .then((response) => {
             closeDialog(name);
             AppToaster.show({
-              message: formatMessage({id:'the_exchange_rate_has_been_successfully_created'})
+              message: formatMessage({
+                id: 'the_exchange_rate_has_been_successfully_created',
+              }),
+              intent: Intent.SUCCESS,
             });
             setSubmitting(false);
+            queryCache.refetchQueries('exchange-rates-table', { force: true });
           })
-          .catch((error) => {
-            setSubmitting(false);
+          .catch((errors) => {
+            if (
+              errors.find((e) => e.type === 'EXCHANGE.RATE.DATE.PERIOD.DEFINED')
+            ) {
+              setErrors({
+                exchange_rate: formatMessage({
+                  id:
+                    'there_is_exchange_rate_in_this_date_with_the_same_currency',
+                }),
+              });
+            }
           });
       }
     },
   });
 
-  const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
+  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
 
   const handleClose = useCallback(() => {
     closeDialog(name);
   }, [name, closeDialog]);
 
-  const fetchExchangeRatesDialog = useQuery('exchange-rates-dialog',
-    () => requestFetchExchangeRates());
-
   const onDialogClosed = useCallback(() => {
     resetForm();
     closeDialog(name);
-  }, [closeDialog, name,resetForm]);
+  }, [closeDialog, name, resetForm]);
 
   const onDialogOpening = useCallback(() => {
     fetchExchangeRatesDialog.refetch();
@@ -127,7 +153,7 @@ function ExchangeRateDialog({
       const formatted = moment(date).format('YYYY-MM-DD');
       setFieldValue('date', formatted);
     },
-    [setFieldValue]
+    [setFieldValue],
   );
 
   const onItemsSelect = useCallback(
@@ -140,19 +166,19 @@ function ExchangeRateDialog({
         setFieldValue(filedName, filed.currency_code);
       };
     },
-    [setFieldValue, selectedItems]
+    [setFieldValue, selectedItems],
   );
 
-  const filterCurrencyCode = (query, currency_code, _index, exactMatch) => {
-    const normalizedTitle = currency_code.currency_code.toLowerCase();
+  const filterCurrencyCode = (query, currency, _index, exactMatch) => {
+    const normalizedTitle = currency.currency_code.toLowerCase();
     const normalizedQuery = query.toLowerCase();
 
     if (exactMatch) {
       return normalizedTitle === normalizedQuery;
     } else {
       return (
-        `${currency_code.currency_code} ${normalizedTitle}`.indexOf(
-          normalizedQuery
+        `${currency.currency_code} ${normalizedTitle}`.indexOf(
+          normalizedQuery,
         ) >= 0
       );
     }
@@ -169,20 +195,19 @@ function ExchangeRateDialog({
     );
   }, []);
 
-  const getSelectedItemLabel = useCallback((fieldName, defaultLabel) => {
-    return typeof selectedItems[fieldName] !== 'undefined'
-      ? selectedItems[fieldName].currency_code
-      : defaultLabel;
-  }, [selectedItems]);
-
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit'
-        ? <T id={'edit_exchange_rate'}/> : <T id={'new_exchange_rate'}/>}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_exchange_rate'} />
+        ) : (
+          <T id={'new_exchange_rate'} />
+        )
+      }
       className={classNames(
-        {'dialog--loading': fetchExchangeRatesDialog.isFetching},
-        'dialog--exchangeRate-form'
+        { 'dialog--loading': fetchExchangeRatesDialog.isFetching },
+        'dialog--exchangeRate-form',
       )}
       isOpen={isOpen}
       onClosed={onDialogClosed}
@@ -193,11 +218,11 @@ function ExchangeRateDialog({
       <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={<T id={'date'}/>}
+            label={<T id={'date'} />}
             inline={true}
             labelInfo={requiredSpan}
             intent={errors.date && touched.date && Intent.DANGER}
-            helperText={<ErrorMessage name='date' {...{errors, touched}} />}
+            helperText={<ErrorMessage name="date" {...{ errors, touched }} />}
           >
             <DateInput
               fill={true}
@@ -205,56 +230,71 @@ function ExchangeRateDialog({
               defaultValue={new Date()}
               onChange={handleDateChange}
               popoverProps={{ position: Position.BOTTOM }}
-              // disabled={payload.action === 'edit'}
+              disabled={payload.action === 'edit'}
             />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'exchange_rate'}/>}
+            label={<T id={'exchange_rate'} />}
             labelInfo={requiredSpan}
-            intent={errors.exchange_rate && touched.exchange_rate && Intent.DANGER}
-            helperText={<ErrorMessage name='exchange_rate' {...{errors, touched}} />}
+            intent={
+              errors.exchange_rate && touched.exchange_rate && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name="exchange_rate" {...{ errors, touched }} />
+            }
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={errors.exchange_rate && touched.exchange_rate && Intent.DANGER}
+              intent={
+                errors.exchange_rate && touched.exchange_rate && Intent.DANGER
+              }
               {...getFieldProps('exchange_rate')}
             />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'currency_code'}/>}
+            label={<T id={'currency_code'} />}
             labelInfo={requiredSpan}
             className={classNames('form-group--select-list', Classes.FILL)}
             inline={true}
-            intent={(errors.currency_code && touched.currency_code) && Intent.DANGER}
-            helperText={<ErrorMessage name='currency_code' {...{errors, touched}} />}
+            intent={
+              errors.currency_code && touched.currency_code && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name="currency_code" {...{ errors, touched }} />
+            }
           >
-            <Select
+            <ListSelect
               items={currenciesList}
-              noResults={<MenuItem disabled={true} text='No results.' />}
+              noResults={<MenuItem disabled={true} text="No results." />}
               itemRenderer={currencyCodeRenderer}
               itemPredicate={filterCurrencyCode}
               popoverProps={{ minimal: true }}
               onItemSelect={onItemsSelect('currency_code')}
-            >
-              <Button
-                rightIcon='caret-down'
-                fill={true}
-                text={getSelectedItemLabel(
-                  'currency_code',
-                  'select Currency Code'
-                )}
-              />
-            </Select>
+              selectedItem={values.currency_code}
+              selectedItemProp={'currency_code'}
+              defaultText={<T id={'select_currency_code'} />}
+              labelProp={'currency_code'}
+            />
           </FormGroup>
         </div>
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'close'}/></Button>
-            <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
-            {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'submit'} />
+              )}
             </Button>
           </div>
         </div>

client/src/containers/Dialogs/InviteUserDialog.js

@@ -41,12 +41,19 @@ function InviteUserDialog({
   }, false);
 
   const validationSchema = Yup.object().shape({
-    first_name: Yup.string().required().label(formatMessage({id:'first_name_'})),
-    last_name: Yup.string().required().label(formatMessage({id:'last_name_'})),
+    first_name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'first_name_' })),
+    last_name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'last_name_' })),
     email: Yup.string()
       .email()
-      .required().label(formatMessage({id:'email'})),
-    phone_number: Yup.number().required().label(formatMessage({id:'phone_number_'})),
+      .required()
+      .label(formatMessage({ id: 'email' })),
+    phone_number: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'phone_number_' })),
   });
 
   const initialValues = useMemo(
@@ -56,7 +63,7 @@ function InviteUserDialog({
       email: '',
       phone_number: '',
     }),
-    []
+    [],
   );
 
   const formik = useFormik({
@@ -65,7 +72,7 @@ function InviteUserDialog({
       ...(payload.action === 'edit' &&
         pick(
           objectKeysTransform(payload.user, snakeCase),
-          Object.keys(initialValues)
+          Object.keys(initialValues),
         )),
     },
     validationSchema,
@@ -78,10 +85,13 @@ function InviteUserDialog({
           .then((response) => {
             closeDialog(name);
             AppToaster.show({
-              message: formatMessage({id:'the_user_details_has_been_updated'}),
+              message: formatMessage({
+                id: 'the_user_details_has_been_updated',
+              }),
+              intent: Intent.SUCCESS,
             });
             setSubmitting(false);
-            queryCache.refetchQueries('users-table',{force:true})
+            queryCache.refetchQueries('users-table', { force: true });
           })
           .catch((error) => {
             setSubmitting(false);
@@ -99,10 +109,10 @@ function InviteUserDialog({
     formik.resetForm();
   }, [formik.resetForm]);
 
- // Handles dialog close.
- const handleClose = useCallback(() => {
-  closeDialog(name);
-}, [closeDialog, name]);
+  // Handles dialog close.
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [closeDialog, name]);
 
   return (
     <Dialog
@@ -126,7 +136,7 @@ function InviteUserDialog({
             label={<T id={'first_name'} />}
             className={'form-group--first-name'}
             intent={errors.first_name && touched.first_name && Intent.DANGER}
-            helperText={<ErrorMessage name='first_name' {...formik} />}
+            helperText={<ErrorMessage name="first_name" {...formik} />}
             inline={true}
           >
             <InputGroup
@@ -139,7 +149,7 @@ function InviteUserDialog({
             label={<T id={'last_name'} />}
             className={'form-group--last-name'}
             intent={errors.last_name && touched.last_name && Intent.DANGER}
-            helperText={<ErrorMessage name='last_name' {...formik} />}
+            helperText={<ErrorMessage name="last_name" {...formik} />}
             inline={true}
           >
             <InputGroup
@@ -152,7 +162,7 @@ function InviteUserDialog({
             label={<T id={'email'} />}
             className={'form-group--email'}
             intent={errors.email && touched.email && Intent.DANGER}
-            helperText={<ErrorMessage name='email' {...formik} />}
+            helperText={<ErrorMessage name="email" {...formik} />}
             inline={true}
           >
             <InputGroup
@@ -168,7 +178,7 @@ function InviteUserDialog({
             intent={
               errors.phone_number && touched.phone_number && Intent.DANGER
             }
-            helperText={<ErrorMessage name='phone_number' {...formik} />}
+            helperText={<ErrorMessage name="phone_number" {...formik} />}
             inline={true}
           >
             <InputGroup
@@ -182,9 +192,15 @@ 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' disabled={formik.isSubmitting} >
-              {payload.action === 'edit' ? <T id={'edit'}/> : ''}
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={formik.isSubmitting}
+            >
+              {payload.action === 'edit' ? <T id={'edit'} /> : ''}
             </Button>
           </div>
         </div>
@@ -195,5 +211,5 @@ function InviteUserDialog({
 
 export default compose(
   UserListDialogConnect,
-  DialogReduxConnect
+  DialogReduxConnect,
 )(InviteUserDialog);

client/src/containers/Dialogs/ItemCategoryDialog.js

@@ -6,7 +6,7 @@ import {
   InputGroup,
   Intent,
   TextArea,
-  MenuItem
+  MenuItem,
 } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import { pick } from 'lodash';
@@ -16,10 +16,11 @@ import { useFormik } from 'formik';
 import { compose } from 'utils';
 import { useQuery, queryCache } from 'react-query';
 import classNames from 'classnames';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 import AppToaster from 'components/AppToaster';
 import ErrorMessage from 'components/ErrorMessage';
+import { ListSelect } from 'components';
 
 import Dialog from 'components/Dialog';
 import DialogConnect from 'connectors/Dialog.connector';
@@ -32,7 +33,6 @@ import withItemCategoriesActions from 'containers/Items/withItemCategoriesAction
 
 import Icon from 'components/Icon';
 
-
 function ItemCategoryDialog({
   name,
   payload,
@@ -57,23 +57,30 @@ function ItemCategoryDialog({
   const [selectedParentCategory, setParentCategory] = useState(null);
   const { formatMessage } = useIntl();
 
-  const fetchList = useQuery(['items-categories-list'],
-    () => requestFetchItemCategories());
+  const fetchList = useQuery(['items-categories-list'], () =>
+    requestFetchItemCategories(),
+  );
 
   const validationSchema = Yup.object().shape({
-    name: Yup.string().required().label(formatMessage({id:'category_name_'})),
+    name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'category_name_' })),
     parent_category_id: Yup.string().nullable(),
-    description: Yup.string().trim()
+    description: Yup.string().trim(),
   });
 
-  const initialValues = useMemo(() => ({
-    name: '',
-    description: '',
-    parent_category_id: null
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      name: '',
+      description: '',
+      parent_category_id: null,
+    }),
+    [],
+  );
 
   // Formik
   const {
+    values,
     errors,
     touched,
     setFieldValue,
@@ -85,24 +92,28 @@ function ItemCategoryDialog({
     enableReinitialize: true,
     initialValues: {
       ...(payload.action === 'edit' &&
-        pick(itemCategory, Object.keys(initialValues)))
+        pick(itemCategory, Object.keys(initialValues))),
     },
     validationSchema,
     onSubmit: (values, { setSubmitting }) => {
       if (payload.action === 'edit') {
-        requestEditItemCategory(payload.id, values).then(response => {
-          closeDialog(name);
-          AppToaster.show({
-            message: formatMessage({
-              id: 'the_item_category_has_been_successfully_edited',
-            }),
-            intent: Intent.SUCCESS,
+        requestEditItemCategory(payload.id, values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_item_category_has_been_successfully_edited',
+              }),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            queryCache.refetchQueries('items-categories-table', {
+              force: true,
+            });
+          })
+          .catch((error) => {
+            setSubmitting(false);
           });
-          setSubmitting(false);
-          queryCache.refetchQueries('items-categories-table', { force: true });
-        }).catch((error) => {
-          setSubmitting(false);
-        });
       } else {
         requestSubmitItemCategory(values)
           .then((response) => {
@@ -114,60 +125,84 @@ function ItemCategoryDialog({
               intent: Intent.SUCCESS,
             });
             setSubmitting(false);
-            queryCache.refetchQueries('items-categories-table', { force: true });
+            queryCache.refetchQueries('items-categories-table', {
+              force: true,
+            });
           })
           .catch((error) => {
             setSubmitting(false);
           });
       }
-    }
+    },
   });
 
-  const filterItemCategory = useCallback((query, category, _index, exactMatch) => {
-    const normalizedTitle = category.name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
+  const filterItemCategory = useCallback(
+    (query, category, _index, exactMatch) => {
+      const normalizedTitle = category.name.toLowerCase();
+      const normalizedQuery = query.toLowerCase();
 
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return normalizedTitle.indexOf(normalizedQuery) >= 0;
-    }
-  }, []);
+      if (exactMatch) {
+        return normalizedTitle === normalizedQuery;
+      } else {
+        return normalizedTitle.indexOf(normalizedQuery) >= 0;
+      }
+    },
+    [],
+  );
 
-  const parentCategoryItem = useCallback((category, { handleClick, modifiers, query }) => {
-    return (
-      <MenuItem text={category.name} key={category.id} onClick={handleClick} />
-    );
-  }, []);
+  const parentCategoryItem = useCallback(
+    (category, { handleClick, modifiers, query }) => {
+      return (
+        <MenuItem
+          text={category.name}
+          key={category.id}
+          onClick={handleClick}
+        />
+      );
+    },
+    [],
+  );
 
   // Handle the dialog closing.
-  const handleClose = useCallback(() => { closeDialog(name); }, [name, closeDialog]);
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [name, closeDialog]);
 
   // Handle the dialog opening.
   const onDialogOpening = useCallback(() => {
     fetchList.refetch();
   }, [fetchList]);
 
-  const onChangeParentCategory = useCallback((parentCategory) => {
-    setParentCategory(parentCategory);
-    setFieldValue('parent_category_id', parentCategory.id);
-  }, [setFieldValue]);
+  const onChangeParentCategory = useCallback(
+    (parentCategory) => {
+      setParentCategory(parentCategory);
+      setFieldValue('parent_category_id', parentCategory.id);
+    },
+    [setFieldValue],
+  );
 
   const onDialogClosed = useCallback(() => {
     resetForm();
     closeDialog(name);
   }, [resetForm, closeDialog, name]);
 
-  const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
-  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
+  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
+  const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
 
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? <T id={'edit_category'}/> : <T id={'new_category'}/>}
-      className={classNames({
-        'dialog--loading': fetchList.isFetching,
-      },
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_category'} />
+        ) : (
+          <T id={'new_category'} />
+        )
+      }
+      className={classNames(
+        {
+          'dialog--loading': fetchList.isFetching,
+        },
         'dialog--category-form',
       )}
       isOpen={isOpen}
@@ -179,22 +214,22 @@ function ItemCategoryDialog({
       <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={<T id={'category_name'}/>}
+            label={<T id={'category_name'} />}
             labelInfo={requiredSpan}
             className={'form-group--category-name'}
-            intent={(errors.name && touched.name) && Intent.DANGER}
-            helperText={(<ErrorMessage name="name" {...{ errors, touched }} />)}
+            intent={errors.name && touched.name && Intent.DANGER}
+            helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={(errors.name && touched.name) && Intent.DANGER}
+              intent={errors.name && touched.name && Intent.DANGER}
               {...getFieldProps('name')}
             />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'parent_category'}/>}
+            label={<T id={'parent_category'} />}
             labelInfo={infoIcon}
             className={classNames(
               'form-group--select-list',
@@ -202,29 +237,39 @@ function ItemCategoryDialog({
               Classes.FILL,
             )}
             inline={true}
-            helperText={(<ErrorMessage name="parent_category_id" {...{errors, touched}} />)}
-            intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
+            helperText={
+              <ErrorMessage
+                name="parent_category_id"
+                {...{ errors, touched }}
+              />
+            }
+            intent={
+              errors.parent_category_id &&
+              touched.parent_category_id &&
+              Intent.DANGER
+            }
           >
-            <Select
+            <ListSelect
               items={categoriesList}
-              noResults={<MenuItem disabled={true} text='No results.' />}
+              noResults={<MenuItem disabled={true} text="No results." />}
               itemRenderer={parentCategoryItem}
               itemPredicate={filterItemCategory}
               popoverProps={{ minimal: true }}
               onItemSelect={onChangeParentCategory}
-            >
-              <Button
-                text={selectedParentCategory
-                  ? selectedParentCategory.name : 'Select Parent Category'}
-              />
-            </Select>
+              selectedItem={values.parent_category_id}
+              selectedItemProp={'id'}
+              defaultText={<T id={'select_parent_category'} />}
+              labelProp={'name'}
+            />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'description'}/>}
+            label={<T id={'description'} />}
             className={'form-group--description'}
-            intent={(errors.description && touched.description) && Intent.DANGER}
-            helperText={(<ErrorMessage name="description" {...{errors, touched}} />)}
+            intent={errors.description && touched.description && Intent.DANGER}
+            helperText={
+              <ErrorMessage name="description" {...{ errors, touched }} />
+            }
             inline={true}
           >
             <TextArea
@@ -237,9 +282,19 @@ function ItemCategoryDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'close'}/></Button>
-            <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
-              {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'submit'} />
+              )}
             </Button>
           </div>
         </div>
@@ -248,26 +303,25 @@ function ItemCategoryDialog({
   );
 }
 
-
 const mapStateToProps = (state, props) => {
   const dialogPayload = getDialogPayload(state, 'item-category-form');
 
   return {
     name: 'item-category-form',
-    payload: {action: 'new', id: null, ...dialogPayload},
+    payload: { action: 'new', id: null, ...dialogPayload },
     itemCategoryId: dialogPayload?.id || null,
   };
 };
 
 const withItemCategoryDialog = connect(mapStateToProps);
 
-export default compose( 
+export default compose(
   withItemCategoryDialog,
   DialogConnect,
   DialogReduxConnect,
   withItemCategoryDetail,
   withItemCategories(({ categoriesList }) => ({
-    categoriesList
+    categoriesList,
   })),
-  withItemCategoriesActions 
+  withItemCategoriesActions,
 )(ItemCategoryDialog);

client/src/containers/Dialogs/UserFormDialog.js

@@ -13,6 +13,7 @@ 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';
@@ -30,12 +31,17 @@ function UserFormDialog({
   closeDialog,
 }) {
   const { formatMessage } = useIntl();
-  const fetchHook = useAsync(async () => {
-    await Promise.all([
-      ...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
-    ]);
-  }, false);
-
+  // const fetchHook = useAsync(async () => {
+  //   await Promise.all([
+  //     ...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
+  //   ]);
+  // }, false);
+ 
+    const fetchHook = useQuery(
+      payload.action === 'edit' && ['user-invite-table', payload.user.id],
+      (key, id) => requestFetchUser(id),
+      { manual: true }
+    );
   const validationSchema = Yup.object().shape({
     email: Yup.string()
       .email()
@@ -63,23 +69,30 @@ function UserFormDialog({
     enableReinitialize: true,
     initialValues,
     validationSchema,
-    onSubmit: (values) => {
+    onSubmit: (values,{setSubmitting}) => {
       const form = { ...values };
 
       requestSubmitInvite(form).then((response) => {
+        closeDialog(name);
         AppToaster.show({
           message: formatMessage({
             id: 'teammate_invited_to_organization_account',
           }),
           intent: Intent.SUCCESS,
         });
-        closeDialog(name);
-      });
+        setSubmitting(false);
+        queryCache.refetchQueries('users-table', { force: true });
+      }).catch((errors)=>{
+        setSubmitting(false)
+      })
     },
   });
-  const onDialogOpening = () => {
-    fetchHook.execute();
-  };
+
+  // Handle the dialog opening.
+const onDialogOpening =useCallback(()=>{
+fetchHook.refetch();
+},[fetchHook]);
+
 
   const onDialogClosed = useCallback(() => {
     resetForm();
@@ -104,6 +117,7 @@ function UserFormDialog({
         'dialog--loading': fetchHook.pending,
         'dialog--invite-form': true,
       })}
+      //
       autoFocus={true}
       canEscapeKeyClose={true}
       isOpen={isOpen}