add link to start over button

ui/pages/PublicTagsSubmit.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import type { FormSubmitResult } from 'ui/publicTags/submit/types';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import * as mocks from 'ui/publicTags/submit/mocks';
 import PublicTagsSubmitForm from 'ui/publicTags/submit/PublicTagsSubmitForm';
 import PublicTagsSubmitResult from 'ui/publicTags/submit/PublicTagsSubmitResult';
 import ContentLoader from 'ui/shared/ContentLoader';
@@ -14,14 +13,14 @@ type Screen = 'form' | 'result' | 'initializing' | 'error';
 
 const PublicTagsSubmit = () => {
 
-  const [ screen, setScreen ] = React.useState<Screen>('result');
-  const [ submitResult, setSubmitResult ] = React.useState<FormSubmitResult>(mocks.mixedResponses);
+  const [ screen, setScreen ] = React.useState<Screen>('initializing');
+  const [ submitResult, setSubmitResult ] = React.useState<FormSubmitResult>();
 
   const configQuery = useApiQuery('address_metadata_tag_types');
 
   React.useEffect(() => {
     if (!configQuery.isPending) {
-      setScreen(configQuery.isError ? 'error' : 'result');
+      setScreen(configQuery.isError ? 'error' : 'form');
     }
   }, [ configQuery.isError, configQuery.isPending ]);
 

ui/publicTags/submit/PublicTagsSubmitForm.tsx

 import { Button, chakra, Grid, GridItem } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, FormProvider } from 'react-hook-form';
@@ -18,6 +19,8 @@ import PublicTagsSubmitFieldDescription from './fields/PublicTagsSubmitFieldDesc
 import PublicTagsSubmitFieldRequesterEmail from './fields/PublicTagsSubmitFieldRequesterEmail';
 import PublicTagsSubmitFieldRequesterName from './fields/PublicTagsSubmitFieldRequesterName';
 import PublicTagsSubmitFieldTags from './fields/PublicTagsSubmitFieldTags';
+import * as mocks from './mocks';
+import { getDefaultValuesFromQuery } from './utils';
 
 interface Props {
   config: PublicTagTypesResponse | undefined;
@@ -26,15 +29,29 @@ interface Props {
 
 const PublicTagsSubmitForm = ({ config, onSubmitResult }: Props) => {
   const isMobile = useIsMobile();
+  const router = useRouter();
 
   const formApi = useForm<FormFields>({
     mode: 'onBlur',
-    defaultValues: {
-      addresses: [ { hash: '' } ],
-      tags: [ { name: '', type: { label: 'name', value: 'name' } } ],
-    },
+    defaultValues: getDefaultValuesFromQuery(router.query),
   });
 
+  React.useEffect(() => {
+    if (
+      router.query.addresses ||
+      router.query.requesterName ||
+      router.query.requesterEmail ||
+      router.query.companyName ||
+      router.query.companyWebsite
+    ) {
+      router.push({ pathname: '/public-tags/submit' }, undefined, { shallow: true });
+    }
+  }, [ router.query.addresses, router ]);
+
+  const handleMockClick = React.useCallback(async() => {
+    return onSubmitResult(mocks.mixedResponses);
+  }, [ onSubmitResult ]);
+
   const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(data) => {
     // eslint-disable-next-line no-console
     console.log('__>__', data, config);
@@ -92,6 +109,15 @@ const PublicTagsSubmitForm = ({ config, onSubmitResult }: Props) => {
           >
             Send request
           </Button>
+          <Button
+            onClick={ handleMockClick }
+            size="lg"
+            mt={ 3 }
+            colorScheme="gray"
+            w="min-content"
+          >
+            Mock
+          </Button>
         </Grid>
       </chakra.form>
     </FormProvider>

ui/publicTags/submit/PublicTagsSubmitResult.tsx

@@ -13,11 +13,16 @@ import PublicTagsSubmitResultWithErrors from './result/PublicTagsSubmitResultWit
 import { groupSubmitResult } from './utils';
 
 interface Props {
-  data: FormSubmitResult;
+  data: FormSubmitResult | undefined;
 }
 
 const PublicTagsSubmitResult = ({ data }: Props) => {
   const groupedData = React.useMemo(() => groupSubmitResult(data), [ data ]);
+
+  if (!groupedData) {
+    return null;
+  }
+
   const hasErrors = groupedData.items.some((item) => item.error !== null);
   const companyWebsite = makePrettyLink(groupedData.companyWebsite);
 

ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx

 import { Box, Button, Flex, Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
+import _pickBy from 'lodash/pickBy';
 import React from 'react';
 
 import type { FormSubmitResultGrouped } from '../types';
 
+import { route } from 'nextjs-routes';
+
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EntityTag from 'ui/shared/EntityTags/EntityTag';
@@ -20,6 +23,14 @@ const PublicTagsSubmitResultWithErrors = ({ data }: Props) => {
     <Flex flexDir="column" rowGap={ 3 }>
       { data.items.map((item, index) => {
 
+        const startOverButtonQuery = _pickBy({
+          addresses: item.addresses,
+          requesterName: data.requesterName,
+          requesterEmail: data.requesterEmail,
+          companyName: data.companyName,
+          companyWebsite: data.companyWebsite,
+        }, Boolean);
+
         return (
           <Flex key={ index } flexDir={{ base: 'column', lg: 'row' }}>
             <Box flexGrow={ 1 }>
@@ -65,6 +76,8 @@ const PublicTagsSubmitResultWithErrors = ({ data }: Props) => {
                 mt={{ base: 1, lg: 6 }}
                 ml={{ base: 0, lg: 6 }}
                 w="min-content"
+                as="a"
+                href={ route({ pathname: '/public-tags/submit', query: startOverButtonQuery }) }
               >
                 Start  over
               </Button>

ui/publicTags/submit/utils.ts

@@ -2,7 +2,15 @@ import _isEqual from 'lodash/isEqual';
 
 import type { FormSubmitResult, FormSubmitResultGrouped, FormSubmitResultItemGrouped } from './types';
 
-export function groupSubmitResult(data: FormSubmitResult): FormSubmitResultGrouped {
+import type { Route } from 'nextjs-routes';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+export function groupSubmitResult(data: FormSubmitResult | undefined): FormSubmitResultGrouped | undefined {
+  if (!data) {
+    return;
+  }
+
   const _items: Array<FormSubmitResultItemGrouped> = [];
 
   // group by error and address
@@ -49,3 +57,26 @@ export function groupSubmitResult(data: FormSubmitResult): FormSubmitResultGroup
     }),
   };
 }
+
+export function getDefaultValuesFromQuery(query: Route['query']) {
+  return {
+    addresses: getAddressesFromQuery(query),
+    requesterName: getQueryParamString(query?.requesterName),
+    requesterEmail: getQueryParamString(query?.requesterEmail),
+    companyName: getQueryParamString(query?.companyName),
+    companyWebsite: getQueryParamString(query?.companyWebsite),
+    tags: [ { name: '', type: { label: 'name', value: 'name' as const } } ],
+  };
+}
+
+function getAddressesFromQuery(query: Route['query']) {
+  if (!query?.addresses) {
+    return [ { hash: '' } ];
+  }
+
+  if (Array.isArray(query.addresses)) {
+    return query.addresses.map((hash) => ({ hash }));
+  }
+
+  return [ { hash: query.addresses } ];
+}