changed to nested routes in publish

src/components/Publish/Actions/index.tsx

@@ -6,6 +6,7 @@ import { FormPublishData } from '../_types'
 import { wizardSteps } from '../_constants'
 import SuccessConfetti from '@shared/SuccessConfetti'
 import { useWeb3 } from '../../../@context/Web3'
+import { useRouter } from 'next/router'
 
 export default function Actions({
   scrollToRef,
@@ -14,6 +15,7 @@ export default function Actions({
   scrollToRef: RefObject<any>
   did: string
 }): ReactElement {
+  const router = useRouter()
   const {
     values,
     errors,
@@ -32,13 +34,13 @@ export default function Actions({
 
   function handleNext(e: FormEvent) {
     e.preventDefault()
-    setFieldValue('user.stepCurrent', values.user.stepCurrent + 1)
+    router.push(`${router.pathname}/?step=${parseInt(router.query.step) + 1}`)
     scrollToRef.current.scrollIntoView()
   }
 
   function handlePrevious(e: FormEvent) {
     e.preventDefault()
-    setFieldValue('user.stepCurrent', values.user.stepCurrent - 1)
+    router.push(`${router.pathname}/?step=${parseInt(router.query.step) - 1}`)
     scrollToRef.current.scrollIntoView()
   }
 

src/components/Publish/Navigation/index.tsx

@@ -1,5 +1,5 @@
 import { FormikContextType, useFormikContext } from 'formik'
-import React, { ReactElement, useEffect } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { FormPublishData } from '../_types'
 import { wizardSteps } from '../_constants'
@@ -7,7 +7,6 @@ import styles from './index.module.css'
 
 export default function Navigation(): ReactElement {
   const router = useRouter()
-
   const {
     values,
     errors,
@@ -15,39 +14,11 @@ export default function Navigation(): ReactElement {
     setFieldValue
   }: FormikContextType<FormPublishData> = useFormikContext()
 
-  const queryString = window.location.search
-  const urlParams = new URLSearchParams(queryString)
-  let step = parseInt(urlParams.get('step'))
-  // check if exists and it's valid, if not, restart flow
-  if (!step || step > 5) {
-    step = 1
-  }
-
-  useEffect(() => {
-    // Change route to include steps
-    router.push(
-      `${router.pathname}/?step=${values.user.stepCurrent}`,
-      undefined,
-      {
-        shallow: true
-      }
-    )
-  }, [values.user.stepCurrent])
-
   function handleStepClick(step: number) {
-    setFieldValue('user.stepCurrent', step)
+    // Change route to include steps
+    router.push(`${router.pathname}/?step=${step}`)
   }
 
-  // used window object, as catching the state of the router with useRouter() causes side effects
-  window.onpopstate = function () {
-    setFieldValue('user.stepCurrent', step)
-  }
-
-  useEffect(() => {
-    // load current step on refresh - CAUTION: all data will be deleted anyway
-    setFieldValue('user.stepCurrent', step || 1)
-  }, [])
-
   function getSuccessClass(step: number) {
     const isSuccessMetadata = errors.metadata === undefined
     const isSuccessServices = errors.services === undefined
@@ -66,6 +37,17 @@ export default function Navigation(): ReactElement {
     return isSuccess ? styles.success : null
   }
 
+  useEffect(() => {
+    let step = 1
+    if (router.query?.step) {
+      const stepParam: number = parseInt(router.query.step)
+      // check if query param is a valid step, if not we take the user to step 1
+      stepParam <= wizardSteps.length ? (step = stepParam) : handleStepClick(1)
+    }
+    // load current step on refresh - CAUTION: all data will be deleted anyway
+    setFieldValue('user.stepCurrent', step)
+  }, [router])
+
   return (
     <nav className={styles.navigation}>
       <ol>

src/pages/publish/[step].tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
-import Publish from '../components/Publish'
+import Publish from '../../components/Publish'
 import Page from '@shared/Page'
-import content from '../../content/publish/index.json'
+import content from '../../../content/publish/index.json'
 import router from 'next/router'
 
 export default function PagePublish(): ReactElement {