infra
/
etesync
2
0
Fork 0
Code Issues Pull Requests Packages Activity

SideMenu: change to be a function component.

master
Tom Hacohen 2020-08-05 17:35:33 +03:00
parent 2eaa9b503a
commit 749d9de581
2 changed files with 71 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -255,7 +255,7 @@ function App(props: PropsType) {
open={drawerOpen}
onClose={toggleDrawer}
>
<SideMenu etesync={credentials} onCloseDrawerRequest={closeDrawer} />
<SideMenu onCloseDrawerRequest={closeDrawer} />
</Drawer>
<ErrorBoundary>

163
src/SideMenu/index.tsx
View File

@ -2,10 +2,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from "react";
import { connect } from "react-redux";
import { RouteComponentProps, withRouter } from "react-router";
import { List, ListItem, ListSubheader, ListDivider } from "../widgets/List";
import { Theme, withTheme } from "@material-ui/core/styles";
import ActionCode from "@material-ui/icons/Code";
import ActionHome from "@material-ui/icons/Home";
import ActionSettings from "@material-ui/icons/Settings";
@ -19,107 +16,87 @@ import logo from "../images/logo.svg";
import { routeResolver } from "../App";
import { store, UserInfoData, StoreState, CredentialsData } from "../store";
import { store } from "../store";
import { logout } from "../store/actions";
import * as C from "../constants";
import { useTheme } from "@material-ui/core";
import { useCredentials } from "../login";
import { useHistory } from "react-router";
interface PropsType {
etesync: CredentialsData | null;
onCloseDrawerRequest: () => void;
}
type PropsTypeInner = RouteComponentProps<{}> & PropsType & {
userInfo: UserInfoData;
theme: Theme;
};
export default function SideMenu(props: PropsType) {
const theme = useTheme();
const etesync = useCredentials();
const username = etesync?.credentials.email ?? C.appName;
const history = useHistory();
class SideMenu extends React.PureComponent<PropsTypeInner> {
constructor(props: PropsTypeInner) {
super(props);
this.logout = this.logout.bind(this);
function logoutDo() {
store.dispatch(logout(etesync!));
props.onCloseDrawerRequest();
}
public logout() {
store.dispatch(logout(this.props.etesync!));
this.props.onCloseDrawerRequest();
}
public render() {
const { theme } = this.props;
const username = (this.props.etesync && this.props.etesync.credentials.email) ?
this.props.etesync.credentials.email
: C.appName;
let loggedInItems;
if (this.props.etesync) {
loggedInItems = (
<React.Fragment>
<ListItem
primaryText="Journals"
leftIcon={<ActionJournals />}
onClick={() => {
this.props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("journals"));
}}
/>
<ListItem
primaryText="Import"
leftIcon={<IconImport />}
onClick={() => {
this.props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("journals.import"));
}}
/>
<ListItem
primaryText="Settings"
leftIcon={<ActionSettings />}
onClick={() => {
this.props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("settings"));
}}
/>
<ListItem primaryText="Log Out" leftIcon={<LogoutIcon />} onClick={this.logout} />
</React.Fragment>
);
}
return (
<div style={{ overflowX: "hidden", width: 250 }}>
<div className="App-drawer-header">
<img alt="App logo" className="App-drawer-logo" src={logo} />
<div style={{ color: theme.palette.secondary.contrastText }}>
{username}
</div>
</div>
<List>
<ListItem
primaryText="Main"
leftIcon={<ActionHome />}
onClick={() => {
this.props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("home"));
}}
/>
{loggedInItems}
<ListDivider />
<ListSubheader>External Links</ListSubheader>
<ListItem primaryText="Website" leftIcon={<ActionHome />} href={C.homePage} />
<ListItem primaryText="FAQ" leftIcon={<ActionQuestionAnswer />} href={C.faq} />
<ListItem primaryText="Source Code" leftIcon={<ActionCode />} href={C.sourceCode} />
<ListItem primaryText="Report Issue" leftIcon={<ActionBugReport />} href={C.reportIssue} />
</List>
</div>
let loggedInItems;
if (etesync) {
loggedInItems = (
<React.Fragment>
<ListItem
primaryText="Journals"
leftIcon={<ActionJournals />}
onClick={() => {
props.onCloseDrawerRequest();
history.push(routeResolver.getRoute("journals"));
}}
/>
<ListItem
primaryText="Import"
leftIcon={<IconImport />}
onClick={() => {
props.onCloseDrawerRequest();
history.push(routeResolver.getRoute("journals.import"));
}}
/>
<ListItem
primaryText="Settings"
leftIcon={<ActionSettings />}
onClick={() => {
props.onCloseDrawerRequest();
history.push(routeResolver.getRoute("settings"));
}}
/>
<ListItem primaryText="Log Out" leftIcon={<LogoutIcon />} onClick={logoutDo} />
</React.Fragment>
);
}
return (
<div style={{ overflowX: "hidden", width: 250 }}>
<div className="App-drawer-header">
<img alt="App logo" className="App-drawer-logo" src={logo} />
<div style={{ color: theme.palette.secondary.contrastText }}>
{username}
</div>
</div>
<List>
<ListItem
primaryText="Main"
leftIcon={<ActionHome />}
onClick={() => {
props.onCloseDrawerRequest();
history.push(routeResolver.getRoute("home"));
}}
/>
{loggedInItems}
<ListDivider />
<ListSubheader>External Links</ListSubheader>
<ListItem primaryText="Website" leftIcon={<ActionHome />} href={C.homePage} />
<ListItem primaryText="FAQ" leftIcon={<ActionQuestionAnswer />} href={C.faq} />
<ListItem primaryText="Source Code" leftIcon={<ActionCode />} href={C.sourceCode} />
<ListItem primaryText="Report Issue" leftIcon={<ActionBugReport />} href={C.reportIssue} />
</List>
</div>
);
}
const mapStateToProps = (state: StoreState, _props: PropsType) => {
return {
userInfo: state.cache.userInfo,
};
};
export default withTheme(withRouter(connect(
mapStateToProps
)(SideMenu)));