From 89a83089c568c619fd76a28c268ad9af9913babc Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Thu, 25 Apr 2024 14:39:13 +0330
Subject: [PATCH 1/2] fix: reset values on cancel

---
 .../toolbox/pomodoro/setting/setting.tsx      | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/toolbox/pomodoro/setting/setting.tsx b/src/components/toolbox/pomodoro/setting/setting.tsx
index e3b9eb1..b74c825 100644
--- a/src/components/toolbox/pomodoro/setting/setting.tsx
+++ b/src/components/toolbox/pomodoro/setting/setting.tsx
@@ -14,18 +14,26 @@ interface SettingProps {
 export function Setting({ onChange, onClose, show, times }: SettingProps) {
   const [values, setValues] = useState(times);
 
-  useEffect(() => setValues(times), [times]);
+  useEffect(() => {
+    if (show) setValues(times);
+  }, [times, show]);
 
   const handleChange = (id: string) => (value: number) => {
     setValues(prev => ({ ...prev, [id]: value * 60 }));
   };
 
-  const handleSubmit = e => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     onChange(values);
   };
 
+  const handleCancel = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+
+    onClose();
+  };
+
   return (
     <Modal lockBody={false} show={show} onClose={onClose}>
       <h2 className={styles.title}>Change Times</h2>
@@ -51,14 +59,7 @@ export function Setting({ onChange, onClose, show, times }: SettingProps) {
         />
 
         <div className={styles.buttons}>
-          <button
-            onClick={e => {
-              e.preventDefault();
-              onClose();
-            }}
-          >
-            Cancel
-          </button>
+          <button onClick={handleCancel}>Cancel</button>
           <button className={styles.primary}>Save</button>
         </div>
       </form>

From 601ba6def7954ca8f961c461abacfb076863ae18 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Thu, 25 Apr 2024 15:35:07 +0330
Subject: [PATCH 2/2] fix: allow empty inputs

---
 .../toolbox/pomodoro/setting/setting.tsx      | 45 +++++++++++++------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/toolbox/pomodoro/setting/setting.tsx b/src/components/toolbox/pomodoro/setting/setting.tsx
index b74c825..7a45d3d 100644
--- a/src/components/toolbox/pomodoro/setting/setting.tsx
+++ b/src/components/toolbox/pomodoro/setting/setting.tsx
@@ -12,20 +12,32 @@ interface SettingProps {
 }
 
 export function Setting({ onChange, onClose, show, times }: SettingProps) {
-  const [values, setValues] = useState(times);
+  const [values, setValues] = useState<Record<string, number | string>>(times);
 
   useEffect(() => {
     if (show) setValues(times);
   }, [times, show]);
 
-  const handleChange = (id: string) => (value: number) => {
-    setValues(prev => ({ ...prev, [id]: value * 60 }));
+  const handleChange = (id: string) => (value: number | string) => {
+    setValues(prev => ({
+      ...prev,
+      [id]: typeof value === 'number' ? value * 60 : '',
+    }));
   };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    onChange(values);
+    console.log({ values });
+
+    const newValues: Record<string, number> = {};
+
+    Object.keys(values).forEach(name => {
+      newValues[name] =
+        typeof values[name] === 'number' ? values[name] : times[name];
+    });
+
+    onChange(newValues);
   };
 
   const handleCancel = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -42,25 +54,29 @@ export function Setting({ onChange, onClose, show, times }: SettingProps) {
         <Field
           id="pomodoro"
           label="Pomodoro"
-          value={values.pomodoro / 60}
+          value={values.pomodoro}
           onChange={handleChange('pomodoro')}
         />
         <Field
           id="short"
           label="Short Break"
-          value={values.short / 60}
+          value={values.short}
           onChange={handleChange('short')}
         />
         <Field
           id="long"
           label="Long Break"
-          value={values.long / 60}
+          value={values.long}
           onChange={handleChange('long')}
         />
 
         <div className={styles.buttons}>
-          <button onClick={handleCancel}>Cancel</button>
-          <button className={styles.primary}>Save</button>
+          <button type="button" onClick={handleCancel}>
+            Cancel
+          </button>
+          <button className={styles.primary} type="submit">
+            Save
+          </button>
         </div>
       </form>
     </Modal>
@@ -70,8 +86,8 @@ export function Setting({ onChange, onClose, show, times }: SettingProps) {
 interface FieldProps {
   id: string;
   label: string;
-  onChange: (value: number) => void;
-  value: number;
+  onChange: (value: number | string) => void;
+  value: number | string;
 }
 
 function Field({ id, label, onChange, value }: FieldProps) {
@@ -84,9 +100,12 @@ function Field({ id, label, onChange, value }: FieldProps) {
         className={styles.input}
         max={120}
         min={1}
+        required
         type="number"
-        value={value}
-        onChange={e => onChange(Number(e.target.value))}
+        value={typeof value === 'number' ? value / 60 : ''}
+        onChange={e => {
+          onChange(e.target.value === '' ? '' : Number(e.target.value));
+        }}
       />
     </div>
   );