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

client/.eslintignore

@@ -2,4 +2,4 @@
 *.test.js*
 v1/*
 dist/*
-
+webpack.*.js

client/Routes.jsx

@@ -12,7 +12,7 @@ import Privacy from '@components/main/Privacy';
 import Faqs from '@components/main/Faqs';
 import About from '@components/main/About';
 import Blog from '@components/main/Blog';
-import ContactForm from '@components/main/ContactForm';
+import Contact from '@components/contact/Contact';
 
 export default function Routes() {
   const { pathname } = useLocation();
@@ -28,7 +28,7 @@ export default function Routes() {
         <Route path="/faqs" component={Faqs} />
         <Route path="/about" component={About} />
         <Route path="/blog" component={Blog} />
-        <Route path="/contact" component={ContactForm} />
+        <Route path="/contact" component={Contact} />
         <Route path="/">
           <Redirect to="map" />
         </Route>

client/components/contact/Contact.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ToastContainer } from 'react-toastify';
+import ContactImage from './ContactImage';
+import ContactIntro from './ContactIntro';
+import ContactForm from './ContactForm';
+
+import 'react-toastify/dist/ReactToastify.css';
+
+const Contact = () => (
+  <>
+    <div>
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
+    </div>
+    <div>
+      <ContactImage>Contact Us</ContactImage>
+      <ContactIntro />
+      <ContactForm />
+    </div>
+  </>
+);
+
+export default Contact;

client/components/contact/ContactForm.jsx

@@ -0,0 +1,250 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { sendGitRequest } from '@reducers/data';
+import { showFeedbackSuccess, setErrorModal } from '@reducers/ui';
+import { toast } from 'react-toastify';
+import {
+  Container,
+  Grid,
+  Button,
+  TextField,
+  CircularProgress,
+} from '@material-ui/core';
+import contactSettings from './settings';
+import 'react-toastify/dist/ReactToastify.css';
+
+const initialFormValues = {
+  firstName: '',
+  lastName: '',
+  email: '',
+  association: '',
+  message: '',
+  errors: {
+    missingFirstName: false,
+    missingLastName: false,
+    missingEmail: false,
+    invalidEmail: false,
+    missingMessage: false,
+  },
+  loading: false,
+};
+
+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);
+  const openErrorModal = useSelector(state => state.ui.error.isOpen);
+
+  const [formValues, setFormValues] = useState(initialFormValues);
+
+  function clearFields() {
+    setFormValues({
+      ...initialFormValues,
+    });
+  }
+
+  // Initialize component.
+  useEffect(() => {
+    // ComponentDidMount code goes here...
+    clearFields();
+    if (!!displayFeedbackSuccess === true) {
+      toast.success('We received your message. Our team will contact you at the email address provided.', contactSettings.toast.dark);
+    }
+
+    if (!!openErrorModal === true) {
+      toast.error('We failed to process your message. Please try again later.', contactSettings.toast.dark);
+    }
+
+    return () => {
+      // ComponentWillUnmount code goes here...
+      callShowFeedbackSuccess(false);
+      callShowErrorModal(false);
+      clearFields();
+    };
+  }, [callShowErrorModal, callShowFeedbackSuccess, displayFeedbackSuccess, openErrorModal]);
+
+  // Helper methods.
+  function validateEmail(emailAddress) {
+    // A regular expression checking for a valid email format.
+    const VALID_EMAIL_FORMAT_REGEX = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
+    return VALID_EMAIL_FORMAT_REGEX.test(emailAddress);
+  }
+
+  const clearErrors = useCallback(() => {
+    setFormValues(prevState => ({
+      ...prevState,
+      ...{
+        errors: {
+          missingFirstName: false,
+          missingLastName: false,
+          missingEmail: false,
+          invalidEmail: false,
+          missingMessage: false,
+        },
+      },
+    }));
+  }, []);
+
+  const validateForm = useCallback(() => {
+    const noFirstName = formValues.firstName.trim().length === 0;
+    const noLastName = formValues.lastName.trim().length === 0;
+    const noEmail = formValues.email.trim().length === 0;
+    const noMessage = formValues.message.trim().length === 0;
+    const incompleteEmail = (!noEmail && !validateEmail(formValues.email));
+    if (!noFirstName && !noLastName && !noEmail && !noMessage && !incompleteEmail) {
+      return true;
+    }
+
+    setFormValues(prevState => ({
+      ...prevState,
+      ...{
+        errors: {
+          missingFirstName: noFirstName,
+          missingLastName: noLastName,
+          missingEmail: noEmail,
+          invalidEmail: incompleteEmail,
+          missingMessage: noMessage,
+        },
+      },
+    }));
+    return false;
+  }, [formValues]);
+
+  // Event handlers.
+  const onInputChange = useCallback(event => {
+    const { name, value } = event.target;
+    setFormValues(prevState => ({ ...prevState, [name]: value }));
+  }, []);
+
+  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 });
+    }
+  }, [callSendGitRequest,
+    formValues.association,
+    formValues.email,
+    formValues.firstName,
+    formValues.lastName,
+    formValues.message,
+    validateForm]);
+
+  return (
+    <Container maxWidth="sm">
+      <form id="contact-form" onSubmit={handleSubmit}>
+        <Grid container alignItems="center" justifyContent="center" direction="column" style={{ gap: '10px' }}>
+          <Grid container alignItems="center" justifyContent="center" direction="row" spacing={2}>
+            <Grid item xs={6}>
+              <TextField
+                id="contact-firstname"
+                name="firstName"
+                label="First Name *"
+                type="text"
+                autoComplete="off"
+                value={formValues.firstName}
+                onChange={onInputChange}
+                onFocus={clearErrors}
+                error={formValues.errors.missingFirstName}
+                helperText={formValues.errors.missingFirstName ? 'Please provide a first name.' : ''}
+                fullWidth
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <TextField
+                id="contact-lastname"
+                name="lastName"
+                label="Last Name *"
+                type="text"
+                autoComplete="off"
+                value={formValues.lastName}
+                onChange={onInputChange}
+                onFocus={clearErrors}
+                error={formValues.errors.missingLastName}
+                helperText={formValues.errors.missingLastName ? 'Please provide a last name.' : ''}
+                fullWidth
+              />
+            </Grid>
+          </Grid>
+          <Grid container alignItems="center" justifyContent="center" direction="row">
+            <Grid item xs={12}>
+              <TextField
+                id="contact-email"
+                name="email"
+                label="Email *"
+                type="text"
+                autoComplete="off"
+                value={formValues.email}
+                onChange={onInputChange}
+                onFocus={clearErrors}
+                error={formValues.errors.missingEmail || formValues.errors.invalidEmail}
+                helperText={formValues.errors.missingEmail || formValues.errors.invalidEmail ? 'Please provide a valid email address.' : ''}
+                fullWidth
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                id="contact-association"
+                name="association"
+                label="Association"
+                type="text"
+                autoComplete="off"
+                value={formValues.association}
+                onChange={onInputChange}
+                fullWidth
+              />
+            </Grid>
+            <Grid item xs={12} style={{ paddingTop: '8px' }}>
+              <TextField
+                id="contact-message"
+                name="message"
+                label="Message *"
+                type="text"
+                variant="outlined"
+                rows={4}
+                autoComplete="off"
+                value={formValues.message}
+                onChange={onInputChange}
+                onFocus={clearErrors}
+                error={formValues.errors.missingMessage}
+                helperText={formValues.errors.missingMessage ? 'Please provide a message.' : ''}
+                fullWidth
+                multiline
+              />
+            </Grid>
+          </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' }}>
+              Submit
+            </Button>
+          </Grid>
+        </Grid>
+      </form>
+    </Container>
+
+  );
+};
+
+export default ContactForm;

client/components/contact/ContactImage.jsx

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import coverImage from '@assets/contact_bg.png';
+
+const useStyles = makeStyles(() => ({
+  contactImageCover: {
+    height: '25vh',
+    backgroundImage: `url(${coverImage})`,
+    backgroundPosition: 'top',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+    position: 'relative',
+
+  },
+  contactImageOverlayText: {
+    left: '50%',
+    fontSize: '40px',
+    fontWeight: 'bold',
+    position: 'absolute',
+    textAlign: 'center',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+}));
+
+const ContactImage = ({ children }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.contactImageCover}>
+      <div className={classes.contactImageOverlayText}>
+        <span>{children}</span>
+      </div>
+    </div>
+  );
+};
+
+ContactImage.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default ContactImage;

client/components/contact/ContactIntro.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  Grid,
+} from '@material-ui/core';
+
+const ContactIntro = () => (
+  <Grid container alignItems="center" justify="center" direction="column">
+    <Grid item style={{ width: '45%' }}>
+      <h1 style={{ textAlign: 'center' }}>
+        {'Don\'t See What You Need?'}
+      </h1>
+      <p>
+        We want to build a tool that works for you. We are open to suggestions and
+        feedback and would love the opportunity to get connected. Feel free to input
+        your information in the contact form below and we will be sure to get back to
+        you within 2-3 business days. Thank you!
+      </p>
+    </Grid>
+  </Grid>
+);
+
+export default ContactIntro;

client/components/contact/settings/index.js

@@ -0,0 +1,16 @@
+// Configuration settings used by the contact page
+const contactSettings = {
+  toast: {
+    dark: {
+      position: 'top-right',
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+    },
+  },
+};
+
+export default contactSettings;