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

feat: add skeleton on Domain Finder page

Browse Source
This commit is contained in:
Maël Gangloff 2024-07-27 17:02:21 +02:00
parent 68392dd8ec
commit eaab8ce1b2
No known key found for this signature in database
GPG Key ID: 11FDC81C24A7F629
2 changed files with 135 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import {
Input, Input,
List, List,
message, message,
Skeleton,
Space, Space,
Tag, Tag,
Timeline, Timeline,
@ -21,6 +22,7 @@ import {
ClockCircleOutlined, ClockCircleOutlined,
DeleteOutlined, DeleteOutlined,
IdcardOutlined, IdcardOutlined,
ReloadOutlined,
SearchOutlined, SearchOutlined,
ShareAltOutlined, ShareAltOutlined,
SignatureOutlined, SignatureOutlined,
@ -40,16 +42,17 @@ type FieldType = {
export default function DomainSearchPage() { export default function DomainSearchPage() {
const [domain, setDomain] = useState<Domain | null>(null) const [domain, setDomain] = useState<Domain | null>()
const [messageApi, contextHolder] = message.useMessage() const [messageApi, contextHolder] = message.useMessage()
const onFinish: FormProps<FieldType>['onFinish'] = (values) => { const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
setDomain(null)
getDomain(values.ldhName).then(d => { getDomain(values.ldhName).then(d => {
setDomain(d) setDomain(d)
messageApi.success('Found !') messageApi.success('Found !')
}).catch((e: AxiosError) => { }).catch((e: AxiosError) => {
const data = e?.response?.data as { detail: string } const data = e?.response?.data as { detail: string }
setDomain(null) setDomain(undefined)
messageApi.error(data.detail ?? 'An error occurred') messageApi.error(data.detail ?? 'An error occurred')
}) })
} }
@ -77,10 +80,12 @@ export default function DomainSearchPage() {
min: 2 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.Item>
</Form> </Form>
<Skeleton loading={domain === null} active>
{ {
domain && domain &&
(!domain.deleted ? <Space direction="vertical" size="middle" style={{width: '100%'}}> (!domain.deleted ? <Space direction="vertical" size="middle" style={{width: '100%'}}>
@ -128,7 +133,11 @@ export default function DomainSearchPage() {
} else if (action === 'deletion') { } else if (action === 'deletion') {
color = 'red' color = 'red'
dot = <DeleteOutlined style={{fontSize: '16px'}}/> dot = <DeleteOutlined style={{fontSize: '16px'}}/>
} else if (action === 'reregistration') {
color = 'green'
dot = <ReloadOutlined style={{fontSize: '16px'}}/>
} }
return { return {
label: new Date(date).toUTCString(), label: new Date(date).toUTCString(),
children: action, children: action,
@ -184,6 +193,7 @@ export default function DomainSearchPage() {
</Typography.Text> </Typography.Text>
}/>) }/>)
} }
</Skeleton>
</Card> </Card>
</Flex> </Flex>
} }

26
assets/pages/watchdog/UserPage.tsx
View File

@ -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() { export default function UserPage() {
return <p>
My Account Page const [user, setUser] = useState<User | null>(null)
</p>
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>
} }