Merge pull request #2128 from hpe-dev-incubator/Autofill_email_feedback_widget_#2117

auto_fill_email_issue_on_reload_fix-1

Author: chethan-b-hpe

src/components/Feedback/FeedbackBody/FeedbackBody.js

@@ -1,8 +1,9 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable max-len */
 import { Box, Button, TextInput, Text, TextArea, Image } from 'grommet';
-import React, { useState } from 'react';
+import React, { useState,useContext,useEffect } from 'react';
 import { FormNextLink, FormPreviousLink } from 'grommet-icons';
+import { AppContext } from '../../../providers/AppProvider';
 
 const defaultBodyStyles = {
   padding: '10px',
@@ -41,6 +42,13 @@ const FeedbackBody = ({
       cancelQuestion();
     }
   };
+  const { user }=useContext(AppContext);
+  useEffect(() => {
+    if (user?.email) {
+      // Update the email value in the Formik form
+      feedbackFromik.setFieldValue('email', user.email);
+    }
+  }, [user?.email]);
   return (
     <Box gap="small" style={{ height: 300, width: 350 }}>
       {selQuestion === undefined &&

src/components/Feedback/index.js

@@ -62,8 +62,6 @@ const Feedback = (props) => {
     handleButtonClick,
     handleSubmit,
     isSubmissionSuccess,
-    emailvalue,
-    feedbackvalue,
   } = props;
   useEffect(() => {
     if (isSubmissionSuccess !== undefined) {
@@ -78,7 +76,7 @@ const Feedback = (props) => {
     } 
       else{handleSubmit({
         message: values.value,
-        email: values.email,
+        email: values?.email || '',
         proxy: 'hackshack',
       });
     };
@@ -94,8 +92,8 @@ const Feedback = (props) => {
     email: yup.string().email('Invalid email format'),
   });
   const initialState = {
-    value: feedbackvalue,
-    email: emailvalue,
+    value: '',
+    email: '',
   };
   const feedbackFromik = useFormik({
     initialValues: initialState,

src/components/Footer/index.js

@@ -1,22 +1,17 @@
 /* eslint-disable max-len */
 /* eslint-disable react/jsx-no-undef */
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Box, Heading, Anchor } from 'grommet';
 import axios from 'axios';
 import { EmailCapture } from '../../containers';
 import Feedback from '../Feedback/index';
 import AuthService from '../../services/auth.service';
-import { AppContext } from '../../providers/AppProvider';
+// import { AppContext } from '../../providers/AppProvider';
 
 const { GATSBY_WORKSHOPCHALLENGE_API_ENDPOINT } = process.env;
 
 export const Footer = () => {
   const [isSubmissionSuccess, setIsSubmissionSuccess] = useState(undefined);
-  const { user } = useContext(AppContext);
-  const [useremail,setUseremail]=useState(user?.email || '');
-  useEffect(()=>{
-    setUseremail(user?.email || '');
-},[user?.email]);
   const sendEmail = (data) => {
     axios({
       method: 'POST',
@@ -144,8 +139,6 @@ export const Footer = () => {
         headerText="Help us improve the Community"
         bodyText="What kind of feedback do you have?"
         buttonText="Feedback"
-        emailvalue= {useremail}
-        feedbackvalue=' '
         handleClose={() => setIsSubmissionSuccess(undefined)}
         isSubmissionSuccess={isSubmissionSuccess}
         handleSubmit={(data) => {