refactor: move functions

assets/components/search/DomainResult.tsx

@@ -19,9 +19,9 @@ export function DomainResult({domain}: { domain: Domain }) {
                                   domain.tld.type === 'gTLD' ? "green"
                                       : "cyan"
                       }>
-            <Card title={<>
+            <Card title={<Space>
                 {domain.ldhName}{domain.handle && <Typography.Text code>{domain.handle}</Typography.Text>}
-            </>}
+            </Space>}
                   size="small">
                 {domain.status.length > 0 &&
                     <>

assets/components/search/DomainSearchBar.tsx

@@ -10,7 +10,6 @@ export type FieldType = {
 export function DomainSearchBar({onFinish}: { onFinish: (values: FieldType) => void }) {
 
     return <Form
-        name="basic"
         labelCol={{span: 8}}
         wrapperCol={{span: 16}}
         onFinish={onFinish}

assets/components/search/EntitiesList.tsx

@@ -1,49 +1,33 @@
-import vCard from "vcf";
-import {Avatar, List, Tag, Tooltip} from "antd";
-import {BankOutlined, IdcardOutlined, SignatureOutlined, ToolOutlined, UserOutlined} from "@ant-design/icons";
+import {List, Tag, Tooltip} from "antd";
 import React from "react";
 import {Domain} from "../../utils/api";
 import {rdapRoleDetailTranslation, rdapRoleTranslation} from "./rdapTranslation";
-import {rolesToColor} from "../tracking/watchlist/diagram/watchlistToEdges";
+import {entityToName, rolesToColor, roleToAvatar, sortDomainEntities} from "../../utils";
 
 
 export function EntitiesList({domain}: { domain: Domain }) {
     const rdapRoleTranslated = rdapRoleTranslation()
     const rdapRoleDetailTranslated = rdapRoleDetailTranslation()
 
+    const roleToTag = (r: string) => <Tooltip
+        title={r in rdapRoleDetailTranslated ? rdapRoleDetailTranslated[r as keyof typeof rdapRoleDetailTranslated] : undefined}>
+        <Tag
+            color={rolesToColor([r])}>{rdapRoleTranslated[r as keyof typeof rdapRoleTranslated]}</Tag>
+    </Tooltip>
+
     return <List
         className="demo-loadmore-list"
         itemLayout="horizontal"
-        dataSource={domain.entities.sort((e1, e2) => {
-            const p = (r: string[]) => r.includes('registrant') ? 4 : r.includes('administrative') ? 3 : r.includes('billing') ? 2 : 1
-            return p(e2.roles) - p(e1.roles)
-        })}
-        renderItem={(e) => {
-            const jCard = vCard.fromJSON(e.entity.jCard)
-            let name = ''
-            if (jCard.data.fn !== undefined && !Array.isArray(jCard.data.fn)) name = jCard.data.fn.valueOf()
-
-            return <List.Item>
+        dataSource={sortDomainEntities(domain)}
+        renderItem={(e) =>
+            <List.Item>
                 <List.Item.Meta
-                    avatar={<Avatar style={{backgroundColor: '#87d068'}}
-                                    icon={e.roles.includes('registrant') ?
-                                        <SignatureOutlined/> : e.roles.includes('registrar') ?
-                                            <BankOutlined/> :
-                                            e.roles.includes('technical') ?
-                                                <ToolOutlined/> :
-                                                e.roles.includes('administrative') ?
-                                                    <IdcardOutlined/> :
-                                                    <UserOutlined/>}/>}
+                    avatar={roleToAvatar(e)}
                     title={e.entity.handle}
-                    description={name}
+                    description={entityToName(e)}
                 />
-                {e.roles.map((r) =>
-                    <Tooltip
-                        title={r in rdapRoleDetailTranslated ? rdapRoleDetailTranslated[r as keyof typeof rdapRoleDetailTranslated] : undefined}>
-                        <Tag
-                            color={rolesToColor([r])}>{rdapRoleTranslated[r as keyof typeof rdapRoleTranslated]}</Tag>
-                    </Tooltip>)}
+                {e.roles.map(roleToTag)}
             </List.Item>
-        }}
+        }
     />
 }

assets/components/search/EventTimeline.tsx

@@ -1,26 +1,9 @@
-import {
-    ClockCircleOutlined,
-    DeleteOutlined,
-    ReloadOutlined,
-    ShareAltOutlined,
-    SignatureOutlined,
-    SyncOutlined
-} from "@ant-design/icons";
-import {Timeline, Tooltip} from "antd";
+import {Timeline, Tooltip, Typography} from "antd";
 import React from "react";
-import {Domain, EventAction} from "../../utils/api";
+import {Domain} from "../../utils/api";
 import useBreakpoint from "../../hooks/useBreakpoint";
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from "./rdapTranslation";
-
-export function actionToColor(a: EventAction) {
-    return a === 'registration' ? 'green' :
-        a === 'reregistration' ? 'cyan' :
-            a === 'expiration' ? 'red' :
-                a === 'deletion' ? 'magenta' :
-                    a === 'transfer' ? 'orange' :
-                        a === 'last changed' ? 'blue' : 'default'
-}
-
+import {actionToColor, actionToIcon} from "../../utils";
 
 export function EventTimeline({domain}: { domain: Domain }) {
     const sm = useBreakpoint('sm')
@@ -30,29 +13,22 @@ export function EventTimeline({domain}: { domain: Domain }) {
     const rdapEventDetailTranslated = rdapEventDetailTranslation()
 
     const domainEvents = domain.events.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
-    const expirationEvents = domainEvents.filter(e => e.action === 'expiration')
 
     return <Timeline
         mode={sm ? "left" : "right"}
-        items={domainEvents.map(({action, date}) => {
-                let dot
-                if (action === 'registration') {
-                    dot = <SignatureOutlined style={{fontSize: '16px'}}/>
-                } else if (action === 'expiration') {
-                    dot = <ClockCircleOutlined style={{fontSize: '16px'}}/>
-                } else if (action === 'transfer') {
-                    dot = <ShareAltOutlined style={{fontSize: '16px'}}/>
-                } else if (action === 'last changed') {
-                    dot = <SyncOutlined style={{fontSize: '16px'}}/>
-                } else if (action === 'deletion') {
-                    dot = <DeleteOutlined style={{fontSize: '16px'}}/>
-                } else if (action === 'reregistration') {
-                    dot = <ReloadOutlined style={{fontSize: '16px'}}/>
-                }
+        items={domainEvents.map(e => {
+                const sameEvents = domainEvents.filter(se => se.action === e.action)
+                const isRelevant = !(sameEvents.length > 1 && sameEvents.indexOf(e) !== 0)
 
-                const eventName = action in rdapEventNameTranslated ? rdapEventNameTranslated[action as keyof typeof rdapEventNameTranslated] : action
-                const dateStr = new Date(date).toLocaleString(locale)
-                const eventDetail = action in rdapEventDetailTranslated ? rdapEventDetailTranslated[action as keyof typeof rdapEventDetailTranslated] : undefined
+                const eventName = <Typography.Text style={{color: isRelevant ? 'default' : 'grey'}}>
+                    {e.action in rdapEventNameTranslated ? rdapEventNameTranslated[e.action as keyof typeof rdapEventNameTranslated] : e.action}
+                </Typography.Text>
+
+                const dateStr = <Typography.Text
+                    style={{color: isRelevant ? 'default' : 'grey'}}>{new Date(e.date).toLocaleString(locale)}
+                </Typography.Text>
+
+                const eventDetail = e.action in rdapEventDetailTranslated ? rdapEventDetailTranslated[e.action as keyof typeof rdapEventDetailTranslated] : undefined
 
                 const text = sm ? {
                     children: <Tooltip placement='bottom' title={eventDetail}>
@@ -64,9 +40,9 @@ export function EventTimeline({domain}: { domain: Domain }) {
                 }
 
                 return {
-                    color: (action === 'expiration' ? (expirationEvents.length > 0 && domainEvents[0].date === date) : true) ? actionToColor(action) : 'grey',
-                    dot,
-                    pending: new Date(date).getTime() > new Date().getTime(),
+                    color: isRelevant ? actionToColor(e.action) : 'grey',
+                    dot: actionToIcon(e.action),
+                    pending: new Date(e.date).getTime() > new Date().getTime(),
                     ...text
                 }
             }