External/domain-watchdog
1
0
Fork 0
mirror of https://github.com/maelgangloff/domain-watchdog.git synced 2025-12-20 19:25:40 +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 {t} from "ttag";
import {deleteWatchlist, EventAction} from "../../utils/api"; import {deleteWatchlist, EventAction} from "../../utils/api";
import {DeleteFilled} from "@ant-design/icons"; import {DeleteFilled} from "@ant-design/icons";
import React from "react"; import React from "react";
const { useToken } = theme;
type Watchlist = { token: string, domains: { ldhName: string }[], triggers?: { event: EventAction, action: string }[] } type Watchlist = { token: string, domains: { ldhName: string }[], triggers?: { event: EventAction, action: string }[] }
export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) { export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) {
const { token } = useToken()
return <> return <>
{watchlists.map(watchlist => {watchlists.map(watchlist =>
<> <>
<Card title={t`Watchlist ${watchlist.token}`} extra={<Popconfirm <Card title={t`Watchlist`} type="inner" extra={<Popconfirm
title={t`Delete the Watchlist`} title={t`Delete the Watchlist`}
description={t`Are you sure to delete this Watchlist?`} description={t`Are you sure to delete this Watchlist?`}
onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)} onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
okText={t`Yes`} okText={t`Yes`}
cancelText={t`No`} cancelText={t`No`}
><DeleteFilled/></Popconfirm>}> okButtonProps={{danger: true}}
><DeleteFilled style={{color: token.colorError}} /></Popconfirm>}>
<Card.Meta description={watchlist.token} style={{marginBottom: '1em'}} />
<Typography.Paragraph> <Typography.Paragraph>
{t`Domain name`} : {watchlist?.domains.map(d => d.ldhName).join(',')} {t`Domain name`} : {watchlist?.domains.map(d => d.ldhName).join(',')}
</Typography.Paragraph> </Typography.Paragraph>

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

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