Merge branch 'develop'

src/components/toolbox/pomodoro/setting/setting.tsx

@@ -12,18 +12,38 @@ 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(() => setValues(times), [times]);
+  useEffect(() => {
+    if (show) setValues(times);
+  }, [times, show]);
 
-  const handleChange = (id: string) => (value: number) => {
+  const handleChange = (id: string) => (value: number | string) => {
-    setValues(prev => ({ ...prev, [id]: value * 60 }));
+    setValues(prev => ({
+      ...prev,
+      [id]: typeof value === 'number' ? value * 60 : '',
+    }));
   };
 
-  const handleSubmit = e => {
+  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>) => {
+    e.preventDefault();
+
+    onClose();
   };
 
   return (
@@ -34,32 +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
+          <button type="button" onClick={handleCancel}>
-            onClick={e => {
-              e.preventDefault();
-              onClose();
-            }}
-          >
             Cancel
           </button>
-          <button className={styles.primary}>Save</button>
+          <button className={styles.primary} type="submit">
+            Save
+          </button>
         </div>
       </form>
     </Modal>
@@ -69,8 +86,8 @@ export function Setting({ onChange, onClose, show, times }: SettingProps) {
 interface FieldProps {
   id: string;
   label: string;
-  onChange: (value: number) => void;
+  onChange: (value: number | string) => void;
-  value: number;
+  value: number | string;
 }
 
 function Field({ id, label, onChange, value }: FieldProps) {
@@ -83,9 +100,12 @@ function Field({ id, label, onChange, value }: FieldProps) {
         className={styles.input}
         max={120}
         min={1}
+        required
         type="number"
-        value={value}
+        value={typeof value === 'number' ? value / 60 : ''}
-        onChange={e => onChange(Number(e.target.value))}
+        onChange={e => {
+          onChange(e.target.value === '' ? '' : Number(e.target.value));
+        }}
       />
     </div>
   );