Add support for flash messages utilizing redux

resources/scripts/redux/actions/flash.ts

@@ -0,0 +1,17 @@
+import { FlashMessage } from '@/redux/types';
+
+export const PUSH_FLASH_MESSAGE = 'PUSH_FLASH_MESSAGE';
+export const REMOVE_FLASH_MESSAGE = 'REMOVE_FLASH_MESSAGE';
+export const CLEAR_ALL_FLASH_MESSAGES = 'CLEAR_ALL_FLASH_MESSAGES';
+
+export const pushFlashMessage = (payload: FlashMessage) => ({
+    type: PUSH_FLASH_MESSAGE, payload,
+});
+
+export const removeFlashMessage = (id: string) => ({
+    type: REMOVE_FLASH_MESSAGE, payload: id,
+});
+
+export const clearAllFlashMessages = () => ({
+    type: CLEAR_ALL_FLASH_MESSAGES,
+});

resources/scripts/redux/configure.ts

@@ -0,0 +1,14 @@
+import { createStore } from 'redux';
+import { persistStore, persistReducer, PersistConfig } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+import { reducers } from './reducers';
+
+const persistConfig: PersistConfig = {
+    key: 'root',
+    storage,
+};
+
+const persistedReducer = persistReducer(persistConfig, reducers);
+
+export const store = createStore(persistedReducer);
+export const persistor = persistStore(store);

resources/scripts/redux/reducers.ts

@@ -0,0 +1,7 @@
+import { combineReducers } from 'redux';
+import flashReducer from './reducers/flash';
+import { ReduxState } from '@/redux/types';
+
+export const reducers = combineReducers<ReduxState>({
+    flashes: flashReducer,
+});

resources/scripts/redux/reducers/flash.ts

@@ -0,0 +1,21 @@
+import { FlashMessage, ReduxReducerAction } from '@/redux/types';
+import { CLEAR_ALL_FLASH_MESSAGES, PUSH_FLASH_MESSAGE, REMOVE_FLASH_MESSAGE } from '@/redux/actions/flash';
+
+export default (state: FlashMessage[] = [], action: ReduxReducerAction) => {
+    switch (action.type) {
+        case PUSH_FLASH_MESSAGE:
+            return [ ...state.filter(flash => {
+                if (action.payload.id && flash.id) {
+                    return flash.id !== action.payload.id;
+                }
+
+                return true;
+            }), action.payload ];
+        case REMOVE_FLASH_MESSAGE:
+            return [ ...state.filter(flash => flash.id !== action.payload) ];
+        case CLEAR_ALL_FLASH_MESSAGES:
+            return [];
+        default:
+            return [ ...state ];
+    }
+};

resources/scripts/redux/types.d.ts

@@ -0,0 +1,17 @@
+import { FlashMessageType } from '@/components/MessageBox';
+
+export interface ReduxReducerAction {
+    type: string;
+    payload?: any;
+}
+
+export interface FlashMessage {
+    id?: string;
+    type: FlashMessageType;
+    title?: string;
+    message: string;
+}
+
+export interface ReduxState {
+    flashes: FlashMessage[];
+}