refactor: split components Domain Finder

assets/components/search/DomainSearchBar.tsx

@@ -0,0 +1,35 @@
+import {Form, Input} from "antd";
+import {t} from "ttag";
+import {SearchOutlined} from "@ant-design/icons";
+import React from "react";
+
+export type FieldType = {
+    ldhName: string
+}
+
+export function DomainSearchBar({onFinish}: { onFinish: any }) {
+
+    return <Form
+        name="basic"
+        labelCol={{span: 8}}
+        wrapperCol={{span: 16}}
+        onFinish={onFinish}
+        autoComplete="off"
+    >
+        <Form.Item<FieldType>
+            name="ldhName"
+            rules={[{
+                required: true,
+                message: t`Required`
+            }, {
+                pattern: /^(?=.*\.)\S*[^.\s]$/,
+                message: t`This domain name does not appear to be valid`,
+                max: 63,
+                min: 2
+            }]}
+        >
+            <Input size="large" prefix={<SearchOutlined/>} placeholder="example.com" autoFocus={true}
+                   autoComplete='off'/>
+        </Form.Item>
+    </Form>
+}

assets/components/search/EntitiesList.tsx

@@ -0,0 +1,53 @@
+import vCard from "vcf";
+import {Avatar, List} from "antd";
+import {BankOutlined, IdcardOutlined, SignatureOutlined, ToolOutlined, UserOutlined} from "@ant-design/icons";
+import React from "react";
+import {Domain} from "../../utils/api";
+import {t} from "ttag";
+
+export function EntitiesList({domain}: { domain: Domain }) {
+    const domainRole = {
+        registrant: t`Registrant`,
+        technical: t`Technical`,
+        administrative: t`Administrative`,
+        abuse: t`Abuse`,
+        billing: t`Billing`,
+        registrar: t`Registrar`,
+        reseller: t`Reseller`,
+        sponsor: t`Sponsor`,
+        proxy: t`Proxy`,
+        notifications: t`Notifications`,
+        noc: t`Noc`
+    }
+
+    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>
+                <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/>}/>}
+                    title={e.entity.handle}
+                    description={name}
+                />
+                <div>{e.roles.map((r) => Object.keys(domainRole).includes(r) ? domainRole[r as keyof typeof domainRole] : r).join(', ')}</div>
+            </List.Item>
+        }}
+    />
+}

assets/components/search/EventTimeline.tsx

@@ -0,0 +1,70 @@
+import {
+    ClockCircleOutlined,
+    DeleteOutlined,
+    ReloadOutlined,
+    ShareAltOutlined,
+    SignatureOutlined,
+    SyncOutlined
+} from "@ant-design/icons";
+import {Timeline} from "antd";
+import React from "react";
+import {Domain} from "../../utils/api";
+import {t} from "ttag";
+
+export function EventTimeline({domain}: { domain: Domain }) {
+
+    const domainEvent = {
+        registration: t`Registration`,
+        reregistration: t`Reregistration`,
+        'last changed': t`Last changed`,
+        expiration: t`Expiration`,
+        deletion: t`Deletion`,
+        reinstantiation: t`Reinstantiation`,
+        transfer: t`Transfer`,
+        locked: t`Locked`,
+        unlocked: t`Unlocked`,
+        'registrar expiration': t`Registrar expiration`,
+        'enum validation expiration': t`ENUM validation expiration`
+    }
+
+    const locale = navigator.language.split('-')[0]
+
+    return <Timeline
+        mode="right"
+        items={domain.events
+            .sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
+            .map(({action, date}) => {
+
+                    let color, dot
+                    if (action === 'registration') {
+                        color = 'green'
+                        dot = <SignatureOutlined style={{fontSize: '16px'}}/>
+                    } else if (action === 'expiration') {
+                        color = 'red'
+                        dot = <ClockCircleOutlined style={{fontSize: '16px'}}/>
+                    } else if (action === 'transfer') {
+                        color = 'orange'
+                        dot = <ShareAltOutlined style={{fontSize: '16px'}}/>
+                    } else if (action === 'last changed') {
+                        color = 'blue'
+                        dot = <SyncOutlined style={{fontSize: '16px'}}/>
+                    } else if (action === 'deletion') {
+                        color = 'red'
+                        dot = <DeleteOutlined style={{fontSize: '16px'}}/>
+                    } else if (action === 'reregistration') {
+                        color = 'green'
+                        dot = <ReloadOutlined style={{fontSize: '16px'}}/>
+                    }
+
+                    return {
+                        label: new Date(date).toLocaleString(locale),
+                        children: Object.keys(domainEvent).includes(action) ? domainEvent[action as keyof typeof domainEvent] : action,
+                        color,
+                        dot,
+                        pending: new Date(date).getTime() > new Date().getTime()
+                    }
+                }
+            )
+        }
+    />
+}