User Alert System

Prompt System

The alert system was made to overhaul the MUI Snackbar system that has limitations by way of displaying on item. The solution boasts a versatile fix for customizing information while displaying Toasts

Table of Contents

1. Controller
2. Alerts

---
title: Workflow 
---
sequenceDiagram
participant User
participant Website UI
participant Redux
participant Alert Controller
participant Alert

User->>Website UI: User turns on 'Track me Geo'
Website UI->>Redux: Dispatch call to Reducer (using auto-close)
Redux->>Alert Controller: Update state with new Alert entry
Alert Controller ->> Alert: Controller displays alert
Alert Controller-->>Redux: After Timeout, Controller pushes delete action to redux
Redux -->> Alert Controller: State updated 
Alert Controller -->> Alert Controller: Rerenders without the Alert

Loading

Controller

The Alert Controller manages the Toast system by way of an array. Array elements can contain an optional auto close parameter to be self-resolving

Alerts

The Modal design is scalable with customization options between Severity and displayed Icons using enumerators. Icons can be expanded on my updating the imports in the controller, and adding values to the Enumerator that defines them.

Using Alerts

The Alerts Controllers take an object oriented approach through the static Alerts class

You can create a new alert by calling Alerts.create() with an AlertMessage

/**
 * @type {AlertMessage} AlertMessage
 * @property {AlertSeverity} severity - Type of alert to display, affects color scheme.
 * @property {AlertSubjects} subject - Relation of the alert to display, affects displayed Icon.
 * @property {string} content - Main text body of alert.
 * @property {string} [title] - Optional Title bar text.
 * @property {number} [autoclose] - Time in seconds to clear the alert automatically.
 * @property {string} [id] - Unique ID of Alert Message, auto-populated in handler.
 */
interface AlertMessage {
  severity: AlertSeverity;
  subject: AlertSubjects;
  content: string;
  title?: string;
  autoClose?: number;
  id?: string;
}