feat(front): add domain timeline

assets/controllers.json

@@ -1,15 +1,15 @@
 {
-  "controllers": {
+    "controllers": {
-    "@symfony/ux-turbo": {
+        "@symfony/ux-turbo": {
-      "turbo-core": {
+            "turbo-core": {
-        "enabled": true,
+                "enabled": true,
-        "fetch": "eager"
+                "fetch": "eager"
-      },
+            },
-      "mercure-turbo-stream": {
+            "mercure-turbo-stream": {
-        "enabled": false,
+                "enabled": false,
-        "fetch": "eager"
+                "fetch": "eager"
-      }
+            }
-    }
+        }
-  },
+    },
-  "entrypoints": []
+    "entrypoints": []
 }

assets/pages/search/DomainSearchPage.tsx

@@ -1,6 +1,13 @@
 import React, {useState} from "react";
-import {Card, Flex, Form, FormProps, Input, message} from "antd";
+import {Card, Divider, Flex, Form, FormProps, Input, message, Timeline} from "antd";
-import {SearchOutlined} from "@ant-design/icons";
+import {
+    ClockCircleOutlined,
+    DeleteOutlined,
+    SearchOutlined,
+    ShareAltOutlined,
+    SignatureOutlined,
+    SyncOutlined
+} from "@ant-design/icons";
 import {Domain, getDomain} from "../../utils/api";
 import {AxiosError} from "axios"
 
@@ -48,10 +55,47 @@ export default function DomainSearchPage() {
                 >
                     <Input size="large" prefix={<SearchOutlined/>} placeholder="example.com"/>
                 </Form.Item>
-
             </Form>
-        </Card>
+            <Divider/>
-        <Card>
+            {
+                domainData && <>
+                    <Timeline
+                        mode="right"
+                        items={domainData.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'}}/>
+                                    }
+
+                                    return {
+                                        label: new Date(date).toUTCString(),
+                                        children: action,
+                                        color,
+                                        dot,
+                                        pending: new Date(date).getTime() > new Date().getTime()
+                                    }
+                                }
+                            )
+                        }
+                    />
+                </>
+            }
         </Card>
     </Flex>
 }

assets/utils/api/index.ts

@@ -1,8 +1,23 @@
 import axios, {AxiosRequestConfig, AxiosResponse} from "axios";
 
 
+type EventAction =
+    'registration'
+    | 'reregistration'
+    | 'last changed'
+    | 'expiration'
+    | 'deletion'
+    | 'reinstantiation'
+    | 'transfer'
+    | 'locked'
+    | 'unlocked'
+    | 'last update of RDAP database'
+    | 'registrar expiration'
+    | 'enum validation expiration'
+    | string
+
 export interface Event {
-    action: string
+    action: EventAction
     date: string
 }