Contact page fully functional. Utilizes Material UI design components and inherits styles from theme

client/components/contact/ContactForm.jsx

@@ -30,11 +30,7 @@ const initialFormValues = {
 };
 
 const ContactForm = () => {
-  // Define the methods to dispatch redux actions.
   const dispatch = useDispatch();
-  const callSendGitRequest = useCallback(obj => dispatch(sendGitRequest(obj)), [dispatch]);
-  const callShowFeedbackSuccess = useCallback(o => dispatch(showFeedbackSuccess(o)), [dispatch]);
-  const callShowErrorModal = useCallback(obj => dispatch(setErrorModal(obj)), [dispatch]);
 
   // mapStateToProps equivalent.
   const displayFeedbackSuccess = useSelector(state => state.ui.displayFeedbackSuccess);
@@ -48,25 +44,34 @@ const ContactForm = () => {
     });
   }
 
+  function setLoading(isLoading) {
+    setFormValues(prevState => ({
+      ...prevState,
+      ...{
+        loading: isLoading,
+      },
+    }));
+  }
+
   // Initialize component.
   useEffect(() => {
-    // ComponentDidMount code goes here...
-    clearFields();
-    if (!!displayFeedbackSuccess === true) {
+    // componentDidMount code goes here...
+    if (displayFeedbackSuccess) {
       toast.success('We received your message. Our team will contact you at the email address provided.', contactSettings.toast.dark);
+      clearFields();
     }
 
-    if (!!openErrorModal === true) {
+    if (openErrorModal) {
       toast.error('We failed to process your message. Please try again later.', contactSettings.toast.dark);
+      setLoading(false);
     }
 
     return () => {
-      // ComponentWillUnmount code goes here...
-      callShowFeedbackSuccess(false);
-      callShowErrorModal(false);
-      clearFields();
+      // componentWillUnmount code goes here...
+      dispatch(showFeedbackSuccess(false));
+      dispatch(setErrorModal(false));
     };
-  }, [callShowErrorModal, callShowFeedbackSuccess, displayFeedbackSuccess, openErrorModal]);
+  }, [dispatch, displayFeedbackSuccess, openErrorModal]);
 
   // Helper methods.
   function validateEmail(emailAddress) {
@@ -124,26 +129,23 @@ const ContactForm = () => {
   const handleSubmit = useCallback(event => {
     event.preventDefault();
 
-    if (validateForm()) {
-      const body = [
-                `First name: ${formValues.firstName.trim()}`,
-                `Last name: ${formValues.lastName.trim()}`,
-                `Email: ${formValues.email.trim()}`,
-                `Association: ${formValues.association.trim() || 'Not provided'}`,
-                `Message: ${formValues.message.trim()}`,
-      ].join('\n');
-
-      setFormValues(prevState => ({
-        ...prevState,
-        ...{
-          loading: true,
-        },
-      }));
-
-      // Dispatch action to redux with payload.
-      callSendGitRequest({ title: formValues.email, body });
+    if (!validateForm()) {
+      return;
     }
-  }, [callSendGitRequest,
+
+    const body = [
+              `First name: ${formValues.firstName.trim()}`,
+              `Last name: ${formValues.lastName.trim()}`,
+              `Email: ${formValues.email.trim()}`,
+              `Association: ${formValues.association.trim() || 'Not provided'}`,
+              `Message: ${formValues.message.trim()}`,
+    ].join('\n');
+
+    setLoading(true);
+
+    // Dispatch action to redux with payload.
+    dispatch(sendGitRequest({ title: formValues.email, body }));
+  }, [dispatch,
     formValues.association,
     formValues.email,
     formValues.firstName,
@@ -236,7 +238,7 @@ const ContactForm = () => {
           </Grid>
           <Grid container direction="column" alignItems="center" justifyContent="center" style={{ paddingTop: '8px' }}>
             <CircularProgress style={{ display: formValues.loading ? 'block' : 'none' }} />
-            <Button variant="contained" color="primary" type="submit" style={{ display: formValues.loading === false ? 'block' : 'none' }}>
+            <Button variant="contained" color="primary" type="submit" style={{ display: formValues.loading ? 'none' : 'block' }}>
               Submit
             </Button>
           </Grid>

client/redux/reducers/metadata.js

@@ -98,8 +98,9 @@ export default (state = initialState, action) => {
       };
     case types.GET_METADATA_FAILURE: {
       const {
-        response: { status },
-        message,
+        // response: { status },
+        status,
+        status: { message },
       } = action.payload;
 
       return {

client/redux/sagas/data.js

@@ -25,7 +25,6 @@ import {
 import {
   types as uiTypes,
   setErrorModal,
-  showDataCharts,
   showFeedbackSuccess
 } from '../reducers/ui';
 
@@ -67,7 +66,7 @@ function* fetchNcByLngLat({ longitude, latitude }) {
 
 function* postFeedback(message) {
   const contactURL = `${BASE_URL}/feedback`;
-
+ 
   const response = yield call(axios.post, contactURL, message);
   return response;
 }

client/redux/sagas/metadata.js

@@ -51,7 +51,7 @@ function* getMetadata() {
       put(getNcGeojsonSuccess(ncGeojsonMetadata)),
     ]);
   } catch (e) {
-    yield put(getMetadataFailure(e));
+    yield put(getMetadataFailure({ status: e }));
   }
 }