feat: add tracked domains table

assets/components/tracking/watchlist/DomainList.tsx

@@ -1,6 +0,0 @@
-import React from "react";
-
-export function TrackedDomainList() {
-    return <>
-    </>
-}

assets/components/tracking/watchlist/TrackedDomainTable.tsx

@@ -0,0 +1,79 @@
+import React, {useEffect, useState} from "react";
+import {Domain, getTrackedDomainList} from "../../../utils/api";
+import {Table, Tag, Tooltip} from "antd";
+import {t} from "ttag";
+import useBreakpoint from "../../../hooks/useBreakpoint";
+import {ColumnType} from "antd/es/table";
+import {rdapStatusCodeDetailTranslation} from "../../../utils/functions/rdapTranslation";
+import {eppStatusCodeToColor} from "../../../utils/functions/eppStatusCodeToColor";
+
+export function TrackedDomainTable() {
+    const sm = useBreakpoint('sm')
+    const [dataTable, setDataTable] = useState<Domain[]>([])
+    const [total, setTotal] = useState()
+
+
+    const rdapStatusCodeDetailTranslated = rdapStatusCodeDetailTranslation()
+
+    const fetchData = (params: { page: number, itemsPerPage: number }) => {
+        getTrackedDomainList(params).then(data => {
+            setTotal(data['hydra:totalItems'])
+            setDataTable(data['hydra:member'].map((d: Domain) => {
+                const expirationDate = d.events.find(e => e.action === 'expiration' && !e.deleted)?.date
+
+                return {
+                    key: d.ldhName,
+                    ldhName: d.ldhName,
+                    expirationDate: expirationDate ? new Date(expirationDate).toLocaleString() : '-',
+                    status: d.status.map(s => <Tooltip
+                            placement='bottomLeft'
+                            title={s in rdapStatusCodeDetailTranslated ? rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] : undefined}>
+                            <Tag color={eppStatusCodeToColor(s)}>{s}</Tag>
+                        </Tooltip>
+                    ),
+                    updatedAt: new Date(d.updatedAt).toLocaleString()
+                }
+            }))
+        })
+    }
+
+    useEffect(() => {
+        fetchData({page: 1, itemsPerPage: 30})
+    }, [])
+
+    const columns: ColumnType<any>[] = [
+        {
+            title: t`Domain`,
+            dataIndex: "ldhName"
+        },
+        {
+            title: t`Expiration date`,
+            dataIndex: 'expirationDate'
+        },
+        {
+            title: t`Status`,
+            dataIndex: 'status'
+        },
+        {
+            title: t`Updated at`,
+            dataIndex: 'updatedAt'
+        }
+    ]
+
+
+    return <Table
+        loading={total === undefined}
+        columns={columns}
+        dataSource={dataTable}
+        pagination={{
+            total,
+            hideOnSinglePage: true,
+            defaultPageSize: 30,
+            onChange: (page, itemsPerPage) => {
+                fetchData({page, itemsPerPage})
+            }
+        }}
+
+        {...(sm ? {scroll: {y: 'max-content'}} : {scroll: {y: 240}})}
+    />
+}

assets/pages/tracking/WatchlistPage.tsx

@@ -8,6 +8,7 @@ import {WatchlistsList} from "../../components/tracking/watchlist/WatchlistsList
 import {Connector, getConnectors} from "../../utils/api/connectors";
 
 import {showErrorAPI} from "../../utils/functions/showErrorAPI";
+import {TrackedDomainTable} from "../../components/tracking/watchlist/TrackedDomainTable";
 
 
 export type Watchlist = {
@@ -97,13 +98,15 @@ export default function WatchlistPage() {
 
     return <Flex gap="middle" align="center" justify="center" vertical>
         {contextHolder}
-        {
-            <Card loading={connectors === undefined} title={t`Create a Watchlist`} style={{width: '100%'}}>
-                {connectors &&
-                    <WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation={true}/>
-                }
-            </Card>
-        }
+        <Card loading={connectors === undefined} title={t`Create a Watchlist`} style={{width: '100%'}}>
+            {connectors &&
+                <WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation={true}/>
+            }
+        </Card>
+        <Divider/>
+        <Card title={t`Tracked Domains`} style={{width: '100%'}}>
+            <TrackedDomainTable/>
+        </Card>
         <Divider/>
         {connectors && watchlists && watchlists.length > 0 &&
             <WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}

assets/utils/api/index.ts

@@ -59,6 +59,7 @@ export interface Domain {
     nameservers: Nameserver[]
     tld: Tld
     deleted: boolean
+    updatedAt: string
 }
 
 export interface User {

assets/utils/api/watchlist.ts

@@ -1,4 +1,4 @@
-import {request, Watchlist, WatchlistRequest} from "./index";
+import {Domain, request, Watchlist, WatchlistRequest} from "./index";
 
 export async function getWatchlists() {
     const response = await request({
@@ -40,4 +40,14 @@ export async function putWatchlist(watchlist: Partial<WatchlistRequest> & { toke
         data: watchlist,
     })
     return response.data
-}
+}
+
+export async function getTrackedDomainList(params: { page: number, itemsPerPage: number }): Promise<any> {
+    const response = await request({
+        method: 'GET',
+        url: 'tracked',
+        params
+    })
+    return response.data
+}
+

assets/utils/functions/eppStatusCodeToColor.tsx

@@ -1,5 +1,5 @@
 export const eppStatusCodeToColor = (s: string) =>
     ['active', 'ok'].includes(s) ? 'green' :
-        s.startsWith('client') ? 'purple' :
-            s.startsWith('server') ? 'geekblue' :
-                s.includes('prohibited') ? 'red' : 'blue'
+        ['pending delete', 'redemption period'].includes(s) ? 'red' :
+            s.startsWith('client') ? 'purple' :
+                s.startsWith('server') ? 'geekblue' : 'blue'