SideMenu: change to be a function component.

src/App.tsx

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

src/SideMenu/index.tsx

@@ -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 & {
+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;
-    if (this.props.etesync) {
+  if (etesync) {
     loggedInItems = (
       <React.Fragment>
         <ListItem
           primaryText="Journals"
           leftIcon={<ActionJournals />}
           onClick={() => {
-              this.props.onCloseDrawerRequest();
+            props.onCloseDrawerRequest();
-              this.props.history.push(routeResolver.getRoute("journals"));
+            history.push(routeResolver.getRoute("journals"));
           }}
         />
         <ListItem
           primaryText="Import"
           leftIcon={<IconImport />}
           onClick={() => {
-              this.props.onCloseDrawerRequest();
+            props.onCloseDrawerRequest();
-              this.props.history.push(routeResolver.getRoute("journals.import"));
+            history.push(routeResolver.getRoute("journals.import"));
           }}
         />
         <ListItem
           primaryText="Settings"
           leftIcon={<ActionSettings />}
           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>
     );
   }
@@ -97,8 +85,8 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
           primaryText="Main"
           leftIcon={<ActionHome />}
           onClick={() => {
-              this.props.onCloseDrawerRequest();
+            props.onCloseDrawerRequest();
-              this.props.history.push(routeResolver.getRoute("home"));
+            history.push(routeResolver.getRoute("home"));
           }}
         />
         {loggedInItems}
@@ -111,15 +99,4 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
       </List>
     </div>
   );
-  }
 }
-
-const mapStateToProps = (state: StoreState, _props: PropsType) => {
-  return {
-    userInfo: state.cache.userInfo,
-  };
-};
-
-export default withTheme(withRouter(connect(
-  mapStateToProps
-)(SideMenu)));