From bbdd246d310c6f058855b0b5fa80a2ef68c851e6 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sat, 19 Dec 2020 00:46:02 +0200
Subject: [PATCH] stepper fix

---
 src/components/layout/Stepper.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/Stepper.js b/src/components/layout/Stepper.js
index 879075a..dd9ac1f 100644
--- a/src/components/layout/Stepper.js
+++ b/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)}
                 >