SettingToggle: convert to TSX

app/soapbox/features/notifications/components/setting_toggle.js

@@ -1,35 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import Toggle from 'soapbox/components/toggle';
-
-export default class SettingToggle extends ImmutablePureComponent {
-
-  static propTypes = {
-    id: PropTypes.string,
-    prefix: PropTypes.string,
-    settings: ImmutablePropTypes.map.isRequired,
-    settingPath: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  onChange = ({ target }) => {
-    this.props.onChange(this.props.settingPath, target.checked);
-  }
-
-  render() {
-    const { id, settings, settingPath } = this.props;
-
-    return (
-      <Toggle
-        id={id}
-        checked={settings.getIn(settingPath)}
-        onChange={this.onChange}
-        onKeyDown={this.onKeyDown}
-      />
-    );
-  }
-
-}

app/soapbox/features/notifications/components/setting_toggle.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Toggle from 'soapbox/components/toggle';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+interface ISettingToggle {
+  /** Unique identifier for the Toggle. */
+  id?: string,
+  /** The full user settings map. */
+  settings: ImmutableMap<string, any>,
+  /** Array of key names leading into the setting map. */
+  settingPath: string[],
+  /** Callback when the setting is toggled. */
+  onChange: (settingPath: string[], checked: boolean) => void,
+
+}
+
+/** Stateful toggle to change user settings. */
+const SettingToggle: React.FC<ISettingToggle> = ({ id, settings, settingPath, onChange }) => {
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    onChange(settingPath, target.checked);
+  };
+
+  return (
+    <Toggle
+      id={id}
+      checked={!!settings.getIn(settingPath)}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default SettingToggle;

app/soapbox/features/preferences/index.tsx

@@ -101,7 +101,7 @@ const Preferences = () => {
   //   dispatch(changeSetting(['defaultContentType'], event.target.value));
   // };
 
-  const onToggleChange = (key: string, checked: boolean) => {
+  const onToggleChange = (key: string[], checked: boolean) => {
     dispatch(changeSetting(key, checked, intl));
   };