ThemeToggle: convert to TSX

app/soapbox/features/ui/components/theme_toggle.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import Toggle from 'react-toggle';
+import { v4 as uuidv4 } from 'uuid';
+
+import { changeSetting } from 'soapbox/actions/settings';
+import { useSettings } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' },
+  switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
+});
+
+interface IThemeToggle {
+  showLabel: boolean,
+}
+
+function ThemeToggle({ showLabel }: IThemeToggle) {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const themeMode = useSettings().get('themeMode');
+
+  const id = uuidv4();
+  const label = intl.formatMessage(themeMode === 'light' ? messages.switchToDark : messages.switchToLight);
+
+  const onToggle = () => {
+    const setting = themeMode === 'light' ? 'dark' : 'light';
+    dispatch(changeSetting(['themeMode'], setting));
+  };
+
+  return (
+    <div className='theme-toggle'>
+      <div className='setting-toggle' aria-label={label}>
+        <Toggle
+          id={id}
+          checked={themeMode === 'light'}
+          onChange={onToggle}
+        />
+        {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
+      </div>
+    </div>
+  );
+}
+
+export default ThemeToggle;

package.json

@@ -72,6 +72,7 @@
     "@types/lodash": "^4.14.180",
     "@types/react-helmet": "^6.1.5",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-toggle": "^4.0.3",
     "@types/uuid": "^8.3.4",
     "array-includes": "^3.0.3",
     "autoprefixer": "^10.4.2",

yarn.lock

@@ -2129,6 +2129,13 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
+"@types/react-toggle@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-toggle/-/react-toggle-4.0.3.tgz#8db98ac8d2c5e8c03c2d3a42027555c1cd2289da"
+  integrity sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@17":
   version "17.0.21"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.21.tgz#069c43177cd419afaab5ce26bb4e9056549f7ea6"