chore: Refactoring all import directories to alias and all .js|.jsx renamed to be .ts|.tsx

src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx

@@ -8,21 +8,21 @@ import {
 } from '@blueprintjs/core';
 import {
   Icon,
+  DashboardActionsBar,
   DashboardRowsHeightButton,
   FormattedMessage as T,
-} from 'components';
-import { useRefreshCashflowTransactionsInfinity } from 'hooks/query';
+} from '@/components';
 
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { CashFlowMenuItems } from './utils';
+import { addMoneyIn, addMoneyOut } from '@/constants/cashflowOptions';
+import { useRefreshCashflowTransactionsInfinity } from '@/hooks/query';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withSettings from '../../Settings/withSettings';
-import withSettingsActions from '../../Settings/withSettingsActions';
-import { addMoneyIn, addMoneyOut } from '../../../common/cashflowOptions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 function AccountTransactionsActionsBar({
   // #withDialogActions

src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const AccountDeleteTransactionAlert = React.lazy(() =>
-  import('../../Alerts/CashFlow/AccountDeleteTransactionAlert'),
+const AccountDeleteTransactionAlert = React.lazy(
+  () => import('@/containers/Alerts/CashFlow/AccountDeleteTransactionAlert'),
 );
 
 /**

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx

@@ -1,23 +1,26 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { DataTable, TableFastCell, FormattedMessage as T } from 'components';
-import { TABLES } from 'common/tables';
+import {
+  DataTable,
+  TableFastCell,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+  TableVirtualizedListRows,
+  FormattedMessage as T,
+} from '@/components';
+import { TABLES } from '@/constants/tables';
 
-import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import withSettings from '@/containers/Settings/withSettings';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
-import withSettings from '../../Settings/withSettings';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
-import { useMemorizedColumnsWidths } from '../../../hooks';
+import { useMemorizedColumnsWidths } from '@/hooks';
 import { useAccountTransactionsColumns, ActionsMenu } from './components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { handleCashFlowTransactionType } from './utils';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Account transactions data table.

src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx

@@ -9,10 +9,10 @@ import {
   MenuItem,
   Classes,
 } from '@blueprintjs/core';
+import { Icon } from '@/components';
 import { useHistory } from 'react-router-dom';
 import { curry } from 'lodash/fp';
 
-import { Icon } from '../../../components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 
 function AccountSwitchButton() {

src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import 'style/pages/CashFlow/AccountTransactions/List.scss';
+import '@/style/pages/CashFlow/AccountTransactions/List.scss';
 
-import { DashboardPageContent } from 'components';
+import { DashboardPageContent } from '@/components';
 
-import { AccountTransactionsProvider } from './AccountTransactionsProvider';
 import AccountTransactionsActionsBar from './AccountTransactionsActionsBar';
 import AccountTransactionsDataTable from './AccountTransactionsDataTable';
+import { AccountTransactionsProvider } from './AccountTransactionsProvider';
 import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
 import { AccountTransactionsProgressBar } from './components';
 

src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { flatten, map } from 'lodash';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { IntersectionObserver } from 'components';
+import { IntersectionObserver, DashboardInsider } from '@/components';
 import {
   useAccountTransactionsInfinity,
   useCashflowAccounts,
   useAccount,
-} from 'hooks/query';
+} from '@/hooks/query';
 
 const AccountTransactionsContext = React.createContext();
 

src/containers/CashFlow/AccountTransactions/components.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
 import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
-
-import { MaterialProgressBar } from 'components';
-import { Can, FormatDateCell, If, Icon } from 'components';
+import {
+  Can,
+  FormatDateCell,
+  If,
+  Icon,
+  MaterialProgressBar,
+} from '@/components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
-import { TRANSACRIONS_TYPE } from 'common/cashflowOptions';
-import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
-import { safeCallback } from 'utils';
+import { TRANSACRIONS_TYPE } from '@/constants/cashflowOptions';
+import { AbilitySubject, CashflowAction } from '@/constants/abilityOption';
+import { safeCallback } from '@/utils';
 
 export function ActionsMenu({
   payload: { onDelete, onViewDetails },

src/containers/CashFlow/AccountTransactions/utils.tsx

@@ -7,7 +7,7 @@ import {
 } from '@blueprintjs/core';
 
 import { Select } from '@blueprintjs/select';
-import { Icon } from 'components';
+import { Icon } from '@/components';
 
 export const CashFlowMenuItems = ({
   text,

src/containers/CashFlow/AccountTransactions/withCashflowAccounts.tsx

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getCashflowAccountsTableStateFactory } from 'store/CashflowAccounts/CashflowAccounts.selectors';
+import { getCashflowAccountsTableStateFactory } from '@/store/CashflowAccounts/CashflowAccounts.selectors';
 
 export default (mapState) => {
   const getCashflowAccountsTableState = getCashflowAccountsTableStateFactory();

src/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions.tsx

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import {
   setCashflowAccountsTableState,
   resetCashflowAccountsTableState,
-} from 'store/CashflowAccounts/CashflowAccounts.actions';
+} from '@/store/CashflowAccounts/CashflowAccounts.actions';
 
 const mapActionsToProps = (dispatch) => ({
   setCashflowAccountsTableState: (queries) =>

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx

@@ -7,19 +7,22 @@ import {
   Alignment,
   Switch,
 } from '@blueprintjs/core';
-import { Can, Icon, FormattedMessage as T } from 'components';
-import { useRefreshCashflowAccounts } from 'hooks/query';
-import { CashflowAction, AbilitySubject } from '../../../common/abilityOption';
+import {
+  DashboardActionsBar,
+  Can,
+  Icon,
+  FormattedMessage as T,
+} from '@/components';
+import { useRefreshCashflowAccounts } from '@/hooks/query';
+import { CashflowAction, AbilitySubject } from '@/constants/abilityOption';
 
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withCashflowAccountsTableActions from '../AccountTransactions/withCashflowAccountsTableActions';
 
-import { AccountDialogAction } from '../../Dialogs/AccountDialog/utils';
-import { ACCOUNT_TYPE } from '../../../common';
+import { AccountDialogAction } from '@/containers/Dialogs/AccountDialog/utils';
+import { ACCOUNT_TYPE } from '@/constants';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Cash Flow accounts actions bar.

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsDataTable.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
 
-import { DataTable, TableFastCell } from 'components';
-import { TABLES } from 'common/tables';
+import { TABLES } from '@/constants/tables';
+import {
+  DataTable,
+  TableFastCell,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+} from '@/components';
 
-import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
-import withSettings from '../../Settings/withSettings';
+import withSettings from '@/containers/Settings/withSettings';
 
-import { useMemorizedColumnsWidths } from '../../../hooks';
+import { useMemorizedColumnsWidths } from '@/hooks';
 import { useCashFlowAccountsContext } from './CashFlowAccountsProvider';
 import { useCashFlowAccountsTableColumns } from './components';
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Cash flow accounts data table.
@@ -48,7 +50,6 @@ function CashFlowAccountsDataTable({
       expandToggleColumn={2}
       selectionColumnWidth={45}
       TableCellRenderer={TableFastCell}
-      
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       initialColumnsWidths={initialColumnsWidths}

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect } from 'react';
 import { compose } from 'lodash/fp';
 
-import 'style/pages/CashFlow/CashFlowAccounts/List.scss';
+import '@/style/pages/CashFlow/CashFlowAccounts/List.scss';
 
-import { DashboardPageContent } from 'components';
+import { DashboardPageContent } from '@/components';
 import { CashFlowAccountsProvider } from './CashFlowAccountsProvider';
 
-import CashFlowAccountsActionsBar from './CashFlowAccountsActionsBar';
 import CashflowAccountsGrid from './CashflowAccountsGrid';
+import CashFlowAccountsActionsBar from './CashFlowAccountsActionsBar';
 
-import withCashflowAccounts from '../AccountTransactions/withCashflowAccounts';
-import withCashflowAccountsTableActions from '../AccountTransactions/withCashflowAccountsTableActions';
+import withCashflowAccounts from '@/containers/CashFlow/AccountTransactions/withCashflowAccounts';
+import withCashflowAccountsTableActions from '@/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions';
 
 /**
  * Cashflow accounts list.

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsProvider.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-
-import { useCashflowAccounts } from 'hooks/query';
+import { DashboardInsider } from '@/components/Dashboard';
 
+import { useCashflowAccounts } from '@/hooks/query';
 import { transformAccountsStateToQuery } from './utils';
 
 const CashFlowAccountsContext = React.createContext();

src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx

@@ -1,34 +1,27 @@
 import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
 import { isNull, isEmpty } from 'lodash';
 import { compose, curry } from 'lodash/fp';
-import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { ContextMenu2 } from '@blueprintjs/popover2';
 import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
 
-import {
-  BankAccountsList,
-  BankAccount,
-  If,
-  Icon,
-  T,
-  Can,
-} from '../../../components';
+import { BankAccountsList, BankAccount, If, Icon, T, Can } from '@/components';
 import {
   AccountAction,
   CashflowAction,
   AbilitySubject,
-} from '../../../common/abilityOption';
+} from '@/constants/abilityOption';
 
 import { useCashFlowAccountsContext } from './CashFlowAccountsProvider';
 
-import withDrawerActions from '../../Drawer/withDrawerActions';
-import withAlertsActions from '../../Alert/withAlertActions';
-import withDialogActions from '../../Dialog/withDialogActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
-import { safeCallback } from 'utils';
-import { addMoneyIn, addMoneyOut } from 'common/cashflowOptions';
+import { safeCallback } from '@/utils';
+import { addMoneyIn, addMoneyOut } from '@/constants/cashflowOptions';
 
 const CASHFLOW_SKELETON_N = 4;
 

src/containers/CashFlow/CashFlowAccounts/components.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import intl from 'react-intl-universal';
 import { Intent, Tag } from '@blueprintjs/core';
-import { isBlank } from 'utils';
+import { isBlank } from '@/utils';
 import { Link } from 'react-router-dom';
 
 /**

src/containers/CashFlow/CashFlowAccounts/utils.tsx

@@ -1,11 +1,11 @@
-import { transformTableStateToQuery } from 'utils';
+import { transformTableStateToQuery } from '@/utils';
 
 /**
  * Transformes the table state to list query.
  */
- export const transformAccountsStateToQuery = (tableState) => {
+export const transformAccountsStateToQuery = (tableState) => {
   return {
     ...transformTableStateToQuery(tableState),
     inactive_mode: tableState.inactiveMode,
-  }
-}
+  };
+};