App: change to be a function component.

src/App.tsx

@@ -3,8 +3,8 @@
 
 import * as React from "react";
 import { List as ImmutableList } from "immutable";
-import { connect } from "react-redux";
+import { connect, useDispatch } from "react-redux";
-import { withRouter } from "react-router";
+import { useHistory } from "react-router";
 import { BrowserRouter } from "react-router-dom";
 import { MuiThemeProvider as ThemeProvider, createMuiTheme } from "@material-ui/core/styles"; // v1.x
 import amber from "@material-ui/core/colors/amber";
@@ -38,8 +38,6 @@ import * as actions from "./store/actions";
 
 import { credentialsSelector } from "./login";
 
-import { History } from "history";
-
 export const routeResolver = new RouteResolver({
   home: "",
   pim: {
@@ -95,40 +93,40 @@ export const routeResolver = new RouteResolver({
   },
 });
 
-const AppBarWitHistory = withRouter(
+interface AppBarPropsType {
-  class extends React.PureComponent {
-    public props: {
-      title: string;
   toggleDrawerIcon: any;
-      history?: History;
-      staticContext?: any;
   iconElementRight: any;
-    };
+}
 
-    constructor(props: any) {
+function AppBarWitHistory(props: AppBarPropsType) {
-      super(props);
+  const history = useHistory();
-      this.goBack = this.goBack.bind(this);
+
-      this.canGoBack = this.canGoBack.bind(this);
+  function canGoBack() {
+    return (
+      (history!.length > 1) &&
+      (history!.location.pathname !== routeResolver.getRoute("pim")) &&
+      (history!.location.pathname !== routeResolver.getRoute("home"))
+    );
   }
 
-    public render() {
+  function goBack() {
+    history!.goBack();
+  }
   const {
-        staticContext,
     toggleDrawerIcon,
-        history,
     iconElementRight,
-        ...props
+    ...rest
-      } = this.props;
+  } = props;
   return (
     <AppBar
       position="static"
-          {...props}
+      {...rest}
     >
       <Toolbar>
         <div style={{ marginLeft: -12, marginRight: 20 }}>
-              {!this.canGoBack() ?
+          {!canGoBack() ?
             toggleDrawerIcon :
-                <IconButton onClick={this.goBack}><NavigationBack /></IconButton>
+            <IconButton onClick={goBack}><NavigationBack /></IconButton>
           }
         </div>
 
@@ -142,52 +140,51 @@ const AppBarWitHistory = withRouter(
   );
 }
 
-    private canGoBack() {
-      return (
-        (this.props.history!.length > 1) &&
-        (this.props.history!.location.pathname !== routeResolver.getRoute("pim")) &&
-        (this.props.history!.location.pathname !== routeResolver.getRoute("home"))
-      );
-    }
-
-    private goBack() {
-      this.props.history!.goBack();
-    }
-  }
-);
-
 const IconRefreshWithSpin = withSpin(NavigationRefresh);
 
-class App extends React.PureComponent {
+interface PropsType {
-  public state: {
-    drawerOpen: boolean;
-    errorsDialog: boolean;
-  };
-
-  public props: {
   credentials: store.CredentialsData;
   entries: store.EntriesData;
   fetchCount: number;
   darkMode: boolean;
   errors: ImmutableList<Error>;
-  };
+}
 
-  constructor(props: any) {
+function App(props: PropsType) {
-    super(props);
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
-    this.state = { drawerOpen: false, errorsDialog: false };
+  const [errorsDialog, setErrorsDialog] = React.useState(false);
+  const dispatch = useDispatch();
 
-    this.toggleDrawer = this.toggleDrawer.bind(this);
+  function refresh() {
-    this.closeDrawer = this.closeDrawer.bind(this);
+    dispatch(actions.fetchAll(props.credentials, props.entries));
-    this.refresh = this.refresh.bind(this);
-    this.autoRefresh = this.autoRefresh.bind(this);
   }
 
-  public render() {
+  function autoRefresh() {
-    const credentials = this.props.credentials ?? null;
+    if (navigator.onLine && props.credentials &&
-    const { darkMode } = this.props;
+      !(window.location.pathname.match(/.*\/(new|edit|duplicate)$/))) { 
+      refresh();
+    }
+  }
 
-    const errors = this.props.errors;
+  React.useEffect(() => {
-    const fetching = this.props.fetchCount > 0;
+    const interval = 60 * 1000;
+    const id = setInterval(autoRefresh, interval);
+    return () => clearInterval(id);
+  });
+
+  function toggleDrawer() {
+    setDrawerOpen(!drawerOpen);
+  }
+
+  function closeDrawer() {
+    setDrawerOpen(false);
+  }
+
+  const credentials = props.credentials ?? null;
+  const { darkMode } = props;
+
+  const errors = props.errors;
+  const fetching = props.fetchCount > 0;
 
   const muiTheme = createMuiTheme({
     palette: {
@@ -215,17 +212,17 @@ class App extends React.PureComponent {
       <BrowserRouter>
         <div style={styles.main} className={darkMode ? "theme-dark" : "theme-light"}>
           <AppBarWitHistory
-              toggleDrawerIcon={<IconButton onClick={this.toggleDrawer}><NavigationMenu /></IconButton>}
+            toggleDrawerIcon={<IconButton onClick={toggleDrawer}><NavigationMenu /></IconButton>}
             iconElementRight={
               <>
                 {(errors.size > 0) && (
-                    <IconButton onClick={() => this.setState({ errorsDialog: true })} title="Parse Errors">
+                  <IconButton onClick={() => setErrorsDialog(true)} title="Parse Errors">
                     <Badge badgeContent={errors.size} color="error">
                       <ErrorsIcon />
                     </Badge>
                   </IconButton>
                 )}
-                  <IconButton disabled={!credentials || fetching} onClick={this.refresh} title="Refresh">
+                <IconButton disabled={!credentials || fetching} onClick={refresh} title="Refresh">
                   <IconRefreshWithSpin spin={fetching} />
                 </IconButton>
               </>
@@ -233,10 +230,10 @@ class App extends React.PureComponent {
           />
           <ConfirmationDialog
             title="Parse Errors"
-              open={this.state.errorsDialog}
+            open={errorsDialog}
             labelOk="OK"
-              onCancel={() => this.setState({ errorsDialog: false })}
+            onCancel={() => setErrorsDialog(false)}
-              onOk={() => this.setState({ errorsDialog: false })}
+            onOk={() => setErrorsDialog(false)}
           >
             <h4>
               This should not happen, please contact developers!
@@ -255,10 +252,10 @@ class App extends React.PureComponent {
           </ConfirmationDialog>
 
           <Drawer
-              open={this.state.drawerOpen}
+            open={drawerOpen}
-              onClose={this.toggleDrawer}
+            onClose={toggleDrawer}
           >
-              <SideMenu etesync={credentials} onCloseDrawerRequest={this.closeDrawer} />
+            <SideMenu etesync={credentials} onCloseDrawerRequest={closeDrawer} />
           </Drawer>
 
           <ErrorBoundary>
@@ -270,32 +267,6 @@ class App extends React.PureComponent {
   );
 }
 
-  private toggleDrawer() {
-    this.setState({ drawerOpen: !this.state.drawerOpen });
-  }
-
-  private closeDrawer() {
-    this.setState({ drawerOpen: false });
-  }
-
-  private refresh() {
-    store.store.dispatch<any>(actions.fetchAll(this.props.credentials, this.props.entries));
-  }
-
-  private autoRefresh() {
-    if (navigator.onLine && this.props.credentials &&
-      !(window.location.pathname.match(/.*\/(new|edit|duplicate)$/))) { 
-      this.refresh();
-    }
-
-  }
-
-  componentDidMount() {
-    const interval = 60 * 1000;
-    setInterval(this.autoRefresh, interval);
-  }
-}
-
 const mapStateToProps = (state: store.StoreState) => {
   return {
     credentials: credentialsSelector(state),