refactoring: account form.

refactoring: expense form.
refactoring: manual journal form.
refactoring: invoice form.

client/src/components/Dashboard/DashboardContentRoute.js

@@ -1,20 +1,31 @@
-import React from 'react';
-import { Route, Switch  } from 'react-router-dom';
-import routes from 'routes/dashboard'
+import React, { useEffect, Suspense } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import routes from 'routes/dashboard';
 
+import DashboardPage from './DashboardPage';
+
+/**
+ * Dashboard content route.
+ */
 export default function DashboardContentRoute() {
-
   return (
     <Route pathname="/">
       <Switch>
-        { routes.map((route, index) => (
+        {routes.map((route, index) => (
           <Route
             exact={route.exact}
             key={index}
             path={`${route.path}`}
-            component={route.component} />
+          >
+            <DashboardPage
+              Component={route.component}
+              pageTitle={route.pageTitle}
+              backLink={route.backLink}
+              sidebarShrink={route.sidebarShrink}
+            />
+          </Route>
         ))}
       </Switch>
     </Route>
   );
-}
+}

client/src/components/Dashboard/DashboardContentTable.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+/**
+ * Dashboard content table.
+ */
+export default function DashboardContentTable({ children }) {
+  return (<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>{ children }</div>)
+}

client/src/components/Dashboard/DashboardPage.js

@@ -0,0 +1,56 @@
+import React, { useEffect, Suspense } from 'react';
+import { CLASSES } from 'common/classes';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import { compose } from 'utils';
+/**
+ * Dashboard pages wrapper.
+ */
+function DashboardPage({
+  // #ownProps
+  pageTitle,
+  backLink,
+  sidebarShrink,
+  Component,
+
+  // #withDashboardActions
+  changePageTitle,
+  setDashboardBackLink,
+  setSidebarShrink,
+  resetSidebarPreviousExpand,
+}) {
+  useEffect(() => {
+    pageTitle && changePageTitle(pageTitle);
+
+    return () => {
+      pageTitle && changePageTitle('');
+    };
+  });
+
+  useEffect(() => {
+    backLink && setDashboardBackLink(backLink);
+
+    return () => {
+      backLink && setDashboardBackLink(false);
+    };
+  }, [backLink, setDashboardBackLink]);
+
+  // Handle sidebar shrink in mount and reset to the pervious state
+  // once the page unmount.
+  useEffect(() => {
+    sidebarShrink && setSidebarShrink();
+
+    return () => {
+      sidebarShrink && resetSidebarPreviousExpand();
+    };
+  }, [resetSidebarPreviousExpand, sidebarShrink, setSidebarShrink]);
+
+  return (
+    <div className={CLASSES.DASHBOARD_PAGE}>
+      <Suspense fallback={''}>
+        <Component />
+      </Suspense>
+    </div>
+  );
+}
+
+export default compose(withDashboardActions)(DashboardPage);

client/src/components/Dashboard/DashboardPageContent.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
+/**
+ * Dashboard page content.
+ */
 export default function DashboardPageContent({ children }) {
   return (
     <div class="dashboard__page-content">