keep step state in a query string

components/Layout/index.tsx

@@ -148,7 +148,7 @@ export const Layout: React.VFC<{
               logoAltText: tsln.logoAltText,
             }}
           />
-          {router.pathname !== '/questions' && (
+          {!router.pathname.includes('/questions') && (
             <>
               <h1 id="applicationTitle" className="h1 mt-8 mb-2">
                 {title}

components/ResultsPage/YourAnswers.tsx

@@ -10,8 +10,6 @@ import { MonthsYears } from '../../utils/api/definitions/types'
 import { Accordion } from '../Forms/Accordion'
 import { fieldDefinitions } from '../../utils/api/definitions/fields'
 import { FieldCategory } from '../../utils/api/definitions/enums'
-import { useSessionStorage } from 'react-use'
-import { keyToStepMap } from '../StepperPage/utils'
 import { useRouter } from 'next/router'
 
 type CategorizedInputs = {
@@ -37,7 +35,6 @@ export const YourAnswers: React.VFC<{
     })
     return initialState
   })
-  const [_activeStep, setActiveStep] = useSessionStorage('step')
 
   const toggleAccordion = (category) => {
     setAccordionStates((prevStates) => ({
@@ -61,8 +58,8 @@ export const YourAnswers: React.VFC<{
 
   const handlePageChange = (key: string) => (e) => {
     e.preventDefault()
-    setActiveStep(keyToStepMap[key] || 0)
-    router.push(`/questions#${key}`)
+    const category = fieldDefinitions[key]?.category?.key
+    router.push(`/questions?step=${category}#${key}`)
   }
 
   /**

components/StepperPage/index.tsx

@@ -34,14 +34,29 @@ interface StepperPageProps {
   setPageTitle: (title: string) => void
 }
 
+const defaultStep = 'marital'
+const formSteps = ['marital', 'age', 'income', 'residence']
+
 const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
   const router = useRouter()
   const langx = useRouter().locale as Language
   const language =
     langx === Language.EN || langx === Language.FR ? langx : Language.EN
-
   const tsln = useTranslation<WebTranslations>()
 
+  const { step } = router.query
+
+  useEffect(() => {
+    // Redirect to the default step if no step is specified or the step is invalid
+    if (
+      !step ||
+      typeof step !== 'string' ||
+      !Object.values(formSteps).includes(step)
+    ) {
+      router.replace(`/questions?step=${defaultStep}`)
+    }
+  }, [])
+
   const allFieldConfigs: FieldConfig[] = FieldsHandler.getAllFieldData(language)
   const [inputs, setInputs]: [
     FieldInputsObject,
@@ -112,7 +127,9 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
 
   const [steps, setSteps] = useState(getSteps(tsln))
   const totalSteps = Object.keys(steps).length
-  const [activeStep, setActiveStep] = useSessionStorage('step', 1)
+  const [activeStep, setActiveStep] = useState(
+    formSteps.indexOf(step as string) + 1
+  )
   const [isLastStep, setIsLastStep] = useState(false)
 
   const [errorsVisible, setErrorsVisible]: [
@@ -153,6 +170,10 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
     setFieldsMetaData(getFieldsMetaData(activeStep))
   }, [ageDate])
 
+  useEffect(() => {
+    setActiveStep(formSteps.indexOf(step as string) + 1)
+  }, [step])
+
   useEffect(() => {
     const focusedElement = document.activeElement
     if (focusedElement instanceof HTMLButtonElement) {
@@ -398,6 +419,8 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
       if (isLastStep) {
         submitForm()
       } else {
+        const nextStep = formSteps[activeStep]
+        router.push(`/questions?step=${nextStep}`)
         setActiveStep(activeStep + 1)
       }
     } else {
@@ -425,7 +448,10 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
           id: 'previous',
           text: tsln.stepper.previousStep,
           onClick: () => {
-            setActiveStep(Math.max(activeStep - 1, 1))
+            if (activeStep > 1) {
+              router.push(`/questions?step=${formSteps[activeStep - 2]}`)
+              setActiveStep(Math.max(activeStep - 1, 1))
+            }
           },
         }}
         nextProps={{

pages/index.tsx

@@ -103,7 +103,6 @@ const Home: NextPage<{ adobeAnalyticsUrl: string }> = ({
               text={tsln.startBenefitsEstimator}
               style="primary"
               onClick={(e) => {
-                sessionStorage.setItem('step', '1')
                 router.push('/questions')
               }}
               custom="w-auto justify-center mb-4"

pages/questions/index.tsx

@@ -8,11 +8,14 @@ import { useRouter } from 'next/router'
 import StepperPage from '../../components/StepperPage'
 import React from 'react'
 
+const defaultStep = 'marital' // Define the first step here
+const steps = ['marital', 'age', 'income', 'residence']
+
 const Stepper: NextPage<{ adobeAnalyticsUrl: string }> = ({
   adobeAnalyticsUrl,
 }) => {
+  const router = useRouter()
   const tsln = useTranslation<WebTranslations>()
-  const language = useRouter().locale
   const [pageTitle, setPageTitle] = useState(tsln.questionPageTitle)
 
   useEffect(() => {
@@ -22,6 +25,20 @@ const Stepper: NextPage<{ adobeAnalyticsUrl: string }> = ({
     }
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
+  const { step } = router.query
+
+  useEffect(() => {
+    // Redirect to the default step if no step is specified or the step is invalid
+    if (!step || typeof step !== 'string' || !steps.includes(step)) {
+      router.replace(`/questions?step=${defaultStep}`)
+    }
+  }, [step, router])
+
+  // Prevent rendering during redirect. Do not try to render when no step in URL.
+  if (!step || typeof step !== 'string' || !steps.includes(step)) {
+    return null
+  }
+
   return (
     <>
       <Head>