This commit is contained in:
Ahmed Bouhuolia
2020-02-18 23:09:15 +02:00
parent a37341ff00
commit 56701951b7
11 changed files with 142 additions and 38 deletions

View File

@@ -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",

View File

@@ -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",

View File

@@ -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);

View File

View File

@@ -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);

View File

@@ -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);

View File

@@ -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;
},
});

View File

@@ -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,
});

View File

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

View File

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

View File

@@ -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;