User Prompt System

Prompt System

The Prompt System was created to replace built-in browser methods such as prompt(), confirm(), and alert() with a custom-built solution that wasn't thread blocking.

Table of Contents

1. Controller
2. Modals
   • Number Input
   • Confirmation/Boolean
   • Date Input
   • Text
3. Redux
   • Payloads

---
title: Workflow 
---
sequenceDiagram
participant User
participant Website UI
participant Redux
participant Prompt Controller
participant Prompt Modal(s)

User->>Website UI: User turns on 'Track me Geo'
Website UI->>Redux: Dispatch call to Reducer
Redux->>Prompt Controller: Update state with new Prompt entry
Prompt Controller ->> Prompt Modal(s): Return Modal to prompt user
Prompt Modal(s)-->>User: Request information from User
User->>Prompt Modal(s): User Provides Needed Data
Prompt Modal(s)-->>Redux: Callback dispatched
Redux -->> Prompt Modal(s): Callback resolved
Prompt Modal(s) -->> Redux: Remove Prompt from queue
Redux ->> Prompt Controller: Update prompt state
Prompt Controller ->> Prompt Modal(s): Display next Modal (if applicable)

Loading

Controller

The Modal Controller manages the prompts using a Queue data structure. This helps with showing users prompts in correct order, and only showcasing one at a time.

Modals

Currently there are four different modals to use to acquire information, each with their own set of customizations and validators. All text in a modal is customizable to fit each need. The text body can be displayed as a single paragraph as text or provided as an array for multi-line responses.

All validation fields are optional if they are non-applicable to your use-case.

Each modal must be provided a callback function that will handle the data coming from the user.

Number Input

• include/exclude floats from being permissible input
• define a minimum or maximum range of valid inputs
• provide an array of values to display a select menu instead of an input field

Confirmation/Boolean Input

A bare bones version of the modal can be used to alert a user of an issue, or used to obtain yes/no values.

Date Input

• Can define an earliest and/or latest date that a date has to occur between/by

Text Input

• define the minimum/maximum length of a reponse
• provide an array of appropriate string options for a user to choose from
• provide a Regex pattern that a users response has to follow
• override for the error message displayed when regex doesn't match pattern (defaults to showing pattern)

Redux

Redux Docs

The callback function in each modal leverages its execution being in a React component to allow access to redux Dispatch events when outside of a component or generator function, giving versatility to the usability of the Modals for a larger subset of use cases.

In a callback function, simply return an array of Redux options formatted

[
  {"type": "string", "payload?": "any"},
  {"type": "string", "payload?": "any"},
  {"type": "string", "payload?": "any"}
]

And the component will handle dispatching the events at completion of the callback.

Using The Prompt System

The prompt system is made easy to use by way of some pre-defined functions located in utils.

The functions are strongly typed and help with creating proper payloads. You can dispatch the functions return object and voila your modal will be in the queue.