fix issues.

client/src/components/Accounts/AccountsActionsBar.js

@@ -14,7 +14,7 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
-import { useRouteMatch } from 'react-router-dom';
+import { useRouteMatch, useHistory } from 'react-router-dom';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import DialogConnect from 'connectors/Dialog.connector';
 import AccountsConnect from 'connectors/Accounts.connector';
@@ -32,14 +32,21 @@ function AccountsActionsBar({
   onBulkDelete,
   onBulkArchive,
 }) {
-  const {path} = useRouteMatch();
+  const history = useHistory();
+
   const onClickNewAccount = () => { openDialog('account-form', {}); };
 
   const accountsFields = getResourceFields('accounts');
   const [filterCount, setFilterCount] = useState(0);
 
+  const onClickViewItem = (view) => {
+    history.push(view
+      ? `/dashboard/accounts/${view.id}/custom_view` :
+        '/dashboard/accounts');
+  };
+
   const viewsMenuItems = views.map((view) => {
-    return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
+    return (<MenuItem onClick={() => onClickViewItem(view)} text={view.name} />);
   });
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
  
@@ -131,15 +138,8 @@ function AccountsActionsBar({
   );
 }
 
-const mapStateToProps = state => {
-  return {
-    // selectedRows: state.accounts.selectedRows
-  };
-};
-
 export default compose(
   DialogConnect,
   AccountsConnect,
   ResourceConnect,
-  connect(mapStateToProps),
 )(AccountsActionsBar);

client/src/components/Accounts/AccountsDataTable.js

@@ -21,7 +21,9 @@ import DataTable from 'components/DataTable';
 import Money from 'components/Money';
 import { useUpdateEffect } from 'hooks';
 
+
 function AccountsDataTable({
+  loading,
   accounts,
   onDeleteAccount,
   onInactiveAccount,
@@ -34,7 +36,6 @@ function AccountsDataTable({
   onFetchData,
   onSelectedRowsChange
 }) {
-  const {custom_view_id: customViewId} = useParams();
   const [initialMount, setInitialMount] = useState(false);
 
   useUpdateEffect(() => {
@@ -43,19 +44,6 @@ function AccountsDataTable({
     }
   }, [accountsLoading, setInitialMount]);
 
-  useEffect(() => {
-    const viewMeta = getViewItem(customViewId);
-
-    if (customViewId) {
-      changeCurrentView(customViewId);
-      setTopbarEditView(customViewId);
-    }
-    changePageSubtitle((customViewId && viewMeta) ? viewMeta.name : '');
-  }, [customViewId]);
-
-  // Clear page subtitle when unmount the page.
-  useEffect(() => () => { changePageSubtitle(''); }, []);
-
   const handleEditAccount = useCallback((account) => () => {
     openDialog('account-form', { action: 'edit', id: account.id });
   }, [openDialog]);
@@ -173,17 +161,19 @@ function AccountsDataTable({
   }, [onSelectedRowsChange]);
 
   return (
-    <DataTable
-      columns={columns}
-      data={accounts}
-      onFetchData={handleDatatableFetchData}
-      manualSortBy={true}
-      selectionColumn={selectionColumn}
-      expandable={true} 
-      treeGraph={true}
-      onSelectedRowsChange={handleSelectedRowsChange}
-      loading={accountsLoading && !initialMount}
-      spinnerProps={{size: 30}} />
+    <LoadingIndicator loading={loading} mount={false}>
+      <DataTable
+        columns={columns}
+        data={accounts}
+        onFetchData={handleDatatableFetchData}
+        manualSortBy={true}
+        selectionColumn={selectionColumn}
+        expandable={true} 
+        treeGraph={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        loading={accountsLoading && !initialMount}
+        spinnerProps={{size: 30}} />
+    </LoadingIndicator>
   );
 }
 

client/src/components/Accounts/AccountsViewsTabs.js

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useCallback} from 'react';
 import { useHistory } from 'react-router';
 import { connect } from 'react-redux';
 import {
@@ -16,6 +16,7 @@ import { compose } from 'utils';
 import AccountsConnect from 'connectors/Accounts.connector';
 import DashboardConnect from 'connectors/Dashboard.connector';
 import {useUpdateEffect} from 'hooks';
+import ViewConnect from 'connectors/View.connector';
 
 function AccountsViewsTabs({
   views,
@@ -23,59 +24,74 @@ function AccountsViewsTabs({
   customViewChanged,
   addAccountsTableQueries,
   onViewChanged,
+  getViewItem,
+  changeCurrentView,
+  changePageSubtitle,
 }) {
   const history = useHistory();
-  const { custom_view_id: customViewId } = useParams();
+  const { custom_view_id: customViewId = null } = useParams();
 
+  useEffect(() => {
+    const viewMeta = getViewItem(customViewId);
+
+    changeCurrentView(customViewId || -1);
+    setTopbarEditView(customViewId);
+    changePageSubtitle((customViewId && viewMeta) ? viewMeta.name : '');
+  }, [customViewId]);
+
+  // Clear page subtitle when unmount the page.
+  useEffect(() => () => { changePageSubtitle(''); }, []);
+
+  // Handle click a new view tab.
   const handleClickNewView = () => {
     setTopbarEditView(null);
     history.push('/dashboard/custom_views/accounts/new');
   };
+
+  // Handle view tab link click.
   const handleViewLinkClick = () => {
     setTopbarEditView(customViewId);
-  }
+  };
 
-  useUpdateEffect(() => {
+  useEffect(() => {
     customViewChanged && customViewChanged(customViewId);
 
     addAccountsTableQueries({
-      custom_view_id: customViewId || null,
+      custom_view_id: customViewId,
     });
+  }, [customViewId]);
+
+  useUpdateEffect(() => {
     onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
-  useEffect(() => {
-    addAccountsTableQueries({
-      custom_view_id: customViewId,
-    })   
-  }, [customViewId]);
-
-  const tabs = views.map(view => {
+  const tabs = views.map((view) => {
     const baseUrl = '/dashboard/accounts';
+
     const link = (
       <Link
         to={`${baseUrl}/${view.id}/custom_view`}
         onClick={handleViewLinkClick}
-      >{view.name}</Link>
+      >{ view.name }</Link>
     );
-    return <Tab
-      id={`custom_view_${view.id}`}
-      title={link} />;
+    return <Tab id={`custom_view_${view.id}`} title={link} />;
   });
+
   return (
     <Navbar className='navbar--dashboard-views'>
       <NavbarGroup align={Alignment.LEFT}>
         <Tabs
           id='navbar'
           large={true}
-          selectedTabId={`custom_view_${customViewId}`}
+          selectedTabId={customViewId ? `custom_view_${customViewId}` : 'all'}
           className='tabs--dashboard-views'
         >
           <Tab
-            id='all'
-            title={<Link to={`/dashboard/accounts`}>All</Link>} />
-
-          {tabs}
+            id={'all'}
+            title={<Link to={`/dashboard/accounts`}>All</Link>}
+            onClick={handleViewLinkClick}
+          />
+          { tabs }
           <Button
             className='button--new-view'
             icon={<Icon icon='plus' />}
@@ -91,4 +107,5 @@ function AccountsViewsTabs({
 export default compose(
   AccountsConnect,
   DashboardConnect,
+  ViewConnect,
 )(AccountsViewsTabs);

client/src/components/Dashboard/Dashboard.js

@@ -7,7 +7,7 @@ import PreferencesContent from 'components/Preferences/PreferencesContent';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 import Search from 'containers/Dashboard/GeneralSearch/Search';
 
-export default function () {
+export default function Dashboard() {
   return (
     <div className='dashboard'>
       <Switch>

client/src/components/Dashboard/DashboardContentRoute.js

@@ -9,8 +9,8 @@ export default function DashboardContentRoute() {
       <Switch>
         { routes.map((route, index) => (
           <Route
-            exact
-            // key={index}
+            exact={route.exact}
+            key={index}
             path={`${route.path}`}
             component={route.component} />
         ))}

client/src/components/Preferences/PreferencesContentRoute.js

@@ -1,10 +1,14 @@
 import React from 'react';
-import { Route, Switch, useRouteMatch } from 'react-router-dom';
+import { Route, Switch, Redirect } from 'react-router-dom';
 import preferencesRoutes from 'routes/preferences'
 
 export default function DashboardContentRoute() {
+  const defaultTab = '/dashboard/preferences/general';
+
   return (
     <Route pathname="/dashboard/preferences">
+      <Redirect from='/dashboard/preferences' to={defaultTab} />
+
       <Switch>
         { preferencesRoutes.map((route, index) => (
           <Route

client/src/components/Preferences/PreferencesTopbar.js

@@ -1,11 +1,31 @@
 import React from 'react';
+import { Route, Switch } from 'react-router-dom';
 import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
+import UsersActions from 'containers/Dashboard/Preferences/UsersActions';
+import CurrenciesActions from 'containers/Dashboard/Preferences/CurrenciesActions';
+
 
 export default function PreferencesTopbar() {
   return (
     <div class="dashboard__preferences-topbar">
       <h2>Accounts</h2>
 
+      <div class="preferences__topbar-actions">
+        <Route pathname="/dashboard/preferences">
+          <Switch>
+            <Route
+              exact
+              path={'/dashboard/preferences/users'}
+              component={UsersActions} />
+
+            <Route
+              exact
+              path={'/dashboard/preferences/currencies'}
+              component={CurrenciesActions} />
+          </Switch>
+        </Route>
+      </div>
+
       <div class="dashboard__topbar-user">
         <DashboardTopbarUser />
       </div>