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 { useSelector } from 'react-redux';
-import { History } from 'history';
 
 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,67 +35,37 @@ function SecurityFingerprint() {
   );
 }
 
-interface PropsType {
+export default React.memo(function Settings() {
-  history: History;
+  const settings = useSelector((state: StoreState) => state.settings);
-}
-
-interface PropsTypeInner extends PropsType {
-  settings: SettingsType;
-}
-
-class Settings extends React.PureComponent<PropsTypeInner> {
-  constructor(props: any) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  public render() {
-    const { settings } = this.props;
-    return (
-      <>
-        <AppBarOverride title="Settings" />
-        <Container>
-          <h1>Security Fingerprint</h1>
-          <SecurityFingerprint />
-          <h1>Date & Time</h1>
-          <FormControl style={{ width: '15em' }}>
-            <InputLabel>
-              Locale
-            </InputLabel>
-            <Select
-              name="locale"
-              value={settings.locale}
-              onChange={this.handleChange}
-            >
-              <MenuItem value="en-gb">English (United Kingdom)</MenuItem>
-              <MenuItem value="en-us">English (United States)</MenuItem>
-            </Select>
-          </FormControl>
-        </Container>
-      </>
-    );
-  }
 
-  public onCancel() {
+  function handleChange(event: React.ChangeEvent<any>) {
-    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 (
-  return {
+    <>
-    settings: state.settings,
+      <AppBarOverride title="Settings" />
-  };
+      <Container>
-};
+        <h1>Security Fingerprint</h1>
-
+        <SecurityFingerprint />
-export default connect(
+        <h1>Date & Time</h1>
-  mapStateToProps
+        <FormControl style={{ width: '15em' }}>
-)(Settings);
+          <InputLabel>
+            Locale
+          </InputLabel>
+          <Select
+            name="locale"
+            value={settings.locale}
+            onChange={handleChange}
+          >
+            <MenuItem value="en-gb">English (United Kingdom)</MenuItem>
+            <MenuItem value="en-us">English (United States)</MenuItem>
+          </Select>
+        </FormControl>
+      </Container>
+    </>
+  );
+});

src/SyncGate.tsx

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