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,270 @@
+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 'react-toastify/dist/ReactToastify.css';
+
+import {
+  Container,
+  Grid,
+  Button,
+  TextField,
+  CircularProgress,
+} from '@material-ui/core';
+
+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.', {
+        position: 'top-right',
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    }
+
+    if (!!openErrorModal === true) {
+      toast.error('We failed to process your message. Please try again later.', {
+        position: 'top-right',
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    }
+
+    return () => {
+      // componentWillUnmount code goes here...
+      callShowFeedbackSuccess(false);
+      callShowErrorModal(false);
+      clearFields();
+    };
+  }, [callShowErrorModal, callShowFeedbackSuccess, displayFeedbackSuccess, openErrorModal]);
+
+  // helper methods
+  function validateEmail(emailAddress) {
+    // eslint-disable-next-line
+    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailAddress)) {
+      return true;
+    }
+    return false;
+  }
+
+  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 => {
+    event.preventDefault();
+    const { name, value } = event.target;
+    setFormValues(prevState => ({ ...prevState, [name]: value }));
+  }, []);
+
+  const handleSubmit = useCallback(event => {
+    event.preventDefault();
+
+    if (validateForm()) {
+      const body = [
+                `First name: ${formValues.firstName}`,
+                `Last name: ${formValues.lastName}`,
+                `Email: ${formValues.email}`,
+                `Association: ${formValues.association || 'Not provided'}`,
+                `Message: ${formValues.message}`,
+      ].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" justify="center" direction="column" style={{ gap: '10px' }}>
+          <Grid container alignItems="center" justify="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" justify="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" justify="center" style={{ paddingTop: '8px' }}>
+            <CircularProgress style={{ display: formValues.loading === true ? '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,17 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import './styles/contactimage.scss';
+
+const ContactImage = ({ children }) => (
+  <div className="contact-image-cover">
+    <div className="contact-image-overlay-text">
+      <span className="contact-image-text-contact">{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&apos;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/styles/contactimage.scss

@@ -0,0 +1,20 @@
+
+.contact-image-cover {
+    height: 25vh;
+    background-image: url('../../../assets/contact_bg.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+
+    .contact-image-overlay-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    font-size: 40px;
+    font-weight: bold;
+  }
+}
+