Refactord email popup screen to use Redx + implement all email redux/saga scaffolding.

client/src/redux/email/email.actions.js

@@ -0,0 +1,24 @@
+import EmailActionTypes from "./email.types";
+
+export const toggleEmailOverlayVisible = () => ({
+  type: EmailActionTypes.TOGGLE_EMAIL_OVERLAY_VISIBLE
+});
+
+export const setEmailOptions = options => ({
+  type: EmailActionTypes.SET_EMAIL_OPTIONS,
+  payload: options
+});
+
+export const sendEmail = email => ({
+  type: EmailActionTypes.SEND_EMAIL,
+  payload: email
+});
+
+export const sendEmailSuccess = options => ({
+  type: EmailActionTypes.SEND_EMAIL_SUCCESS
+});
+
+export const sendEmailFailure = error => ({
+  type: EmailActionTypes.SEND_EMAIL_FAILURE,
+  payload: error
+});

client/src/redux/email/email.reducer.js

@@ -0,0 +1,35 @@
+import EmailActionTypes from "./email.types";
+
+const INITIAL_STATE = {
+  emailConfig: {
+    messageOptions: {
+      from: { name: "ShopName", address: "noreply@bodyshop.app" },
+      to: null,
+      replyTo: null
+    },
+    template: null,
+    queryConfig: [null, { variables: null }]
+  },
+
+  visible: false,
+  error: null
+};
+
+const emailReducer = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case EmailActionTypes.TOGGLE_EMAIL_OVERLAY_VISIBLE:
+      return {
+        ...state,
+        visible: !state.visible
+      };
+    case EmailActionTypes.SET_EMAIL_OPTIONS:
+      return {
+        ...state,
+        emailConfig: { ...action.payload }
+      };
+    default:
+      return state;
+  }
+};
+
+export default emailReducer;

client/src/redux/email/email.sagas.js

@@ -0,0 +1,50 @@
+import { all, call, put, takeLatest } from "redux-saga/effects";
+import { sendEmailFailure, sendEmailSuccess } from "./email.actions";
+import EmailActionTypes from "./email.types";
+
+export function* onSendEmail() {
+  yield takeLatest(EmailActionTypes.SEND_EMAIL, sendEmail);
+}
+export function* sendEmail(payload) {
+  try {
+    console.log("Sending thta email", payload);
+    //    // axios.post("/sendemail", emailConfig).then(response => {
+    //   alert(JSON.stringify(response));
+    // });
+    yield put(sendEmailSuccess());
+  } catch (error) {
+    console.log("Error in sendEmail saga.");
+    yield put(sendEmailFailure(error.message));
+  }
+}
+
+export function* onSendEmailSuccess() {
+  yield takeLatest(EmailActionTypes.SEND_EMAIL_SUCCESS, sendEmailSuccessSaga);
+}
+export function* sendEmailSuccessSaga() {
+  try {
+    console.log("Send email success.");
+  } catch (error) {
+    console.log("Error in sendEmailSuccess saga.");
+    yield put(sendEmailFailure(error.message));
+  }
+}
+
+export function* onSendEmailFailure() {
+  yield takeLatest(EmailActionTypes.SEND_EMAIL_FAILURE, sendEmailFailureSaga);
+}
+export function* sendEmailFailureSaga(error) {
+  try {
+    yield console.log(error);
+  } catch (error) {
+    console.log("Error in sendEmailFailure saga.", error.message);
+  }
+}
+
+export function* emailSagas() {
+  yield all([
+    call(onSendEmail),
+    call(onSendEmailFailure),
+    call(onSendEmailSuccess)
+  ]);
+}

client/src/redux/email/email.selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from "reselect";
+
+const selectEmail = state => state.email;
+const selectEmailConfigMessageOptions = state =>
+  state.email.emailConfig.messageOptions;
+const selectEmailConfigTemplate = state => state.email.emailConfig.template;
+const selectEmailConfigQuery = state => state.email.emailConfig.queryConfig;
+
+export const selectEmailVisible = createSelector(
+  [selectEmail],
+  email => email.visible
+);
+
+export const selectEmailConfig = createSelector(
+  [
+    selectEmailConfigMessageOptions,
+    selectEmailConfigTemplate,
+    selectEmailConfigQuery
+  ],
+  (messageOptions, template, queryConfig) => ({
+    messageOptions,
+    template,
+    queryConfig
+  })
+);

client/src/redux/email/email.types.js

@@ -0,0 +1,8 @@
+const EmailActionTypes = {
+  TOGGLE_EMAIL_OVERLAY_VISIBLE: "TOGGLE_EMAIL_OVERLAY_VISIBLE",
+  SET_EMAIL_OPTIONS: "SET_EMAIL_OPTIONS",
+  SEND_EMAIL: "SEND_EMAIL",
+  SEND_EMAIL_SUCCESS: "SEND_EMAIL_SUCCESS",
+  SEND_EMAIL_FAILURE: "SEND_EMAIL_FAILURE"
+};
+export default EmailActionTypes;

client/src/redux/root.reducer.js

@@ -4,23 +4,19 @@ import storage from "redux-persist/lib/storage";
 
 import userReducer from "./user/user.reducer";
 import messagingReducer from "./messaging/messaging.reducer";
-// import cartReducer from './cart/cart.reducer';
-// import directoryReducer from './directory/directory.reducer';
-// import shopReducer from './shop/shop.reducer';
+import emailReducer from "./email/email.reducer";
 
 const persistConfig = {
   key: "root",
   storage,
-  //whitelist: ["cart"]
-  blacklist: ["user"]
+  //whitelist: ["user"]
+  blacklist: ["user", "email"]
 };
 
 const rootReducer = combineReducers({
   user: userReducer,
-  messaging: messagingReducer
-  //   cart: cartReducer,
-  //   directory: directoryReducer,
-  //   shop: shopReducer
+  messaging: messagingReducer,
+  email: emailReducer
 });
 
 export default persistReducer(persistConfig, rootReducer);

client/src/redux/root.saga.js

@@ -1,12 +1,8 @@
 import { all, call } from "redux-saga/effects";
 
-//List of all Sagas
-// import { shopSagas } from "./shop/shop.sagas";
 import { userSagas } from "./user/user.sagas";
 import { messagingSagas } from "./messaging/messaging.sagas";
-//import { cartSagas } from "./cart/cart.sagas";
-
+import { emailSagas } from "./email/email.sagas";
 export default function* rootSaga() {
-  //All starts all the Sagas concurrently.
-  yield all([call(userSagas), call(messagingSagas)]);
+  yield all([call(userSagas), call(messagingSagas), call(emailSagas)]);
 }