From 1609118e14247253fe156669d24afc36fd2661d1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 13:03:55 -0500
Subject: [PATCH] SettingToggle: convert to TSX

---
 .../components/setting_toggle.js              | 35 -------------------
 .../components/setting_toggle.tsx             | 35 +++++++++++++++++++
 app/soapbox/features/preferences/index.tsx    |  2 +-
 3 files changed, 36 insertions(+), 36 deletions(-)
 delete mode 100644 app/soapbox/features/notifications/components/setting_toggle.js
 create mode 100644 app/soapbox/features/notifications/components/setting_toggle.tsx

diff --git a/app/soapbox/features/notifications/components/setting_toggle.js b/app/soapbox/features/notifications/components/setting_toggle.js
deleted file mode 100644
index e65ac968c..000000000
--- a/app/soapbox/features/notifications/components/setting_toggle.js
+++ /dev/null
@@ -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}
-      />
-    );
-  }
-
-}
diff --git a/app/soapbox/features/notifications/components/setting_toggle.tsx b/app/soapbox/features/notifications/components/setting_toggle.tsx
new file mode 100644
index 000000000..76959bf06
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/preferences/index.tsx b/app/soapbox/features/preferences/index.tsx
index 9f02734f7..ccbd23498 100644
--- a/app/soapbox/features/preferences/index.tsx
+++ b/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));
   };