From a6233863da4203bec781e817963ac3733279cab5 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 17 Jan 2022 22:26:16 +0100
Subject: refactor(settings): make toggle reusable

Toggle will be used for others settings so I extract the functionnality
from ThemeToggle.
---
 src/components/Settings/Settings.tsx               |  2 +-
 .../Settings/ThemeToggle/ThemeToggle.tsx           | 36 ++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Settings/ThemeToggle/ThemeToggle.tsx

(limited to 'src/components/Settings')

diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index bfef851..7d5516c 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -1,5 +1,5 @@
 import { CogIcon } from '@components/Icons';
-import ThemeToggle from '@components/ThemeToggle/ThemeToggle';
+import ThemeToggle from '@components/Settings/ThemeToggle/ThemeToggle';
 import { t } from '@lingui/macro';
 import styles from './Settings.module.scss';
 
diff --git a/src/components/Settings/ThemeToggle/ThemeToggle.tsx b/src/components/Settings/ThemeToggle/ThemeToggle.tsx
new file mode 100644
index 0000000..e14f39a
--- /dev/null
+++ b/src/components/Settings/ThemeToggle/ThemeToggle.tsx
@@ -0,0 +1,36 @@
+import { Toggle } from '@components/Form';
+import { MoonIcon, SunIcon } from '@components/Icons';
+import Spinner from '@components/Spinner/Spinner';
+import { t } from '@lingui/macro';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+const ThemeToggle = () => {
+  const [isMounted, setIsMounted] = useState<boolean>(false);
+  const { resolvedTheme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) return <Spinner />;
+
+  const isDarkTheme = resolvedTheme === 'dark';
+
+  const updateTheme = () => {
+    setTheme(isDarkTheme ? 'light' : 'dark');
+  };
+
+  return (
+    <Toggle
+      id="dark-theme"
+      label={t`Theme:`}
+      leftChoice={<SunIcon />}
+      rightChoice={<MoonIcon />}
+      value={isDarkTheme}
+      changeHandler={updateTheme}
+    />
+  );
+};
+
+export default ThemeToggle;
-- 
cgit v1.2.3