UI notification/alert system with global redux state

client/src/store/reducers/index.ts

@@ -5,11 +5,13 @@ import { GlobalState } from '../../interfaces/GlobalState';
 import themeReducer from './theme';
 import appReducer from './app';
 import bookmarkReducer from './bookmark';
+import notificationReducer from './notification';
 
 const rootReducer = combineReducers<GlobalState>({
   theme: themeReducer,
   app: appReducer,
-  bookmark: bookmarkReducer
+  bookmark: bookmarkReducer,
+  notification: notificationReducer
 })
 
 export default rootReducer;

client/src/store/reducers/notification.ts

@@ -0,0 +1,45 @@
+import { ActionTypes, Action } from '../actions';
+import { Notification } from '../../interfaces';
+
+export interface State {
+  notifications: Notification[];
+  idCounter: number;
+}
+
+const initialState: State = {
+  notifications: [],
+  idCounter: 0
+}
+
+const createNotification = (state: State, action: Action): State => {
+  const tmpNotifications = [...state.notifications, {
+    ...action.payload,
+    id: state.idCounter
+  }];
+
+  return {
+    ...state,
+    notifications: tmpNotifications,
+    idCounter: state.idCounter + 1
+  }
+}
+
+const clearNotification = (state: State, action: Action): State => {
+  const tmpNotifications = [...state.notifications]
+    .filter((notification: Notification) => notification.id !== action.payload);
+
+  return {
+    ...state,
+    notifications: tmpNotifications
+  }
+}
+
+const notificationReducer = (state = initialState, action: Action) => {
+  switch (action.type) {
+    case ActionTypes.createNotification: return createNotification(state, action);
+    case ActionTypes.clearNotification: return clearNotification(state, action);
+    default: return state;
+  }
+}
+
+export default notificationReducer;