stepper fix

src/components/layout/Stepper.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import steps from "../../constants/steps";
 import {
   Card,
@@ -21,13 +21,22 @@ const styles = () => ({
 const useStyles = makeStyles(styles);
 
 const ApplicationStepper = () => {
-  const [activeStep, setActiveStep] = useState(0);
+  const firstStep = steps.find((z) => z.id === 0);
+  const [activeStep, setActiveStep] = useState(firstStep);
   const classes = useStyles();
   const location = useLocation();
   const history = useHistory();
 
+  useEffect(() => {
+    const step = steps.find((z) => z.route === location.pathname);
+    if (step) {
+      setActiveStep(step);
+    }
+  }, [location.pathname]);
+
   const handleStepClick = (step) => {
     if (!step) return;
+    setActiveStep(step);
     if (location.pathname === step.route) return;
     history.push(step.route);
   };
@@ -36,11 +45,11 @@ const ApplicationStepper = () => {
     <Card className={classes.stepperCard}>
       <Grid container alignItems="center" spacing={3}>
         <Grid item xs={12}>
-          <Stepper activeStep={activeStep} orientation="horizontal">
+          <Stepper activeStep={activeStep.id} orientation="horizontal">
             {steps.map((step) => (
               <Step key={step.id}>
                 <StepButton
-                  id={"offerStepper_" + step.title}
+                  id={"appStepper_" + step.title}
                   disabled={step.disabled}
                   onClick={() => handleStepClick(step)}
                 >