From eaab8ce1b2e65a7e9ca95b3917768af6b2cd059f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Gangloff?= <contact@maelgangloff.fr>
Date: Sat, 27 Jul 2024 17:02:21 +0200
Subject: [PATCH] feat: add skeleton on Domain Finder page

---
 assets/pages/search/DomainSearchPage.tsx | 216 ++++++++++++-----------
 assets/pages/watchdog/UserPage.tsx       |  26 ++-
 2 files changed, 135 insertions(+), 107 deletions(-)

diff --git a/assets/pages/search/DomainSearchPage.tsx b/assets/pages/search/DomainSearchPage.tsx
index 8e13570..6472af9 100644
--- a/assets/pages/search/DomainSearchPage.tsx
+++ b/assets/pages/search/DomainSearchPage.tsx
@@ -11,6 +11,7 @@ import {
     Input,
     List,
     message,
+    Skeleton,
     Space,
     Tag,
     Timeline,
@@ -21,6 +22,7 @@ import {
     ClockCircleOutlined,
     DeleteOutlined,
     IdcardOutlined,
+    ReloadOutlined,
     SearchOutlined,
     ShareAltOutlined,
     SignatureOutlined,
@@ -40,16 +42,17 @@ type FieldType = {
 
 export default function DomainSearchPage() {
 
-    const [domain, setDomain] = useState<Domain | null>(null)
+    const [domain, setDomain] = useState<Domain | null>()
     const [messageApi, contextHolder] = message.useMessage()
 
     const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
+        setDomain(null)
         getDomain(values.ldhName).then(d => {
             setDomain(d)
             messageApi.success('Found !')
         }).catch((e: AxiosError) => {
             const data = e?.response?.data as { detail: string }
-            setDomain(null)
+            setDomain(undefined)
             messageApi.error(data.detail ?? 'An error occurred')
         })
     }
@@ -77,113 +80,120 @@ export default function DomainSearchPage() {
                         min: 2
                     }]}
                 >
-                    <Input size="large" prefix={<SearchOutlined/>} placeholder="example.com"/>
+                    <Input size="large" prefix={<SearchOutlined/>} placeholder="example.com" autoFocus={true}
+                           autoComplete='off'/>
                 </Form.Item>
             </Form>
 
-            {
-                domain &&
-                (!domain.deleted ? <Space direction="vertical" size="middle" style={{width: '100%'}}>
-                        <Badge.Ribbon text={`.${domain.tld.tld.toUpperCase()} (${domain.tld.type})`}
-                                      color={
-                                          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">
-                                {domain.status.length > 0 &&
-                                    <>
-                                        <Divider orientation="left">EPP Status Codes</Divider>
-                                        <Flex gap="4px 0" wrap>
-                                            {
-                                                domain.status.map(s =>
-                                                    <Tag color={s === 'active' ? 'green' : 'blue'}>{s}</Tag>
-                                                )
-                                            }
-                                        </Flex>
-                                    </>
-                                }
-                                <Divider orientation="left">Timeline</Divider>
-                                <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'}}/>
+            <Skeleton loading={domain === null} active>
+                {
+                    domain &&
+                    (!domain.deleted ? <Space direction="vertical" size="middle" style={{width: '100%'}}>
+                            <Badge.Ribbon text={`.${domain.tld.tld.toUpperCase()} (${domain.tld.type})`}
+                                          color={
+                                              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">
+                                    {domain.status.length > 0 &&
+                                        <>
+                                            <Divider orientation="left">EPP Status Codes</Divider>
+                                            <Flex gap="4px 0" wrap>
+                                                {
+                                                    domain.status.map(s =>
+                                                        <Tag color={s === 'active' ? 'green' : 'blue'}>{s}</Tag>
+                                                    )
                                                 }
-                                                return {
-                                                    label: new Date(date).toUTCString(),
-                                                    children: action,
-                                                    color,
-                                                    dot,
-                                                    pending: new Date(date).getTime() > new Date().getTime()
-                                                }
-                                            }
-                                        )
+                                            </Flex>
+                                        </>
                                     }
-                                />
-                                {
-                                    domain.entities.length > 0 &&
-                                    <>
-                                        <Divider orientation="left">Entities</Divider>
-                                        <List
-                                            className="demo-loadmore-list"
-                                            itemLayout="horizontal"
-                                            dataSource={domain.entities}
-                                            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()
+                                    <Divider orientation="left">Timeline</Divider>
+                                    <Timeline
+                                        mode="right"
+                                        items={domain.events
+                                            .sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
+                                            .map(({action, date}) => {
 
-                                                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.join(', ')}</div>
-                                                </List.Item>
-                                            }}
-                                        />
-                                    </>
-                                }
-                            </Card>
-                        </Badge.Ribbon>
-                    </Space>
-                    : <Empty
-                        description={
-                            <Typography.Text>
-                                Although the domain exists in my database, it has been deleted from the WHOIS by its
-                                registrar.
-                            </Typography.Text>
-                        }/>)
-            }
+                                                    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).toUTCString(),
+                                                        children: action,
+                                                        color,
+                                                        dot,
+                                                        pending: new Date(date).getTime() > new Date().getTime()
+                                                    }
+                                                }
+                                            )
+                                        }
+                                    />
+                                    {
+                                        domain.entities.length > 0 &&
+                                        <>
+                                            <Divider orientation="left">Entities</Divider>
+                                            <List
+                                                className="demo-loadmore-list"
+                                                itemLayout="horizontal"
+                                                dataSource={domain.entities}
+                                                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.join(', ')}</div>
+                                                    </List.Item>
+                                                }}
+                                            />
+                                        </>
+                                    }
+                                </Card>
+                            </Badge.Ribbon>
+                        </Space>
+                        : <Empty
+                            description={
+                                <Typography.Text>
+                                    Although the domain exists in my database, it has been deleted from the WHOIS by its
+                                    registrar.
+                                </Typography.Text>
+                            }/>)
+                }
+            </Skeleton>
         </Card>
     </Flex>
 }
\ No newline at end of file
diff --git a/assets/pages/watchdog/UserPage.tsx b/assets/pages/watchdog/UserPage.tsx
index 4f268a6..e6446b8 100644
--- a/assets/pages/watchdog/UserPage.tsx
+++ b/assets/pages/watchdog/UserPage.tsx
@@ -1,7 +1,25 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
+import {Card, Flex, Skeleton, Typography} from "antd";
+import {getUser, User} from "../../utils/api";
 
 export default function UserPage() {
-    return <p>
-        My Account Page
-    </p>
+
+    const [user, setUser] = useState<User | null>(null)
+
+    useEffect(() => {
+        getUser().then(setUser)
+    }, [])
+
+    return <Skeleton loading={user === null} active>
+        <Flex gap="middle" align="center" justify="center" vertical>
+            <Card title="My Account">
+                <Typography.Paragraph>
+                    Username : {user?.email}
+                </Typography.Paragraph>
+                <Typography.Paragraph>
+                    Roles : {user?.roles.join(',')}
+                </Typography.Paragraph>
+            </Card>
+        </Flex>
+    </Skeleton>
 }
\ No newline at end of file