Update how notifications are handled.

Author: gjong

src/budget/overview/budget-detail.component.tsx

@@ -1,16 +1,15 @@
 import { Range } from "../../core/Dates";
-import { ApiError, Budget } from "../../core/types";
+import { Budget } from "../../core/types";
 import React, { useEffect, useState } from "react";
 import BudgetRepository from "../../core/repositories/budget.repository";
-import { Buttons, Dialog, Formats, Layout, Message, Notifications, Translations } from "../../core";
+import { Buttons, Dialog, Formats, Layout, Notifications, Translations } from "../../core";
 import ExpenseOverviewComponent from "./expense-overview.component";
 import { Form, Input, SubmitButton } from "../../core/form";
 import { mdiContentSave, mdiPlus } from "@mdi/js";
 import { AxiosError } from "axios";
 
 const AddExpenseDialog = ({ onChange }: { onChange : () => void }) => {
     const editControl = { close: () => undefined }
-    const [error, setError] = useState<string | undefined>()
 
     const onSubmit = (values: any) => {
         const patch = {
@@ -22,10 +21,7 @@ const AddExpenseDialog = ({ onChange }: { onChange : () => void }) => {
             .then(() => Notifications.Service.success('page.budget.group.expense.added'))
             .then(editControl.close)
             .then(onChange)
-            .catch((error: AxiosError) => {
-                const apiError: ApiError = error.response?.data as ApiError
-                setError(apiError._embedded?.errors[0]?.message || apiError.message)
-            })
+            .catch((error: AxiosError) => Notifications.Service.exception(error))
     }
 
     return <Form entity='Budget' onSubmit={ onSubmit }>
@@ -39,8 +35,6 @@ const AddExpenseDialog = ({ onChange }: { onChange : () => void }) => {
                        ] }
                        openButton={ <Buttons.Button label='page.budget.group.action.addExpense' icon={ mdiPlus }/> }>
 
-            { error && <Message message={ error } variant='warning' /> }
-
             <Input.Text id='name'
                         required
                         type='text'

src/budget/overview/expense-overview-row.component.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import BudgetRepository, { ComputedExpense } from "../../core/repositories/budget.repository";
 import { mdiContentSave, mdiDotsVertical, mdiSquareEditOutline } from "@mdi/js";
 import { Form, Input, SubmitButton } from "../../core/form";
+import { AxiosError } from "axios";
 
 type ExpenseOverviewRowProps = {
     expense: BudgetExpense,
@@ -40,7 +41,7 @@ const ExpenseOverviewRowComponent = ({ expense, year, month, onChanges } : Expen
             .then(() => Notifications.Service.success('page.budget.group.expense.updated'))
             .then(editControl.close)
             .then(onChanges)
-            .catch(console.error)
+            .catch((error: AxiosError) => Notifications.Service.exception(error))
     }
 
     const dropDownActions = { close: () => undefined }
@@ -78,6 +79,7 @@ const ExpenseOverviewRowComponent = ({ expense, year, month, onChanges } : Expen
                                                                 variant='primary'
                                                                 icon={ mdiSquareEditOutline } />}
                                    >
+
                         <Input.Text id='name'
                                     type='text'
                                     readonly

src/core/Notification.js

@@ -0,0 +1,91 @@
+import React, { ReactElement, useEffect, useState } from "react";
+
+import '../assets/css/NotificationCenter.scss'
+import { Translation } from "./localization";
+import { AxiosError } from "axios";
+import { ApiError } from "./types";
+import { Resolver } from "./index";
+
+export type NotificationEvent = {
+    type: 'success' | 'warning',
+    label?: string
+    message?: string,
+    id?: string
+}
+
+// @deprecated
+const NotificationService = (() => {
+
+    const push  = (messageKey: string, style: 'warning' | 'success') => {
+        notifyUser({ type: style, label: messageKey })
+    }
+    const handleException = (error: AxiosError) => {
+        const apiError: ApiError = error.response?.data as ApiError
+        if (apiError._links.help) {
+            push(apiError._links.help[0].href, 'warning')
+        } else {
+            console.error('Error intercepted', error)
+        }
+    }
+
+    return {
+        warning: (messageKey: string) => push(messageKey, 'warning'),
+        success: (messageKey: string) => push(messageKey, 'success'),
+        exception: (e: AxiosError) => handleException(e),
+        push: push
+    }
+})()
+
+const Notification = ({ type, message, label } : NotificationEvent) => {
+    return (
+        <div className={`Notification ${type}`}>
+            { label && <Translation label={ label } /> }
+            { message && <span>{ message }</span> }
+            <div className='CountDown' />
+        </div>
+    );
+}
+
+const NotificationCenter = () => {
+    const [notifications, setNotifications] = useState<NotificationEvent[]>([])
+
+    useEffect(() => {
+        const onNotificationEvent = (event: Event) => {
+            const notification = (event as CustomEvent).detail as NotificationEvent
+
+            setTimeout(() => {
+                // Remove the notification after 2 seconds
+                setNotifications((existing) => {
+                    return existing.filter(existing => existing.id !== notification.id)
+                })
+            }, 2000)
+            setNotifications((existing) => {
+                return [
+                    ...existing,
+                    notification
+                ]
+            })
+        }
+
+        window.addEventListener('notification', onNotificationEvent)
+        return () => {
+            window.removeEventListener('notification', onNotificationEvent)
+        }
+    }, []);
+
+    return <div className='NotificationCenter'>
+        { notifications.map(notification =>
+            <Notification key={ notification.id } { ...notification } />) }
+    </div>
+}
+
+const notifyUser = (event: NotificationEvent) => {
+    event.id = Resolver.uuid()
+    window.dispatchEvent(new CustomEvent('notification', { detail: event }))
+}
+
+
+export {
+    NotificationService as Service,
+    NotificationCenter
+}

src/core/Notification.tsx

@@ -178,5 +178,10 @@ export type ApiError = {
             field?: string
             message: string
         }[]
+    },
+    _links: {
+        help?: {
+            href: string
+        }[]
     }
 }