feat: update Watchlist

maelgangloff · Aug 15, 2024 · 7d16d83 · 7d16d83
1 parent 5dd27a4
commit 7d16d83
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 79 deletions.
diff --git a/assets/components/tracking/WatchlistForm.tsx b/assets/components/tracking/WatchlistForm.tsx
@@ -25,19 +25,20 @@ const formItemLayoutWithOutLabel = {
     },
 };
 
-export function WatchlistForm({form, connectors, onCreateWatchlist}: {
+export function WatchlistForm({form, connectors, onFinish, isCreation}: {
     form: FormInstance,
     connectors: (Connector & { id: string })[]
-    onCreateWatchlist: (values: { domains: string[], emailTriggers: string[] }) => void
+    onFinish: (values: { domains: string[], emailTriggers: string[], token: string }) => void
+    isCreation: boolean
 }) {
     const domainEventTranslated = domainEvent()
 
     const triggerTagRenderer: TagRender = (props) => {
         const {value, closable, onClose} = props;
         const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-            event.preventDefault();
-            event.stopPropagation();
-        };
+            event.preventDefault()
+            event.stopPropagation()
+        }
         return (
             <Tag
                 color={actionToColor(value)}
@@ -54,9 +55,14 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
     return <Form
         {...formItemLayoutWithOutLabel}
         form={form}
-        onFinish={onCreateWatchlist}
+        onFinish={onFinish}
         initialValues={{emailTriggers: ['last changed', 'transfer', 'expiration', 'deletion']}}
     >
+
+        <Form.Item name='token' hidden>
+            <Input hidden/>
+        </Form.Item>
+
         <Form.Item label={t`Name`}
                    name='name'
                    labelCol={{
@@ -183,7 +189,7 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
         <Form.Item>
             <Space>
                 <Button type="primary" htmlType="submit">
-                    {t`Create`}
+                    {isCreation ? t`Create` : t`Update`}
                 </Button>
                 <Button type="default" htmlType="reset">
                     {t`Reset`}

diff --git a/assets/components/tracking/WatchlistsList.tsx b/assets/components/tracking/WatchlistsList.tsx
@@ -1,20 +1,27 @@
-import {Card, Divider, Popconfirm, Space, Table, Tag, theme, Typography} from "antd";
+import {Button, Card, Divider, Drawer, Form, Popconfirm, Space, Table, Tag, theme, Typography} from "antd";
 import {t} from "ttag";
 import {deleteWatchlist} from "../../utils/api";
-import {CalendarFilled, DeleteFilled, DisconnectOutlined, LinkOutlined} from "@ant-design/icons";
-import React from "react";
+import {CalendarFilled, DeleteFilled, DisconnectOutlined, EditOutlined, LinkOutlined} from "@ant-design/icons";
+import React, {useState} from "react";
 import useBreakpoint from "../../hooks/useBreakpoint";
 import {actionToColor, domainEvent} from "../search/EventTimeline";
 import {Watchlist} from "../../pages/tracking/WatchlistPage";
 import punycode from "punycode/punycode";
+import {WatchlistForm} from "./WatchlistForm";
+import {Connector} from "../../utils/api/connectors";
 
 const {useToken} = theme;
 
-export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) {
+export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
+    watchlists: Watchlist[],
+    onDelete: () => void,
+    onUpdateWatchlist: (values: { domains: string[], emailTriggers: string[], token: string }) => void,
+    connectors: (Connector & { id: string })[]
+}) {
     const {token} = useToken()
     const sm = useBreakpoint('sm')
-
     const domainEventTranslated = domainEvent()
+    const [form] = Form.useForm()
 
     const columns = [
         {
@@ -27,6 +34,16 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
         }
     ]
 
+    const [open, setOpen] = useState(false);
+
+    const showDrawer = () => {
+        setOpen(true)
+    };
+
+    const onClose = () => {
+        setOpen(false)
+    };
+
     return <>
         {watchlists.map(watchlist =>
             <>
@@ -47,17 +64,55 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
                     size='small'
                     style={{width: '100%'}}
                     extra={<Space size='middle'>
-                        <Typography.Link href={`/api/watchlists/${watchlist.token}/calendar`}>
+                        <Typography.Link>
                             <CalendarFilled title={t`Export events to iCalendar format`}/>
                         </Typography.Link>
+                        <Typography.Link>
+                            <EditOutlined title={t`Edit the Watchlist`} onClick={() => {
+                                showDrawer()
+                                form.setFields([
+                                    {name: 'token', value: watchlist.token},
+                                    {name: 'name', value: watchlist.name},
+                                    {name: 'connector', value: watchlist.connector?.id},
+                                    {name: 'domains', value: watchlist.domains.map(d => d.ldhName)},
+                                    {name: 'emailTriggers', value: watchlist.triggers?.map(t => t.event)},
+                                ])
+                            }}/>
+                        </Typography.Link>
+
+                        <Drawer
+                            title={t`Update a Watchlist`}
+                            width={800}
+                            onClose={onClose}
+                            open={open}
+                            styles={{
+                                body: {
+                                    paddingBottom: 80,
+                                }
+                            }}
+                            extra={<Button onClick={onClose}>Cancel</Button>}
+                        >
+                            <WatchlistForm
+                                form={form}
+                                onFinish={values => {
+                                    onUpdateWatchlist(values);
+                                    onClose()
+                                }}
+                                connectors={connectors}
+                                isCreation={false}
+                            />
+                        </Drawer>
+
                         <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`}
                             okButtonProps={{danger: true}}>
-                            <DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
+                            <Typography.Link>
+                                <DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
+                            </Typography.Link>
                         </Popconfirm>
                     </Space>}
                 >

diff --git a/assets/pages/tracking/WatchlistPage.tsx b/assets/pages/tracking/WatchlistPage.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
 import {Card, Divider, Flex, Form, message} from "antd";
-import {EventAction, getWatchlists, postWatchlist} from "../../utils/api";
+import {EventAction, getWatchlists, putWatchlist, postWatchlist} from "../../utils/api";
 import {AxiosError} from "axios";
 import {t} from 'ttag'
 import {WatchlistForm} from "../../components/tracking/WatchlistForm";
@@ -40,7 +40,7 @@ export default function WatchlistPage() {
             name: values.name,
             domains: domainsURI,
             triggers: values.emailTriggers.map(t => ({event: t, action: 'email'})),
-            connector: values.connector !== undefined ? '/api/connectors/' + values.connector : undefined
+            connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined
         }).then((w) => {
             form.resetFields()
             refreshWatchlists()
@@ -50,6 +50,31 @@ export default function WatchlistPage() {
         })
     }
 
+    const onUpdateWatchlist = (values: {
+        token: string
+        name?: string
+        domains: string[],
+        emailTriggers: string[]
+        connector?: string
+    }) => {
+        const domainsURI = values.domains.map(d => '/api/domains/' + d)
+
+        console.log(values)
+
+        putWatchlist({
+            token: values.token,
+            name: values.name,
+            domains: domainsURI,
+            triggers: values.emailTriggers.map(t => ({event: t, action: 'email'})),
+            connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined
+        }).then((w) => {
+            refreshWatchlists()
+            messageApi.success(t`Watchlist updated !`)
+        }).catch((e: AxiosError) => {
+            showErrorAPI(e, messageApi)
+        })
+    }
+
     const refreshWatchlists = () => getWatchlists().then(w => {
         setWatchlists(w['hydra:member'])
     }).catch((e: AxiosError) => {
@@ -67,17 +92,18 @@ export default function WatchlistPage() {
     }, [])
 
     return <Flex gap="middle" align="center" justify="center" vertical>
-        <Card title={t`Create a Watchlist`} style={{width: '100%'}}>
-            {contextHolder}
-            {
-                connectors &&
-                <WatchlistForm form={form} onCreateWatchlist={onCreateWatchlist} connectors={connectors}/>
-            }
-        </Card>
-
+        {contextHolder}
+        {
+            connectors &&
+            <Card title={t`Create a Watchlist`} style={{width: '100%'}}>
+                <WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation={true}/>
+            </Card>
+        }
         <Divider/>
-
-        {watchlists && watchlists.length > 0 &&
-            <WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}/>}
+        {connectors && watchlists && watchlists.length > 0 &&
+            <WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}
+                            connectors={connectors}
+                            onUpdateWatchlist={onUpdateWatchlist}
+            />}
     </Flex>
 }
diff --git a/assets/utils/api/watchlist.ts b/assets/utils/api/watchlist.ts
@@ -1,4 +1,4 @@
-import {request, Watchlist} from "./index";
+import {Event, request, Watchlist} from "./index";
 
 export async function getWatchlists() {
     const response = await request({
@@ -33,14 +33,11 @@ export async function deleteWatchlist(token: string): Promise<void> {
     })
 }
 
-export async function patchWatchlist(watchlist: Partial<Watchlist> & { token: string }) {
+export async function putWatchlist(watchlist: Partial<Watchlist> & { token: string }) {
     const response = await request<Watchlist>({
-        method: 'PATCH',
+        method: 'PUT',
         url: 'watchlists/' + watchlist.token,
         data: watchlist,
-        headers: {
-            "Content-Type": 'application/merge-patch+json'
-        }
     })
     return response.data
-}
+}