WIP

client/package-lock.json

@@ -1357,6 +1357,26 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@reduxjs/toolkit": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.2.5.tgz",
+      "integrity": "sha512-/OWoW5mniUXAomw4+3ZhhWodcs1/SRvK2HKyxLXdW6vKgmJhiBiSHe/huHARlKWujEmGaJrkafx548GE494bCQ==",
+      "requires": {
+        "immer": "^4.0.1",
+        "redux": "^4.0.0",
+        "redux-devtools-extension": "^2.13.8",
+        "redux-immutable-state-invariant": "^2.1.0",
+        "redux-thunk": "^2.3.0",
+        "reselect": "^4.0.0"
+      },
+      "dependencies": {
+        "immer": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/immer/-/immer-4.0.2.tgz",
+          "integrity": "sha512-Q/tm+yKqnKy4RIBmmtISBlhXuSDrB69e9EKTYiIenIKQkXBQir43w+kN/eGiax3wt1J0O1b2fYcNqLSbEcXA7w=="
+        }
+      }
+    },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz",
@@ -4021,6 +4041,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -5617,6 +5642,21 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.1.4.tgz",
+      "integrity": "sha512-oKz8S+yQBzuQVSEoxkqqJrKQS5XJASWGVn6mrs+oTWrBoHgByVwwI1qHiVc9GKDpZBU9vAxXYAKz2BvujlwunA==",
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.14",
+        "lodash-es": "^4.17.14",
+        "react-fast-compare": "^2.0.1",
+        "scheduler": "^0.18.0",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -11132,6 +11172,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.6.tgz",
       "integrity": "sha512-Yzpno3enVzSrSCnnljmr4b/2KUQSMZaPuqmS26t9k4nW7uwJk6STWmH9heNjPuvqUTO3jOSPkHoKgO4+Dw7uIw=="
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "react-hook-form": {
       "version": "4.9.4",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-4.9.4.tgz",
@@ -11342,6 +11387,11 @@
         "redux-devtools-instrument": "^1.9.0"
       }
     },
+    "redux-devtools-extension": {
+      "version": "2.13.8",
+      "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz",
+      "integrity": "sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg=="
+    },
     "redux-devtools-instrument": {
       "version": "1.9.6",
       "resolved": "https://registry.npmjs.org/redux-devtools-instrument/-/redux-devtools-instrument-1.9.6.tgz",
@@ -11352,6 +11402,15 @@
         "symbol-observable": "^1.0.2"
       }
     },
+    "redux-immutable-state-invariant": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/redux-immutable-state-invariant/-/redux-immutable-state-invariant-2.1.0.tgz",
+      "integrity": "sha512-3czbDKs35FwiBRsx/3KabUk5zSOoTXC+cgVofGkpBNv3jQcqIe5JrHcF5AmVt7B/4hyJ8MijBIpCJ8cife6yJg==",
+      "requires": {
+        "invariant": "^2.1.0",
+        "json-stringify-safe": "^5.0.1"
+      }
+    },
     "redux-thunk": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
@@ -11584,6 +11643,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "reselect": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
+      "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
+    },
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",

client/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@babel/core": "7.8.4",
     "@blueprintjs/core": "^3.23.1",
+    "@reduxjs/toolkit": "^1.2.5",
     "@svgr/webpack": "4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",

client/src/components/Dashboard/DashboardTopbar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {connect} from 'react-redux';
 import {
   Navbar,
   NavbarGroup,
@@ -10,7 +11,7 @@ import {
   Popover,
 } from '@blueprintjs/core';
 
-export default function DashboardTopbar({ pageTitle }) {
+function DashboardTopbar({ pageTitle }) {
   const userAvatarDropMenu = (
     <Menu>
       <MenuItem icon="graph" text="Graph" />
@@ -23,8 +24,16 @@ export default function DashboardTopbar({ pageTitle }) {
   );
   return (
     <div class="dashboard__topbar">
-      <h1 class="dashboard__title">{ pageTitle }</h1>
+      <div>
-      
+        <Button>
+          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false">
+            <title>Menu</title>
+            <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path>
+          </svg>
+        </Button>
+        <h1 class="dashboard__title">{ pageTitle }</h1>
+      </div>
+
       <div class="dashboard__topbar-actions">
         <Navbar class="dashboard__topbar-navbar">
           <NavbarGroup>
@@ -43,4 +52,9 @@ export default function DashboardTopbar({ pageTitle }) {
       </div>
     </div>
   );
-}
+}
+
+const mapStateToProps = (state) => ({
+  pageTitle: state.dashboard.pageTitle,
+});
+export default connect(mapStateToProps)(DashboardTopbar);

client/src/containers/Dashboard/Accounts/AccountsChart.js

@@ -1,37 +1,26 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import {
+import { connect } from 'react-redux';
-  Cell,
+import t from 'store/types';
-  Column,
-  ColumnHeaderCell,
-  CopyCellsMenuItem,
-  IMenuContext,
-  SelectionModes,
-  Table,
-  Utils,
-} from "@blueprintjs/table";
 
-function RecordSortableColumn() {
+function AccountsChart({ changePageTitle }) {  
+  useEffect(() => {
+    changePageTitle('Chart of Accounts');
+  });
   return (
-    <Menu>
+    <React.Fragment>
-      <MenuItem
+      <DashboardActionsBar />
-        icon="sort-asc"
+      <DashboardPageContent>
-        text="Sort Wins Asc"
+      
-      />
+      </DashboardPageContent>
-      <MenuItem
+    </React.Fragment>
-        icon="sort-desc"
-        text="Sort Wins Desc"
-      />
-    </Menu>
   );
-};
+}
 
-export default function AccountsChart() {
+const mapActionsToProps = (dispatch) => ({
-  return (
+  changePageTitle: pageTitle => dispatch({
-    <DashboardActionsBar />
+    type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
-    <DashboardPageContent>
+  }),
-    
+});
-    </DashboardPageContent>
+export default connect(null, mapActionsToProps)(AccountsChart);
-  );
-}

client/src/containers/Dashboard/Homepage.js

@@ -1,7 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import t from 'store/types';
 
-export default function DashboardHomepage() {
+const DashboardHomepage = ({ changePageTitle }) => {
+  useEffect(() => {
+    changePageTitle('Homepage')
+  });
   return (
     <div>asdasd</div>
   );
-}
+}
+
+const mapActionsToProps = (dispatch) => ({
+  changePageTitle: pageTitle => dispatch({
+    type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
+  }),
+});
+export default connect(null, mapActionsToProps)(DashboardHomepage);

client/src/store/reducers/dashboard.js

@@ -0,0 +1,12 @@
+import t from 'store/types';
+import { createReducer } from '@reduxjs/toolkit';
+
+const initialState = {
+  pageTitle: '',  
+};
+
+export default createReducer(initialState, {
+  [t.CHANGE_DASHBOARD_PAGE_TITLE]: (state, action) => {
+    state.pageTitle = action.pageTitle;
+  },
+});

client/src/store/reducers/index.js

@@ -1,10 +1,12 @@
 import { combineReducers } from 'redux';
 import authentication from './authentication';
+import dashboard from './dashboard';
 // import accounts from './accounts';
 // import users from './users';
 
 export default combineReducers({
   authentication,
+  dashboard,
   // users,
   // accounts,
 });

client/src/store/types/dashboard.js

@@ -0,0 +1,6 @@
+
+const ACTION = {
+  CHANGE_DASHBOARD_PAGE_TITLE: 'CHANGE_DASHBOARD_PAGE_TITLE',
+};
+
+export default ACTION;

client/src/store/types/index.js

@@ -1,5 +1,7 @@
 import authentication from './authentication';
+import dashboard from './dashboard';
 
 export default {
   ...authentication,
+  ...dashboard,
 };

client/src/style/App.scss

@@ -6,6 +6,8 @@
 
 @import "pages/authentication.scss";
 
+$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
+
 .dashboard{
   display: flex;
   height: 100vh;