From 53b920c2978fc43eca32889c74ffe28f4d410f4f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 24 Mar 2022 15:59:29 -0500
Subject: [PATCH] ThemeToggle: convert to TSX

---
 .../features/ui/components/theme_toggle.js    | Bin 1445 -> 0 bytes
 .../features/ui/components/theme_toggle.tsx   |  46 ++++++++++++++++++
 .../ui/components/theme_toggle_container.js   | Bin 518 -> 0 bytes
 package.json                                  |   1 +
 yarn.lock                                     |   7 +++
 5 files changed, 54 insertions(+)
 delete mode 100644 app/soapbox/features/ui/components/theme_toggle.js
 create mode 100644 app/soapbox/features/ui/components/theme_toggle.tsx
 delete mode 100644 app/soapbox/features/ui/components/theme_toggle_container.js

diff --git a/app/soapbox/features/ui/components/theme_toggle.js b/app/soapbox/features/ui/components/theme_toggle.js
deleted file mode 100644
index c91c67c807311a89b801eb0fa7aa3cfcb58a1b2e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1445
zcmah{!EW0y487+oc&bw%cJ5i69a;<+mJUUid!X1%tksq>Nm*JL{`ZlR9otE_oorE0
z<a>`#R!40dJR5!7ydTlR-slRVBb{T%h3L~n2FweJ%(eH1|NE=2RdsS=SK{-@;DaW-
zLN&t1vV+7&!o*nz>YLP%<6bI!LTkl=s5HZ2u~e??!5e)zlsE!7Un0mP)5<!ix<2Vu
z<7qtsuxIJAVx!mcP`CxuAoB%8B*JcY!X&Q13b&!<wq#5+<2K?{x|SfpfA}WgG<XR3
zR}nO`!GK3$UjNfSC&<6sGh)!axhIwQ=2zE}f~*wQ!iIUb=HQz{m0S4BcIpYUbi&CD
zc;8|FDX=>LZ1<wiMWS~<F>{HuFZk;u4d$#70;eaP;}C0|k?L@R)hZAhLiZ<?-2iQ&
z&ug*65rLi7CC_X~IzS;*UbaHLW=LUr59z9<?+R%XR%MfJ>~v7`i(=Z4rYS^W!SER(
zzY3t$h7$Qq6M3K^E78!1U{8n`rG{*p^)Afd!kyxq(nUvu8v%r8GKVzs6yi&0``eP0
z(_3zx?6s*xmpD>D+x>uc7xkn|HHVH=+|<{cWDXCHGw4o6!PFlBmbv^LQuJL^ctvp4
zf^K0Jouh4cN<bJXVy_{s{io^Q((4d`OE=~r^R$+EGpc0;X0J#WA4(o$wR)g99FW0e
z_f0ge(ckd>QJ+-{*Qz}aVe=v9y5H&D9ZZ*DL4~WzFWPwOL)*rFY_}dAty(XZbAMjl
S_tTbhGQOKPICR--CVv2wNZC68

diff --git a/app/soapbox/features/ui/components/theme_toggle.tsx b/app/soapbox/features/ui/components/theme_toggle.tsx
new file mode 100644
index 0000000000..34d5d3b0e2
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/ui/components/theme_toggle_container.js b/app/soapbox/features/ui/components/theme_toggle_container.js
deleted file mode 100644
index b000d1ba5461823ab578823c770175d70c4345be..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 518
zcmZ9JL2HCC5QXplin*D9UGJ6csh1uKh22{zCDmEYqKPCU2#f!{6F2S#!Nd6YX5Pz;
z9!Bd3ZlKK-Yx*$M!vYs)2gn_&nqD+Zd6nr6tgSIj?kI=NG&7cPoiZ(+kVu=hfEFp%
z{?Y2K8vpEEvW>RJm;Mg>WX`$60nfH=dyJ_LB?ax5RxzNQ$P)}|Jdq-XznmRC9KnZQ
zIKIIx18_)_GiwR3PWZG9zNWdv+8_@cRpbvOmj$;kRmR`b>RtO$QQbY=L=z<$EJg6N
z=AK-{hskKak)lp_B)${Vp8~cfSq1+hTe!$@Uhmc5MNK^=R}=9rVz-APEM}Khie#;l
G$NmH0sItxg

diff --git a/package.json b/package.json
index 4ec9a63724..42bc832591 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 65de52edfc..146c677b17 100644
--- a/yarn.lock
+++ b/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"