feat: remove SET_DASHBOARD_REQUEST_LOADING reducer.

feat: fix dropdown filter.
feat: fix fetch resource data.

client/src/containers/Accounts/AccountsActionsBar.js

@@ -35,6 +35,9 @@ function AccountsActionsBar({
   // #withAccountsActions
   addAccountsTableQueries,
 
+  // #withAccounts
+  accountsTableQuery,
+
   selectedRows = [],
   onFilterChanged,
   onBulkDelete,
@@ -42,7 +45,9 @@ function AccountsActionsBar({
   onBulkActivate,
   onBulkInactive,
 }) {
-  const [filterCount, setFilterCount] = useState(0);
+  const [filterCount, setFilterCount] = useState(
+    accountsTableQuery?.filter_roles?.length || 0,
+  );
 
   const onClickNewAccount = () => {
     openDialog('account-form', {});
@@ -54,9 +59,10 @@ function AccountsActionsBar({
 
   const filterDropdown = FilterDropdown({
     fields: resourceFields,
+    initialConditions: accountsTableQuery.filter_roles,
     initialCondition: {
       fieldKey: 'name',
-      compatator: 'contains',
+      comparator: 'contains',
       value: '',
     },
     onFilterChange: (filterConditions) => {
@@ -171,8 +177,9 @@ const withAccountsActionsBar = connect(mapStateToProps);
 export default compose(
   withAccountsActionsBar,
   withDialogActions,
-  withAccounts(({ accountsViews }) => ({
+  withAccounts(({ accountsViews, accountsTableQuery }) => ({
     accountsViews,
+    accountsTableQuery,
   })),
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,

client/src/containers/Accounts/AccountsDataTable.js

@@ -51,11 +51,10 @@ function NormalCell({ cell }) {
 
 function BalanceCell({ cell }) {
   const account = cell.row.original;
-  const { balance = null } = account;
 
-  return balance ? (
+  return (account.amount) ? (
     <span>
-      <Money amount={balance.amount} currency={balance.currency_code} />
+      <Money amount={account.amount} currency={'USD'} />
     </span>
   ) : (
     <span class="placeholder">—</span>
@@ -245,7 +244,7 @@ function AccountsDataTable({
       {
         id: 'balance',
         Header: formatMessage({ id: 'balance' }),
-        accessor: 'balance',
+        accessor: 'amount',
         Cell: BalanceCell,
         width: 150,
       },
@@ -268,11 +267,7 @@ function AccountsDataTable({
   );
 
   const selectionColumn = useMemo(
-    () => ({
-      minWidth: 40,
-      width: 40,
-      maxWidth: 40,
-    }),
+    () => ({ minWidth: 45, width: 45, maxWidth: 45 }),
     [],
   );
 

client/src/containers/Customers/CustomerForm.js

@@ -32,13 +32,13 @@ function CustomerForm({
   // #withDashboardActions
   changePageTitle,
 
-  //#withCustomers
+  // #withCustomers
   customers,
 
-  //#withCustomerDetail
+  // #withCustomerDetail
   customer,
 
-  //#withCustomersActions
+  // #withCustomersActions
   requestSubmitCustomer,
   requestFetchCustomers,
   requestEditCustomer,
@@ -47,7 +47,7 @@ function CustomerForm({
   requestSubmitMedia,
   requestDeleteMedia,
 
-  //#Props
+  // #Props
   onFormSubmit,
   onCancelForm,
 }) {

client/src/containers/Customers/CustomerTypeRadioField.js

@@ -6,6 +6,7 @@ import { RadioGroup, Radio } from '@blueprintjs/core';
 export default function RadioCustomer(props) {
   const { onChange, ...rest } = props;
   const { formatMessage } = useIntl();
+
   return (
     <RadioGroup
       inline={true}

client/src/containers/Dialogs/AccountFormDialog.container.js

@@ -1,28 +0,0 @@
-import { connect } from 'react-redux';
-import { compose } from 'utils';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDialogRedux from 'components/DialogReduxConnect';
-import withAccountsActions from 'containers/Accounts/withAccountsActions';
-import withAccountDetail from 'containers/Accounts/withAccountDetail';
-import withAccounts from 'containers/Accounts/withAccounts';
-
-export const mapStateToProps = (state, props) => ({
-  dialogName: 'account-form',
-  accountId:
-    props.payload.action === 'edit' && props.payload.id
-      ? props.payload.id
-      : null,
-});
-const AccountFormDialogConnect = connect(mapStateToProps);
-
-export default compose(
-  withDialogRedux(null, 'account-form'),
-  AccountFormDialogConnect,
-  withAccountsActions,
-  withAccountDetail,
-  withAccounts(({ accountsTypes, accountsList }) => ({
-    accountsTypes,
-    accounts: accountsList,
-  })),
-  withDialogActions,
-);

client/src/containers/Dialogs/AccountFormDialog.js

@@ -1,405 +1,45 @@
-import React, { useCallback, useMemo, useEffect } from 'react';
-import {
-  Button,
-  Classes,
-  FormGroup,
-  InputGroup,
-  Intent,
-  TextArea,
-  Checkbox,
-  Position,
-} from '@blueprintjs/core';
-import { useFormik } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, omit } from 'lodash';
-import { useQuery, queryCache } from 'react-query';
-import classNames from 'classnames';
-import Yup from 'services/yup';
-import {
-  If,
-  ErrorMessage,
-  Dialog,
-  AppToaster,
-  FieldRequiredHint,
-  Hint,
-  AccountsSelectList,
-  AccountsTypesSelect,
-} from 'components';
-import AccountFormDialogContainer from 'containers/Dialogs/AccountFormDialog.container';
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'react-intl';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const AccountFormDialogContent = lazy(() => import('./AccountFormDialogContent'));
 
 /**
  * Account form dialog.
  */
 function AccountFormDialog({
   dialogName,
-  payload = { action: 'new', id: null },
+  payload = { action: '', id: null },
   isOpen,
-
-  // #withAccounts
-  accountsTypes,
-  accounts,
-
-  // #withAccountDetail
-  account,
-
-  // #withAccountsActions
-  requestFetchAccounts,
-  requestFetchAccountTypes,
-  requestFetchAccount,
-  requestSubmitAccount,
-  requestEditAccount,
-
-  // #withDialog
-  closeDialog,
 }) {
-  const { formatMessage } = useIntl();
-  const validationSchema = Yup.object().shape({
-    name: Yup.string()
-      .required()
-      .min(3)
-      .max(255)
-      .label(formatMessage({ id: 'account_name_' })),
-    code: Yup.string().digits().min(3).max(6),
-    account_type_id: Yup.number()
-      .required()
-      .label(formatMessage({ id: 'account_type_id' })),
-    description: Yup.string().min(3).max(512).nullable().trim(),
-    parent_account_id: Yup.number().nullable(),
-  });
-  const initialValues = useMemo(
-    () => ({
-      account_type_id: null,
-      name: '',
-      code: '',
-      description: '',
-    }),
-    [],
-  );
-  const transformApiErrors = (errors) => {
-    const fields = {};
-    if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
-      fields.code = formatMessage({ id: 'account_code_is_not_unique' });
-    }
-    return fields;
-  };
-
-  // Formik
-  const {
-    errors,
-    values,
-    touched,
-    setFieldValue,
-    resetForm,
-    handleSubmit,
-    isSubmitting,
-    getFieldProps,
-  } = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      ...initialValues,
-      ...(payload.action === 'edit' &&
-        pick(account, Object.keys(initialValues))),
-    },
-    validationSchema,
-    onSubmit: (values, { setSubmitting, setErrors }) => {
-      const form = omit(values, ['subaccount']);
-      const toastAccountName = values.code
-        ? `${values.code} - ${values.name}`
-        : values.name;
-
-      const afterSubmit = () => {
-        closeDialog(dialogName);
-        queryCache.invalidateQueries('accounts-table');
-        queryCache.invalidateQueries('accounts-list');
-      };
-      const afterErrors = (errors) => {
-        const errorsTransformed = transformApiErrors(errors);
-        setErrors({ ...errorsTransformed });
-        setSubmitting(false);
-      };
-      if (payload.action === 'edit') {
-        requestEditAccount(payload.id, form)
-          .then((response) => {
-            afterSubmit(response);
-
-            AppToaster.show({
-              message: formatMessage(
-                { id: 'service_has_been_successful_edited' },
-                {
-                  name: toastAccountName,
-                  service: formatMessage({ id: 'account' }),
-                },
-              ),
-              intent: Intent.SUCCESS,
-            });
-          })
-          .catch(afterErrors);
-      } else {
-        requestSubmitAccount({ form })
-          .then((response) => {
-            afterSubmit(response);
-
-            AppToaster.show({
-              message: formatMessage(
-                { id: 'service_has_been_successful_created' },
-                {
-                  name: toastAccountName,
-                  service: formatMessage({ id: 'account' }),
-                },
-              ),
-              intent: Intent.SUCCESS,
-              position: Position.BOTTOM,
-            });
-          })
-          .catch(afterErrors);
-      }
-    },
-  });
-
-  useEffect(() => {
-    if (values.parent_account_id) {
-      setFieldValue('subaccount', true);
-    }
-  }, [values.parent_account_id]);
-  
-  // Reset `parent account id` after change `account type`.
-  useEffect(() => {
-    setFieldValue('parent_account_id', null);
-  }, [values.account_type_id]);
-
-  // Filtered accounts based on the given account type.
-  const filteredAccounts = useMemo(
-    () =>
-      accounts.filter(
-        (account) =>
-          account.account_type_id === values.account_type_id ||
-          !values.account_type_id,
-      ),
-    [accounts, values.account_type_id],
-  );
-
-  // Handles dialog close.
-  const handleClose = useCallback(() => {
-    closeDialog(dialogName);
-  }, [closeDialog, dialogName]);
-
-  // Fetches accounts list.
-  const fetchAccountsList = useQuery(
-    'accounts-list',
-    () => requestFetchAccounts(),
-    { enabled: false },
-  );
-
-  // Fetches accounts types.
-  const fetchAccountsTypes = useQuery(
-    'accounts-types-list',
-    async () => {
-      await requestFetchAccountTypes();
-    },
-    { enabled: false },
-  );
-
-  // Fetch the given account id on edit mode.
-  const fetchAccount = useQuery(
-    ['account', payload.id],
-    (key, _id) => requestFetchAccount(_id),
-    { enabled: false },
-  );
-
-  const isFetching =
-    fetchAccountsList.isFetching ||
-    fetchAccountsTypes.isFetching ||
-    fetchAccount.isFetching;
-
-  // Fetch requests on dialog opening.
-  const onDialogOpening = useCallback(() => {
-    fetchAccountsList.refetch();
-    fetchAccountsTypes.refetch();
-
-    if (payload.action === 'edit' && payload.id) {
-      fetchAccount.refetch();
-    }
-    if (payload.action === 'new_child') {
-      setFieldValue('parent_account_id', payload.parentAccountId);
-      setFieldValue('account_type_id', payload.accountTypeId);
-    }
-  }, [payload, fetchAccount, fetchAccountsList, fetchAccountsTypes]);
-
-  // Handle account type change.
-  const onChangeAccountType = useCallback(
-    (accountType) => {
-      setFieldValue('account_type_id', accountType.id);
-    },
-    [setFieldValue],
-  );
-
-  // Handles change sub-account.
-  const onChangeSubaccount = useCallback(
-    (account) => {
-      setFieldValue('parent_account_id', account.id);
-    },
-    [setFieldValue],
-  );
-
-  // Handle dialog on closed.
-  const onDialogClosed = useCallback(() => {
-    resetForm();
-  }, [resetForm]);
-
   return (
     <Dialog
       name={dialogName}
       title={
-        payload.action === 'edit' ? (
-          <T id={'edit_account'} />
-        ) : (
-          <T id={'new_account'} />
-        )
+        (payload.action === 'edit') ?
+          (<T id={'edit_account'} />) :
+          (<T id={'new_account'} />)
       }
-      className={{
-        'dialog--loading': isFetching,
-        'dialog--account-form': true,
-      }}
+      className={'dialog--account-form'}
       autoFocus={true}
       canEscapeKeyClose={true}
-      onClosed={onDialogClosed}
-      onOpening={onDialogOpening}
       isOpen={isOpen}
-      isLoading={isFetching}
-      onClose={handleClose}
     >
-      <form onSubmit={handleSubmit}>
-        <div className={Classes.DIALOG_BODY}>
-          <FormGroup
-            label={<T id={'account_type'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames(
-              'form-group--account-type',
-              'form-group--select-list',
-              Classes.FILL,
-            )}
-            inline={true}
-            helperText={
-              <ErrorMessage name="account_type_id" {...{ errors, touched }} />
-            }
-            intent={
-              errors.account_type_id && touched.account_type_id && Intent.DANGER
-            }
-          >
-            <AccountsTypesSelect
-              accountsTypes={accountsTypes}
-              selectedTypeId={values.account_type_id}
-              defaultSelectText={<T id={'select_account_type'} />}
-              onTypeSelected={onChangeAccountType}
-              buttonProps={{ disabled: payload.action === 'edit' }}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-
-          <FormGroup
-            label={<T id={'account_name'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--account-name'}
-            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}
-              {...getFieldProps('name')}
-            />
-          </FormGroup>
-
-          <FormGroup
-            label={<T id={'account_code'} />}
-            className={'form-group--account-code'}
-            intent={errors.code && touched.code && Intent.DANGER}
-            helperText={<ErrorMessage name="code" {...{ errors, touched }} />}
-            inline={true}
-            labelInfo={<Hint content={<T id="account_code_hint" />} />}
-          >
-            <InputGroup
-              medium={true}
-              intent={errors.code && touched.code && Intent.DANGER}
-              {...getFieldProps('code')}
-            />
-          </FormGroup>
-
-          <FormGroup
-            label={' '}
-            className={classNames('form-group--subaccount')}
-            inline={true}
-          >
-            <Checkbox
-              inline={true}
-              label={
-                <>
-                  <T id={'sub_account'} />
-                  <Hint />
-                </>
-              }
-              {...getFieldProps('subaccount')}
-              checked={values.subaccount}
-            />
-          </FormGroup>
-
-          <If condition={values.subaccount}>
-            <FormGroup
-              label={<T id={'parent_account'} />}
-              className={classNames(
-                'form-group--parent-account',
-                'form-group--select-list',
-                Classes.FILL,
-              )}
-              inline={true}
-            >
-              <AccountsSelectList
-                accounts={filteredAccounts}
-                onAccountSelected={onChangeSubaccount}
-                defaultSelectText={<T id={'select_parent_account'} />}
-                selectedAccountId={values.parent_account_id}
-              />
-            </FormGroup>
-          </If>
-
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={errors.description && Intent.DANGER}
-            helperText={errors.description && errors.credential}
-            inline={true}
-          >
-            <TextArea
-              growVertically={true}
-              height={280}
-              {...getFieldProps('description')}
-            />
-          </FormGroup>
-        </div>
-
-        <div className={Classes.DIALOG_FOOTER}>
-          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose} style={{ minWidth: '75px' }}>
-              <T id={'close'} />
-            </Button>
-            <Button
-              intent={Intent.PRIMARY}
-              disabled={isSubmitting}
-              style={{ minWidth: '75px' }}
-              type="submit"
-            >
-              {payload.action === 'edit' ? (
-                <T id={'edit'} />
-              ) : (
-                <T id={'submit'} />
-              )}
-            </Button>
-          </div>
-        </div>
-      </form>
+      <DialogSuspense>
+        <AccountFormDialogContent
+          dialogName={dialogName}
+          accountId={payload.id}
+          action={payload.action}
+          parentAccountId={payload.parentAccountId}
+          accountTypeId={payload.accountTypeId}
+        />
+      </DialogSuspense>
     </Dialog>
   );
 }
 
-export default AccountFormDialogContainer(AccountFormDialog);
+export default compose(
+  withDialogRedux(),
+)(AccountFormDialog);

client/src/containers/Dialogs/AccountFormDialogContent.js

@@ -0,0 +1,400 @@
+import React, { useCallback, useMemo, useEffect } from 'react';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+  Checkbox,
+  Position,
+} from '@blueprintjs/core';
+import { useFormik } from 'formik';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { pick, omit } from 'lodash';
+import { useQuery, queryCache } from 'react-query';
+import classNames from 'classnames';
+import Yup from 'services/yup';
+import {
+  If,
+  ErrorMessage,
+  AppToaster,
+  FieldRequiredHint,
+  Hint,
+  AccountsSelectList,
+  AccountsTypesSelect,
+  DialogContent,
+} from 'components';
+
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+import withAccountDetail from 'containers/Accounts/withAccountDetail';
+import withAccounts from 'containers/Accounts/withAccounts';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+/**
+ * Account form dialog content.
+ */
+function AccountFormDialogContent({
+  // #withAccounts
+  accountsTypes,
+  accounts,
+
+  // #withAccountDetail
+  account,
+
+  // #withAccountsActions
+  requestFetchAccounts,
+  requestFetchAccountTypes,
+  requestFetchAccount,
+  requestSubmitAccount,
+  requestEditAccount,
+
+  closeDialog,
+
+  // #ownProp
+  accountId,
+  action,
+  dialogName,
+  parentAccountId,
+  accountTypeId,
+}) {
+  const { formatMessage } = useIntl();
+  const validationSchema = Yup.object().shape({
+    name: Yup.string()
+      .required()
+      .min(3)
+      .max(255)
+      .label(formatMessage({ id: 'account_name_' })),
+    code: Yup.string().digits().min(3).max(6),
+    account_type_id: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'account_type_id' })),
+    description: Yup.string().min(3).max(512).nullable().trim(),
+    parent_account_id: Yup.number().nullable(),
+  });
+  const initialValues = useMemo(
+    () => ({
+      account_type_id: null,
+      name: '',
+      code: '',
+      description: '',
+    }),
+    [],
+  );
+  const transformApiErrors = (errors) => {
+    const fields = {};
+    if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
+      fields.code = formatMessage({ id: 'account_code_is_not_unique' });
+    }
+    return fields;
+  };
+
+  // Formik
+  const {
+    errors,
+    values,
+    touched,
+    setFieldValue,
+    resetForm,
+    handleSubmit,
+    isSubmitting,
+    getFieldProps,
+  } = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      ...initialValues,
+      ...(accountId && pick(account, Object.keys(initialValues))),
+    },
+    validationSchema,
+    onSubmit: (values, { setSubmitting, setErrors }) => {
+      const form = omit(values, ['subaccount']);
+      const toastAccountName = values.code
+        ? `${values.code} - ${values.name}`
+        : values.name;
+
+      const afterSubmit = () => {
+        closeDialog(dialogName);
+        queryCache.invalidateQueries('accounts-table');
+        queryCache.invalidateQueries('accounts-list');
+      };
+      const afterErrors = (errors) => {
+        const errorsTransformed = transformApiErrors(errors);
+        setErrors({ ...errorsTransformed });
+        setSubmitting(false);
+      };
+      if (accountId) {
+        requestEditAccount(accountId, form)
+          .then((response) => {
+            afterSubmit(response);
+
+            AppToaster.show({
+              message: formatMessage(
+                { id: 'service_has_been_successful_edited' },
+                {
+                  name: toastAccountName,
+                  service: formatMessage({ id: 'account' }),
+                },
+              ),
+              intent: Intent.SUCCESS,
+            });
+          })
+          .catch(afterErrors);
+      } else {
+        requestSubmitAccount({ form })
+          .then((response) => {
+            afterSubmit(response);
+
+            AppToaster.show({
+              message: formatMessage(
+                { id: 'service_has_been_successful_created' },
+                {
+                  name: toastAccountName,
+                  service: formatMessage({ id: 'account' }),
+                },
+              ),
+              intent: Intent.SUCCESS,
+              position: Position.BOTTOM,
+            });
+          })
+          .catch(afterErrors);
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (values.parent_account_id) {
+      setFieldValue('subaccount', true);
+    }
+  }, [values.parent_account_id]);
+
+  // Reset `parent account id` after change `account type`.
+  useEffect(() => {
+    setFieldValue('parent_account_id', null);
+  }, [values.account_type_id]);
+
+  // Filtered accounts based on the given account type.
+  const filteredAccounts = useMemo(
+    () =>
+      accounts.filter(
+        (account) =>
+          account.account_type_id === values.account_type_id ||
+          !values.account_type_id,
+      ),
+    [accounts, values.account_type_id],
+  );
+
+  // Handles dialog close.
+  const handleClose = useCallback(() => {
+    closeDialog(dialogName);
+  }, [closeDialog, dialogName]);
+
+  // Fetches accounts list.
+  const fetchAccountsList = useQuery(
+    'accounts-list',
+    () => requestFetchAccounts(),
+  );
+
+  // Fetches accounts types.
+  const fetchAccountsTypes = useQuery(
+    'accounts-types-list',
+    async () => {
+      await requestFetchAccountTypes();
+    },
+  );
+
+  // Fetch the given account id on edit mode.
+  const fetchAccount = useQuery(
+    ['account', accountId],
+    (key, _id) => requestFetchAccount(_id),
+    { enabled: accountId },
+  );
+
+  const isFetching =
+    fetchAccountsList.isFetching ||
+    fetchAccountsTypes.isFetching ||
+    fetchAccount.isFetching;
+
+  // Fetch requests on dialog opening.
+  const onDialogOpening = useCallback(() => {
+    fetchAccountsList.refetch();
+    fetchAccountsTypes.refetch();
+
+    if (action === 'edit' && accountId) {
+      fetchAccount.refetch();
+    }
+    if (action === 'new_child') {
+      setFieldValue('parent_account_id', parentAccountId);
+      setFieldValue('account_type_id', accountTypeId);
+    }
+  }, [
+    parentAccountId,
+    accountTypeId,
+    fetchAccount,
+    fetchAccountsList,
+    fetchAccountsTypes,
+  ]);
+
+  // Handle account type change.
+  const onChangeAccountType = useCallback(
+    (accountType) => {
+      setFieldValue('account_type_id', accountType.id);
+    },
+    [setFieldValue],
+  );
+
+  // Handles change sub-account.
+  const onChangeSubaccount = useCallback(
+    (account) => {
+      setFieldValue('parent_account_id', account.id);
+    },
+    [setFieldValue],
+  );
+
+  // Handle dialog on closed.
+  const onDialogClosed = useCallback(() => {
+    resetForm();
+  }, [resetForm]);
+
+  return (
+    <DialogContent isLoading={isFetching}>
+      <form onSubmit={handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={<T id={'account_type'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames(
+              'form-group--account-type',
+              'form-group--select-list',
+              Classes.FILL,
+            )}
+            inline={true}
+            helperText={
+              <ErrorMessage name="account_type_id" {...{ errors, touched }} />
+            }
+            intent={
+              errors.account_type_id && touched.account_type_id && Intent.DANGER
+            }
+          >
+            <AccountsTypesSelect
+              accountsTypes={accountsTypes}
+              selectedTypeId={values.account_type_id}
+              defaultSelectText={<T id={'select_account_type'} />}
+              onTypeSelected={onChangeAccountType}
+              buttonProps={{ disabled: action === 'edit' }}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={<T id={'account_name'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--account-name'}
+            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}
+              {...getFieldProps('name')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={<T id={'account_code'} />}
+            className={'form-group--account-code'}
+            intent={errors.code && touched.code && Intent.DANGER}
+            helperText={<ErrorMessage name="code" {...{ errors, touched }} />}
+            inline={true}
+            labelInfo={<Hint content={<T id="account_code_hint" />} />}
+          >
+            <InputGroup
+              medium={true}
+              intent={errors.code && touched.code && Intent.DANGER}
+              {...getFieldProps('code')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={' '}
+            className={classNames('form-group--subaccount')}
+            inline={true}
+          >
+            <Checkbox
+              inline={true}
+              label={
+                <>
+                  <T id={'sub_account'} />
+                  <Hint />
+                </>
+              }
+              {...getFieldProps('subaccount')}
+              checked={values.subaccount}
+            />
+          </FormGroup>
+
+          <If condition={values.subaccount}>
+            <FormGroup
+              label={<T id={'parent_account'} />}
+              className={classNames(
+                'form-group--parent-account',
+                'form-group--select-list',
+                Classes.FILL,
+              )}
+              inline={true}
+            >
+              <AccountsSelectList
+                accounts={filteredAccounts}
+                onAccountSelected={onChangeSubaccount}
+                defaultSelectText={<T id={'select_parent_account'} />}
+                selectedAccountId={values.parent_account_id}
+              />
+            </FormGroup>
+          </If>
+
+          <FormGroup
+            label={<T id={'description'} />}
+            className={'form-group--description'}
+            intent={errors.description && Intent.DANGER}
+            helperText={errors.description && errors.credential}
+            inline={true}
+          >
+            <TextArea
+              growVertically={true}
+              height={280}
+              {...getFieldProps('description')}
+            />
+          </FormGroup>
+        </div>
+
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose} style={{ minWidth: '75px' }}>
+              <T id={'close'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              disabled={isSubmitting}
+              style={{ minWidth: '75px' }}
+              type="submit"
+            >
+              {action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </DialogContent>
+  );
+}
+
+export default compose(
+  withAccountsActions,
+  withAccountDetail,
+  withAccounts(({ accountsTypes, accountsList }) => ({
+    accountsTypes,
+    accounts: accountsList,
+  })),
+  withDialogActions,
+)(AccountFormDialogContent);

client/src/containers/Homepage/Homepage.js

@@ -1,20 +1,26 @@
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
-import t from 'store/types';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withSettings from 'containers/Settings/withSettings';
+import { compose } from 'utils';
+
+function DashboardHomepage({ changePageTitle, name }) {
 
-const DashboardHomepage = ({ changePageTitle }) => {
   useEffect(() => {
-    changePageTitle('Craig’s Design and Landscaping Services')
-  });
+    changePageTitle(name)
+  }, [name, changePageTitle]);
+
   return (
-    <div>asdasd</div>
+    <DashboardInsider name="homepage">
+      
+    </DashboardInsider>
   );
 }
 
-const mapActionsToProps = (dispatch) => ({
-  changePageTitle: pageTitle => dispatch({
-    type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
-  }),
-});
-
-export default connect(null, mapActionsToProps)(DashboardHomepage);
+export default compose(
+  withDashboardActions,
+  withSettings(({ organizationSettings }) => ({
+    name: organizationSettings.name,
+  })),
+)(DashboardHomepage);

client/src/containers/Resources/withResourceDetails.js

@@ -1,18 +1,20 @@
 import {connect} from 'react-redux';
 import {
   getResourceColumns,
-  getResourceFieldsFactory,
   getResourceMetadata,
-  getResourceData,
-} from 'store/resources/resources.reducer';
+  getResourceFieldsFactory,
+  getResourceDataFactory,
+} from 'store/resources/resources.selectors';
 
 export default (mapState) => {
   const getResourceFields = getResourceFieldsFactory();
+  const getResourceData = getResourceDataFactory();
 
   const mapStateToProps = (state, props) => {
     const { resourceName } = props;
+
     const mapped =  {
-      resourceData: getResourceData(state, resourceName),
+      resourceData: getResourceData(state, props),
       resourceFields: getResourceFields(state, props),
       resourceColumns: getResourceColumns(state, resourceName),
       resourceMetadata: getResourceMetadata(state, resourceName),

client/src/containers/Settings/withSettings.js

@@ -1,8 +1,13 @@
 import { connect } from 'react-redux';
 
-export const mapStateToProps = (state, props) => ({
-  organizationSettings: state.settings.data.organization,
-  manualJournalsSettings: state.settings.data.manual_journals,
-});
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      organizationSettings: state.settings.data.organization,
+      manualJournalsSettings: state.settings.data.manual_journals,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
 
-export default connect(mapStateToProps);
+  return connect(mapStateToProps);
+}