Merge pull request #172 from GlorianB/fix/stepper-sync

Fixes stepper unsynchronized with step's content

Author: masiulis

src/hooks/useRsiInitialStep.ts

@@ -0,0 +1,25 @@
+import { useCallback } from "react"
+import { StepType } from "../steps/UploadFlow"
+
+export const useRsiInitialStep = (step: StepType) => {
+  const steps = ["uploadStep", "selectHeaderStep", "matchColumnsStep", "validationStep"] as const
+
+  const getInitialStep = useCallback((step: StepType) => {
+    switch (step) {
+      case StepType.upload:
+        return 0
+      case StepType.selectSheet:
+        return 0
+      case StepType.selectHeader:
+        return 1
+      case StepType.matchColumns:
+        return 2
+      case StepType.validateData:
+        return 3
+      default:
+        return 0
+    }
+  }, [])
+
+  return { steps, initialStep: getInitialStep(step) }
+}

src/steps/Steps.tsx

@@ -1,17 +1,19 @@
-import { UploadFlow } from "./UploadFlow"
+import { UploadFlow, StepType } from "./UploadFlow"
 import { ModalHeader } from "@chakra-ui/react"
 import { useSteps, Step, Steps as Stepper } from "chakra-ui-steps"
 import { CgCheck } from "react-icons/cg"
 import { useRsi } from "../hooks/useRsi"
+import { useRsiInitialStep } from "../hooks/useRsiInitialStep"
 
 const CheckIcon = ({ color }: { color: string }) => <CgCheck size="2.25rem" color={color} />
 
-const steps = ["uploadStep", "selectHeaderStep", "matchColumnsStep", "validationStep"] as const
-
 export const Steps = () => {
-  const { translations } = useRsi()
+  const { initialStepState, translations } = useRsi()
+
+  const { steps, initialStep } = useRsiInitialStep(initialStepState?.type || StepType.upload)
+
   const { nextStep, activeStep } = useSteps({
-    initialStep: 0,
+    initialStep,
   })
 
   return (