Merge pull request #59 from Elizabethhub/feature/day-norma-ref

refactored daily norma components
Elizabethhub · Mar 18, 2024 · b80022a · b80022a
2 parents 91b6392 + ca735da
commit b80022a
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 107 deletions.
diff --git a/src/components/ModalDailyNorma/FormulaField.jsx b/src/components/ModalDailyNorma/FormulaField.jsx
@@ -1,7 +1,7 @@
 import {
   genderDescription,
   textData,
-} from '../../helpers/ModalDayNorma/heper.js';
+} from '../../helpers/ModalDayNorma/helper.js';
 
 export default function FormulaField() {
   const { hint, rate } = textData;

diff --git a/src/components/ModalDailyNorma/InputBox.jsx b/src/components/ModalDailyNorma/InputBox.jsx
@@ -0,0 +1,25 @@
+import { StyledInputBox } from './ModalDailyNorma.styled';
+
+export default function InputBox({
+  paragrName,
+  inputName,
+  inputValue,
+  handler,
+}) {
+  return (
+    <StyledInputBox>
+      {inputName === 'waterVolume' ? (
+        <h3>{paragrName}</h3>
+      ) : (
+        <p className="no-margin">{paragrName}</p>
+      )}
+      <input
+        type="text"
+        name={inputName}
+        value={inputValue}
+        onChange={handler}
+        placeholder="0"
+      />
+    </StyledInputBox>
+  );
+}
diff --git a/src/components/ModalDailyNorma/ModalDailyNorma.jsx b/src/components/ModalDailyNorma/ModalDailyNorma.jsx
@@ -6,25 +6,21 @@ import {
   changeDayNorma,
 } from '../../store/water/waterSlice.js';
 import {
-  genderDescription,
+  calculateVolume,
   handleInput,
-  parserToNumber,
-  radioInputs,
   textData,
-} from '../../helpers/ModalDayNorma/heper.js';
-import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
+} from '../../helpers/ModalDayNorma/helper.js';
 import {
   SaveButton,
   StyledBackdrop,
   StyledCross,
-  StyledInputBox,
   StyledRequiredLitres,
   StyledWrapper,
 } from './ModalDailyNorma.styled.js';
 import SvgCross from '../../images/svg/svgModal/SvgCross';
-import SvgRadioChecked from '../../images/svg/svgModal/SvgRadioChecked.jsx';
-import SvgRadio from '../../images/svg/svgModal/SvgRadio.jsx';
 import FormulaField from './FormulaField.jsx';
+import RadioGroupComponent from './RadioGroup.jsx';
+import InputBox from './InputBox.jsx';
 
 const ModalDailyNorma = () => {
   const isModalOpen = useSelector(isModalDayNorm);
@@ -41,6 +37,7 @@ const ModalDailyNorma = () => {
       dispatch(changeModalClose(false));
     }
   };
+
   useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === 'Escape') {
@@ -55,6 +52,11 @@ const ModalDailyNorma = () => {
     };
   }, [dispatch, isModalOpen]);
 
+  useEffect(() => {
+    setVolume(calculateVolume(massQuery, timeQuery, genderValue));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [massQuery, timeQuery, genderValue]);
+
   const handleGenderChange = (event) => {
     setGenderValue(event.target.value);
   };
@@ -70,27 +72,15 @@ const ModalDailyNorma = () => {
     handleInput(e, setWaterQuery);
   };
 
-  useEffect(() => {
-    setVolume(calculateVolume());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [massQuery, timeQuery, genderValue]);
+  const handleSaveBtn = () => {
+    dispatch(changeDayNorma(waterQuery));
+    setTimeout(() => {
+      dispatch(changeModalClose(false));
+    }, 300);
+  };
 
   const { time, weight, waterAmount, howMuch } = textData;
 
-  const calculateVolume = () => {
-    let volume = 0;
-    genderDescription.forEach((genderData) => {
-      const { gender, massRate, timeRate } = genderData;
-      if (genderValue === gender) {
-        volume =
-          +massQuery * parserToNumber(massRate) +
-          +timeQuery * parserToNumber(timeRate);
-      }
-    });
-    const result = volume ? volume.toFixed(1) : volume;
-    return result;
-  };
-
   return (
     isModalOpen && (
       <StyledBackdrop open={isModalOpen} onClick={clickBackdrop}>
@@ -104,90 +94,33 @@ const ModalDailyNorma = () => {
             <SvgCross />
           </StyledCross>
           <FormulaField />
-          <RadioGroup
-            row
-            aria-labelledby="radio-buttons"
-            defaultValue={'woman'}
-            name="radio-buttons-group"
-            value={genderValue}
-            onChange={handleGenderChange}
-            sx={{
-              '& .MuiTypography-root': {
-                fontSize: 16,
-                color: 'var(--black)',
-              },
-            }}
-            style={{
-              display: 'flex',
-              justifyContent: 'flex-start',
-              padding: 0,
-              marginBottom: 10,
-              paddingLeft: 5,
-            }}
-          >
-            {radioInputs.map((radioItem, idx) => {
-              return (
-                <FormControlLabel
-                  value={radioItem.value}
-                  control={
-                    <Radio
-                      checkedIcon={<SvgRadioChecked></SvgRadioChecked>}
-                      icon={<SvgRadio></SvgRadio>}
-                      style={{
-                        padding: 7,
-                      }}
-                    />
-                  }
-                  label={radioItem.label}
-                  checked={genderValue === radioItem.value}
-                  key={`${idx}+${radioItem.value}`}
-                />
-              );
-            })}
-          </RadioGroup>
-          <StyledInputBox>
-            <p className="no-margin">{weight}</p>
-            <input
-              type="text"
-              name="mass"
-              value={massQuery}
-              onChange={handleMassInput}
-              placeholder="0"
-            />
-          </StyledInputBox>
-          <StyledInputBox>
-            <p className="no-margin">{time}</p>
-            <input
-              type="text"
-              name="time"
-              value={timeQuery}
-              onChange={handleTimeInput}
-              placeholder="0"
-            />
-          </StyledInputBox>
+          <RadioGroupComponent
+            genderValue={genderValue}
+            handleGenderChange={handleGenderChange}
+          />
+          <InputBox
+            paragrName={weight}
+            inputName={'mass'}
+            inputValue={massQuery}
+            handler={handleMassInput}
+          />
+          <InputBox
+            paragrName={time}
+            inputName={'time'}
+            inputValue={timeQuery}
+            handler={handleTimeInput}
+          />
           <StyledRequiredLitres>
             <p>{waterAmount}</p>
             <span>{volume || 1.8} L</span>
           </StyledRequiredLitres>
-          <StyledInputBox>
-            <h3>{howMuch}</h3>
-            <input
-              type="text"
-              name="waterVolume"
-              value={waterQuery}
-              onChange={handleWaterInput}
-              placeholder="0"
-            />
-          </StyledInputBox>
-          <SaveButton
-            type="button"
-            onClick={() => {
-              dispatch(changeDayNorma(waterQuery));
-              setTimeout(() => {
-                dispatch(changeModalClose(false));
-              }, 500);
-            }}
-          >
+          <InputBox
+            paragrName={howMuch}
+            inputName={'waterVolume'}
+            inputValue={waterQuery}
+            handler={handleWaterInput}
+          />
+          <SaveButton type="button" onClick={handleSaveBtn}>
             Save
           </SaveButton>
         </StyledWrapper>

diff --git a/src/components/ModalDailyNorma/ModalDailyNorma.styled.js b/src/components/ModalDailyNorma/ModalDailyNorma.styled.js
@@ -81,6 +81,13 @@ export const StyledWrapper = styled.div`
     font-size: 12px;
     line-height: 16px;
   }
+  .radioGroup {
+    display: flex;
+    justify-content: flex-start;
+    padding: 0;
+    margin-bottom: 10px;
+    padding-left: 5;
+  }
 `;
 export const SaveButton = styled.button`
   width: 256px;

diff --git a/src/components/ModalDailyNorma/RadioGroup.jsx b/src/components/ModalDailyNorma/RadioGroup.jsx
@@ -0,0 +1,49 @@
+import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import { radioInputs } from '../../helpers/ModalDayNorma/helper.js';
+import SvgRadioChecked from '../../images/svg/svgModal/SvgRadioChecked.jsx';
+import SvgRadio from '../../images/svg/svgModal/SvgRadio.jsx';
+
+export default function RadioGroupComponent({
+  genderValue,
+  handleGenderChange,
+}) {
+  return (
+    <div>
+      <RadioGroup
+        row
+        aria-labelledby="radio-buttons"
+        defaultValue={'woman'}
+        name="radio-buttons-group"
+        value={genderValue}
+        onChange={handleGenderChange}
+        sx={{
+          '& .MuiTypography-root': {
+            fontSize: 16,
+            color: 'var(--black)',
+          },
+        }}
+        className="radioGroup"
+      >
+        {radioInputs.map((radioItem, idx) => {
+          return (
+            <FormControlLabel
+              value={radioItem.value}
+              control={
+                <Radio
+                  checkedIcon={<SvgRadioChecked></SvgRadioChecked>}
+                  icon={<SvgRadio></SvgRadio>}
+                  style={{
+                    padding: 7,
+                  }}
+                />
+              }
+              label={radioItem.label}
+              checked={genderValue === radioItem.value}
+              key={`${idx}+${radioItem.value}`}
+            />
+          );
+        })}
+      </RadioGroup>
+    </div>
+  );
+}
diff --git a/src/helpers/ModalDayNorma/heper.js → src/helpers/ModalDayNorma/helper.js b/src/helpers/ModalDayNorma/heper.js → src/helpers/ModalDayNorma/helper.js
@@ -44,3 +44,17 @@ export function handleInput(e, setterFunction) {
     setterFunction(inputQuery.replace(/^0(?=\d)/g, '').slice(0, letterLimit));
   }
 }
+
+export const calculateVolume = (massQuery, timeQuery, genderValue) => {
+  let volume = 0;
+  genderDescription.forEach((genderData) => {
+    const { gender, massRate, timeRate } = genderData;
+    if (genderValue === gender) {
+      volume =
+        +massQuery * parserToNumber(massRate) +
+        +timeQuery * parserToNumber(timeRate);
+    }
+  });
+  const result = volume ? volume.toFixed(1) : volume;
+  return result;
+};