From f3a533ab2d4972f4be6dcc89777f6ab7ac50c840 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Fri, 22 May 2020 10:48:47 +0300
Subject: [PATCH] Settings: change to react hooks + remove unneeded props.

---
 src/Settings/index.tsx | 89 ++++++++++++++----------------------------
 src/SyncGate.tsx       |  6 +--
 2 files changed, 31 insertions(+), 64 deletions(-)

diff --git a/src/Settings/index.tsx b/src/Settings/index.tsx
index dadace6..af38472 100644
--- a/src/Settings/index.tsx
+++ b/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,67 +35,37 @@ function SecurityFingerprint() {
   );
 }
 
-interface PropsType {
-  history: History;
-}
-
-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>
-      </>
-    );
-  }
+export default React.memo(function Settings() {
+  const settings = useSelector((state: StoreState) => state.settings);
 
-  public onCancel() {
-    this.props.history.goBack();
-  }
-
-  private handleChange(event: React.ChangeEvent<any>) {
+  function 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);
+  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={handleChange}
+          >
+            <MenuItem value="en-gb">English (United Kingdom)</MenuItem>
+            <MenuItem value="en-us">English (United States)</MenuItem>
+          </Select>
+        </FormControl>
+      </Container>
+    </>
+  );
+});
diff --git a/src/SyncGate.tsx b/src/SyncGate.tsx
index c1dcad9..e58edd6 100644
--- a/src/SyncGate.tsx
+++ b/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