Skip to content

Commit e98cc51

Browse files
kulgavykulgavy
committed
Small Architecture refactoring
1 parent a5a14ed commit e98cc51

File tree

9 files changed

+122
-86
lines changed

9 files changed

+122
-86
lines changed

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
work correctly both with client-side routing and a non-root public URL.
2323
Learn how to configure a non-root public URL by running `npm run build`.
2424
-->
25-
<title>React App</title>
25+
<title>React Material Template</title>
2626
</head>
2727
<body style="font-family: 'Roboto', sans-serif;">
2828
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/components/Header/HeaderContainer.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@ import { connect } from 'react-redux';
33

44
import HeaderView from './HeaderView';
55
import { signOut } from '../../pages/login/LoginState';
6+
import { toggleSidebar } from '../Layout/LayoutState';
67

78
export default compose(
89
connect(
9-
null,
10-
{ signOut },
10+
state => ({
11+
isSidebarOpened: state.layout.isSidebarOpened,
12+
}),
13+
{ signOut, toggleSidebar },
1114
),
1215
withState('mailMenu', 'setMailMenu', null),
1316
withState('isMailsUnread', 'setIsMailsUnread', true),

‎src/components/Layout/Layout.js

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎src/components/Layout/LayoutContainer.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { compose } from 'recompose';
2+
import { connect } from 'react-redux';
3+
4+
import { toggleSidebar } from './LayoutState';
5+
6+
import LayoutView from './LayoutView';
7+
8+
9+
export default compose(
10+
connect(
11+
state => ({
12+
isSidebarOpened: state.layout.isSidebarOpened,
13+
}),
14+
{ toggleSidebar },
15+
)
16+
)(LayoutView);

‎src/components/Layout/LayoutState.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export const initialState = {
2+
isSidebarOpened: false,
3+
};
4+
5+
export const TOGGLE_SIDEBAR = "Layout/TOGGLE_SIDEBAR";
6+
7+
export const toggleSidebar = () => ({
8+
type: TOGGLE_SIDEBAR,
9+
})
10+
11+
export default function LoginReducer(state = initialState, { type, payload }) {
12+
switch (type) {
13+
case TOGGLE_SIDEBAR:
14+
return {
15+
...state,
16+
isSidebarOpened: !state.isSidebarOpened,
17+
};
18+
default:
19+
return state;
20+
}
21+
}

‎src/components/Layout/LayoutView.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React, { Component } from 'react';
2+
import { withStyles, CssBaseline } from '@material-ui/core';
3+
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
4+
import classnames from 'classnames';
5+
6+
import Header from '../Header';
7+
import Sidebar from '../Sidebar';
8+
9+
// pages
10+
import Dashboard from '../../pages/dashboard';
11+
import Typography from '../../pages/typography';
12+
import Notifications from '../../pages/notifications';
13+
import Maps from '../../pages/maps';
14+
import Tables from '../../pages/tables';
15+
import Icons from '../../pages/icons';
16+
import Charts from '../../pages/charts';
17+
18+
const Layout = ({ classes, isSidebarOpened, toggleSidebar }) => (
19+
<div className={classes.root}>
20+
<CssBaseline />
21+
<BrowserRouter>
22+
<React.Fragment>
23+
<Header />
24+
<Sidebar />
25+
<div className={classnames(classes.content, { [classes.contentShift]: isSidebarOpened })}>
26+
<div className={classes.fakeToolbar} />
27+
<Switch>
28+
<Route path="/app/dashboard" component={Dashboard} />
29+
<Route path="/app/typography" component={Typography} />
30+
<Route path="/app/tables" component={Tables} />
31+
<Route path="/app/notifications" component={Notifications} />
32+
<Route exact path="/app/ui" render={() => <Redirect to="/app/ui/icons" />} />
33+
<Route path="/app/ui/maps" component={Maps} />
34+
<Route path="/app/ui/icons" component={Icons} />
35+
<Route path="/app/ui/charts" component={Charts} />
36+
</Switch>
37+
</div>
38+
</React.Fragment>
39+
</BrowserRouter>
40+
</div>
41+
);
42+
43+
const styles = theme => ({
44+
root: {
45+
display: 'flex',
46+
maxWidth: '100vw',
47+
overflowX: 'hidden',
48+
},
49+
content: {
50+
flexGrow: 1,
51+
padding: theme.spacing.unit * 3,
52+
width: `calc(100vw - 240px)`,
53+
minHeight: '100vh',
54+
},
55+
contentShift: {
56+
width: `calc(100vw - ${240 + theme.spacing.unit * 6}px)`,
57+
transition: theme.transitions.create(['width', 'margin'], {
58+
easing: theme.transitions.easing.sharp,
59+
duration: theme.transitions.duration.enteringScreen,
60+
}),
61+
},
62+
fakeToolbar: {
63+
...theme.mixins.toolbar,
64+
}
65+
});
66+
67+
export default withStyles(styles)(Layout);

‎src/components/Layout/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
"name": "Layout",
33
"version": "1.0.0",
44
"private": true,
5-
"main": "Layout.js"
5+
"main": "LayoutContainer.js"
66
}

‎src/components/Sidebar/SidebarContainer.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
import { withTheme } from '@material-ui/core/styles';
22
import { compose, withState, withHandlers, lifecycle } from 'recompose';
3+
import { connect } from 'react-redux';
4+
5+
import { toggleSidebar } from '../Layout/LayoutState';
36

47
import SidebarView from './SidebarView';
58

69
export default compose(
710
withTheme(),
11+
connect(
12+
state => ({
13+
isSidebarOpened: state.layout.isSidebarOpened,
14+
}),
15+
{ toggleSidebar },
16+
),
817
withState('isPermanent', 'setPermanent', true),
918
withHandlers({
1019
handleWindowWidthChange: ({ width, isPermanent, setPermanent, theme }) => () => {

‎src/store/reducers.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { combineReducers } from 'redux';
22

3+
import layout from '../components/Layout/LayoutState';
34
import login from '../pages/login/LoginState';
45

56
export default combineReducers({
7+
layout,
68
login,
79
});

0 commit comments

Comments
 (0)