refactor: split showErrorApi function

assets/components/LoginForm.tsx

@@ -1,9 +1,10 @@
-import {Alert, Button, Form, Input, Space} from "antd";
+import {Button, Form, Input, message, Space} from "antd";
 import {t} from "ttag";
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect} from "react";
 import {getUser, login} from "../utils/api";
 import {AuthenticatedContext} from "../pages/LoginPage";
 import {useNavigate} from "react-router-dom";
+import {showErrorAPI} from "../utils";
 
 
 type FieldType = {
@@ -13,8 +14,8 @@ type FieldType = {
 
 export function LoginForm({ssoLogin}: { ssoLogin?: boolean }) {
 
-    const [error, setError] = useState<string>()
     const navigate = useNavigate()
+    const [messageApi, contextHolder] = message.useMessage()
     const {setIsAuthenticated} = useContext(AuthenticatedContext)
 
 
@@ -33,23 +34,11 @@ export function LoginForm({ssoLogin}: { ssoLogin?: boolean }) {
             navigate('/home')
         }).catch((e) => {
             setIsAuthenticated(false)
-            if (e.response.data.message !== undefined) {
+            showErrorAPI(e, messageApi)
-                setError(e.response.data.message)
-            } else {
-                setError(e.response.data['hydra:description'])
-            }
         })
     }
     return <>
-        {error &&
+        {contextHolder}
-            <Alert
-                type='error'
-                message={t`Error`}
-                banner={true}
-                role='role'
-                description={error}
-                style={{marginBottom: '1em'}}
-            />}
         <Form
             name="basic"
             labelCol={{span: 8}}

assets/components/RegisterForm.tsx

@@ -1,8 +1,9 @@
-import {Alert, Button, Form, Input} from "antd";
+import {Button, Form, Input, message} from "antd";
 import {t} from "ttag";
 import React, {useState} from "react";
 import {register} from "../utils/api";
 import {useNavigate} from "react-router-dom";
+import {showErrorAPI} from "../utils";
 
 
 type FieldType = {
@@ -14,35 +15,17 @@ export function RegisterForm() {
 
     const [error, setError] = useState<string>()
     const navigate = useNavigate()
+    const [messageApi, contextHolder] = message.useMessage()
 
     const onFinish = (data: FieldType) => {
         register(data.username, data.password).then(() => {
             navigate('/home')
         }).catch((e) => {
-
+            showErrorAPI(e, messageApi)
-            if (e.response?.status === 429) {
-                const duration = e.response.headers['retry-after']
-                setError(t`Please retry after ${duration} seconds`)
-                return;
-            }
-
-            if (e.response.data.message !== undefined) {
-                setError(e.response.data.message)
-            } else {
-                setError(e.response.data['hydra:description'])
-            }
         })
     }
     return <>
-        {error &&
+        {contextHolder}
-            <Alert
-                type='error'
-                message={t`Error`}
-                banner={true}
-                role='role'
-                description={error}
-                style={{marginBottom: '1em'}}
-            />}
         <Form
             name="basic"
             labelCol={{span: 8}}

assets/components/search/EventTimeline.tsx

@@ -39,7 +39,6 @@ export function EventTimeline({domain}: { domain: Domain }) {
     const sm = useBreakpoint('sm')
 
 
-
     const locale = navigator.language.split('-')[0]
     const domainEventTranslated = domainEvent()
 

assets/index.css

@@ -1,15 +1,13 @@
 @font-face {
- font-family: "Noto Color Emoji";
+    font-family: "Noto Color Emoji";
- font-style: normal;
+    font-style: normal;
- font-display: swap;
+    font-display: swap;
- font-weight: 400;
+    font-weight: 400;
- src: url(@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff2)
+    src: url(@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff2) format("woff2"),
-   format("woff2"),
+    url(@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff) format("woff");
-  url(@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff)
-   format("woff");
 }
 
 body {
- margin: 0;
+    margin: 0;
- font-family: "Noto Color Emoji", sans-serif;
+    font-family: "Noto Color Emoji", sans-serif;
 }

assets/pages/search/DomainSearchPage.tsx

@@ -6,6 +6,7 @@ import {t} from 'ttag'
 import {DomainSearchBar, FieldType} from "../../components/search/DomainSearchBar";
 import {EventTimeline} from "../../components/search/EventTimeline";
 import {EntitiesList} from "../../components/search/EntitiesList";
+import {showErrorAPI} from "../../utils";
 
 const {Text} = Typography;
 
@@ -20,14 +21,7 @@ export default function DomainSearchPage() {
             messageApi.success(t`Found !`)
         }).catch((e: AxiosError) => {
             setDomain(undefined)
-
+            showErrorAPI(e, messageApi)
-            if (e.response?.status === 429) {
-                const duration = e.response.headers['retry-after']
-                messageApi.error(t`Please retry after ${duration} seconds`)
-                return;
-            }
-            const data = e?.response?.data as { detail: string }
-            messageApi.error(data.detail !== '' ? data.detail : t`An error occurred`)
         })
     }
 

assets/pages/tracking/ConnectorsPage.tsx

@@ -5,6 +5,7 @@ import {Connector, getConnectors, postConnector} from "../../utils/api/connector
 import {ConnectorForm} from "../../components/tracking/ConnectorForm";
 import {AxiosError} from "axios";
 import {ConnectorElement, ConnectorsList} from "../../components/tracking/ConnectorsList";
+import {showErrorAPI} from "../../utils";
 
 export default function ConnectorsPage() {
     const [form] = Form.useForm()
@@ -17,17 +18,15 @@ export default function ConnectorsPage() {
             refreshConnectors()
             messageApi.success(t`Connector created !`)
         }).catch((e: AxiosError) => {
-            const data = e?.response?.data as { detail: string }
+            showErrorAPI(e, messageApi)
-            messageApi.error(data.detail ?? t`An error occurred`)
         })
     }
 
     const refreshConnectors = () => getConnectors().then(c => {
         setConnectors(c['hydra:member'])
     }).catch((e: AxiosError) => {
-        const data = e?.response?.data as { detail: string }
-        messageApi.error(data.detail ?? t`An error occurred`)
         setConnectors(undefined)
+        showErrorAPI(e, messageApi)
     })
 
     useEffect(() => {

assets/pages/tracking/WatchlistPage.tsx

@@ -6,6 +6,7 @@ import {t} from 'ttag'
 import {WatchlistForm} from "../../components/tracking/WatchlistForm";
 import {WatchlistsList} from "../../components/tracking/WatchlistsList";
 import {Connector, getConnectors} from "../../utils/api/connectors";
+import {showErrorAPI} from "../../utils";
 
 
 export type Watchlist = {
@@ -45,17 +46,15 @@ export default function WatchlistPage() {
             refreshWatchlists()
             messageApi.success(t`Watchlist created !`)
         }).catch((e: AxiosError) => {
-            const data = e?.response?.data as { detail: string }
+            showErrorAPI(e, messageApi)
-            messageApi.error(data?.detail ?? t`An error occurred`)
         })
     }
 
     const refreshWatchlists = () => getWatchlists().then(w => {
         setWatchlists(w['hydra:member'])
     }).catch((e: AxiosError) => {
-        const data = e?.response?.data as { detail: string }
-        messageApi.error(data?.detail ?? t`An error occurred`)
         setWatchlists(undefined)
+        showErrorAPI(e, messageApi)
     })
 
     useEffect(() => {
@@ -63,8 +62,7 @@ export default function WatchlistPage() {
         getConnectors()
             .then(c => setConnectors(c['hydra:member']))
             .catch((e: AxiosError) => {
-                const data = e?.response?.data as { detail: string }
+                showErrorAPI(e, messageApi)
-                messageApi.error(data?.detail ?? t`An error occurred`)
             })
     }, [])
 

assets/utils/index.ts

@@ -0,0 +1,27 @@
+import {MessageInstance, MessageType} from "antd/lib/message/interface";
+import {AxiosError, AxiosResponse} from "axios";
+import {t} from "ttag";
+
+export function showErrorAPI(e: AxiosError, messageApi: MessageInstance): MessageType | undefined {
+
+    const response = e.response as AxiosResponse
+    const data = response.data
+
+    if ('message' in data) {
+        return messageApi.error(data.message as string)
+    }
+
+    if (!('detail' in data)) return
+    const detail = data.detail as string
+
+    if (response.status === 429) {
+        const duration = response.headers['retry-after']
+        return messageApi.error(t`Please retry after ${duration} seconds`)
+    }
+
+    if (response.status.toString()[0] === '4') {
+        return messageApi.warning(detail !== '' ? detail : t`An error occurred`)
+    }
+
+    return messageApi.error(detail !== '' ? detail : t`An error occurred`)
+}

translations/translations.pot

@@ -3,20 +3,15 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Plural-Forms: nplurals=2; plural=(n!=1);\n"
 
-#: assets/components/LoginForm.tsx:47
+#: assets/components/LoginForm.tsx:51
-#: assets/components/RegisterForm.tsx:40
+#: assets/components/RegisterForm.tsx:38
-msgid "Error"
-msgstr ""
-
-#: assets/components/LoginForm.tsx:62
-#: assets/components/RegisterForm.tsx:55
 msgid "Email address"
 msgstr ""
 
-#: assets/components/LoginForm.tsx:64
+#: assets/components/LoginForm.tsx:53
-#: assets/components/LoginForm.tsx:72
+#: assets/components/LoginForm.tsx:61
-#: assets/components/RegisterForm.tsx:57
+#: assets/components/RegisterForm.tsx:40
-#: assets/components/RegisterForm.tsx:65
+#: assets/components/RegisterForm.tsx:48
 #: assets/components/search/DomainSearchBar.tsx:23
 #: assets/components/tracking/ConnectorForm.tsx:40
 #: assets/components/tracking/ConnectorForm.tsx:66
@@ -31,16 +26,16 @@ msgstr ""
 msgid "Required"
 msgstr ""
 
-#: assets/components/LoginForm.tsx:70
+#: assets/components/LoginForm.tsx:59
-#: assets/components/RegisterForm.tsx:63
+#: assets/components/RegisterForm.tsx:46
 msgid "Password"
 msgstr ""
 
-#: assets/components/LoginForm.tsx:80
+#: assets/components/LoginForm.tsx:69
 msgid "Submit"
 msgstr ""
 
-#: assets/components/LoginForm.tsx:85
+#: assets/components/LoginForm.tsx:74
 msgid "Log in with SSO"
 msgstr ""
 
@@ -374,47 +369,32 @@ msgstr ""
 msgid "Log in"
 msgstr ""
 
-#: assets/components/RegisterForm.tsx:25
+#: assets/components/RegisterForm.tsx:55
-#: assets/pages/search/DomainSearchPage.tsx:26
-#, javascript-format
-msgid "Please retry after ${ duration } seconds"
-msgstr ""
-
-#: assets/components/RegisterForm.tsx:72
 #: assets/pages/LoginPage.tsx:30
 msgid "Register"
 msgstr ""
 
-#: assets/pages/search/DomainSearchPage.tsx:20
+#: assets/pages/search/DomainSearchPage.tsx:21
 msgid "Found !"
 msgstr ""
 
-#: assets/pages/search/DomainSearchPage.tsx:30
+#: assets/pages/search/DomainSearchPage.tsx:29
-#: assets/pages/tracking/ConnectorsPage.tsx:21
-#: assets/pages/tracking/ConnectorsPage.tsx:29
-#: assets/pages/tracking/WatchlistPage.tsx:49
-#: assets/pages/tracking/WatchlistPage.tsx:57
-#: assets/pages/tracking/WatchlistPage.tsx:67
-msgid "An error occurred"
-msgstr ""
-
-#: assets/pages/search/DomainSearchPage.tsx:35
 msgid "Domain finder"
 msgstr ""
 
-#: assets/pages/search/DomainSearchPage.tsx:56
+#: assets/pages/search/DomainSearchPage.tsx:50
 msgid "EPP Status Codes"
 msgstr ""
 
-#: assets/pages/search/DomainSearchPage.tsx:66
+#: assets/pages/search/DomainSearchPage.tsx:60
 msgid "Timeline"
 msgstr ""
 
-#: assets/pages/search/DomainSearchPage.tsx:71
+#: assets/pages/search/DomainSearchPage.tsx:65
 msgid "Entities"
 msgstr ""
 
-#: assets/pages/search/DomainSearchPage.tsx:79
+#: assets/pages/search/DomainSearchPage.tsx:73
 msgid ""
 "Although the domain exists in my database, it has been deleted from the "
 "WHOIS by its registrar."
@@ -497,19 +477,19 @@ msgstr ""
 msgid "Roles"
 msgstr ""
 
-#: assets/pages/tracking/ConnectorsPage.tsx:18
+#: assets/pages/tracking/ConnectorsPage.tsx:19
 msgid "Connector created !"
 msgstr ""
 
-#: assets/pages/tracking/ConnectorsPage.tsx:39
+#: assets/pages/tracking/ConnectorsPage.tsx:38
 msgid "Create a Connector"
 msgstr ""
 
-#: assets/pages/tracking/WatchlistPage.tsx:46
+#: assets/pages/tracking/WatchlistPage.tsx:47
 msgid "Watchlist created !"
 msgstr ""
 
-#: assets/pages/tracking/WatchlistPage.tsx:72
+#: assets/pages/tracking/WatchlistPage.tsx:70
 msgid "Create a Watchlist"
 msgstr ""
 
@@ -563,6 +543,16 @@ msgid ""
 "another"
 msgstr ""
 
+#: assets/utils/index.ts:19
+#, javascript-format
+msgid "Please retry after ${ duration } seconds"
+msgstr ""
+
+#: assets/utils/index.ts:23
+#: assets/utils/index.ts:26
+msgid "An error occurred"
+msgstr ""
+
 #: assets/App.tsx:101
 msgid "TOS"
 msgstr ""