External/domain-watchdog
1
0
Fork 0
mirror of https://github.com/maelgangloff/domain-watchdog.git synced 2025-12-29 16:15:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update front layout

Browse Source
This commit is contained in:
Maël Gangloff
2024-07-27 14:40:08 +02:00
parent 3b890c83f6
commit df81d12a50
1 changed files with 54 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
assets/pages/search/DomainSearchPage.tsx
View File

@@ -1,5 +1,5 @@
import React, {useState} from "react"; import React, {useState} from "react";
import {Card, Divider, Flex, Form, FormProps, Input, message, Timeline} from "antd"; import {Badge, Card, Divider, Flex, Form, FormProps, Input, message, Space, Timeline, Typography} from "antd";
import { import {
ClockCircleOutlined, ClockCircleOutlined,
DeleteOutlined, DeleteOutlined,
@@ -12,20 +12,22 @@ import {Domain, getDomain} from "../../utils/api";
import {AxiosError} from "axios" import {AxiosError} from "axios"
const {Title} = Typography
type FieldType = { type FieldType = {
ldhName: string ldhName: string
} }
export default function DomainSearchPage() { export default function DomainSearchPage() {
const [domainData, setDomainData] = useState<Domain | null>(null) const [domain, setDomain] = useState<Domain | null>(null)
const [messageApi, contextHolder] = message.useMessage() const [messageApi, contextHolder] = message.useMessage()
const onFinish: FormProps<FieldType>['onFinish'] = (values) => { const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
getDomain(values.ldhName).then(setDomainData).catch((e: AxiosError) => { getDomain(values.ldhName).then(setDomain).catch((e: AxiosError) => {
const data = e?.response?.data as { detail: string } const data = e?.response?.data as { detail: string }
messageApi.error(data.detail ?? 'An error occurred') messageApi.error(data.detail ?? 'An error occurred')
setDomain(null)
}) })
} }
@@ -56,44 +58,58 @@ export default function DomainSearchPage() {
<Input size="large" prefix={<SearchOutlined/>} placeholder="example.com"/> <Input size="large" prefix={<SearchOutlined/>} placeholder="example.com"/>
</Form.Item> </Form.Item>
</Form> </Form>
<Divider/>
{ {
domainData && <> domain && <>
<Timeline <Divider/>
mode="right" <Space direction="vertical" size="middle" style={{width: '100%'}}>
items={domainData.events <Badge.Ribbon text={`.${domain.tld.tld.toUpperCase()} (${domain.tld.type})`}
.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime()) color={
.map(({action, date}) => { domain.tld.type === 'ccTLD' ? 'purple' :
(domain.tld.type === 'gTLD' && domain.tld.specification13) ? "volcano" :
domain.tld.type === 'gTLD' ? "green"
: "cyan"
}>
<Card title={`${domain.ldhName}${domain.handle ? ' (' + domain.handle + ')' : ''}`}
size="small">
let color, dot <Timeline
if (action === 'registration') { mode="right"
color = 'green' items={domain.events
dot = <SignatureOutlined style={{fontSize: '16px'}}/> .sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
} else if (action === 'expiration') { .map(({action, date}) => {
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'}}/>
}
return { let color, dot
label: new Date(date).toUTCString(), if (action === 'registration') {
children: action, color = 'green'
color, dot = <SignatureOutlined style={{fontSize: '16px'}}/>
dot, } else if (action === 'expiration') {
pending: new Date(date).getTime() > new Date().getTime() 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'}}/>
}
return {
label: new Date(date).toUTCString(),
children: action,
color,
dot,
pending: new Date(date).getTime() > new Date().getTime()
}
}
)
} }
} />
) </Card>
} </Badge.Ribbon>
/> </Space>
</> </>
} }
</Card> </Card>