ThemeSelect.jsx: store theme choice in a cookie

Fix #1

package.json

@@ -1,9 +1,9 @@
 {
-  "dependencies": {},
   "devDependencies": {
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "classnames": "^2.3.2",
+    "es-cookie": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-loader": "^9.3.1",

src/js/components/TheQuran/ThemeSelect.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { set as setCookie } from "es-cookie";
+
+type Props = {
+  setTheme: (theme: string) => void,
+  theme: string
+}
+
+export function ThemeSelect({setTheme, theme}: Props) {
+  const onThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setCookie("theme", e.target.value, {domain: location.host, expires: 365})
+    setTheme(e.target.value);
+  }
+
+  return (
+    <select name="theme" value={theme} onChange={onThemeChange}>
+      <option value="moon">The Moon 🌛</option>
+      <option value="leaf">The Leaf 🌿</option>
+    </select>
+  );
+}

src/js/pages/TheSurahPage.tsx

@@ -4,7 +4,9 @@ import useSurah from "hooks/useSurah";
 import { Timer } from "components/TheQuran/Timer";
 import { Stream } from "components/TheQuran/Stream";
 import { AboutSurah } from "components/TheQuran/AboutSurah";
+import { ThemeSelect } from "components/TheQuran/ThemeSelect";
 import classNames from "classnames";
+import { get as getCookie } from "es-cookie";
 
 type PageProps = {
   locale: string,
@@ -14,7 +16,7 @@ type PageProps = {
 function TheSurahPage({locale, surahId}: PageProps) {
   const { surahIsLoaded, surah } = useSurah(locale, surahId);
   const [stream, setStream] = useState([]);
-  const [theme , setTheme] = useState("moon");
+  const [theme , setTheme] = useState(getCookie("theme") || "moon");
   const streamIsLoaded = !!stream.length;
 
   useEffect(() => {
@@ -34,10 +36,7 @@ function TheSurahPage({locale, surahId}: PageProps) {
       {streamIsLoaded &&
         <div className="flex-row">
           <span></span>
-          <select name="theme" value={theme} onChange={(e) => setTheme(e.target.value)}>
-            <option value="moon">The Moon 🌛</option>
-            <option value="leaf">The Leaf 🌿</option>
-          </select>
+          <ThemeSelect theme={theme} setTheme={setTheme}/>
           <span></span>
         </div>
       }