- Fixed bug making contact creation form refresh page on submit

- Integrated contact form with Portfolio Contact Message API and NodeJS Client
  - https://github.com/jsexton-portfolio/contact-message-service
  - https://github.com/jsexton-portfolio/portfolio-api-nodejs-clientuy

CHANGELOG.md

@@ -1,3 +1,10 @@
+# 0.6.1-alpha
+
+- Fixed bug making contact creation form refresh page on submit
+- Integrated contact form with Portfolio Contact Message API and NodeJS Client
+  - https://github.com/jsexton-portfolio/contact-message-service
+  - https://github.com/jsexton-portfolio/portfolio-api-nodejs-client
+
 # 0.6.0-alpha
 
 - Added Chalice technology card

package.json

@@ -3,6 +3,7 @@
   "version": "0.5.0-alpha",
   "private": true,
   "dependencies": {
+    "@jsextonn/portfolio-api-client": "^0.1.2",
     "@material-ui/core": "^4.9.12",
     "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",

src/components/Contact/Contact.js

@@ -1,22 +1,30 @@
+import { contact } from '@jsextonn/portfolio-api-client'
 import { Container, Typography } from '@material-ui/core'
 import React, { useState } from 'react'
 import { ContactPreparation } from './ContactPreparation/ContactPreparation'
 import { FailedContact } from './FailedContact/FailedContact'
 import { SuccessfulContact } from './SuccessfulContact/SuccessfulContact'
 import { SuspendContact } from './SuspendContact/SuspendContact'
 
+const CONTACT_CREATION_STATE = {
+  PREPARING: 'preparing',
+  SUBMITTING: 'submitting',
+  SUCCESSFUL: 'successful',
+  FAILED: 'failed'
+}
+
 export const Contact = () => {
   const [activeComponent, setActiveComponent] = useState('preparing')
 
   const currentActiveComponent = () => {
     switch (activeComponent) {
-      case 'preparing':
+      case CONTACT_CREATION_STATE.PREPARING:
         return <ContactPreparation onSubmit={handleFormSubmission} />
-      case 'submitting':
+      case CONTACT_CREATION_STATE.SUBMITTING:
         return <SuspendContact />
-      case 'successful':
+      case CONTACT_CREATION_STATE.SUCCESSFUL:
         return <SuccessfulContact />
-      case 'failed':
+      case CONTACT_CREATION_STATE.FAILED:
         return <FailedContact />
       default:
         return (
@@ -28,11 +36,27 @@ export const Contact = () => {
   }
 
   const handleFormSubmission = (values, actions) => {
-    // TODO: Integrate with service
+    setActiveComponent(CONTACT_CREATION_STATE.SUBMITTING)
 
-    setActiveComponent('submitting')
+    // Contact message API POST body
+    // https://github.com/jsexton-portfolio/contact-message-service
+    const request = {
+      body: {
+        message: values.message,
+        reason: values.reason,
+        sender: {
+          alias: values.name,
+          phone: values.phone,
+          email: values.email
+        }
+      }
+    }
 
-    setTimeout(() => setActiveComponent('successful'), 2000)
+    const messageClient = contact().messages
+    messageClient
+      .create(request)
+      .then((message) => setActiveComponent(CONTACT_CREATION_STATE.SUCCESSFUL))
+      .catch(() => setActiveComponent(CONTACT_CREATION_STATE.FAILED))
   }
 
   return <Container>{currentActiveComponent()}</Container>

src/components/Contact/ContactForm/ContactForm.js

@@ -7,7 +7,7 @@ import { PortfolioButton } from '../../PortfolioButton/PortfolioButton'
 import { ContactSelect } from './ContactSelect/ContactSelect'
 import { useStyles } from './style'
 
-const reasons = ['Business', 'Question', 'Feedback', 'Other']
+const reasons = ['business', 'question', 'feedback', 'other']
 
 // Component simply represents the contact form.
 // Component is not responsible for managing anything else.
@@ -32,7 +32,9 @@ export const ContactForm = ({
     handleChange(event)
   }
 
-  const handleFormSubmit = () => {
+  const handleFormSubmit = (event) => {
+    event.preventDefault()
+
     handleSubmit()
     dispatch(formActions.clear())
   }

src/components/Contact/ContactForm/ValidatedContactForm/ValidatedContactForm.js

@@ -10,7 +10,7 @@ const contactSchema = Yup.object().shape({
   email: Yup.string().email().required(),
   phone: Yup.string(),
   reason: Yup.string().required(),
-  message: Yup.string().min(50).max(1000).required()
+  message: Yup.string().min(100).max(2000).required()
 })
 
 export const ValidatedContactForm = ({ onSubmit }) => {