Create Alert actions

Author: tduyng

src/@types/alert.d.ts

@@ -2,4 +2,12 @@
 enum AlertTypes {
   SUCCESS = 'sucess',
   ERROR = 'error',
+  INFO = 'info',
+  WARNING = 'warning',
+}
+
+interface IAlert {
+  id: string;
+  msg: string;
+  type: AlertTypes;
 }

src/components/Alert/Alert.actions.ts

@@ -0,0 +1,11 @@
+import * as types from './Alert.constants';
+
+export const setAlertSuccess = (payload: IAlert) => ({
+  type: types.SET_ALERT,
+  payload,
+});
+
+export const removeAlertSuccess = (payload: string) => ({
+  type: types.REMOVE_ALERT,
+  payload,
+});

src/components/Alert/Alert.constants.ts

@@ -0,0 +1,2 @@
+export const SET_ALERT = 'view/Alert/SET_ALERT';
+export const REMOVE_ALERT = 'view/Alert/REMOVE_ALERT';

src/components/Alert/Alert.reducers.ts

@@ -0,0 +1,15 @@
+import * as types from './Alert.constants';
+
+const initialState = [] as IAlert[];
+
+export const alertReducer = (state = initialState, action: ActionRedux) => {
+  const { type, payload } = action;
+  switch (type) {
+    case types.SET_ALERT:
+      return [...state, payload];
+    case types.REMOVE_ALERT:
+      return state.filter(alert => alert.id !== payload);
+    default:
+      return state;
+  }
+};

src/components/Alert/Alert.thunks.ts

@@ -0,0 +1,12 @@
+import * as actions from './Alert.actions';
+import { v4 as uuid } from 'uuid';
+
+interface PayloadAlert {
+  msg: string;
+  type: AlertTypes;
+}
+export const setAlert = (payload: PayloadAlert) => async dispatch => {
+  const newAlert = { ...payload, id: uuid() };
+  dispatch(actions.setAlertSuccess(newAlert));
+  setTimeout(() => dispatch(actions.removeAlertSuccess(newAlert.id)), 4000);
+};

src/components/Alert/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { Alert } from 'antd';
+
+const mapStateToProps = (state: AppState) => ({
+  alerts: state.alerts,
+});
+const mapDispatchToProps = {};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+interface Props extends ConnectedProps<typeof connector> {}
+
+const _AppAlert = (props: Props) => {
+  const { alerts } = props;
+  return (
+    alerts !== null &&
+    alerts.length > 0 &&
+    alerts.map((alert, index) => {
+      return (
+        <Alert
+          message={alert.msg}
+          type={alert.type}
+          key={index}
+          showIcon
+          closable
+        ></Alert>
+      );
+    })
+  );
+};
+
+export const AppAlert = connector(_AppAlert);

src/components/Auth/Auth.thunks.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 import { URL } from 'src/constants/urls';
 import * as actions from './Auth.actions';
 import { v4 as uuid } from 'uuid';
+import { setAlert } from 'src/components/Alert/Alert.thunks';
 
 export const loadUser = () => async dispatch => {
   const userJson = localStorage.getItem('user') || '{}';

src/store/reducers.ts

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
 import { authReducer } from 'src/components/Auth/Auth.reducers';
 import { productReducer } from 'src/components/Products/Product.reducers';
+import { alertReducer } from 'src/components/Alert/Alert.reducers';
 
 export const RootReducer = combineReducers({
   auth: authReducer,
   products: productReducer,
+  alerts: alertReducer,
 });