Skip to content

Commit

Permalink
refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
Maxim-Mazurok committed Apr 13, 2019
1 parent ca45cfc commit 2a790e3
Show file tree
Hide file tree
Showing 8 changed files with 322 additions and 87 deletions.
24 changes: 24 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Expand Up @@ -31,6 +31,7 @@
"@types/node": "^11.13.4",
"@types/react": "^16.8.13",
"@types/react-dom": "^16.8.4",
"@types/react-router-dom": "^4.3.2",
"material-components-web": "^1.1.1",
"material-icons": "^0.3.1",
"node-sass": "^4.11.0",
Expand Down
49 changes: 27 additions & 22 deletions src/App.js
@@ -1,14 +1,27 @@
import React, { Component } from "react";

import { Snackbar } from "@material/react-snackbar";
import { BrowserRouter, Route } from "react-router-dom";

import Settings from "./components/settings/settings";
import Dashboard from "./components/dashboard/dashboard";

import "./App.scss";

class App extends Component {
import Main from "./components/main";
import { BrowserRouter } from "react-router-dom";

export default class App extends Component {
menu = [
{
url: '/',
icon: "dashboard",
text: "Dashboard"
},
{
url: '/charts',
icon: "pie_chart",
text: "Charts"
},
{
url: '/settings',
icon: "settings",
text: "Settings"
}
];

constructor(props) {
super(props);
Expand Down Expand Up @@ -156,22 +169,14 @@ class App extends Component {
render() {
return (
<BrowserRouter>
<Route
path="/"
exact
render={(props) => <Dashboard {...props} state={this.state} />}
/>
<Route
path="/settings"
render={(props) => <Settings {...props} state={this.state} />}
/>

<Snackbar
message={this.state.snackbarMessage}
<Main
navigateTo={this.navigateTo}
menu={this.menu}
closeDrawer={this.closeDrawer}
openDrawer={this.openDrawer}
selectedMenuIndex={this.state.selectedMenuIndex}
/>
</BrowserRouter>
);
}
}

export default App;
55 changes: 5 additions & 50 deletions src/components/dashboard/dashboard.js
Expand Up @@ -15,9 +15,6 @@ import '@material/react-fab/dist/fab.css';

import { withRouter } from "react-router-dom";

import TopBar from "../top-bar/top-bar";
import Hamburger from "../hamburger/hamburger";

class Dashboard extends Component {
clientId =
process.env.REACT_APP_GOOGLE_CLIENT_ID ||
Expand All @@ -26,27 +23,10 @@ class Dashboard extends Component {
process.env.REACT_APP_SHEET_ID ||
"1eYrQf0xhs2mTSWEzQRfSM-MD-tCcx1r0NVEacLg3Jrc";

menu = [
{
url: '/',
icon: "dashboard",
text: "Dashboard"
},
{
url: '/charts',
icon: "pie_chart",
text: "Charts"
},
{
url: '/settings',
icon: "settings",
text: "Settings"
}
];

constructor(props) {
super(props);
this.state = props.state;
this.state.expenses = [];
}

componentDidMount() {
Expand Down Expand Up @@ -74,10 +54,10 @@ class Dashboard extends Component {
signedInChanged = (signedIn) => {
this.setState({ signedIn });
if (this.state.signedIn) {
this.setState({ profile: window.gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile() });
this.props.signedInChanged(window.gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile());
this.load();
} else {
this.setState({ profile: null });
this.props.signedInChanged(null);
}
};

Expand Down Expand Up @@ -125,34 +105,9 @@ class Dashboard extends Component {
};
}

openDrawer = () => {
this.setState({ drawerOpen: true });
};

closeDrawer = () => {
this.setState({ drawerOpen: false });
};

navigateTo = (url) => {
this.props.history.push(url)
};

render() {
return (
<div
className="dashboard-root"
>
<TopBar
title="Dashboard"
openDrawer={this.openDrawer}
/>
<Hamburger
closeDrawer={this.closeDrawer}
menu={this.menu}
navigateTo={this.navigateTo}
drawerOpen={this.state.drawerOpen}
profile={this.state.profile}
/>
<React.Fragment>
<TopAppBarFixedAdjust>
{this.state.signedIn === undefined && <LoadingBar />}
{this.state.signedIn === false &&
Expand All @@ -169,7 +124,7 @@ class Dashboard extends Component {
</div>}
{this.state.signedIn && this.renderBody()}
</TopAppBarFixedAdjust>
</div>
</React.Fragment>
);
}

Expand Down
16 changes: 9 additions & 7 deletions src/components/hamburger/hamburger.tsx
Expand Up @@ -9,26 +9,26 @@ import "@material/react-drawer/dist/drawer.css";
import List, { ListItem, ListItemGraphic, ListItemText } from "@material/react-list";
import '@material/react-list/dist/list.css';

type Props = {
type HamburgerProps = {
drawerOpen?: boolean
closeDrawer: () => void
navigateTo: (url: string) => void
profile?: gapi.auth2.BasicProfile
profile?: gapi.auth2.BasicProfile | null
selectedMenuIndex?: number
menu: Menu
}

type State = {}
type HamburgerState = {}

type MenuItem = {
url: string,
icon: string,
text: string
}

type Menu = MenuItem[]
export type Menu = MenuItem[]

export default class Hamburger extends Component<Props, State> {
export default class Hamburger extends Component<HamburgerProps, HamburgerState> {
private closeDrawer = () => {
if (typeof this.props.closeDrawer === 'function') {
this.props.closeDrawer();
Expand All @@ -45,9 +45,11 @@ export default class Hamburger extends Component<Props, State> {
}
};

render(): React.ReactElement<Props, React.JSXElementConstructor<State>> {
render(): React.ReactElement<HamburgerProps, React.JSXElementConstructor<HamburgerState>> {
const menu = this.props.menu.map((menuItem: MenuItem) =>
<ListItem>
<ListItem
key={menuItem.text}
>
<ListItemGraphic graphic={<MaterialIcon icon={menuItem.icon} />} />
<ListItemText primaryText={menuItem.text} />
</ListItem>
Expand Down
88 changes: 88 additions & 0 deletions src/components/main.tsx
@@ -0,0 +1,88 @@
import React, { Component } from "react";

import { Route, RouteComponentProps, withRouter } from "react-router-dom";
import TopBar from "./top-bar/top-bar";
import Hamburger, { Menu } from "./hamburger/hamburger";
import Dashboard from "./dashboard/dashboard";
import Settings from "./settings/settings";
import { Snackbar } from "@material/react-snackbar";

type MainProps = {
selectedMenuIndex: number,
openDrawer: () => void,
closeDrawer: () => void,
navigateTo: () => void,
menu: Menu,
}

type MainState = {
snackbarMessage: string,
drawerOpen: boolean
profile: gapi.auth2.BasicProfile | null
}

class Main extends Component<RouteComponentProps<{}> & MainProps, MainState> {
state: MainState = {
snackbarMessage: '',
drawerOpen: false,
profile: null,
};

openDrawer = () => {
this.setState({ drawerOpen: true });
};

closeDrawer = () => {
this.setState({ drawerOpen: false });
};

navigateTo = (url: string) => {
this.props.history.push(url);
};

signedInChanged = (profile: gapi.auth2.BasicProfile | null) => {
this.setState({ profile });
};

render(): React.ReactElement<RouteComponentProps<{}> & MainProps, React.JSXElementConstructor<MainState>> {
return (
<React.Fragment>
<TopBar
title={this.props.menu[this.props.selectedMenuIndex].text}
openDrawer={this.openDrawer}
/>
<Hamburger
closeDrawer={this.closeDrawer}
menu={this.props.menu}
navigateTo={this.navigateTo}
drawerOpen={this.state.drawerOpen}
profile={this.state.profile}
/>
<div
className={`${this.props.menu[this.props.selectedMenuIndex].text.toLowerCase()}-root`}
>
<Route
path="/"
exact
render={(props) =>
<Dashboard
{...props}
state={this.state}
menu={this.props.menu}
signedInChanged={this.signedInChanged}
/>}
/>
<Route
path="/settings"
render={(props) => <Settings {...props} state={this.state} menu={this.props.menu} />}
/>
</div>
<Snackbar
message={this.state.snackbarMessage || ''}
/>
</React.Fragment>
);
}
}

export default withRouter(Main);

0 comments on commit 2a790e3

Please sign in to comment.