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

refactor: move functions

Browse Source
This commit is contained in:
Maël Gangloff
2024-08-21 02:01:20 +02:00
parent 723ef3e883
commit a3c4a4e196
15 changed files with 208 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
assets/components/search/EventTimeline.tsx
View File

@@ -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
}
}