Merge branch 'feature/various-ux' into develop

assets/pages/search/DomainSearchPage.tsx

@@ -1,8 +1,10 @@
 import React, {useEffect, useState} from 'react'
 import type { FormProps} from 'antd'
+import {FloatButton} from 'antd'
 import {Empty, Flex, message, Skeleton} from 'antd'
-import type {Domain} from '../../utils/api'
-import { getDomain} from '../../utils/api'
+import type {Domain, Watchlist} from '../../utils/api'
+import {addDomainToWatchlist} from '../../utils/api'
+import {getDomain} from '../../utils/api'
 import type {AxiosError} from 'axios'
 import {t} from 'ttag'
 import type { FieldType} from '../../components/search/DomainSearchBar'
@@ -10,17 +12,19 @@ import {DomainSearchBar} from '../../components/search/DomainSearchBar'
 import {DomainResult} from '../../components/search/DomainResult'
 import {showErrorAPI} from '../../utils/functions/showErrorAPI'
 import {useNavigate, useParams} from 'react-router-dom'
+import {PlusOutlined} from '@ant-design/icons'
+import WatchlistSelectionModal from '../../components/tracking/watchlist/WatchlistSelectionModal'
 
 export default function DomainSearchPage() {
     const {query} = useParams()
     const [domain, setDomain] = useState<Domain | null>()
-    const [loading, setLoading] = useState<boolean>(false)
+    const domainLdhName = domain?.ldhName
+    const [loading, setLoading] = useState(false)
+    const [addToWatchlistModal, setAddToWatchlistModal] = useState(false)
 
     const [messageApi, contextHolder] = message.useMessage()
     const navigate = useNavigate()
 
-
-
     const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
         navigate('/search/domain/' + values.ldhName)
 
@@ -41,7 +45,18 @@ export default function DomainSearchPage() {
         onFinish({ldhName: query, isRefreshForced: false})
     }, [])
 
-    return (
+    const addToWatchlist = async (watchlist: Watchlist) => {
+        await addDomainToWatchlist(watchlist, domain!.ldhName).then(() => {
+            setAddToWatchlistModal(false)
+
+            const ldhName = domain?.ldhName
+            messageApi.success(t`${ldhName} added to ${watchlist.name}`)
+        }).catch((e: AxiosError) => {
+            showErrorAPI(e, messageApi)
+        })
+    }
+
+    return <>
         <Flex gap='middle' align='center' justify='center' vertical>
             {contextHolder}
             <DomainSearchBar initialValue={query} onFinish={onFinish}/>
@@ -57,5 +72,29 @@ export default function DomainSearchPage() {
                 }
             </Skeleton>
         </Flex>
-    )
+        {domain
+            && <FloatButton
+                style={{
+                    position: 'fixed',
+                    insetInlineEnd: (100 - 40) / 2,
+                    bottom: 100 - 40 / 2
+                }}
+                tooltip={t`Add to Watchlist`}
+                type="primary"
+                icon={<PlusOutlined/>}
+                onClick={() => setAddToWatchlistModal(true)}
+            />
+        }
+        <WatchlistSelectionModal
+            open={addToWatchlistModal}
+            onFinish={addToWatchlist}
+            modalProps={{
+                title: t`Add ${domainLdhName} to a Watchlist`,
+                onCancel: () => setAddToWatchlistModal(false),
+                onClose: () => setAddToWatchlistModal(false),
+                cancelText: t`Cancel`,
+                okText: t`Add`
+        }}
+        />
+    </>
 }