From 6a6f1acd8411d972dbf4ad8244ea129c4371edc8 Mon Sep 17 00:00:00 2001 From: EnzoVezzaro Date: Tue, 26 Apr 2022 06:09:51 -0400 Subject: [PATCH] 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 82e00398c00237dd5aad6e2447e18999df6d17b5. * 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 | 2 +- next.config.js | 9 ++++++ src/components/Publish/Actions/index.tsx | 17 ++++++++--- src/components/Publish/Navigation/index.tsx | 19 ++++++++++-- src/components/Publish/Steps.tsx | 6 ++-- src/components/Publish/index.tsx | 30 ++++++++++--------- src/pages/{publish.tsx => publish/[step].tsx} | 4 +-- 7 files changed, 61 insertions(+), 26 deletions(-) rename src/pages/{publish.tsx => publish/[step].tsx} (78%) diff --git a/content/site.json b/content/site.json index c26a17974..5e0ce2500 100644 --- a/content/site.json +++ b/content/site.json @@ -7,7 +7,7 @@ "menu": [ { "name": "Publish", - "link": "/publish" + "link": "/publish/1" }, { "name": "Profile", diff --git a/next.config.js b/next.config.js index 63e8b59e6..03fe45721 100644 --- a/next.config.js +++ b/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 diff --git a/src/components/Publish/Actions/index.tsx b/src/components/Publish/Actions/index.tsx index d999ef922..339a264f9 100644 --- a/src/components/Publish/Actions/index.tsx +++ b/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 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) - scrollToRef.current.scrollIntoView() + handleAction('next') } function handlePrevious(e: FormEvent) { e.preventDefault() - setFieldValue('user.stepCurrent', values.user.stepCurrent - 1) - scrollToRef.current.scrollIntoView() + handleAction('prev') } const isContinueDisabled = diff --git a/src/components/Publish/Navigation/index.tsx b/src/components/Publish/Navigation/index.tsx index 1d8770b28..985540d15 100644 --- a/src/components/Publish/Navigation/index.tsx +++ b/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 = 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 (