From 9d458fb60e8b84210f492541bab2c5dc94adcc8b Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Mon, 29 Apr 2024 15:21:50 +0430
Subject: [PATCH] feat: add form to sleep timer

---
 .../modals/sleep-timer/sleep-timer.tsx        | 114 ++++++++++--------
 1 file changed, 63 insertions(+), 51 deletions(-)

diff --git a/src/components/modals/sleep-timer/sleep-timer.tsx b/src/components/modals/sleep-timer/sleep-timer.tsx
index 99fe487..b17cf63 100644
--- a/src/components/modals/sleep-timer/sleep-timer.tsx
+++ b/src/components/modals/sleep-timer/sleep-timer.tsx
@@ -69,6 +69,12 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
     setRunning(false);
   };
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    handleStart();
+  };
+
   return (
     <Modal show={show} onClose={onClose}>
       <header className={styles.header}>
@@ -78,62 +84,68 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
         </p>
       </header>
 
-      <div className={styles.controls}>
-        {!running && (
-          <div className={styles.inputContainer}>
-            <label className={styles.label} htmlFor="hours">
-              Hours:
-            </label>
-            <input
-              className={styles.input}
-              id="hours"
-              min="0"
-              type="number"
-              value={hours}
-              onChange={e =>
-                setHours(e.target.value === '' ? '' : e.target.value)
-              }
-            />
-          </div>
-        )}
-
-        {!running && (
-          <div className={styles.inputContainer}>
-            <label className={styles.label} htmlFor="minutes">
-              Minutes:
-            </label>
-            <input
-              className={styles.input}
-              max="59"
-              min="0"
-              type="number"
-              value={minutes}
-              onChange={e =>
-                setMinutes(e.target.value === '' ? '' : e.target.value)
-              }
-            />
-          </div>
-        )}
-
-        {running ? <Timer displayHours={true} timer={timeLeft} /> : null}
-
-        <div className={styles.buttons}>
-          {running && (
-            <button className={styles.button} onClick={handleReset}>
-              Reset
-            </button>
+      <form onSubmit={handleSubmit}>
+        <div className={styles.controls}>
+          {!running && (
+            <div className={styles.inputContainer}>
+              <label className={styles.label} htmlFor="hours">
+                Hours:
+              </label>
+              <input
+                className={styles.input}
+                id="hours"
+                min="0"
+                type="number"
+                value={hours}
+                onChange={e =>
+                  setHours(e.target.value === '' ? '' : e.target.value)
+                }
+              />
+            </div>
           )}
 
           {!running && (
-            <button
-              className={cn(styles.button, styles.primary)}
-              onClick={handleStart}
-            >
-              Save
-            </button>
+            <div className={styles.inputContainer}>
+              <label className={styles.label} htmlFor="minutes">
+                Minutes:
+              </label>
+              <input
+                className={styles.input}
+                max="59"
+                min="0"
+                type="number"
+                value={minutes}
+                onChange={e =>
+                  setMinutes(e.target.value === '' ? '' : e.target.value)
+                }
+              />
+            </div>
           )}
+
+          {running ? <Timer displayHours={true} timer={timeLeft} /> : null}
+
+          <div className={styles.buttons}>
+            {running && (
+              <button
+                className={styles.button}
+                type="button"
+                onClick={handleReset}
+              >
+                Reset
+              </button>
+            )}
+
+            {!running && (
+              <button
+                className={cn(styles.button, styles.primary)}
+                type="submit"
+              >
+                Save
+              </button>
+            )}
+          </div>
         </div>
-      </div>
+      </form>
     </Modal>
   );
 }