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) {
-                setError(e.response.data.message)
-            } else {
-                setError(e.response.data['hydra:description'])
-            }
+            showErrorAPI(e, messageApi)
         })
     }
     return <>
-        {error &&
-            <Alert
-                type='error'
-                message={t`Error`}
-                banner={true}
-                role='role'
-                description={error}
-                style={{marginBottom: '1em'}}
-            />}
+        {contextHolder}
         <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) => {
-
-            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'])
-            }
+            showErrorAPI(e, messageApi)
         })
     }
     return <>
-        {error &&
-            <Alert
-                type='error'
-                message={t`Error`}
-                banner={true}
-                role='role'
-                description={error}
-                style={{marginBottom: '1em'}}
-            />}
+        {contextHolder}
         <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()