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

feat: better-looking watchlist cards

Browse Source
This commit is contained in:
vinceh121 2024-07-31 02:55:20 +02:00
parent f623d21ff4
commit 1f5c62a090
No known key found for this signature in database
GPG Key ID: 780725DCACF96F16
2 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/components/tracking/WatchlistsList.tsx
View File

@ -1,23 +1,29 @@
import {Card, Divider, Popconfirm, Typography} from "antd";
import {Card, Divider, Popconfirm, Typography, theme} from "antd";
import {t} from "ttag";
import {deleteWatchlist, EventAction} from "../../utils/api";
import {DeleteFilled} from "@ant-design/icons";
import React from "react";
const { useToken } = theme;
type Watchlist = { token: string, domains: { ldhName: string }[], triggers?: { event: EventAction, action: string }[] }
export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) {
const { token } = useToken()
return <>
{watchlists.map(watchlist =>
<>
<Card title={t`Watchlist ${watchlist.token}`} extra={<Popconfirm
<Card title={t`Watchlist`} type="inner" extra={<Popconfirm
title={t`Delete the Watchlist`}
description={t`Are you sure to delete this Watchlist?`}
onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
okText={t`Yes`}
cancelText={t`No`}
><DeleteFilled/></Popconfirm>}>
okButtonProps={{danger: true}}
><DeleteFilled style={{color: token.colorError}} /></Popconfirm>}>
<Card.Meta description={watchlist.token} style={{marginBottom: '1em'}} />
<Typography.Paragraph>
{t`Domain name`} : {watchlist?.domains.map(d => d.ldhName).join(',')}
</Typography.Paragraph>

23
assets/pages/tracking/WatchlistPage.tsx
View File

@ -1,5 +1,5 @@
import React, {useEffect, useState} from "react";
import {Card, Flex, Form, message, Skeleton} from "antd";
import {Card, Divider, Flex, Form, message, Skeleton} from "antd";
import {EventAction, getWatchlists, postWatchlist} from "../../utils/api";
import {AxiosError} from "axios";
import {t} from 'ttag'
@ -33,7 +33,7 @@ export default function WatchlistPage() {
messageApi.success(t`Watchlist created !`)
}).catch((e: AxiosError) => {
const data = e?.response?.data as { detail: string }
messageApi.error(data.detail ?? t`An error occurred`)
messageApi.error(data?.detail ?? t`An error occurred`)
})
}
@ -41,13 +41,18 @@ export default function WatchlistPage() {
setWatchlists(w['hydra:member'])
}).catch((e: AxiosError) => {
const data = e?.response?.data as { detail: string }
messageApi.error(data.detail ?? t`An error occurred`)
messageApi.error(data?.detail ?? t`An error occurred`)
setWatchlists(undefined)
})
useEffect(() => {
refreshWatchlists()
getConnectors().then(c => setConnectors(c['hydra:member']))
getConnectors()
.then(c => setConnectors(c['hydra:member']))
.catch((e: AxiosError) => {
const data = e?.response?.data as { detail: string }
messageApi.error(data?.detail ?? t`An error occurred`)
})
}, [])
return <Flex gap="middle" align="center" justify="center" vertical>
@ -59,12 +64,10 @@ export default function WatchlistPage() {
}
</Card>
<Divider />
<Skeleton loading={watchlists === undefined} active>
{watchlists && watchlists.length > 0 && <Card title={t`My Watchlists`} style={{width: '100%'}}>
<WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}/>
</Card>
}
</Skeleton>
<Card size="small" loading={!watchlists} title={t`My Watchlists`} style={{width: '100%'}}>
{watchlists && watchlists.length > 0 && <WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}/>}
</Card>
</Flex>
}