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,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();
+  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>
+    );
   }
 
-  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>
+  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>
-        <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>
-    );
-  }
+      <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)));