feat: add eslint linter

assets/components/tracking/watchlist/TrackedDomainTable.tsx

@@ -1,27 +1,41 @@
-import React, {ReactElement, useEffect, useState} from "react";
-import {Domain, getTrackedDomainList} from "../../../utils/api";
-import {Button, Empty, Result, Skeleton, Table, Tag, Tooltip} from "antd";
-import {t} from "ttag";
-import {ColumnType} from "antd/es/table";
-import {rdapStatusCodeDetailTranslation} from "../../../utils/functions/rdapTranslation";
-import {eppStatusCodeToColor} from "../../../utils/functions/eppStatusCodeToColor";
-import {Link} from "react-router-dom";
+import React, {ReactElement, useEffect, useState} from 'react'
+import {Domain, getTrackedDomainList} from '../../../utils/api'
+import {Button, Empty, Result, Skeleton, Table, Tag, Tooltip} from 'antd'
+import {t} from 'ttag'
+import {ColumnType} from 'antd/es/table'
+import {rdapStatusCodeDetailTranslation} from '../../../utils/functions/rdapTranslation'
+import {eppStatusCodeToColor} from '../../../utils/functions/eppStatusCodeToColor'
+import {Link} from 'react-router-dom'
 import {ExceptionOutlined, MonitorOutlined} from '@ant-design/icons'
-import {DomainToTag} from "../DomainToTag";
-
+import {DomainToTag} from '../DomainToTag'
 
 export function TrackedDomainTable() {
-    const REDEMPTION_NOTICE = <Tooltip
-        title={t`At least one domain name is in redemption period and will potentially be deleted soon`}>
-        <Tag color={eppStatusCodeToColor('redemption period')}>redemption period</Tag>
-    </Tooltip>
+    const REDEMPTION_NOTICE = (
+        <Tooltip
+            title={t`At least one domain name is in redemption period and will potentially be deleted soon`}
+        >
+            <Tag color={eppStatusCodeToColor('redemption period')}>redemption period</Tag>
+        </Tooltip>
+    )
 
-    const PENDING_DELETE_NOTICE = <Tooltip
-        title={t`At least one domain name is pending deletion and will soon become available for registration again`}>
-        <Tag color={eppStatusCodeToColor('pending delete')}>pending delete</Tag>
-    </Tooltip>
+    const PENDING_DELETE_NOTICE = (
+        <Tooltip
+            title={t`At least one domain name is pending deletion and will soon become available for registration again`}
+        >
+            <Tag color={eppStatusCodeToColor('pending delete')}>pending delete</Tag>
+        </Tooltip>
+    )
 
-    const [dataTable, setDataTable] = useState<(Domain & { domain: Domain })[]>([])
+    interface TableRow {
+        key: string
+        ldhName: ReactElement
+        expirationDate: string
+        status: ReactElement[]
+        updatedAt: string
+        domain: Domain
+    }
+
+    const [dataTable, setDataTable] = useState<TableRow[]>([])
     const [total, setTotal] = useState<number>()
     const [specialNotice, setSpecialNotice] = useState<ReactElement[]>([])
 
@@ -46,8 +60,10 @@ export function TrackedDomainTable() {
                     ldhName: <DomainToTag domain={d}/>,
                     expirationDate: expirationDate ? new Date(expirationDate).toLocaleString() : '-',
                     status: d.status.map(s => <Tooltip
+                            key={s}
                             placement='bottomLeft'
-                            title={rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] || undefined}>
+                            title={rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] || undefined}
+                        >
                             <Tag color={eppStatusCodeToColor(s)}>{s}</Tag>
                         </Tooltip>
                     ),
@@ -63,17 +79,19 @@ export function TrackedDomainTable() {
         fetchData({page: 1, itemsPerPage: 30})
     }, [])
 
+    interface RecordType {
+        domain: Domain
+    }
 
-    const columns: ColumnType<any>[] = [
+    const columns: Array<ColumnType<RecordType>> = [
         {
             title: t`Domain`,
-            dataIndex: "ldhName"
+            dataIndex: 'ldhName'
         },
         {
             title: t`Expiration date`,
             dataIndex: 'expirationDate',
-            sorter: (a: { domain: Domain }, b: { domain: Domain }) => {
-
+            sorter: (a: RecordType, b: RecordType) => {
                 const expirationDate1 = a.domain.events.find(e => e.action === 'expiration' && !e.deleted)?.date
                 const expirationDate2 = b.domain.events.find(e => e.action === 'expiration' && !e.deleted)?.date
 
@@ -85,65 +103,70 @@ export function TrackedDomainTable() {
         {
             title: t`Updated at`,
             dataIndex: 'updatedAt',
-            sorter: (a: { domain: Domain }, b: {
-                domain: Domain
-            }) => new Date(a.domain.updatedAt).getTime() - new Date(b.domain.updatedAt).getTime()
+            sorter: (a: RecordType, b: RecordType) => new Date(a.domain.updatedAt).getTime() - new Date(b.domain.updatedAt).getTime()
         },
         {
             title: t`Status`,
             dataIndex: 'status',
             showSorterTooltip: {target: 'full-header'},
-            filters: [...new Set(dataTable.map((d: any) => d.domain.status).flat())].map(s => ({
+            filters: [...new Set(dataTable.map((d: RecordType) => d.domain.status).flat())].map(s => ({
                 text: <Tooltip
                     placement='bottomLeft'
-                    title={rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] || undefined}>
+                    title={rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] || undefined}
+                >
                     <Tag color={eppStatusCodeToColor(s)}>{s}</Tag>
                 </Tooltip>,
-                value: s,
+                value: s
             })),
-            onFilter: (value, record: { domain: Domain }) => record.domain.status.includes(value as string)
+            onFilter: (value, record: RecordType) => record.domain.status.includes(value as string)
         }
     ]
 
-    return <>
-        {
-            total === 0 ? <Empty
-                description={t`No tracked domain names were found, please create your first Watchlist`}
-            >
-                <Link to='/tracking/watchlist'>
-                    <Button type="primary">Create Now</Button>
-                </Link>
-            </Empty> : <Skeleton loading={total === undefined}>
-                <Result
-                    style={{paddingTop: 0}}
-                    subTitle={t`Please note that this table does not include domain names marked as expired or those with an unknown expiration date`}
-                    {...(specialNotice.length > 0 ? {
-                        icon: <ExceptionOutlined/>,
-                        status: 'warning',
-                        title: t`At least one domain name you are tracking requires special attention`,
-                        extra: specialNotice
-                    } : {
-                        icon: <MonitorOutlined/>,
-                        status: 'info',
-                        title: t`The domain names below are subject to special monitoring`,
-                    })}
-                />
+    return (
+        <>
+            {
+                total === 0
+                    ? <Empty
+                        description={t`No tracked domain names were found, please create your first Watchlist`}
+                    >
+                        <Link to='/tracking/watchlist'>
+                            <Button type='primary'>Create Now</Button>
+                        </Link>
+                    </Empty>
+                    : <Skeleton loading={total === undefined}>
+                        <Result
+                            style={{paddingTop: 0}}
+                            subTitle={t`Please note that this table does not include domain names marked as expired or those with an unknown expiration date`}
+                            {...(specialNotice.length > 0
+                                ? {
+                                    icon: <ExceptionOutlined/>,
+                                    status: 'warning',
+                                    title: t`At least one domain name you are tracking requires special attention`,
+                                    extra: specialNotice
+                                }
+                                : {
+                                    icon: <MonitorOutlined/>,
+                                    status: 'info',
+                                    title: t`The domain names below are subject to special monitoring`
+                                })}
+                        />
 
-                <Table
-                    loading={total === undefined}
-                    columns={columns}
-                    dataSource={dataTable}
-                    pagination={{
-                        total,
-                        hideOnSinglePage: true,
-                        defaultPageSize: 30,
-                        onChange: (page, itemsPerPage) => {
-                            fetchData({page, itemsPerPage})
-                        }
-                    }}
-                    scroll={{y: '50vh'}}
-                />
-            </Skeleton>
-        }
-    </>
-}
+                        <Table
+                            loading={total === undefined}
+                            columns={columns}
+                            dataSource={dataTable}
+                            pagination={{
+                                total,
+                                hideOnSinglePage: true,
+                                defaultPageSize: 30,
+                                onChange: (page, itemsPerPage) => {
+                                    fetchData({page, itemsPerPage})
+                                }
+                            }}
+                            scroll={{y: '50vh'}}
+                        />
+                    </Skeleton>
+            }
+        </>
+    )
+}