feat(auth): add fancy sign-in/sign-up errors

front/src/domain/store/fetchOrFail.ts

@@ -5,6 +5,7 @@ import { Option } from 'tsoption'
 import { Api } from '@front/domain/api'
 import { ExtraArg, State } from '@front/domain/store'
 import { getToken } from '@front/domain/user/selectors/getToken'
+import { tryOr } from '@front/helpers/tryOr'
 
 interface FetchActions {
   request: () => AnyAction
@@ -41,10 +42,7 @@ export const fetchOrFail = (
 
     dispatch(success())
   } catch (e) {
-    dispatch(failure(e.message))
-
-    // tslint:disable-next-line:no-console
-    console.log(e.code) // Try log HTTP errors
+    dispatch(failure(tryOr(() => e.response.data.message, e.message)))
 
     throw e
   }

front/src/features/landing/features/sign-in/SignIn.tsx

@@ -10,6 +10,7 @@ import { pushRoute } from '@front/features/routing'
 import { InputType } from '@front/ui/components/form/input/InputType'
 import { Label } from '@front/ui/components/form/label'
 import { LoadingButton } from '@front/ui/components/form/loading-button'
+import { useErrorAlert } from '@front/ui/hooks/useErrorAlert'
 import { Card } from '@front/ui/components/layout/card'
 
 import * as styles from '../SignForm.css'
@@ -23,6 +24,7 @@ export const SignIn = () => {
   }, [])
 
   const fetching = useMappedState(getSignInFetching)
+  useErrorAlert(fetching.error)
 
   return (
     <Form onSubmit={onSubmit}>

front/src/features/landing/features/sign-up/SignUp.tsx

@@ -10,6 +10,7 @@ import { pushRoute } from '@front/features/routing'
 import { InputType } from '@front/ui/components/form/input/InputType'
 import { Label } from '@front/ui/components/form/label'
 import { LoadingButton } from '@front/ui/components/form/loading-button'
+import { useErrorAlert } from '@front/ui/hooks/useErrorAlert'
 import { Card } from '@front/ui/components/layout/card'
 
 import * as styles from '../SignForm.css'
@@ -23,6 +24,7 @@ export const SignUp = () => {
   }, [])
 
   const fetching = useMappedState(getSignUpFetching)
+  useErrorAlert(fetching.error)
 
   return (
     <Form onSubmit={onSubmit}>

front/src/helpers/tryOr.ts

@@ -0,0 +1,7 @@
+export const tryOr = <T>(calculate: () => T, or: T): T => {
+  try {
+    return calculate()
+  } catch (e) {
+    return or
+  }
+}

front/src/ui/hooks/useErrorAlert.ts

@@ -0,0 +1,18 @@
+import { Option } from 'tsoption'
+import { useEffect } from 'react'
+import { notification } from 'antd'
+
+export const useErrorAlert = (
+  error: Option<string>,
+  customMessage?: string,
+) => {
+  useEffect(() => {
+    if (error.nonEmpty()) {
+      const message = !!customMessage ? customMessage : error.get()
+
+      notification.error({
+        message,
+      })
+    }
+  }, [error])
+}