WIP

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