Merge pull request #64 from Elizabethhub/fix-bug/modal-edit

Fix bug/modal edit
Elizabethhub · Mar 19, 2024 · a61c3a2 · a61c3a2
2 parents 90377a3 + 27cdfe9
commit a61c3a2
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 16 deletions.
diff --git a/src/components/ModalAddWater/ModalAddWater.jsx b/src/components/ModalAddWater/ModalAddWater.jsx
@@ -10,7 +10,7 @@ import {
   StyledModalForm,
   TimeGlobalStyles,
 } from './ModalAddWater.styled.js';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import useCounter from '../../hooks/modalHandleUpdate.js';
@@ -25,6 +25,8 @@ import { toast } from 'react-toastify';
 const ModalAddWater = () => {
   const { counter, handleUpdate } = useCounter(0);
   const [time, setTime] = useState(new Date());
+  const [manualValue, setManualValue] = useState('');
+  const [inputFocused, setInputFocused] = useState(false);
 
   const dispatch = useDispatch();
 
@@ -53,6 +55,30 @@ const ModalAddWater = () => {
         toast.error(error);
       });
   };
+
+  const handleManualValueChange = (e) => {
+    const value = e.target.value;
+    setManualValue(value);
+  };
+
+  const handleInputBlur = () => {
+    setInputFocused(false);
+  };
+
+  const handleInputFocus = () => {
+    setInputFocused(true);
+  };
+
+  useEffect(() => {
+    setManualValue(`${counter}`);
+  }, [counter]);
+
+  const displayValue = inputFocused
+    ? `${counter}ml`
+    : manualValue !== ''
+    ? `${manualValue}ml`
+    : `${counter}ml`;
+
   return (
     <StyledModalForm onSubmit={onSubmit}>
       <h3>Choose a value:</h3>
@@ -76,7 +102,6 @@ const ModalAddWater = () => {
       <StyledModalAddTime>
         <p>Recording time:</p>
         <ModalAddDateWrap>
-          {/* <label> */}
           <DatePicker
             selected={time}
             onChange={(date) => {
@@ -92,30 +117,26 @@ const ModalAddWater = () => {
             timeZone="UTC"
           />
           <TimeGlobalStyles />
-          {/* </label> */}
         </ModalAddDateWrap>
-
-        {/* <StyledModalAddInput
-          type="number"
-          placeholder="7:00"
-          name="time"
-        /> */}
       </StyledModalAddTime>
       <StyledModalAddValue>
         <h3>Enter the value of the water used:</h3>
         <StyledModalAddInput
           type="number"
           placeholder={`${counter}`}
-          // defaultValue={`${counter}`}
           min="1"
           max="5000"
           name="value"
+          value={manualValue}
+          onChange={handleManualValueChange}
+          onFocus={handleInputFocus}
+          onBlur={handleInputBlur}
           required
         />
       </StyledModalAddValue>
 
       <StyledModalAddSave>
-        <span>{`${counter}ml`}</span>
+        <span>{displayValue}</span>
         <button type="submit">Save</button>
       </StyledModalAddSave>
     </StyledModalForm>

diff --git a/src/components/ModalEditWater/ModalEditWater.jsx b/src/components/ModalEditWater/ModalEditWater.jsx
@@ -14,7 +14,7 @@ import {
   StyledModalEditInput,
   StyledModalEditStat,
 } from './ModalEditWater.styled.js';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import useCounter from '../../hooks/modalHandleUpdate.js';
@@ -23,18 +23,43 @@ import { format } from 'date-fns';
 const ModalEditWater = () => {
   const [time, setTime] = useState(new Date());
   const { counter, handleUpdate } = useCounter(0);
+  const [manualValue, setManualValue] = useState('');
+  const [inputFocused, setInputFocused] = useState(false);
 
   const onSubmit = (e) => {
     e.preventDefault();
   };
 
   const formattedTime = format(time, 'hh:mm a');
 
+  const handleManualValueChange = (e) => {
+    const value = e.target.value;
+    setManualValue(value);
+  };
+
+  const handleInputBlur = () => {
+    setInputFocused(false);
+  };
+
+  const handleInputFocus = () => {
+    setInputFocused(true);
+  };
+
+  useEffect(() => {
+    setManualValue(`${counter}`);
+  }, [counter]);
+
+  const displayValue = inputFocused
+    ? `${counter}ml`
+    : manualValue !== ''
+    ? `${manualValue}ml`
+    : `${counter}ml`;
+
   return (
     <StyledModalForm onSubmit={onSubmit}>
       <StyledModalEditStat>
         <SvgGlass />
-        <span>{`${counter}ml`}</span>
+        <span>{displayValue}</span>
         <p>{formattedTime}</p>
       </StyledModalEditStat>
       <h3>Correct entered data:</h3>
@@ -74,22 +99,26 @@ const ModalEditWater = () => {
           />
           <TimeGlobalStyles />
         </ModalEditDateWrap>
-        {/* <StyledModalEditInput type="number" placeholder="7:00" name="time" /> */}
       </StyledModalAddTime>
 
       <StyledModalAddValue>
         <h3>Enter the value of the water used:</h3>
         <StyledModalEditInput
           type="number"
-          placeholder={`${counter}ml`}
+          placeholder={`${counter}`}
           min="1"
           max="5000"
           name="value"
+          value={manualValue}
+          onChange={handleManualValueChange}
+          onFocus={handleInputFocus}
+          onBlur={handleInputBlur}
+          required
         />
       </StyledModalAddValue>
 
       <StyledModalAddSave>
-        <span>{`${counter}ml`}</span>
+        <span>{displayValue}</span>
         <button type="submit">Save</button>
       </StyledModalAddSave>
     </StyledModalForm>