Merge pull request #94 from MargoMarm/fix/background

Fix/background
MargoMarm · Sep 27, 2023 · af2d833 · af2d833
2 parents 0b43bdf + ff2002b
commit af2d833
Show file tree

Hide file tree

Showing 6 changed files with 333 additions and 374 deletions.
diff --git a/src/components/ParamsBar/ParamsBar.jsx b/src/components/ParamsBar/ParamsBar.jsx
@@ -2,36 +2,67 @@ import { ProgressBar, BarItem } from './ParamsBar.styled';
 import PropTypes from 'prop-types';
 import { colors as palette } from '../../utils';
 
-const ParamsBar = ({ steps }) => {
-  return (
-    <ProgressBar>
-      <BarItem
+const ParamsBar = ({ steps, setSteps }) => {
+  const Btn = ({ steps, step, setSteps, children }) => {
+    return (
+      <button
         style={{
-          background: steps >= 1 && `${palette.orangeSecondary}`,
-          boxShadow: steps >= 1 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)',
+          margin: '0',
+          padding: '30px 0px',
+          border: 'none',
+          backgroundColor: ' rgba(0, 0, 0, 0)',
+          cursor: 'pointer',
         }}
-      ></BarItem>
-      <BarItem
-        style={{
-          background: steps >= 2 && steps > 1 && `${palette.orangeSecondary}`,
-          boxShadow:
-            steps >= 2 &&
-            steps > 1 &&
-            '0px 1px 10px 0px rgba(230, 83, 60, 0.8)',
-        }}
-      ></BarItem>
-      <BarItem
-        style={{
-          background: steps === 3 && `${palette.orangeSecondary}`,
-          boxShadow: steps === 3 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)',
+        onClick={() => {
+          if (steps > 1) {
+            setSteps(step);
+          }
         }}
-      ></BarItem>
+      >
+        {children}
+      </button>
+    );
+  };
+
+  return (
+    <ProgressBar>
+      <Btn step={1} setSteps={setSteps} steps={steps}>
+        <BarItem
+          style={{
+            background: steps >= 1 && `${palette.orangeSecondary}`,
+            boxShadow: steps >= 1 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)',
+          }}
+        ></BarItem>
+      </Btn>
+
+      <Btn step={2} setSteps={setSteps} steps={steps}>
+        <BarItem
+          style={{
+            background: steps >= 2 && steps > 1 && `${palette.orangeSecondary}`,
+            boxShadow:
+              steps >= 2 &&
+              steps > 1 &&
+              '0px 1px 10px 0px rgba(230, 83, 60, 0.8)',
+          }}
+        ></BarItem>
+      </Btn>
+      <Btn>
+        <BarItem
+          style={{
+            background: steps === 3 && `${palette.orangeSecondary}`,
+            boxShadow: steps === 3 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)',
+          }}
+        ></BarItem>
+      </Btn>
     </ProgressBar>
   );
 };
 
 ParamsBar.propTypes = {
   steps: PropTypes.number.isRequired,
+  step: PropTypes.number,
+  setSteps: PropTypes.func.isRequired,
+  children: PropTypes.any,
 };
 
 export default ParamsBar;
diff --git a/src/components/ParamsBtn/ParamsBtn.jsx b/src/components/ParamsBtn/ParamsBtn.jsx
@@ -1,13 +1,34 @@
 import PropTypes from 'prop-types';
 import { BtnNav, Svg } from './ParamsBtn.styled';
+import Notiflix from 'notiflix';
 
-const ParamsBtn = ({ setSteps, type, step }) => {
+const ParamsBtn = ({ setSteps, type, step, values }) => {
   if (type === 'next') {
     return (
       <BtnNav
         type="button"
         onClick={() => {
-          setSteps(step);
+          if (
+            step === 2 &&
+            values.height !== '' &&
+            values.currentWeight !== '' &&
+            values.desiredWeight !== ''
+          ) {
+            setSteps(step);
+            return;
+          }
+
+          if (
+            step === 3 &&
+            values.blood !== '' &&
+            values.sex !== '' &&
+            values.levelActivity !== ''
+          ) {
+            setSteps(step);
+            return;
+          }
+
+          Notiflix.Notify.warning('pls fill all fields');
         }}
       >
         Next
@@ -39,6 +60,8 @@ ParamsBtn.propTypes = {
   setSteps: PropTypes.func.isRequired,
   type: PropTypes.string,
   step: PropTypes.number.isRequired,
+  validate: PropTypes.func,
+  values: PropTypes.object,
 };
 
 export default ParamsBtn;