Fix : Preferences

client/src/components/DialogsContainer.js

@@ -2,9 +2,9 @@ import React, { lazy } from 'react';
 
 import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
 
-// import UserFormDialog from 'containers/Dialogs/UserFormDialog';
+import UserFormDialog from 'containers/Dialogs/UserFormDialog';
 // import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
-// import CurrencyDialog from 'containers/Dialogs/CurrencyDialog';
+import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';
 // import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
 // import ExchangeRateDialog from 'containers/Dialogs/ExchangeRateDialog';
 import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog';
@@ -23,6 +23,8 @@ export default function DialogsContainer() {
       <EstimateNumberDialog dialogName={'estimate-number-form'} />
       <ReceiptNumberDialog dialogName={'receipt-number-form'} />
       <InvoiceNumberDialog dialogName={'invoice-number-form'} />
+      <CurrencyFormDialog dialogName={'currency-form'} />
+      <UserFormDialog dialogName={'user-form'} />
     </div>
   );
 }

client/src/containers/Currencies/withCurrency.js

@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  getCurrencyById,
-  getCurrencyByCode,
-} from 'store/currencies/currencies.selector';
-
-
-const mapStateToProps = (state, props) => ({
-  ...(props.currencyId) ? {
-    currency: getCurrencyById(state.currencies.data, props.currencyId),
-  } : (props.currencyCode) ? {
-    currency: getCurrencyByCode(state.currencies.data, props.currencyCode),
-  } : {},
-});
-
-export default connect(mapStateToProps);

client/src/containers/Currencies/withCurrencyDetail.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import {
+  getCurrencyById,
+  getCurrencyByCode,
+} from 'store/currencies/currencies.selector';
+
+const mapStateToProps = (state, props) => ({
+  currency: getCurrencyByCode(state, props),
+});
+
+export default connect(mapStateToProps);
+

client/src/containers/Dialogs/CurencyFormDialogContent.js

@@ -7,40 +7,41 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import * as Yup from 'yup';
-import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import { useQuery, queryCache } from 'react-query';
-import { connect } from 'react-redux';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
-
-import AppToaster from 'components/AppToaster';
-import Dialog from 'components/Dialog';
-import withDialogRedux from 'components/DialogReduxConnect';
-import ErrorMessage from 'components/ErrorMessage';
 import classNames from 'classnames';
-import withDialogActions from 'containers/Dialog/withDialogActions';
+import {
+  If,
+  ErrorMessage,
+  AppToaster,
+  FieldRequiredHint,
+  DialogContent,
+} from 'components';
 
-import withCurrency from 'containers/Currencies/withCurrency';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withCurrencyDetail from 'containers/Currencies/withCurrencyDetail';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 
 import { compose } from 'utils';
 
-function CurrencyDialog({
+function CurencyFormDialogContent({
-  dialogName,
+  // #withCurrencyDetail
-  payload,
-  isOpen,
-
-  // #withDialogActions
-  closeDialog,
-
-  // #withCurrency
-  currencyCode,
   currency,
 
   // #wihtCurrenciesActions
   requestFetchCurrencies,
   requestSubmitCurrencies,
   requestEditCurrency,
+
+  // #withDialogActions
+  closeDialog,
+
+  // #ownProp
+  action,
+  currencyId,
+  dialogName,
 }) {
   const { formatMessage } = useIntl();
   const fetchCurrencies = useQuery('currencies', () =>
@@ -63,7 +64,6 @@ function CurrencyDialog({
     }),
     [],
   );
-
   const {
     values,
     errors,
@@ -75,12 +75,11 @@ function CurrencyDialog({
   } = useFormik({
     enableReinitialize: true,
     initialValues: {
-      ...(payload.action === 'edit' &&
+      ...(action === 'edit' && pick(currency, Object.keys(initialValues))),
-        pick(currency, Object.keys(initialValues))),
     },
     validationSchema: validationSchema,
     onSubmit: (values, { setSubmitting }) => {
-      if (payload.action === 'edit') {
+      if (action === 'edit') {
         requestEditCurrency(currency.id, values)
           .then((response) => {
             closeDialog(dialogName);
@@ -115,7 +114,6 @@ function CurrencyDialog({
       }
     },
   });
-
   const handleClose = useCallback(() => {
     closeDialog(dialogName);
   }, [dialogName, closeDialog]);
@@ -129,35 +127,13 @@ function CurrencyDialog({
     closeDialog(dialogName);
   }, [closeDialog, dialogName, resetForm]);
 
-  const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
-
   return (
-    <Dialog
+    <DialogContent isLoading={fetchCurrencies.isFetching}>
-      name={dialogName}
-      title={
-        payload.action === 'edit' ? (
-          <T id={'edit_currency'} />
-        ) : (
-          <T id={'new_currency'} />
-        )
-      }
-      className={classNames(
-        {
-          'dialog--loading': fetchCurrencies.isFetching,
-        },
-        'dialog--currency-form',
-      )}
-      isOpen={isOpen}
-      onClosed={onDialogClosed}
-      onOpening={onDialogOpening}
-      isLoading={fetchCurrencies.isFetching}
-      onClose={handleClose}
-    >
       <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
             label={<T id={'currency_name'} />}
-            labelInfo={requiredSpan}
+            labelInfo={FieldRequiredHint}
             className={'form-group--currency-name'}
             intent={
               errors.currency_name && touched.currency_name && Intent.DANGER
@@ -178,7 +154,7 @@ function CurrencyDialog({
 
           <FormGroup
             label={<T id={'currency_code'} />}
-            labelInfo={requiredSpan}
+            labelInfo={FieldRequiredHint}
             className={'form-group--currency-code'}
             intent={
               errors.currency_code && touched.currency_code && Intent.DANGER
@@ -208,29 +184,17 @@ function CurrencyDialog({
               type="submit"
               disabled={isSubmitting}
             >
-              {payload.action === 'edit' ? (
+              {action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
-                <T id={'edit'} />
-              ) : (
-                <T id={'submit'} />
-              )}
             </Button>
           </div>
         </div>
       </form>
-    </Dialog>
+    </DialogContent>
   );
 }
 
-const mapStateToProps = (state, props) => ({
-  currency: 'currency-form',
-});
-
-const withCurrencyFormDialog = connect(mapStateToProps);
-
 export default compose(
-  withCurrencyFormDialog,
+  withCurrencyDetail,
-  withDialogRedux(null, 'currency-form'),
-  withCurrency,
   withDialogActions,
   withCurrenciesActions,
-)(CurrencyDialog);
+)(CurencyFormDialogContent);

client/src/containers/Dialogs/CurrencyFormDialog.js

@@ -0,0 +1,41 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const CurrencyFormDialogContent = lazy(() =>
+  import('./CurencyFormDialogContent'),
+);
+function CurrencyFormDialog({
+  dialogName,
+  payload = { action: '', id: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_currency'} />
+        ) : (
+          <T id={'new_currency'} />
+        )
+      }
+      className={'dialog--currency-form'}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+    >
+      <DialogSuspense>
+        <CurrencyFormDialogContent
+          dialogName={dialogName}
+          currencyId={payload.currencyCode}
+          action={payload.action}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(CurrencyFormDialog);

client/src/containers/Dialogs/UserFormDialog.connector.js

@@ -7,7 +7,7 @@ export const mapStateToProps = (state, props) => {
   const dialogPayload = getDialogPayload(state, 'user-form');
 
   return {
-    name: 'user-form',
+    dialogName: 'user-form',
     payload: { action: 'new', id: null },
     userDetails:
       dialogPayload.action === 'edit'

client/src/containers/Dialogs/UserFormDialog.js

@@ -1,110 +1,19 @@
-import React, { useCallback } from 'react';
+import React, { lazy } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { useFormik } from 'formik';
+import { Dialog, DialogSuspense } from 'components';
-import * as Yup from 'yup';
+import withDialogRedux from 'components/DialogReduxConnect';
-import {
-  Dialog,
-  Button,
-  FormGroup,
-  InputGroup,
-  Intent,
-  Classes,
-} from '@blueprintjs/core';
-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 UserFormDialogConnect from 'containers/Dialogs/UserFormDialog.connector';
-import withUsersActions from 'containers/Users/withUsersActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
 import { compose } from 'utils';
 
+const UserFormDialogContent = lazy(() => import('./UserFormDialogContent'));
+
 function UserFormDialog({
-  requestFetchUser,
+  dialogName,
-  requestSubmitInvite,
+  payload = { action: '', id: null },
-  name,
-  payload,
   isOpen,
-  closeDialog,
 }) {
-  const { formatMessage } = useIntl();
-
-  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()
-      .required()
-      .label(formatMessage({ id: 'email' })),
-  });
-
-  const initialValues = {
-    status: 1,
-    ...(payload.action === 'edit' &&
-      pick(
-        objectKeysTransform(payload.user, snakeCase),
-        Object.keys(validationSchema.fields),
-      )),
-  };
-
-  const {
-    errors,
-    touched,
-    resetForm,
-    getFieldProps,
-    handleSubmit,
-    isSubmitting,
-  } = useFormik({
-    enableReinitialize: true,
-    initialValues,
-    validationSchema,
-    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,
-          });
-          setSubmitting(false);
-          queryCache.invalidateQueries('users-table');
-        })
-        .catch((errors) => {
-          setSubmitting(false);
-        });
-    },
-  });
-
-  // Handle the dialog opening.
-  const onDialogOpening = useCallback(() => {
-    fetchHook.refetch();
-  }, [fetchHook]);
-
-  const onDialogClosed = useCallback(() => {
-    resetForm();
-  }, [resetForm]);
-
-  // Handles dialog close.
-  const handleClose = useCallback(() => {
-    closeDialog(name);
-  }, [closeDialog, name]);
-
   return (
     <Dialog
-      name={name}
+      name={dialogName}
       title={
         payload.action === 'edit' ? (
           <T id={'edit_invite'} />
@@ -112,66 +21,23 @@ function UserFormDialog({
           <T id={'invite_user'} />
         )
       }
-      className={classNames({
+      className={'dialog--invite-form'}
-        'dialog--loading': fetchHook.pending,
-        'dialog--invite-form': true,
-      })}
-      //
       autoFocus={true}
       canEscapeKeyClose={true}
       isOpen={isOpen}
-      isLoading={fetchHook.pending}
-      onClosed={onDialogClosed}
-      onOpening={onDialogOpening}
-      onClose={handleClose}
     >
-      <form onSubmit={handleSubmit}>
+      <DialogSuspense>
-        <div className={Classes.DIALOG_BODY}>
+        <UserFormDialogContent
-          <p class="mb2">
+          dialogName={dialogName}
-            <T id={'your_access_to_your_team'} />
+          userId={payload.id}
-          </p>
+          action={payload.action}
-
+        />
-          <FormGroup
+      </DialogSuspense>
-            label={<T id={'email'} />}
-            className={classNames('form-group--email', Classes.FILL)}
-            intent={errors.email && touched.email && Intent.DANGER}
-            helperText={<ErrorMessage name="email" {...{ errors, touched }} />}
-            inline={true}
-          >
-            <InputGroup
-              medium={true}
-              intent={errors.email && touched.email && Intent.DANGER}
-              {...getFieldProps('email')}
-            />
-          </FormGroup>
-        </div>
-
-        <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>
-          </div>
-        </div>
-      </form>
     </Dialog>
   );
 }
 
 export default compose(
-  UserFormDialogConnect,
+  // UserFormDialogConnect,
-  withUsersActions,
+  withDialogRedux(),
-  withDialogActions,
-  DialogReduxConnect,
 )(UserFormDialog);

client/src/containers/Dialogs/UserFormDialogContent.js

@@ -0,0 +1,162 @@
+import React, { useCallback } from 'react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import {
+  Button,
+  FormGroup,
+  InputGroup,
+  Intent,
+  Classes,
+} from '@blueprintjs/core';
+import { pick, snakeCase } from 'lodash';
+import classNames from 'classnames';
+import { queryCache, useQuery } from 'react-query';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import {
+  If,
+  ErrorMessage,
+  AppToaster,
+  FieldRequiredHint,
+  DialogContent,
+} from 'components';
+
+import UserFormDialogConnect from 'containers/Dialogs/UserFormDialog.connector';
+import withUsersActions from 'containers/Users/withUsersActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose, objectKeysTransform } from 'utils';
+
+function UserFormDialogContent({
+  // #wihtCurrenciesActions
+  requestFetchUser,
+  requestSubmitInvite,
+
+  // #withDialogActions
+  closeDialog,
+
+  // #ownProp
+  action,
+  userId,
+  dialogName,
+}) {
+  const { formatMessage } = useIntl();
+
+  const fetchHook = useQuery(
+    // action === 'edit' && ['user', action.user.id],
+    action === 'edit' && ['user', userId],
+    (key, id) => requestFetchUser(id),
+    { enabled: userId },
+  );
+
+  const validationSchema = Yup.object().shape({
+    email: Yup.string()
+      .email()
+      .required()
+      .label(formatMessage({ id: 'email' })),
+  });
+
+  const initialValues = {
+    status: 1,
+    ...(action === 'edit' &&
+      pick(
+        objectKeysTransform(userId, snakeCase),
+        Object.keys(validationSchema.fields),
+      )),
+  };
+
+  const {
+    errors,
+    touched,
+    resetForm,
+    getFieldProps,
+    handleSubmit,
+    isSubmitting,
+  } = useFormik({
+    enableReinitialize: true,
+    initialValues,
+    validationSchema,
+    onSubmit: (values, { setSubmitting }) => {
+      const form = { ...values };
+
+      requestSubmitInvite(form)
+        .then((response) => {
+          closeDialog(dialogName);
+          AppToaster.show({
+            message: formatMessage({
+              id: 'teammate_invited_to_organization_account',
+            }),
+            intent: Intent.SUCCESS,
+          });
+          setSubmitting(false);
+          queryCache.invalidateQueries('users-table');
+        })
+        .catch((errors) => {
+          setSubmitting(false);
+        });
+    },
+  });
+
+  // Handles dialog close.
+  const handleClose = useCallback(() => {
+    closeDialog(dialogName);
+  }, [closeDialog, dialogName]);
+
+  // Handle the dialog opening.
+  const onDialogOpening = useCallback(() => {
+    fetchHook.refetch();
+  }, [fetchHook]);
+
+  const onDialogClosed = useCallback(() => {
+    resetForm();
+    closeDialog(dialogName);
+  }, [resetForm]);
+
+  console.log(action, 'action');
+
+  return (
+    <DialogContent isLoading={fetchHook.isFetching}>
+      <form onSubmit={handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <p className="mb2">
+            <T id={'your_access_to_your_team'} />
+          </p>
+
+          <FormGroup
+            label={<T id={'email'} />}
+            className={classNames('form-group--email', Classes.FILL)}
+            intent={errors.email && touched.email && Intent.DANGER}
+            helperText={<ErrorMessage name="email" {...{ errors, touched }} />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={errors.email && touched.email && Intent.DANGER}
+              {...getFieldProps('email')}
+            />
+          </FormGroup>
+        </div>
+
+        <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}
+            >
+              {action === 'edit' ? <T id={'edit'} /> : <T id={'invite'} />}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </DialogContent>
+  );
+}
+
+export default compose(
+  // UserFormDialogConnect,
+  withDialogActions,
+  withUsersActions,
+)(UserFormDialogContent);

client/src/containers/Preferences/Currencies/CurrenciesDataTable.js

@@ -0,0 +1,154 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  Position,
+} from '@blueprintjs/core';
+import { withRouter } from 'react-router';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { compose } from 'utils';
+import { useUpdateEffect } from 'hooks';
+import LoadingIndicator from 'components/LoadingIndicator';
+import { DataTable, Icon } from 'components';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withCurrencies from 'containers/Currencies/withCurrencies';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+function CurrenciesDataTable({
+  // #withCurrencies
+  currenciesList,
+  currenciesLoading,
+
+  loading,
+  onFetchData,
+  onSelectedRowsChange,
+  onDeleteCurrency,
+
+  // #withDialog.
+  openDialog,
+}) {
+  const [initialMount, setInitialMount] = useState(false);
+
+  const { formatMessage } = useIntl();
+
+  useUpdateEffect(() => {
+    if (!currenciesLoading) {
+      setInitialMount(true);
+    }
+  }, [currenciesLoading, setInitialMount]);
+
+  const handleEditCurrency = useCallback(
+    (currency) => {
+      openDialog('currency-form', {
+        action: 'edit',
+        currencyCode: currency.currency_code,
+      });
+    },
+    [openDialog],
+  );
+
+  const actionMenuList = useCallback(
+    (currency) => (
+      <Menu>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={formatMessage({ id: 'edit_currency' })}
+          onClick={() => handleEditCurrency(currency)}
+        />
+
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={formatMessage({ id: 'delete_currency' })}
+          onClick={() => onDeleteCurrency(currency)}
+          intent={Intent.DANGER}
+        />
+      </Menu>
+    ),
+    [handleEditCurrency, onDeleteCurrency, formatMessage],
+  );
+
+  const onRowContextMenu = useCallback(
+    (cell) => {
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'currency_name' }),
+        accessor: 'currency_name',
+        width: 150,
+      },
+      {
+        Header: formatMessage({ id: 'currency_code' }),
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 120,
+      },
+      {
+        Header: 'Currency sign',
+        width: 120,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_BOTTOM}
+          >
+            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
+
+  const handleDataTableFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
+
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
+
+  return (
+    <LoadingIndicator loading={loading} mount={false}>
+      <DataTable
+        columns={columns}
+        data={currenciesList}
+        onFetchData={handleDataTableFetchData}
+        noInitialFetch={true}
+        loading={currenciesLoading && !initialMount}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={onRowContextMenu}
+      />
+    </LoadingIndicator>
+  );
+}
+
+export default compose(
+  withRouter,
+  withDashboardActions,
+  withDialogActions,
+  withCurrencies(({ currenciesList }) => ({
+    currenciesList,
+  })),
+)(CurrenciesDataTable);

client/src/containers/Preferences/Currencies/CurrenciesList.js

@@ -1,13 +1,5 @@
 import React, { useCallback, useState, useMemo, useEffect } from 'react';
-import {
+import { Alert, Intent } from '@blueprintjs/core';
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  Position,
-  Alert,
-  Intent,
-} from '@blueprintjs/core';
 import { useQuery, queryCache } from 'react-query';
 import {
   FormattedMessage as T,
@@ -15,13 +7,12 @@ import {
   useIntl,
 } from 'react-intl';
 
-import Icon from 'components/Icon';
+import CurrenciesDataTable from './CurrenciesDataTable';
-import LoadingIndicator from 'components/LoadingIndicator';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import DataTable from 'components/DataTable';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import AppToaster from 'components/AppToaster';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withCurrencies from 'containers/Currencies/withCurrencies';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
@@ -41,41 +32,34 @@ function CurrenciesList({
 
   // #withDashboardActions
   changePreferencesPageTitle,
-
-  // #ownProps
-  onFetchData,
 }) {
   const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
   const { formatMessage } = useIntl();
 
-  const fetchCurrencies = useQuery('currencies-table',
+  const fetchCurrencies = useQuery(
+    'currencies-table',
     () => requestFetchCurrencies(),
     { enabled: true },
   );
 
-
-
   useEffect(() => {
     changePreferencesPageTitle(formatMessage({ id: 'currencies' }));
   }, [changePreferencesPageTitle, formatMessage]);
 
-  const handleEditCurrency = useCallback(
+  const handleEditCurrency = useCallback(() => {}, []);
-    (currency) => {
-      openDialog('currency-form', {
-        action: 'edit',
-        currencyCode: currency.currency_code,
-      });
-    },
-    [openDialog],
-  );
 
-  const onDeleteCurrency = useCallback((currency) => {
+  // Handle click and cancel/confirm currency delete
+  const handleDeleteCurrency = useCallback((currency) => {
     setDeleteCurrencyState(currency);
   }, []);
+
+  // handle cancel delete currency alert.
   const handleCancelCurrencyDelete = () => {
     setDeleteCurrencyState(false);
   };
 
+  // Handle confirm Currency delete
   const handleConfirmCurrencyDelete = useCallback(
     (refetch) => {
       requestDeleteCurrency(deleteCurrencyState.currency_code)
@@ -95,95 +79,44 @@ function CurrenciesList({
     [deleteCurrencyState, requestDeleteCurrency, formatMessage],
   );
 
-  const actionMenuList = useCallback(
+  // Handle selected rows change.
-    (currency) => (
+  const handleSelectedRowsChange = useCallback(
-      <Menu>
+    (accounts) => {
-        <MenuItem
+      setSelectedRows(accounts);
-          text={<T id={'edit_currency'} />}
+    },
-          onClick={() => handleEditCurrency(currency)}
+    [setSelectedRows],
-        />
-
-        <MenuItem
-          text={<T id={'delete_currency'} />}
-          onClick={() => onDeleteCurrency(currency)}
-          intent={Intent.DANGER}
-        />
-      </Menu>
-    ),
-    [handleEditCurrency, onDeleteCurrency],
   );
 
-  const columns = useMemo(
-    () => [
-      {
-        Header: formatMessage({ id: 'currency_name' }),
-        accessor: 'currency_name',
-        width: 150,
-      },
-      {
-        Header: formatMessage({ id: 'currency_code' }),
-        accessor: 'currency_code',
-        className: 'currency_code',
-        width: 120,
-      },
-      {
-        Header: 'Currency sign',
-        width: 120,
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_TOP}
-          >
-            <Button icon={<Icon icon="ellipsis-h" />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handleDataTableFetchData = useCallback(() => {
-    // fetchCurrencies.refetch();
-  }, [fetchCurrencies]);
-
   return (
-    <LoadingIndicator loading={fetchCurrencies.isFetching}>
+    <DashboardInsider loading={fetchCurrencies.isFetching}>
-      <DataTable
+      <DashboardPageContent>
-        columns={columns}
+        <CurrenciesDataTable
-        data={currenciesList}
+          onDeleteCurrency={handleDeleteCurrency}
-        onFetchData={handleDataTableFetchData}
+          onEditCurrency={handleEditCurrency}
-        loading={currenciesLoading}
+          onSelectedRowsChange={handleSelectedRowsChange}
-      />
+        />
-      <Alert
+        <Alert
-        cancelButtonText={<T id={'cancel'} />}
+          cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={<T id={'delete'} />}
+          confirmButtonText={<T id={'delete'} />}
-        icon="trash"
+          icon="trash"
-        intent={Intent.DANGER}
+          intent={Intent.DANGER}
-        isOpen={deleteCurrencyState}
+          isOpen={deleteCurrencyState}
-        onCancel={handleCancelCurrencyDelete}
+          onCancel={handleCancelCurrencyDelete}
-        onConfirm={handleConfirmCurrencyDelete}
+          onConfirm={handleConfirmCurrencyDelete}
-      >
+        >
-        <p>
+          <p>
-          <FormattedHTMLMessage
+            <FormattedHTMLMessage
-            id={'once_delete_this_currency_you_will_able_to_restore_it'}
+              id={'once_delete_this_currency_you_will_able_to_restore_it'}
-          />
+            />
-        </p>
+          </p>
-      </Alert>
+        </Alert>
-    </LoadingIndicator>
+      </DashboardPageContent>
+    </DashboardInsider>
   );
 }
 
 export default compose(
   withDashboardActions,
-  withCurrencies(({ currenciesList }) => ({
-    currenciesList,
-  })),
   withCurrenciesActions,
   withDialogActions,
 )(CurrenciesList);

client/src/containers/Preferences/General/General.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { useFormik } from 'formik';
+import { mapKeys, snakeCase } from 'lodash';
 import * as Yup from 'yup';
 import {
   Button,
@@ -9,19 +10,30 @@ import {
   MenuItem,
   Classes,
   Spinner,
+  Position,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { useQuery, queryCache } from 'react-query';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import { DateInput } from '@blueprintjs/datetime';
 import moment from 'moment';
+import { useHistory } from 'react-router-dom';
 
-import { compose, optionsMapToArray } from 'utils';
+import {
+  compose,
+  optionsMapToArray,
+  tansformDateValue,
+  momentFormatter,
+} from 'utils';
 
-import ErrorMessage from 'components/ErrorMessage';
+import {
-import AppToaster from 'components/AppToaster';
+  If,
-import { ListSelect } from 'components';
+  FieldRequiredHint,
-import { If } from 'components';
+  ListSelect,
+  ErrorMessage,
+  AppToaster,
+} from 'components';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -40,14 +52,11 @@ function GeneralPreferences({
 }) {
   const { formatMessage } = useIntl();
   const [selectedItems, setSelectedItems] = useState({});
+  const history = useHistory();
 
-  const fetchHook = useQuery(
+  const fetchHook = useQuery(['settings'], () => {
-    ['settings'],
+    requestFetchOptions();
-    () => {
+  });
-      requestFetchOptions();
-    },
-    { manual: true },
-  );
 
   useEffect(() => {
     changePreferencesPageTitle(formatMessage({ id: 'general' }));
@@ -193,16 +202,21 @@ function GeneralPreferences({
     name: Yup.string()
       .required()
       .label(formatMessage({ id: 'organization_name_' })),
+    financial_date_start: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'date_start_' })),
     industry: Yup.string()
       .required()
       .label(formatMessage({ id: 'organization_industry_' })),
     location: Yup.string()
       .required()
       .label(formatMessage({ id: 'location' })),
-    base_currency: Yup.string().required(formatMessage({ id: 'required' })),
+    base_currency: Yup.string()
-    fiscal_year: Yup.string()
       .required()
       .label(formatMessage({ id: 'base_currency_' })),
+    fiscal_year: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'fiscal_year_' })),
     language: Yup.string()
       .required()
       .label(formatMessage({ id: 'language' })),
@@ -214,6 +228,12 @@ function GeneralPreferences({
       .label(formatMessage({ id: 'date_format_' })),
   });
 
+  function snakeCaseChange(data) {
+    return mapKeys(data, (value, key) => snakeCase(key));
+  }
+
+  const initialValues = snakeCaseChange(organizationSettings);
+
   const {
     values,
     errors,
@@ -226,7 +246,7 @@ function GeneralPreferences({
   } = useFormik({
     enableReinitialize: true,
     initialValues: {
-      ...organizationSettings,
+      ...initialValues,
     },
     validationSchema,
     onSubmit: (values, { setSubmitting }) => {
@@ -264,6 +284,13 @@ function GeneralPreferences({
     />
   );
 
+  const handleDateChange = useCallback(
+    (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue('financial_date_start', formatted);
+    },
+    [setFieldValue],
+  );
   const date_format = (item, { handleClick }) => (
     <MenuItem
       key={item.id}
@@ -300,6 +327,11 @@ function GeneralPreferences({
     },
     [setFieldValue],
   );
+
+  const handleClose = () => {
+    history.goBack();
+  };
+
   return (
     <div
       className={classNames({
@@ -310,6 +342,7 @@ function GeneralPreferences({
       <form onSubmit={handleSubmit}>
         <FormGroup
           label={<T id={'organization_name'} />}
+          labelInfo={<FieldRequiredHint />}
           inline={true}
           intent={errors.name && touched.name && Intent.DANGER}
           helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
@@ -321,6 +354,30 @@ function GeneralPreferences({
             {...getFieldProps('name')}
           />
         </FormGroup>
+        <FormGroup
+          label={<T id={'financial_starting_date'} />}
+          labelInfo={<FieldRequiredHint />}
+          inline={true}
+          intent={
+            errors.financial_date_start &&
+            touched.financial_date_start &&
+            Intent.DANGER
+          }
+          helperText={
+            <ErrorMessage
+              name="financial_date_start"
+              {...{ errors, touched }}
+            />
+          }
+          className={classNames('form-group--select-list', Classes.FILL)}
+        >
+          <DateInput
+            {...momentFormatter('MMMM Do YYYY')}
+            value={tansformDateValue(values.financial_date_start)}
+            onChange={handleDateChange}
+            popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          />
+        </FormGroup>
 
         <FormGroup
           label={<T id={'organization_industry'} />}
@@ -362,6 +419,7 @@ function GeneralPreferences({
 
         <FormGroup
           label={<T id={'base_currency'} />}
+          labelInfo={<FieldRequiredHint />}
           className={classNames(
             'form-group--base-currency',
             'form-group--select-list',
@@ -392,6 +450,7 @@ function GeneralPreferences({
 
         <FormGroup
           label={<T id={'fiscal_year'} />}
+          labelInfo={<FieldRequiredHint />}
           className={classNames(
             'form-group--fiscal-year',
             'form-group--select-list',
@@ -419,6 +478,7 @@ function GeneralPreferences({
 
         <FormGroup
           label={<T id={'language'} />}
+          labelInfo={<FieldRequiredHint />}
           inline={true}
           className={classNames(
             'form-group--language',
@@ -443,6 +503,7 @@ function GeneralPreferences({
         </FormGroup>
         <FormGroup
           label={<T id={'time_zone'} />}
+          labelInfo={<FieldRequiredHint />}
           inline={true}
           className={classNames(
             'form-group--time-zone',
@@ -463,6 +524,7 @@ function GeneralPreferences({
         </FormGroup>
         <FormGroup
           label={<T id={'date_format'} />}
+          labelInfo={<FieldRequiredHint />}
           inline={true}
           className={classNames(
             'form-group--language',
@@ -497,7 +559,7 @@ function GeneralPreferences({
           >
             <T id={'save'} />
           </Button>
-          <Button onClick={'handleClose'}>
+          <Button onClick={handleClose}>
             <T id={'close'} />
           </Button>
         </div>
@@ -512,7 +574,7 @@ function GeneralPreferences({
 }
 
 export default compose(
-  withSettings,
+  withSettings(({ organizationSettings }) => ({ organizationSettings })),
   withSettingsActions,
   withDashboardActions,
 )(GeneralPreferences);

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

@@ -0,0 +1,185 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuDivider,
+  Tag,
+  MenuItem,
+  Position,
+} from '@blueprintjs/core';
+import { withRouter } from 'react-router';
+import { snakeCase } from 'lodash';
+
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
+import { compose } from 'utils';
+import LoadingIndicator from 'components/LoadingIndicator';
+import { DataTable, Icon, If, AppToaster } from 'components';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withUsers from 'containers/Users/withUsers';
+
+function UsersDataTable({
+  // #withDialogActions
+  openDialog,
+
+  // #withUsers
+  usersList,
+  usersLoading,
+
+  // #ownProps
+  loading,
+  onFetchData,
+  onInactiveUser,
+  onDeleteUser,
+  onSelectedRowsChange,
+}) {
+  const [initialMount, setInitialMount] = useState(false);
+  const { formatMessage } = useIntl();
+
+  const onEditUser = useCallback(
+    (user) => () => {
+      const form = Object.keys(user).reduce((obj, key) => {
+        const camelKey = snakeCase(key);
+        obj[camelKey] = user[key];
+        return obj;
+      }, {});
+
+      openDialog('userList-form', { action: 'edit', user: form });
+    },
+    [openDialog],
+  );
+
+  const actionMenuList = useCallback(
+    (user) => (
+      <Menu>
+        <If condition={user.invite_accepted_at}>
+          <MenuItem
+            icon={<Icon icon="pen-18" />}
+            text={formatMessage({ id: 'edit_user' })}
+            onClick={onEditUser(user)}
+          />
+          <MenuDivider />
+
+          <MenuItem
+            text={formatMessage({ id: 'inactivate_user' })}
+            onClick={() => onInactiveUser(user)}
+          />
+        </If>
+
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={formatMessage({ id: 'delete_user' })}
+          onClick={() => onDeleteUser(user)}
+          intent={Intent.DANGER}
+        />
+      </Menu>
+    ),
+    [onInactiveUser, onDeleteUser, onEditUser],
+  );
+  const onRowContextMenu = useCallback(
+    (cell) => {
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'full_name',
+        Header: formatMessage({ id: 'full_name' }),
+        accessor: 'full_name',
+        width: 150,
+      },
+      {
+        id: 'email',
+        Header: formatMessage({ id: 'email' }),
+        accessor: 'email',
+        width: 150,
+      },
+      {
+        id: 'phone_number',
+        Header: formatMessage({ id: 'phone_number' }),
+        accessor: 'phone_number',
+        width: 120,
+      },
+      {
+        id: 'status',
+        Header: 'Status',
+        accessor: (user) =>
+          !user.invite_accepted_at ? (
+            <Tag minimal={true}>
+              <T id={'inviting'} />
+            </Tag>
+          ) : user.active ? (
+            <Tag intent={Intent.SUCCESS} minimal={true}>
+              <T id={'activate'} />
+            </Tag>
+          ) : (
+            <Tag intent={Intent.WARNING} minimal={true}>
+              <T id={'inactivate'} />
+            </Tag>
+          ),
+        width: 80,
+        className: 'status',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_BOTTOM}
+          >
+            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
+
+  const handelDataTableFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
+
+  return (
+    <LoadingIndicator loading={loading} mount={false}>
+      <DataTable
+        columns={columns}
+        data={usersList}
+        onFetchData={handelDataTableFetchData}
+        loading={usersLoading && !initialMount}
+        manualSortBy={true}
+        noInitialFetch={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={onRowContextMenu}
+      />
+    </LoadingIndicator>
+  );
+}
+
+export default compose(
+  withRouter,
+  withDialogActions,
+  withUsers(({ usersList, usersLoading }) => ({ usersList, usersLoading })),
+)(UsersDataTable);

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

@@ -1,41 +1,31 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { queryCache, useQuery } from 'react-query';
-import DataTable from 'components/DataTable';
+import { Alert, Intent } from '@blueprintjs/core';
-import {
+
-  Alert,
+import withDialogActions from 'containers/Dialog/withDialogActions';
-  Popover,
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-  Button,
+import withUsers from 'containers/Users/withUsers';
-  Menu,
+import UsersDataTable from './UsersDataTable';
-  MenuItem,
+import withUsersActions from 'containers/Users/withUsersActions';
-  MenuDivider,
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
-  Position,
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-  Intent,
+
-  Tag,
-} from '@blueprintjs/core';
-import { snakeCase } from 'lodash';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
-
+import { snakeCase } from 'lodash';
-import Icon from 'components/Icon';
-import LoadingIndicator from 'components/LoadingIndicator';
-import { If } from 'components';
 
 import AppToaster from 'components/AppToaster';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withUsers from 'containers/Users/withUsers';
-import withUsersActions from 'containers/Users/withUsersActions';
-
 import { compose } from 'utils';
 
-
 function UsersListPreferences({
   // #withDialog
   openDialog,
+
+  // #withDashboardActions
   changePreferencesPageTitle,
 
   // #withUsers
@@ -51,15 +41,18 @@ function UsersListPreferences({
 }) {
   const [deleteUserState, setDeleteUserState] = useState(false);
   const [inactiveUserState, setInactiveUserState] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+
   const { formatMessage } = useIntl();
+
   const fetchUsers = useQuery('users-table', () => requestFetchUsers());
 
   useEffect(() => {
     changePreferencesPageTitle(formatMessage({ id: 'users' }));
   }, [changePreferencesPageTitle, formatMessage]);
 
-
+  // Handle cancel/confirm user inactive.
-  const onInactiveUser = useCallback((user) => {
+  const handleInactiveUser = useCallback((user) => {
     setInactiveUserState(user);
   }, []);
 
@@ -86,26 +79,20 @@ function UsersListPreferences({
       });
   }, [inactiveUserState, requestInactiveUser, formatMessage]);
 
-  const onDeleteUser = useCallback((user) => {
+  // Handle click and cancel/confirm user delete
+  const handleDeleteUser = useCallback((user) => {
     setDeleteUserState(user);
   }, []);
 
+  // handle cancel delete user alert.
   const handleCancelUserDelete = () => {
     setDeleteUserState(false);
   };
 
-  const onEditUser = useCallback(
+  const handleEditUser = useCallback(() => {}, []);
-    (user) => () => {
+
-      const form = Object.keys(user).reduce((obj, key) => {
+
-        const camelKey = snakeCase(key);
-        obj[camelKey] = user[key];
-        return obj;
-      }, {});
 
-      openDialog('userList-form', { action: 'edit', user: form });
-    },
-    [openDialog],
-  );
 
   // Handle confirm User delete
   const handleConfirmUserDelete = useCallback(() => {
@@ -128,138 +115,63 @@ function UsersListPreferences({
       });
   }, [deleteUserState, requestDeleteUser, formatMessage]);
 
-  const actionMenuList = useCallback(
+  // const handelDataTableFetchData = useCallback(() => {
-    (user) => (
+  //   onFetchData && onFetchData();
-      <Menu>
+  // }, [onFetchData]);
-        <If condition={user.invite_accepted_at}>
-          <MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
-          <MenuDivider />
 
-          <MenuItem
+  // Handle selected rows change.
-            text={<T id={'inactivate_user'} />}
+  const handleSelectedRowsChange = useCallback(
-            onClick={() => onInactiveUser(user)}
+    (accounts) => {
-          />
+      setSelectedRows(accounts);
-        </If>
+    },
-
+    [setSelectedRows],
-        <MenuItem
-          text={<T id={'delete_user'} />}
-          onClick={() => onDeleteUser(user)}
-          intent={Intent.DANGER}
-        />
-      </Menu>
-    ),
-    [onInactiveUser, onDeleteUser, onEditUser],
   );
 
-  const columns = useMemo(
-    () => [
-      {
-        id: 'full_name',
-        Header: formatMessage({ id: 'full_name' }),
-        accessor: 'full_name',
-        width: 150,
-      },
-      {
-        id: 'email',
-        Header: formatMessage({ id: 'email' }),
-        accessor: 'email',
-        width: 150,
-      },
-      {
-        id: 'phone_number',
-        Header: formatMessage({ id: 'phone_number' }),
-        accessor: 'phone_number',
-        width: 120,
-      },
-      {
-        id: 'status',
-        Header: 'Status',
-        accessor: (user) =>
-          !user.invite_accepted_at ? (
-            <Tag minimal={true}>
-              <T id={'inviting'} />
-            </Tag>
-          ) : user.active ? (
-            <Tag intent={Intent.SUCCESS} minimal={true}>
-              <T id={'activate'} />
-            </Tag>
-          ) : (
-            <Tag intent={Intent.WARNING} minimal={true}>
-              <T id={'inactivate'} />
-            </Tag>
-          ),
-        width: 80,
-        className: 'status',
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_TOP}
-          >
-            <Button icon={<Icon icon="ellipsis-h" />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handelDataTableFetchData = useCallback(() => {
-    onFetchData && onFetchData();
-  }, [onFetchData]);
-
   return (
-    <LoadingIndicator>
+    <DashboardInsider loading={fetchUsers.isFetching}>
-      <DataTable
+      <DashboardPageContent>
-        columns={columns}
+        <UsersDataTable
-        data={usersList}
+          onDeleteUser={handleDeleteUser}
-        onFetchData={handelDataTableFetchData()}
+          onInactiveUser={handleInactiveUser}
-        loading={fetchUsers.isFetching}
+          onEditUser={handleEditUser}
-        manualSortBy={true}
+          // onFetchData={handleFetchData}
-        expandable={false}
+          onSelectedRowsChange={handleSelectedRowsChange}
-      />
+        />
 
-      <Alert
+        <Alert
-        cancelButtonText={<T id={'cancel'} />}
+          cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={<T id={'delete'} />}
+          confirmButtonText={<T id={'delete'} />}
-        icon="trash"
+          icon="trash"
-        intent={Intent.DANGER}
+          intent={Intent.DANGER}
-        isOpen={deleteUserState}
+          isOpen={deleteUserState}
-        onCancel={handleCancelUserDelete}
+          onCancel={handleCancelUserDelete}
-        onConfirm={handleConfirmUserDelete}
+          onConfirm={handleConfirmUserDelete}
-      >
+        >
-        <p>
+          <p>
-          <FormattedHTMLMessage
+            <FormattedHTMLMessage
-            id={'once_delete_this_account_you_will_able_to_restore_it'}
+              id={'once_delete_this_account_you_will_able_to_restore_it'}
-          />
+            />
-        </p>
+          </p>
-      </Alert>
+        </Alert>
-
+        <Alert
-      <Alert
+          cancelButtonText={<T id={'cancel'} />}
-        cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'inactivate'} />}
-        confirmButtonText={<T id={'inactivate'} />}
+          intent={Intent.WARNING}
-        intent={Intent.WARNING}
+          isOpen={inactiveUserState}
-        isOpen={inactiveUserState}
+          onCancel={handleCancelInactiveUser}
-        onCancel={handleCancelInactiveUser}
+          onConfirm={handleConfirmUserActive}
-        onConfirm={handleConfirmUserActive}
+        >
-      >
+          <p>
-        <p>
+            <T id={'are_sure_to_inactive_this_account'} />
-          <T id={'are_sure_to_inactive_this_account'} />
+          </p>
-        </p>
+        </Alert>
-      </Alert>
+      </DashboardPageContent>
-    </LoadingIndicator>
+    </DashboardInsider>
   );
 }
 
 export default compose(
   withDialogActions,
   withDashboardActions,
-  withUsers,
   withUsersActions,
 )(UsersListPreferences);

client/src/containers/Users/withUsers.js

@@ -1,7 +1,13 @@
 import { connect } from 'react-redux';
 
-export const mapStateToProps = (state, props) => ({
+export default (mapState) => {
-  usersList: state.users.list.results,
+  const mapStateToProps = (state, props) => {
-});
+    const mapped = {
+      usersList: state.users.list,
+      usersLoading: state.users.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
 
-export default connect(mapStateToProps);
+  return connect(mapStateToProps);
+};

client/src/store/currencies/currencies.selector.js

@@ -1,19 +1,22 @@
 // @flow
 import { createSelector } from 'reselect';
+import { getItemById } from 'store/selectors';
 
-const currenciesItemsSelector = state => state.currencies.data;
+const currenciesItemsSelector = (state) => state.currencies.data;
+const currenciesCodePropSelector = (state, props) => props.currencyId;
 
 export const getCurrenciesList = createSelector(
   currenciesItemsSelector,
   (currencies) => {
     return Object.values(currencies);
-  }
+  },
 );
 
-export const getCurrencyById = (currencies: Object, id: Integer) => {
+export const getCurrencyByCode = createSelector(
-  return Object.values(currencies).find(c => c.id == id) || null;
+  currenciesItemsSelector,
-};
+  currenciesCodePropSelector,
+  (currencies, currencyCode) => {
+    return getItemById(currencies, currencyCode);
+  },
+);
 
-export const getCurrencyByCode = (currencies: Object, currencyCode: String) => {
-  return currencies[currencyCode] || null;
-};

client/src/store/users/users.actions.js

@@ -4,12 +4,21 @@ import t from 'store/types';
 export const fetchUsers = () => {
   return (dispatch) =>
     new Promise((resolve, reject) => {
+      dispatch({
+        type: t.USERS_TABLE_LOADING,
+        payload: { loading: true },
+      });
+
       ApiService.get(`users`)
         .then((response) => {
           dispatch({
             type: t.USERS_LIST_SET,
             users: response.data.users,
           });
+          dispatch({
+            type: t.USERS_TABLE_LOADING,
+            payload: { loading: false },
+          });
           resolve(response);
         })
         .catch((error) => {

client/src/store/users/users.reducer.js

@@ -2,10 +2,9 @@ import { createReducer } from '@reduxjs/toolkit';
 import t from 'store/types';
 
 const initialState = {
-  list: {
+  list: {},
-    results: [],
-  },
   userById: {},
+  loading: false,
 };
 
 export default createReducer(initialState, {
@@ -16,6 +15,11 @@ export default createReducer(initialState, {
   [t.USER_DETAILS_SET]: (state, action) => {
     state.userById[action.user.id] = action.user;
   },
+
+  [t.USERS_TABLE_LOADING]: (state, action) => {
+    const { loading } = action.payload;
+    state.loading = !!loading;
+  },
 });
 
 /**

client/src/store/users/users.types.js

@@ -1,5 +1,5 @@
-
 export default {
   USERS_LIST_SET: 'USERS_LIST_SET',
+  USERS_TABLE_LOADING: 'USERS_TABLE_LOADING',
   USER_DETAILS_SET: 'USER_DETAILS_SET',
-};
+};

client/src/style/pages/dashboard.scss

@@ -307,7 +307,8 @@
 
   &__preferences-topbar{
     border-bottom: 1px solid #E5E5E5;
-    height: 70px;
+    // height: 70px;
+    height: 65px;
     padding: 0 0 0 22px;
     display: flex;
     flex-direction: row;

client/src/style/pages/preferences.scss

@@ -1,8 +1,7 @@
 .dashboard-content--preferences {
   // margin-left: 430px;
   margin-left: 410px;
-  width: 100%;
+  // width: 100%;
-  // height: max-content;
   position: relative;
 }
 
@@ -60,11 +59,10 @@
 .preferences__sidebar {
   background: #fdfdfd;
   position: fixed;
-  // left: 220px;
+  left: 190px;
-  left: 200px;
+  top: -5px;
-  top: 1px;
+  min-width: 220px;
-  min-width: 210px;
+  max-width: 220px;
-  max-width: 210px;
   height: 100%;
 
   .sidebar-wrapper {
@@ -108,9 +106,9 @@
 //  Preference
 //---------------------------------
 .preferences__inside-content--general {
+  margin: 20px;
   .bp3-form-group {
-    margin: 25px 20px 20px;
+    margin: 18px 18px;
-
     .bp3-label {
       min-width: 180px;
     }
@@ -142,6 +140,12 @@
       border: 1px solid #ced4da;
       padding: 8px;
     }
+    .bp3-button .bp3-icon:first-child:last-child,
+    .bp3-button .bp3-spinner + .bp3-icon:last-child {
+      position: absolute;
+      right: 15px;
+      display: inline-block;
+    }
   }
 }