form

form.js

import React, { useState } from 'react';
import { submitForm } from '../../store/actions/submitForm'
import Success from '../common/Success';

const ContactForm = () => {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')
  const [isAnimationHidden, showAnimation] = useState(true)
  const [counter, setCounter] = useState(null)
  const handleSubmitForm = e => {
    e.preventDefault()
    showAnimation(false)
    const messagePayload = {
      name,
      email,
      message,
    }    
    Promise.all([
      submitForm(messagePayload)
    ]).then(res => {  
      console.debug('res', res)
      setTimeout(() => {
        showAnimation(true)
      }, 11000)
    })
  }
  console.debug('')
  return (
    <section className="contact-section">
      {
        isAnimationHidden
          ? (
            <form
              name="contact"
              data-netlify="true"
              data-netlify-honeypot="bot-field"
              method="post"
              onSubmit={handleSubmitForm}
            >
              <p hidden>
              <label>
                Don’t fill this out:{" "}
                <input name="bot-field" onChange={null} />
              </label>
            </p>
              <input type="hidden" name="form-name" value="contact" />
              <div className="fields">
                <div className="field half">
                  <label htmlFor="name">Name</label>
                  <input onChange={e => setName(e.target.value)} type="text" name="name" id="name" />
                </div>
                <div className="field half">
                  <label htmlFor="email">Email</label>
                  <input onChange={e => setEmail(e.target.value)} type="text" name="email" id="email" />
                </div>
                <div className="field">
                  <label htmlFor="message">Message</label>
                  <textarea onChange={e => setMessage(e.target.value)} name="message" id="message" rows="5" />
                </div>
              </div>
              <ul className="actions">
                <li>
                  <button className="button submit" type="submit">Send</button>
                </li>
              </ul>
            </form>
          ) : <Success />
      }
    </section>
  )
}

export default ContactForm;