add steps back history to publish (#1342)

* added step route to publish

* moved hooks to navigation

* handle back history and load on refresh

* clean up

* changed to nested routes in publish

* fix warning code climate (similar blocks)

* fix header publish link

* moved scrollIntoView() after routing change

* fix `Type 'string[]' is not assignable to type 'string'.` error

* Revert "fix header publish link"

This reverts commit 82e00398c0.

* serverside redirect from `/publish`

* client side redirect from `/publish`

* fix issue with redirect on publish

- remove index publish (redirect taken care server side)
- change link in menu to step 1
- refactor router push on navigation

* simplify handleStepClick function

content/site.json

@@ -7,7 +7,7 @@
   "menu": [
     {
       "name": "Publish",
-      "link": "/publish"
+      "link": "/publish/1"
     },
     {
       "name": "Profile",

next.config.js

@@ -49,6 +49,15 @@ module.exports = (phase, { defaultConfig }) => {
       return typeof defaultConfig.webpack === 'function'
         ? defaultConfig.webpack(config, options)
         : config
+    },
+    async redirects() {
+      return [
+        {
+          source: '/publish',
+          destination: '/publish/1',
+          permanent: true
+        }
+      ]
     }
 
     // Prefer loading of ES Modules over CommonJS

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'
 import Tooltip from '@shared/atoms/Tooltip'
 import AvailableNetworks from 'src/components/Publish/AvailableNetworks'
 import Info from '@images/info.svg'
@@ -17,6 +18,7 @@ export default function Actions({
   scrollToRef: RefObject<any>
   did: string
 }): ReactElement {
+  const router = useRouter()
   const { isSupportedOceanNetwork } = useWeb3()
   const {
     values,
@@ -34,16 +36,23 @@ export default function Actions({
     await connect()
   }
 
+  function handleAction(action: string) {
+    const currentStep: string = router.query.step as string
+    router.push({
+      pathname: `${router.pathname}`,
+      query: { step: parseInt(currentStep) + (action === 'next' ? +1 : -1) }
+    })
+    scrollToRef.current.scrollIntoView()
+  }
+
   function handleNext(e: FormEvent) {
     e.preventDefault()
-    setFieldValue('user.stepCurrent', values.user.stepCurrent + 1)
+    handleAction('next')
-    scrollToRef.current.scrollIntoView()
   }
 
   function handlePrevious(e: FormEvent) {
     e.preventDefault()
-    setFieldValue('user.stepCurrent', values.user.stepCurrent - 1)
+    handleAction('prev')
-    scrollToRef.current.scrollIntoView()
   }
 
   const isContinueDisabled =

src/components/Publish/Navigation/index.tsx

@@ -1,10 +1,12 @@
 import { FormikContextType, useFormikContext } from 'formik'
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
 import { FormPublishData } from '../_types'
 import { wizardSteps } from '../_constants'
 import styles from './index.module.css'
 
 export default function Navigation(): ReactElement {
+  const router = useRouter()
   const {
     values,
     errors,
@@ -13,7 +15,8 @@ export default function Navigation(): ReactElement {
   }: FormikContextType<FormPublishData> = useFormikContext()
 
   function handleStepClick(step: number) {
-    setFieldValue('user.stepCurrent', step)
+    // Change step view
+    router.push(`/publish/${step}`)
   }
 
   function getSuccessClass(step: number) {
@@ -34,6 +37,18 @@ export default function Navigation(): ReactElement {
     return isSuccess ? styles.success : null
   }
 
+  useEffect(() => {
+    let step = 1
+    if (router.query?.step) {
+      const currentStep: string = router.query.step as string
+      const stepParam: number = parseInt(currentStep)
+      // 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/components/Publish/Steps.tsx

@@ -70,9 +70,9 @@ export function Steps({
     setTouched
   ])
 
-  const { component } = wizardSteps.filter(
+  const { component } = wizardSteps.filter((stepContent) => {
-    (stepContent) => stepContent.step === values.user.stepCurrent
+    return stepContent.step === values.user.stepCurrent
-  )[0]
+  })[0]
 
   return component
 }

src/components/Publish/index.tsx

@@ -230,20 +230,22 @@ export default function PublishPage({
         await handleSubmit(values)
       }}
     >
-      {({ values }) => (
+      {({ values }) => {
-        <>
+        return (
-          <PageHeader
+          <>
-            title={<Title networkId={values.user.chainId} />}
+            <PageHeader
-            description={content.description}
+              title={<Title networkId={values.user.chainId} />}
-          />
+              description={content.description}
-          <Form className={styles.form} ref={scrollToRef}>
+            />
-            <Navigation />
+            <Form className={styles.form} ref={scrollToRef}>
-            <Steps feedback={feedback} />
+              <Navigation />
-            <Actions scrollToRef={scrollToRef} did={did} />
+              <Steps feedback={feedback} />
-          </Form>
+              <Actions scrollToRef={scrollToRef} did={did} />
-          {debug && <Debug />}
+            </Form>
-        </>
+            {debug && <Debug />}
-      )}
+          </>
+        )
+      }}
     </Formik>
   )
 }

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 {