feat(web): WHODAS calculator - Allow users to go to previous step usi…

…ng browser back (#17183)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/connected/WHODAS/Calculator.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react'
 import { useIntl } from 'react-intl'
 import round from 'lodash/round'
+import { parseAsInteger, useQueryState } from 'next-usequerystate'
 
 import {
   Box,
@@ -235,7 +236,15 @@ interface WHODASCalculatorProps {
 }
 
 export const WHODASCalculator = ({ slice }: WHODASCalculatorProps) => {
-  const [stepIndex, setStepIndex] = useState(0)
+  const [stepIndex, setStepIndex] = useQueryState(
+    'stepIndex',
+    parseAsInteger
+      .withOptions({
+        history: 'push',
+        clearOnDefault: true,
+      })
+      .withDefault(0),
+  )
   const formRef = useRef<HTMLDivElement | null>(null)
   const steps = (slice.json?.steps ?? []) as Step[]
   const initialRender = useRef(true)
@@ -266,14 +275,15 @@ export const WHODASCalculator = ({ slice }: WHODASCalculatorProps) => {
 
   useEffect(() => {
     if (initialRender.current) {
+      setStepIndex(0) // Reset step index on initial render
       initialRender.current = false
       return
     }
     window.scrollTo({
       behavior: 'smooth',
       top: formRef.current?.offsetTop ?? 0,
     })
-  }, [stepIndex])
+  }, [setStepIndex, stepIndex])
 
   if (showResults) {
     let totalScore = 0

package.json

@@ -228,7 +228,7 @@
     "next": "14.2.3",
     "next-auth": "3.29.10",
     "next-cookies": "2.0.3",
-    "next-usequerystate": "1.8.4",
+    "next-usequerystate": "1.20.0",
     "node-fetch": "2.6.7",
     "node-gyp": "9.1.0",
     "node-html-markdown": "1.3.0",

yarn.lock

@@ -38840,7 +38840,7 @@ __metadata:
     next-auth: 3.29.10
     next-cookies: 2.0.3
     next-secure-headers: 2.1.0
-    next-usequerystate: 1.8.4
+    next-usequerystate: 1.20.0
     node-fetch: 2.6.7
     node-gyp: 9.1.0
     node-html-markdown: 1.3.0
@@ -44538,14 +44538,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-usequerystate@npm:1.8.4":
-  version: 1.8.4
-  resolution: "next-usequerystate@npm:1.8.4"
+"next-usequerystate@npm:1.20.0":
+  version: 1.20.0
+  resolution: "next-usequerystate@npm:1.20.0"
   dependencies:
     mitt: ^3.0.1
   peerDependencies:
-    next: ^13.4
-  checksum: 4ab19aa11fd32058246375bdcd7c76fdff357e15a460e80a30835b972b7458ab99e59e8ae38be26b32d27727b156b655c2a0105c200b994408fb26366133b496
+    next: ">=13.4 <14.0.2 || ^14.0.3"
+  checksum: fbe915a99e2374eb43c4b1c7ab9b29f4bf46c4383ee66c61ecb13d768e5552f040a90b33a0df1675c20d0cab64d62035cea1b801512f936648af78726ec6860e
   languageName: node
   linkType: hard