Settings: change to react hooks + remove unneeded props.

src/Settings/index.tsx

@@ -2,15 +2,14 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import { connect, useSelector } from 'react-redux';
-import { History } from 'history';
+import { useSelector } from 'react-redux';
 
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
 
-import { store, StoreState, SettingsType } from '../store';
+import { store, StoreState } from '../store';
 import { setSettings } from '../store/actions';
 
 import Container from '../widgets/Container';
@@ -36,23 +35,16 @@ function SecurityFingerprint() {
   );
 }
 
-interface PropsType {
-  history: History;
-}
+export default React.memo(function Settings() {
+  const settings = useSelector((state: StoreState) => state.settings);
 
-interface PropsTypeInner extends PropsType {
-  settings: SettingsType;
-}
+  function handleChange(event: React.ChangeEvent<any>) {
+    const name = event.target.name;
+    const value = event.target.value;
 
-class Settings extends React.PureComponent<PropsTypeInner> {
-  constructor(props: any) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.handleChange = this.handleChange.bind(this);
+    store.dispatch(setSettings({ ...settings, [name]: value }));
   }
 
-  public render() {
-    const { settings } = this.props;
   return (
     <>
       <AppBarOverride title="Settings" />
@@ -67,7 +59,7 @@ class Settings extends React.PureComponent<PropsTypeInner> {
           <Select
             name="locale"
             value={settings.locale}
-              onChange={this.handleChange}
+            onChange={handleChange}
           >
             <MenuItem value="en-gb">English (United Kingdom)</MenuItem>
             <MenuItem value="en-us">English (United States)</MenuItem>
@@ -76,27 +68,4 @@ class Settings extends React.PureComponent<PropsTypeInner> {
       </Container>
     </>
   );
-  }
-
-  public onCancel() {
-    this.props.history.goBack();
-  }
-
-  private handleChange(event: React.ChangeEvent<any>) {
-    const name = event.target.name;
-    const value = event.target.value;
-
-    const { settings } = this.props;
-    store.dispatch(setSettings({ ...settings, [name]: value }));
-  }
-}
-
-const mapStateToProps = (state: StoreState, _props: PropsType) => {
-  return {
-    settings: state.settings,
-  };
-};
-
-export default connect(
-  mapStateToProps
-)(Settings);
+});

src/SyncGate.tsx

@@ -214,10 +214,8 @@ export default withRouter(function SyncGate(props: RouteComponentProps<{}> & Pro
       <Route
         path={routeResolver.getRoute('settings')}
         exact
-        render={({ history }) => (
-          <Settings
-            history={history}
-          />
+        render={() => (
+          <Settings />
         )}
       />
       <Route