wip: refactor watchlist triggers

assets/components/tracking/watchlist/UpdateWatchlistButton.tsx

@@ -62,6 +62,7 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
                     }}
                     connectors={connectors}
                     isCreation={false}
+                    watchList={watchlist}
                 />
             </Drawer>
         </>

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -2,12 +2,12 @@ import type { FormInstance, SelectProps} from 'antd'
 import {Button, Form, Input, Select, Space, Tag, Tooltip, Typography} from 'antd'
 import {t} from 'ttag'
 import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from '@ant-design/icons'
-import React from 'react'
+import React, {useState} from 'react'
 import type {Connector} from '../../../utils/api/connectors'
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../../utils/functions/rdapTranslation'
 import {actionToColor} from '../../../utils/functions/actionToColor'
 import {actionToIcon} from '../../../utils/functions/actionToIcon'
-import type {EventAction} from '../../../utils/api'
+import {EventAction, putWatchlistTrigger, Watchlist} from '../../../utils/api'
 import {formItemLayoutWithOutLabel} from "../../../utils/providers"
 
 type TagRender = SelectProps['tagRender']
@@ -23,11 +23,12 @@ const formItemLayout = {
     }
 }
 
-export function WatchlistForm({form, connectors, onFinish, isCreation}: {
+export function WatchlistForm({form, connectors, onFinish, isCreation, watchList}: {
     form: FormInstance
     connectors: Array<Connector & { id: string }>
     onFinish: (values: { domains: string[], triggers: string[], token: string }) => void
-    isCreation: boolean
+    isCreation: boolean,
+    watchList?: Watchlist,
 }) {
     const rdapEventNameTranslated = rdapEventNameTranslation()
     const rdapEventDetailTranslated = rdapEventDetailTranslation()
@@ -59,6 +60,32 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
         )
     }
 
+    const [triggersLoading, setTriggersLoading] = useState(false);
+
+    const createTrigger = async (event: string) => {
+        if (isCreation) return
+
+        setTriggersLoading(true);
+        await putWatchlistTrigger(watchList!.token, { // FIXME this 500s
+            watchList: watchList!['@id'],
+            event,
+            action: 'email',
+        });
+        await putWatchlistTrigger(watchList!.token, {
+            watchList: watchList!['@id'],
+            event,
+            action: 'chat',
+        });
+        setTriggersLoading(false);
+    };
+
+    const removeTrigger = async (event: string) => {
+        if (isCreation) return
+
+        setTriggersLoading(true);
+        // TODO
+    };
+
     return (
         <Form
             {...formItemLayoutWithOutLabel}
@@ -169,6 +196,9 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
                     mode='multiple'
                     tagRender={triggerTagRenderer}
                     style={{width: '100%'}}
+                    onSelect={createTrigger}
+                    onDeselect={removeTrigger}
+                    loading={triggersLoading}
                     options={Object.keys(rdapEventNameTranslated).map(e => ({
                         value: e,
                         title: rdapEventDetailTranslated[e as keyof typeof rdapEventDetailTranslated] || undefined,