feat: add eslint linter

assets/components/tracking/watchlist/diagram/ViewDiagramWatchlistButton.tsx

@@ -1,21 +1,20 @@
-import {Button, Flex, Modal, Space, Typography} from "antd"
-import {t} from "ttag"
-import React, {useEffect, useState} from "react"
-import {ApartmentOutlined} from "@ant-design/icons"
+import {Button, Flex, Modal, Space, Typography} from 'antd'
+import {t} from 'ttag'
+import React, {useEffect, useState} from 'react'
+import {ApartmentOutlined} from '@ant-design/icons'
 
 import '@xyflow/react/dist/style.css'
-import {Background, Controls, MiniMap, ReactFlow, useEdgesState, useNodesState} from "@xyflow/react";
-import {getWatchlist} from "../../../../utils/api";
-import {getLayoutedElements} from "./getLayoutedElements";
-import {watchlistToNodes} from "./watchlistToNodes";
-import {watchlistToEdges} from "./watchlistToEdges";
+import {Background, Controls, Edge, MiniMap, Node, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
+import {getWatchlist} from '../../../../utils/api'
+import {getLayoutedElements} from './getLayoutedElements'
+import {watchlistToNodes} from './watchlistToNodes'
+import {watchlistToEdges} from './watchlistToEdges'
 
 export function ViewDiagramWatchlistButton({token}: { token: string }) {
-
     const [open, setOpen] = useState(false)
     const [loading, setLoading] = useState(false)
-    const [nodes, setNodes, onNodesChange] = useNodesState([])
-    const [edges, setEdges, onEdgesChange] = useEdgesState([])
+    const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
+    const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
 
     useEffect(() => {
         setEdges([])
@@ -30,52 +29,54 @@ export function ViewDiagramWatchlistButton({token}: { token: string }) {
             setNodes(e.nodes)
             setEdges(e.edges)
         }).catch(() => setOpen(false)).finally(() => setLoading(false))
-
     }, [open])
 
-
-    return <>
-        <Typography.Link>
-            <ApartmentOutlined title={t`View the Watchlist Entity Diagram`}
-                               style={{color: 'darkviolet'}}
-                               onClick={() => setOpen(true)}/>
-        </Typography.Link>
-        <Modal
-            title={t`Watchlist Entity Diagram`}
-            centered
-            open={open}
-            loading={loading}
-            footer={
-                <Space>
-                    <Button type="default" onClick={() => setOpen(false)}>
-                        Close
-                    </Button>
-                </Space>
-            }
-            onOk={() => setOpen(false)}
-            onCancel={() => setOpen(false)}
-            width='90vw'
-            height='100%'
-        >
-            <Flex style={{width: '85vw', height: '85vh'}}>
-                <ReactFlow
-                    fitView
-                    colorMode='dark'
-                    defaultEdges={[]}
-                    defaultNodes={[]}
-                    nodesConnectable={false}
-                    edgesReconnectable={false}
-                    nodes={nodes}
-                    edges={edges}
-                    onNodesChange={onNodesChange}
-                    onEdgesChange={onEdgesChange}
-                    style={{width: '100%', height: '100%'}}
-                >
-                    <MiniMap/>
-                    <Controls/>
-                    <Background/>
-                </ReactFlow>
-            </Flex>
-        </Modal>
-    </>
+    return (
+        <>
+            <Typography.Link>
+                <ApartmentOutlined
+                    title={t`View the Watchlist Entity Diagram`}
+                    style={{color: 'darkviolet'}}
+                    onClick={() => setOpen(true)}
+                />
+            </Typography.Link>
+            <Modal
+                title={t`Watchlist Entity Diagram`}
+                centered
+                open={open}
+                loading={loading}
+                footer={
+                    <Space>
+                        <Button type='default' onClick={() => setOpen(false)}>
+                            Close
+                        </Button>
+                    </Space>
+                }
+                onOk={() => setOpen(false)}
+                onCancel={() => setOpen(false)}
+                width='90vw'
+                height='100%'
+            >
+                <Flex style={{width: '85vw', height: '85vh'}}>
+                    <ReactFlow
+                        fitView
+                        colorMode='dark'
+                        defaultEdges={[]}
+                        defaultNodes={[]}
+                        nodesConnectable={false}
+                        edgesReconnectable={false}
+                        nodes={nodes}
+                        edges={edges}
+                        onNodesChange={onNodesChange}
+                        onEdgesChange={onEdgesChange}
+                        style={{width: '100%', height: '100%'}}
+                    >
+                        <MiniMap/>
+                        <Controls/>
+                        <Background/>
+                    </ReactFlow>
+                </Flex>
+            </Modal>
+        </>
+    )
 }

assets/components/tracking/watchlist/diagram/getLayoutedElements.tsx

@@ -1,38 +1,39 @@
-import dagre from "dagre"
+import dagre from 'dagre'
+import {Edge, Node, Position} from '@xyflow/react'
 
-export const getLayoutedElements = (nodes: any, edges: any, direction = 'TB') => {
+export const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'TB') => {
     const dagreGraph = new dagre.graphlib.Graph()
     dagreGraph.setDefaultEdgeLabel(() => ({}))
 
     const nodeWidth = 172
     const nodeHeight = 200
 
-    const isHorizontal = direction === 'LR';
-    dagreGraph.setGraph({rankdir: direction});
+    const isHorizontal = direction === 'LR'
+    dagreGraph.setGraph({rankdir: direction})
 
-    nodes.forEach((node: any) => {
-        dagreGraph.setNode(node.id, {width: nodeWidth, height: nodeHeight});
-    });
+    nodes.forEach(node => {
+        dagreGraph.setNode(node.id, {width: nodeWidth, height: nodeHeight})
+    })
 
-    edges.forEach((edge: any) => {
-        dagreGraph.setEdge(edge.source, edge.target);
-    });
+    edges.forEach(edge => {
+        dagreGraph.setEdge(edge.source, edge.target)
+    })
 
-    dagre.layout(dagreGraph);
+    dagre.layout(dagreGraph)
 
-    const newNodes = nodes.map((node: any) => {
+    const newNodes: Node[] = nodes.map(node => {
         const nodeWithPosition = dagreGraph.node(node.id)
 
         return {
             ...node,
-            targetPosition: isHorizontal ? 'left' : 'top',
-            sourcePosition: isHorizontal ? 'right' : 'bottom',
+            targetPosition: isHorizontal ? Position.Left : Position.Top,
+            sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
             position: {
                 x: nodeWithPosition.x - nodeWidth / 2,
                 y: nodeWithPosition.y - nodeHeight / 2
-            },
-        };
-    });
+            }
+        }
+    })
 
-    return {nodes: newNodes, edges};
-}
+    return {nodes: newNodes, edges}
+}

assets/components/tracking/watchlist/diagram/watchlistToEdges.tsx

@@ -1,17 +1,18 @@
-import {Domain, Watchlist} from "../../../../utils/api";
-import {rdapRoleTranslation} from "../../../../utils/functions/rdapTranslation";
-import {t} from "ttag";
+import {Domain, Watchlist} from '../../../../utils/api'
+import {rdapRoleTranslation} from '../../../../utils/functions/rdapTranslation'
+import {t} from 'ttag'
 
-import {rolesToColor} from "../../../../utils/functions/rolesToColor";
+import {rolesToColor} from '../../../../utils/functions/rolesToColor'
+import {Edge} from '@xyflow/react'
 
-export function domainEntitiesToEdges(d: Domain, withRegistrar = false) {
+export function domainEntitiesToEdges(d: Domain, withRegistrar = false): Edge[] {
     const rdapRoleTranslated = rdapRoleTranslation()
     const sponsor = d.entities.find(e => !e.deleted && e.roles.includes('sponsor'))
     return d.entities
         .filter(e =>
             !e.deleted &&
             (withRegistrar || !e.roles.includes('registrar')) &&
-            (!sponsor || !e.roles.includes('registrar') || e.roles.includes('sponsor'))
+            ((sponsor == null) || !e.roles.includes('registrar') || e.roles.includes('sponsor'))
         )
         .map(e => ({
             id: `e-${d.ldhName}-${e.entity.handle}`,
@@ -21,11 +22,11 @@ export function domainEntitiesToEdges(d: Domain, withRegistrar = false) {
             label: e.roles
                 .map(r => rdapRoleTranslated[r as keyof typeof rdapRoleTranslated] || r)
                 .join(', '),
-            animated: e.roles.includes('registrant'),
+            animated: e.roles.includes('registrant')
         }))
 }
 
-export const domainNSToEdges = (d: Domain) => d.nameservers
+export const domainNSToEdges = (d: Domain): Edge[] => d.nameservers
     .map(ns => ({
         id: `ns-${d.ldhName}-${ns.ldhName}`,
         source: d.ldhName,
@@ -34,7 +35,7 @@ export const domainNSToEdges = (d: Domain) => d.nameservers
         label: 'DNS'
     }))
 
-export const tldToEdge = (d: Domain) => ({
+export const tldToEdge = (d: Domain): Edge => ({
     id: `tld-${d.ldhName}-${d.tld.tld}`,
     source: d.tld.tld,
     target: d.ldhName,
@@ -42,7 +43,7 @@ export const tldToEdge = (d: Domain) => ({
     label: t`Registry`
 })
 
-export function watchlistToEdges(watchlist: Watchlist, withRegistrar = false, withTld = false) {
+export function watchlistToEdges(watchlist: Watchlist, withRegistrar = false, withTld = false): Edge[] {
     const entitiesEdges = watchlist.domains.map(d => domainEntitiesToEdges(d, withRegistrar)).flat()
     const nameserversEdges = watchlist.domains.map(domainNSToEdges).flat()
     const tldEdge = watchlist.domains.map(tldToEdge)

assets/components/tracking/watchlist/diagram/watchlistToNodes.tsx

@@ -1,28 +1,31 @@
-import {Domain, Nameserver, Tld, Watchlist} from "../../../../utils/api";
-import React from "react";
+import {Domain, Nameserver, Tld, Watchlist} from '../../../../utils/api'
+import React from 'react'
 import {t} from 'ttag'
 
-import {entityToName} from "../../../../utils/functions/entityToName";
+import {entityToName} from '../../../../utils/functions/entityToName'
+import {Node} from '@xyflow/react'
 
-export const domainToNode = (d: Domain) => ({
+export const domainToNode = (d: Domain): Node => ({
     id: d.ldhName,
+    position: {x: 0, y: 0},
     data: {label: <b>{d.ldhName}</b>},
     style: {
         width: 200
     }
 })
 
-export const domainEntitiesToNode = (d: Domain, withRegistrar = false) => {
+export const domainEntitiesToNode = (d: Domain, withRegistrar = false): Node[] => {
     const sponsor = d.entities.find(e => !e.deleted && e.roles.includes('sponsor'))
     return d.entities
         .filter(e =>
             !e.deleted &&
             (withRegistrar || !e.roles.includes('registrar')) &&
-            (!sponsor || !e.roles.includes('registrar') || e.roles.includes('sponsor'))
+            ((sponsor == null) || !e.roles.includes('registrar') || e.roles.includes('sponsor'))
         )
         .map(e => {
             return {
                 id: e.entity.handle,
+                position: {x: 0, y: 0},
                 type: e.roles.includes('registrant') || e.roles.includes('registrar') ? 'input' : 'output',
                 data: {label: entityToName(e)},
                 style: {
@@ -32,8 +35,9 @@ export const domainEntitiesToNode = (d: Domain, withRegistrar = false) => {
         })
 }
 
-export const tldToNode = (tld: Tld) => ({
+export const tldToNode = (tld: Tld): Node => ({
     id: tld.tld,
+    position: {x: 0, y: 0},
     data: {label: t`.${tld.tld} Registry`},
     type: 'input',
     style: {
@@ -41,8 +45,9 @@ export const tldToNode = (tld: Tld) => ({
     }
 })
 
-export const nsToNode = (ns: Nameserver) => ({
+export const nsToNode = (ns: Nameserver): Node => ({
     id: ns.ldhName,
+    position: {x: 0, y: 0},
     data: {label: ns.ldhName},
     type: 'output',
     style: {
@@ -50,12 +55,11 @@ export const nsToNode = (ns: Nameserver) => ({
     }
 })
 
-export function watchlistToNodes(watchlist: Watchlist, withRegistrar = false, withTld = false) {
-
+export function watchlistToNodes(watchlist: Watchlist, withRegistrar = false, withTld = false): Node[] {
     const domains = watchlist.domains.map(domainToNode)
     const entities = [...new Set(watchlist.domains.map(d => domainEntitiesToNode(d, withRegistrar)).flat())]
     const tlds = [...new Set(watchlist.domains.map(d => d.tld))].filter(t => t.tld !== '.').map(tldToNode)
     const nameservers = [...new Set(watchlist.domains.map(d => d.nameservers))].flat().map(nsToNode, withRegistrar)
 
     return [...domains, ...entities, ...nameservers, ...(withTld ? tlds : [])]
-}
+}