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}
onClose={toggleDrawer}
>
<SideMenu etesync={credentials} onCloseDrawerRequest={closeDrawer} />
<SideMenu onCloseDrawerRequest={closeDrawer} />
</Drawer>
<ErrorBoundary>

@ -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,67 +16,58 @@ 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) {
if (etesync) {
loggedInItems = (
<React.Fragment>
<ListItem
primaryText="Journals"
leftIcon={<ActionJournals />}
onClick={() => {
this.props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("journals"));
props.onCloseDrawerRequest();
history.push(routeResolver.getRoute("journals"));
}}
/>
<ListItem
primaryText="Import"
leftIcon={<IconImport />}
onClick={() => {
this.props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("journals.import"));
props.onCloseDrawerRequest();
history.push(routeResolver.getRoute("journals.import"));
}}
/>
<ListItem
primaryText="Settings"
leftIcon={<ActionSettings />}
onClick={() => {
this.props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("settings"));
props.onCloseDrawerRequest();
history.push(routeResolver.getRoute("settings"));
}}
/>
<ListItem primaryText="Log Out" leftIcon={<LogoutIcon />} onClick={this.logout} />
<ListItem primaryText="Log Out" leftIcon={<LogoutIcon />} onClick={logoutDo} />
</React.Fragment>
);
}
@ -97,8 +85,8 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
primaryText="Main"
leftIcon={<ActionHome />}
onClick={() => {
this.props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute("home"));
props.onCloseDrawerRequest();
history.push(routeResolver.getRoute("home"));
}}
/>
{loggedInItems}
@ -112,14 +100,3 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
</div>
);
}
}
const mapStateToProps = (state: StoreState, _props: PropsType) => {
return {
userInfo: state.cache.userInfo,
};
};
export default withTheme(withRouter(connect(
mapStateToProps
)(SideMenu)));

Loading…
Cancel
Save