# Notification provider
Notfication provider is a custom context provider that allows pushing and displaying notifications across the agent. Notification provider designed to enrich user experience. The code sample can be found in [NotificationProvider.js](https://github.com/thecardeaproject/cardea-enterprise-health-ui/blob/0dba6bddb436ee0a46aa2a8cf0d9d3097969d235/src/UI/NotificationProvider.js).

## Notification messages
Notification message must be represented as a string. The message is not validated at any point.

Pass it as an 1st argument to the provider.

setNotification('Here is the message, 'error')

## Notifications types
There are 3 types of notifications supported:
:::success
* notice
:::
:::warning
* warning
:::
:::danger
* error
:::

## Notification array
Notification array has no limit to it's size.

## Notification duration
Each notification is set to show for 6 seconds. Then it will be removed from the stack. The user can manually remove notification from the stack by clicking the "x" button.

## Notification component
The component is self explanatory. The notification provider excepts the new message with the type and adds it to the stack.

  function setNotifications(message, type) {
    const newNotification = { message, type }
    setNotificationList((oldArray) => [...oldArray, newNotification])
  }

Then it mapps through the stack and shows the last one to the user.

// Mapping through the list of notifications
  notifications = notificationList.map(function (notification, index) {
    // Deciding the background color of the notification based on the type
    switch (notification.type) {
      case 'notice':
        background = 'notice'
        break
      case 'warning':
        background = 'warning'
        break
      case 'error':
        background = 'error'
        break
      default:
        background = 'error'
    }
    // Returning notification component
    return [
      <NotificationWrapper key={index} background={background}>
        <NotificationCloseBtn
          onClick={() => {
            closeNotification()
          }}
        >
          &times;
        </NotificationCloseBtn>
        <p>{notification.message}</p>
      </NotificationWrapper>,
    ]
  })

Note how we pass background color to the **notificationWrapper** component where it's being processed conditionally to decide which color notification must be displayed as. Styled components library makes this logic to be done easyly.

## Utilization approach

// Import
import { useNotification } from './NotificationProvider'
...
// Assign
const setNotification = useNotification()
...
// Use by passing message and type
setNotification(res.data.error, 'error')