group submit result data

ui/pages/PublicTagsSubmit.tsx

@@ -15,9 +15,7 @@ type Screen = 'form' | 'result' | 'initializing' | 'error';
 const PublicTagsSubmit = () => {
 
   const [ screen, setScreen ] = React.useState<Screen>('result');
-  const [ submitResult, setSubmitResult ] = React.useState<FormSubmitResult>([
-    mocks.item1,
-  ]);
+  const [ submitResult, setSubmitResult ] = React.useState<FormSubmitResult>(mocks.allSuccessResponses);
 
   const configQuery = useApiQuery('address_metadata_tag_types');
 

ui/publicTags/submit/PublicTagsSubmitResult.tsx

@@ -10,14 +10,16 @@ import LinkExternal from 'ui/shared/LinkExternal';
 
 import PublicTagsSubmitResultSuccess from './result/PublicTagsSubmitResultSuccess';
 import PublicTagsSubmitResultWithErrors from './result/PublicTagsSubmitResultWithErrors';
+import { groupSubmitResult } from './utils';
 
 interface Props {
   data: FormSubmitResult;
 }
 
 const PublicTagsSubmitResult = ({ data }: Props) => {
-  const hasErrors = data.some((item) => item.error !== null);
-  const companyWebsite = makePrettyLink(data[0].payload.companyWebsite);
+  const groupedData = React.useMemo(() => groupSubmitResult(data), [ data ]);
+  const hasErrors = groupedData.items.length > 0 && groupedData.items[0].error !== null;
+  const companyWebsite = makePrettyLink(groupedData.companyWebsite);
 
   return (
     <div>
@@ -30,13 +32,13 @@ const PublicTagsSubmitResult = ({ data }: Props) => {
       <Box as="h2" textStyle="h4">Company info</Box>
       <Grid rowGap={ 3 } columnGap={ 6 } gridTemplateColumns="170px 1fr" mt={ 6 }>
         <GridItem>Your name</GridItem>
-        <GridItem>{ data[0].payload.requesterName }</GridItem>
+        <GridItem>{ groupedData.requesterName }</GridItem>
         <GridItem>Email</GridItem>
-        <GridItem>{ data[0].payload.requesterEmail }</GridItem>
-        { data[0].payload.companyName && (
+        <GridItem>{ groupedData.requesterEmail }</GridItem>
+        { groupedData.companyName && (
           <>
             <GridItem>Company name</GridItem>
-            <GridItem>{ data[0].payload.companyName }</GridItem>
+            <GridItem>{ groupedData.companyName }</GridItem>
           </>
         ) }
         { companyWebsite && (
@@ -50,7 +52,7 @@ const PublicTagsSubmitResult = ({ data }: Props) => {
       </Grid>
 
       <Box as="h2" textStyle="h4" mt={ 8 } mb={ 5 }>Public tags/labels</Box>
-      { hasErrors ? <PublicTagsSubmitResultWithErrors data={ data }/> : <PublicTagsSubmitResultSuccess data={ data }/> }
+      { hasErrors ? <PublicTagsSubmitResultWithErrors data={ data }/> : <PublicTagsSubmitResultSuccess data={ groupedData }/> }
 
       <Button size="lg" mt={ 8 } as="a" href={ route({ pathname: '/public-tags/submit' }) }>Add new tag</Button>
     </div>

ui/publicTags/submit/mocks.ts

 import type { FormSubmitResultItem } from './types';
 
-export const item1: FormSubmitResultItem = {
-  error: null,
-  payload: {
-    addresses: [
-      { hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' },
-      { hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51255' },
-      { hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51256' },
-      { hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51257' },
-    ],
-    tags: [
-      {
-        name: 'hello',
-        type: { label: 'name', value: 'name' },
-        url: 'https://ohhhh.me',
-        tooltipDescription: 'hello again',
-        bgColor: 'add',
-        textColor: '00aa11',
-      },
-      {
-        name: 'hello it is me.. i was wondering if after all these years you would like to meet',
-        type: { label: 'generic', value: 'generic' },
-        url: undefined,
-        tooltipDescription: undefined,
-        bgColor: undefined,
-        textColor: undefined,
-      },
-    ],
-    requesterName: 'tommasdf jalskdfj asdflkjkas lasdfkj ',
-    requesterEmail: 'tom@ohhhh.me',
-    companyName: 'OHHHH',
-    companyWebsite: 'https://ohhhh.me',
-    description: 'chao',
-    reCaptcha: 'xxxx',
+const address1 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
+const address2 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5858';
+const address3 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5857';
+const address4 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5856';
+const address5 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5855';
+
+const responseBaseFields = {
+  requesterName: 'John Doe',
+  requesterEmail: 'jonh.doe@duck.me',
+  companyName: 'DuckDuckMe',
+  companyWebsite: 'https://duck.me',
+  description: 'Quack quack',
+};
+
+const tag1 = {
+  name: 'Unicorn Uproar',
+  tagType: 'name' as const,
+  meta: {
+    tagUrl: 'https://example.com',
+    bgColor: '#ff1493',
+    textColor: '#FFFFFF',
+    tooltipDescription: undefined,
+  },
+};
+
+const tag2 = {
+  name: 'Hello',
+  tagType: 'generic' as const,
+  meta: {
+    tooltipDescription: 'Hello, it is me... I was wondering if after all these years you would like to meet',
   },
 };
+
+const tag3 = {
+  name: 'duck owner 🦆',
+  tagType: 'classifier' as const,
+  meta: {
+    bgColor: '#fff300',
+  },
+};
+
+export const allSuccessResponses: Array<FormSubmitResultItem> = [
+  address1,
+  address2,
+  address3,
+  address4,
+  address5,
+]
+  .map((address) => ([ tag1, tag2, tag3 ].map((tag) => ({
+    error: null,
+    payload: {
+      ...responseBaseFields,
+      ...tag,
+      address,
+    },
+  }))))
+  .flat();

ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx

 import { Box, Flex, Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
-import type { FormSubmitResult } from '../types';
+import type { FormSubmitResultGrouped } from '../types';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EntityTag from 'ui/shared/EntityTags/EntityTag';
 
 interface Props {
-  data: FormSubmitResult;
+  data: FormSubmitResultGrouped;
 }
 
-const PublicTagsSubmitResultSuccess = (props: Props) => {
+const PublicTagsSubmitResultSuccess = ({ data }: Props) => {
   const isMobile = useIsMobile();
 
   return (
@@ -19,32 +19,32 @@ const PublicTagsSubmitResultSuccess = (props: Props) => {
       <GridItem>
         <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
         <Flex flexDir="column" rowGap={ 3 } mt={ 2 }>
-          { props.data
-            .map((item) => item.payload.addresses)
+          { data.items
+            .map(({ addresses }) => addresses)
             .flat()
-            .map((item) => <AddressEntity key={ item.hash } address={ item } noIcon truncation={ isMobile ? 'constant' : 'dynamic' }/>) }
+            .map((hash) => (
+              <AddressEntity
+                key={ hash }
+                address={{ hash }}
+                noIcon
+                truncation={ isMobile ? 'constant' : 'dynamic' }
+              />
+            )) }
         </Flex>
       </GridItem>
       <GridItem>
         <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Tag</Box>
         <Flex rowGap={ 2 } columnGap={ 2 } mt={ 2 } justifyContent="flex-start" flexWrap="wrap">
-          { props.data
-            .map((item) => item.payload.tags)
+          { data.items
+            .map(({ tags }) => tags)
             .flat()
-            .map((item) => (
+            .map((tag) => (
               <EntityTag
-                key={ item.name }
+                key={ tag.name }
                 truncate
                 data={{
-                  name: item.name,
-                  tagType: item.type.value,
-                  meta: {
-                    bgColor: item.bgColor ? `#${ item.bgColor }` : undefined,
-                    textColor: item.textColor ? `#${ item.textColor }` : undefined,
-                    tooltipDescription: item.tooltipDescription,
-                    tagUrl: item.url,
-                  },
-                  slug: item.name,
+                  ...tag,
+                  slug: '',
                   ordinal: 0,
                 }}/>
             )) }

ui/publicTags/submit/types.ts

@@ -23,9 +23,40 @@ export interface FormFieldTag {
   tooltipDescription: string | undefined;
 }
 
+export interface SubmitRequestBody {
+  requesterName: string;
+  requesterEmail: string;
+  companyName?: string;
+  companyWebsite?: string;
+  address: string;
+  name: string;
+  tagType: AddressMetadataTagType;
+  description?: string;
+  meta: {
+    bgColor?: string;
+    textColor?: string;
+    tagUrl?: string;
+    tooltipDescription?: string;
+  };
+}
+
 export interface FormSubmitResultItem {
-  error: unknown | null;
-  payload: FormFields;
+  error: string | null;
+  payload: SubmitRequestBody;
 }
 
 export type FormSubmitResult = Array<FormSubmitResultItem>;
+
+export interface FormSubmitResultGrouped {
+  requesterName: string;
+  requesterEmail: string;
+  companyName?: string;
+  companyWebsite?: string;
+  items: Array<FormSubmitResultItemGrouped>;
+}
+
+export interface FormSubmitResultItemGrouped {
+  error: string | null;
+  addresses: Array<string>;
+  tags: Array<Pick<SubmitRequestBody, 'name' | 'tagType' | 'meta'>>;
+}

ui/publicTags/submit/utils.ts

+import type { FormSubmitResult, FormSubmitResultGrouped, FormSubmitResultItemGrouped } from './types';
+
+const tagIdentity = (tag: FormSubmitResultItemGrouped['tags'][number]) => tag.name + ':' + tag.tagType;
+
+export function groupSubmitResult(data: FormSubmitResult): FormSubmitResultGrouped {
+  const _items: Array<FormSubmitResultItemGrouped> = [];
+
+  // group by error and address
+  for (const item of data) {
+    const existingItem = _items.find(({ error, addresses }) => error === item.error && addresses.length === 1 && addresses[0] === item.payload.address);
+    if (existingItem) {
+      existingItem.tags.push({ name: item.payload.name, tagType: item.payload.tagType, meta: item.payload.meta });
+      continue;
+    }
+
+    _items.push({
+      error: item.error,
+      addresses: [ item.payload.address ],
+      tags: [ { name: item.payload.name, tagType: item.payload.tagType, meta: item.payload.meta } ],
+    });
+  }
+
+  const items: Array<FormSubmitResultItemGrouped> = [];
+
+  // merge items with the same error and tags
+  for (const item of _items) {
+    const existingItem = items.find(({ error, tags }) => error === item.error &&
+        tags.length === item.tags.length && tags.every(tagIdentity),
+    );
+    if (existingItem) {
+      existingItem.addresses.push(...item.addresses);
+      continue;
+    }
+
+    items.push(item);
+  }
+
+  return {
+    requesterName: data[0].payload.requesterName,
+    requesterEmail: data[0].payload.requesterEmail,
+    companyName: data[0].payload.companyName,
+    companyWebsite: data[0].payload.companyWebsite,
+    items,
+  };
+}