User Alert System

Prompt System

The alert system was made to overhaul the MUI Snackbar systems limitations of overlapping each other and being confined to the Overlay component. Using this Alert system we can display an overlay over the application and multiple alerts.

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 dispatching Alerts.create() with an AlertMessage argument.

/**
 * @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;
}