SideMenu: change to be a function component.

master
Tom Hacohen 4 years ago
parent 2eaa9b503a
commit 749d9de581

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

@ -2,10 +2,7 @@
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
import * as React from "react"; 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 { List, ListItem, ListSubheader, ListDivider } from "../widgets/List";
import { Theme, withTheme } from "@material-ui/core/styles";
import ActionCode from "@material-ui/icons/Code"; import ActionCode from "@material-ui/icons/Code";
import ActionHome from "@material-ui/icons/Home"; import ActionHome from "@material-ui/icons/Home";
import ActionSettings from "@material-ui/icons/Settings"; import ActionSettings from "@material-ui/icons/Settings";
@ -19,67 +16,58 @@ import logo from "../images/logo.svg";
import { routeResolver } from "../App"; import { routeResolver } from "../App";
import { store, UserInfoData, StoreState, CredentialsData } from "../store"; import { store } from "../store";
import { logout } from "../store/actions"; import { logout } from "../store/actions";
import * as C from "../constants"; import * as C from "../constants";
import { useTheme } from "@material-ui/core";
import { useCredentials } from "../login";
import { useHistory } from "react-router";
interface PropsType { interface PropsType {
etesync: CredentialsData | null;
onCloseDrawerRequest: () => void; onCloseDrawerRequest: () => void;
} }
type PropsTypeInner = RouteComponentProps<{}> & PropsType & { export default function SideMenu(props: PropsType) {
userInfo: UserInfoData; const theme = useTheme();
theme: Theme; const etesync = useCredentials();
}; const username = etesync?.credentials.email ?? C.appName;
const history = useHistory();
class SideMenu extends React.PureComponent<PropsTypeInner> { function logoutDo() {
constructor(props: PropsTypeInner) { store.dispatch(logout(etesync!));
super(props); props.onCloseDrawerRequest();
this.logout = this.logout.bind(this);
} }
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; let loggedInItems;
if (this.props.etesync) { if (etesync) {
loggedInItems = ( loggedInItems = (
<React.Fragment> <React.Fragment>
<ListItem <ListItem
primaryText="Journals" primaryText="Journals"
leftIcon={<ActionJournals />} leftIcon={<ActionJournals />}
onClick={() => { onClick={() => {
this.props.onCloseDrawerRequest(); props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("journals")); history.push(routeResolver.getRoute("journals"));
}} }}
/> />
<ListItem <ListItem
primaryText="Import" primaryText="Import"
leftIcon={<IconImport />} leftIcon={<IconImport />}
onClick={() => { onClick={() => {
this.props.onCloseDrawerRequest(); props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("journals.import")); history.push(routeResolver.getRoute("journals.import"));
}} }}
/> />
<ListItem <ListItem
primaryText="Settings" primaryText="Settings"
leftIcon={<ActionSettings />} leftIcon={<ActionSettings />}
onClick={() => { onClick={() => {
this.props.onCloseDrawerRequest(); props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("settings")); history.push(routeResolver.getRoute("settings"));
}} }}
/> />
<ListItem primaryText="Log Out" leftIcon={<LogoutIcon />} onClick={this.logout} /> <ListItem primaryText="Log Out" leftIcon={<LogoutIcon />} onClick={logoutDo} />
</React.Fragment> </React.Fragment>
); );
} }
@ -97,8 +85,8 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
primaryText="Main" primaryText="Main"
leftIcon={<ActionHome />} leftIcon={<ActionHome />}
onClick={() => { onClick={() => {
this.props.onCloseDrawerRequest(); props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("home")); history.push(routeResolver.getRoute("home"));
}} }}
/> />
{loggedInItems} {loggedInItems}
@ -112,14 +100,3 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
</div> </div>
); );
} }
}
const mapStateToProps = (state: StoreState, _props: PropsType) => {
return {
userInfo: state.cache.userInfo,
};
};
export default withTheme(withRouter(connect(
mapStateToProps
)(SideMenu)));

Loading…
Cancel
Save