diff --git a/client/package-lock.json b/client/package-lock.json index fcc94b500..8e7eeef03 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index b48eaceca..a862012b1 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/Dashboard/DashboardTopbar.js b/client/src/components/Dashboard/DashboardTopbar.js index 6b7c15f00..2a7b7a22d 100644 --- a/client/src/components/Dashboard/DashboardTopbar.js +++ b/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 = ( @@ -23,8 +24,16 @@ export default function DashboardTopbar({ pageTitle }) { ); return (
-

{ pageTitle }

- +
+ +

{ pageTitle }

+
+
@@ -43,4 +52,9 @@ export default function DashboardTopbar({ pageTitle }) {
); -} \ No newline at end of file +} + +const mapStateToProps = (state) => ({ + pageTitle: state.dashboard.pageTitle, +}); +export default connect(mapStateToProps)(DashboardTopbar); \ No newline at end of file diff --git a/client/src/components/Icon.js b/client/src/components/Icon.js new file mode 100644 index 000000000..e69de29bb diff --git a/client/src/containers/Dashboard/Accounts/AccountsChart.js b/client/src/containers/Dashboard/Accounts/AccountsChart.js index c54b451c3..cd7e70510 100644 --- a/client/src/containers/Dashboard/Accounts/AccountsChart.js +++ b/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 ( - - - - + + + + + + ); -}; +} -export default function AccountsChart() { - return ( - - - - - ); -} \ No newline at end of file +const mapActionsToProps = (dispatch) => ({ + changePageTitle: pageTitle => dispatch({ + type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle + }), +}); +export default connect(null, mapActionsToProps)(AccountsChart); \ No newline at end of file diff --git a/client/src/containers/Dashboard/Homepage.js b/client/src/containers/Dashboard/Homepage.js index 714371eea..ffbe29d9d 100644 --- a/client/src/containers/Dashboard/Homepage.js +++ b/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 (
asdasd
); -} \ No newline at end of file +} + +const mapActionsToProps = (dispatch) => ({ + changePageTitle: pageTitle => dispatch({ + type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle + }), +}); +export default connect(null, mapActionsToProps)(DashboardHomepage); \ No newline at end of file diff --git a/client/src/store/reducers/dashboard.js b/client/src/store/reducers/dashboard.js new file mode 100644 index 000000000..151242afb --- /dev/null +++ b/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; + }, +}); \ No newline at end of file diff --git a/client/src/store/reducers/index.js b/client/src/store/reducers/index.js index a201fadaf..db6b77ab9 100644 --- a/client/src/store/reducers/index.js +++ b/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, }); \ No newline at end of file diff --git a/client/src/store/types/dashboard.js b/client/src/store/types/dashboard.js new file mode 100644 index 000000000..bd8ccf051 --- /dev/null +++ b/client/src/store/types/dashboard.js @@ -0,0 +1,6 @@ + +const ACTION = { + CHANGE_DASHBOARD_PAGE_TITLE: 'CHANGE_DASHBOARD_PAGE_TITLE', +}; + +export default ACTION; \ No newline at end of file diff --git a/client/src/store/types/index.js b/client/src/store/types/index.js index d1262e336..337f2a6e4 100644 --- a/client/src/store/types/index.js +++ b/client/src/store/types/index.js @@ -1,5 +1,7 @@ import authentication from './authentication'; +import dashboard from './dashboard'; export default { ...authentication, + ...dashboard, }; \ No newline at end of file diff --git a/client/src/style/App.scss b/client/src/style/App.scss index 5d921677b..50689d3fc 100644 --- a/client/src/style/App.scss +++ b/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;