Added backupemail functionality connected from database in 'Forms' component

src/components/Forms/UserEmail/index.jsx

@@ -8,18 +8,26 @@ import {
   Typography,
   MenuItem,
   Select,
-  OutlinedInput
+  OutlinedInput,
+  Button
 } from "@mui/material";
+import { backupEmailUpdate } from "../../../store/actions/profileActions";
 import { Input } from "../../ui-helpers/Inputs/PrimaryInput";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
+import { useFirebase, useFirestore } from "react-redux-firebase";
+import { set } from "lodash";
 
 const UserEmail = () => {
   const classes = useStyles();
-
+  const firebase = useFirebase();
+  const firestore = useFirestore();
+  const dispatch = useDispatch();
+  const profileData = useSelector(({ firebase: { profile } }) => profile);
   const [primaryEmail, setPrimaryEmail] = useState(data.primaryEmail);
-  const [backupEmail, setBackupEmail] = useState(data.backupEmail);
+  const [backupEmail, setBackupEmail] = useState(profileData.backupEmail ? profileData.backupEmail : []);
+  const [prevEmail, setPrevEmail] = useState(profileData.backupEmail ? profileData.backupEmail[0] : []);
 
-  const profileData = useSelector(({ firebase: { profile } }) => profile);
+  const [newEmail, setNewEmail] = useState("");
 
   const handleChangePrimaryEmail = event => {
     setPrimaryEmail(event.target.value);
@@ -29,6 +37,16 @@ const UserEmail = () => {
     setBackupEmail(event.target.value);
   };
 
+  const handler = (e) => {
+    e.preventDefault();
+    if (newEmail.length > 0) {
+      const data = [...backupEmail, newEmail]
+      setBackupEmail(data);
+      backupEmailUpdate(profileData.uid, data)(firebase, firestore, dispatch);
+      setNewEmail("");
+    }
+  }
+
   return (
     <Card className={classes.card}>
       <Box
@@ -54,8 +72,12 @@ const UserEmail = () => {
               placeholder="email"
               className={classes.input}
               data-testId="emailInput"
+              value={newEmail}
+              onChange={e => { setNewEmail(e.target.value) }}
             />
-            <Typography data-testId="addEmail">Add</Typography>
+            <Button>
+              <Typography data-testId="addEmail" onClick={handler}>Add</Typography>
+            </Button>
           </Box>
         </Box>
         <Box className={classes.email}>
@@ -85,13 +107,13 @@ const UserEmail = () => {
           </Typography>
           <FormControl data-testId="backupEmail">
             <Select
-              value={backupEmail}
+              value={prevEmail}
               onChange={handleChangeBackupEmail}
               input={<OutlinedInput style={{ height: 40, width: 250 }} />}
               displayEmpty
               inputProps={{ "aria-label": "Without label" }}
             >
-              {data.backupEmailOptions.map(email => (
+              {backupEmail?.map(email => (
                 <MenuItem value={email} data-testId="backupEmailItem">
                   {email}
                 </MenuItem>

src/store/actions/actionTypes.js

@@ -155,3 +155,7 @@ export const GET_STEPS_DATA_FAIL = "GET_STEPS_DETAILS_FAILED";
 export const GET_TUTORIAL_FEED_START = "GET_TUTORIAL_FEED_START";
 export const GET_TUTORIAL_FEED_SUCCESS = "GET_TUTORIAL_FEED_SUCCESS";
 export const GET_TUTORIAL_FEED_FAILED = "GET_TUTORIAL_FEED_FAILED";
+
+export const BACKUP_EMAIL_START = "BACKUP_EMAIL_START";
+export const BACKUP_EMAIL_SUCCESS = "BACKUP_EMAIL_SUCCESS";
+export const BACKUP_EMAIL_FAILED = "BACKUP_EMAIL_FAILED";

src/store/actions/profileActions.js

@@ -116,29 +116,29 @@ export const updateUserProfile =
     description,
     country
   }) =>
-  async (firebase, firestore, dispatch) => {
-    try {
-      dispatch({ type: actions.PROFILE_EDIT_START });
-      await firebase.updateProfile(
-        {
-          displayName,
-          website,
-          link_facebook,
-          link_github,
-          link_linkedin,
-          link_twitter,
-          description,
-          country,
-          updatedAt: firestore.FieldValue.serverTimestamp()
-        },
-        { useSet: false, merge: true }
-      );
-      dispatch({ type: actions.PROFILE_EDIT_SUCCESS });
-      dispatch({ type: actions.CLEAR_PROFILE_EDIT_STATE });
-    } catch (e) {
-      dispatch({ type: actions.PROFILE_EDIT_FAIL, payload: e.message });
-    }
-  };
+    async (firebase, firestore, dispatch) => {
+      try {
+        dispatch({ type: actions.PROFILE_EDIT_START });
+        await firebase.updateProfile(
+          {
+            displayName,
+            website,
+            link_facebook,
+            link_github,
+            link_linkedin,
+            link_twitter,
+            description,
+            country,
+            updatedAt: firestore.FieldValue.serverTimestamp()
+          },
+          { useSet: false, merge: true }
+        );
+        dispatch({ type: actions.PROFILE_EDIT_SUCCESS });
+        dispatch({ type: actions.CLEAR_PROFILE_EDIT_STATE });
+      } catch (e) {
+        dispatch({ type: actions.PROFILE_EDIT_FAIL, payload: e.message });
+      }
+    };
 
 export const uploadProfileImage =
   (file, user_handle) => async (firebase, dispatch) => {
@@ -297,3 +297,24 @@ const getAllOrgsOfCurrentUser = () => async (firebase, firestore) => {
     console.log(e);
   }
 };
+
+
+export const backupEmailUpdate =
+  (id, email) => async (firebase, firestore, dispatch) => {
+    try {
+      dispatch({ type: actions.BACKUP_EMAIL_START });
+      await firestore
+        .collection("cl_user")
+        .doc(id)
+        .update({
+          backupEmail: email
+        });
+      dispatch({
+        type: actions.BACKUP_EMAIL_SUCCESS,
+
+      });
+
+    } catch (e) {
+      dispatch({ type: actions.BACKUP_EMAIL_FAILED, payload: e.message });
+    }
+  };

src/store/reducers/profileReducer/backupEmailReducer.js

@@ -0,0 +1,37 @@
+import * as actions from "../../actions/actionTypes";
+
+const initialState = {
+  loading: false,
+  error: null,
+  data: null
+};
+
+const BackupEmailReducer = (state = initialState, { type, payload }) => {
+  switch (type) {
+    case actions.BACKUP_EMAIL_START:
+      return {
+        ...state,
+        loading: true
+      };
+
+    case actions.BACKUP_EMAIL_SUCCESS:
+      return {
+        ...state,
+        loading: false,
+        error: false,
+        data: payload
+      };
+
+    case actions.BACKUP_EMAIL_FAILED:
+      return {
+        ...state,
+        loading: false,
+        error: payload
+      };
+
+    default:
+      return state;
+  }
+};
+
+export default BackupEmailReducer;

src/store/reducers/profileReducer/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from "redux";
 import profileEditReducer from "./profileEditReducer";
 import dataReducer from "./dataReducer";
 import userReducer from "./userReducer";
+import BackupEmailReducer from "./backupEmailReducer";
 
 export default combineReducers({
   edit: profileEditReducer,
   data: dataReducer,
-  user: userReducer
+  user: userReducer,
+  backupEmail: BackupEmailReducer
 });