Settings populated from localStorage

mikumino · Nov 25, 2023 · 8521b25 · 8521b25
1 parent d49f960
commit 8521b25
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -1,15 +1,33 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { IoIosSettings } from "react-icons/io";
 
 const Settings = () => {
     const settingsRef = useRef<HTMLDialogElement | null>(null);
+    const [breakTimeMultiplier, setBreakTimeMultiplier] = useState(0.2);
+    const [autostartTimers, setAutostartTimers] = useState(false);
+
+    useEffect(() => {
+        const savedBreakTimeMultiplier = localStorage.getItem('breakTimeMultiplier');
+        const savedAutostartTimers = localStorage.getItem('autostartTimers');
+        if (savedBreakTimeMultiplier) {
+            setBreakTimeMultiplier(parseFloat(savedBreakTimeMultiplier));
+        }
+        if (savedAutostartTimers) {
+            setAutostartTimers(savedAutostartTimers === 'true');
+        }
+    }, []);
 
     const handleOpen = () => {
         if (settingsRef.current) {
             settingsRef.current.showModal();
         }
     }
 
+    const handleSave = () => {
+        localStorage.setItem('breakTimeMultiplier', breakTimeMultiplier.toString());
+        localStorage.setItem('autostartTimers', autostartTimers.toString());
+    }
+
     return (
         <div>
             <div className="btn btn-ghost" onClick={handleOpen}>
@@ -21,13 +39,13 @@ const Settings = () => {
                     <h2 className="font-bold mb-2">Flowtime</h2>
                     <h3>Break Time Multiplier</h3>
                     <p className="text-xs mb-2">The number multiplied against focus time to get break time (Default: 0.2)</p>
-                    <input type="number" className="input input-bordered w-full mb-4" />
+                    <input type="number" className="input input-bordered w-full mb-4" value={breakTimeMultiplier} onChange={(e) => setBreakTimeMultiplier(parseFloat(e.target.value))} />
                     <h3>Autostart Timers</h3>
                     <p className="text-xs mb-2">Autostart timer when switching between focus and break (Default: false)</p>
-                    <input type="checkbox" className="toggle" />
+                    <input type="checkbox" className="toggle" checked={autostartTimers} onChange={(e) => setAutostartTimers(e.target.checked)} />
                     <div className="modal-action">
                         <form method="dialog">
-                            <button className="btn btn-primary">Save</button>
+                            <button className="btn btn-primary" onClick={handleSave}>Save</button>
                             <button className="btn btn-ghost">Cancel</button>
                         </form>
                     </div>