netliformsintegration.ts

import React, { useState } from 'react'
import get from 'ts-get'
import { useTheme } from 'emotion-theming'

import styled from '~/theme/types'
import Navbar from '~/components/organisms/Header'
import Footer from '~/components/organisms/Footer'

interface BlogPageProps {
  location: {
    search: object
    state: {
      collectionName: string
    }
  }
  data: {
    allPrismicBlogPage: {
      nodes: {
        data: {
          menu: {
            id: string
            document: any
          }
          footer: {
            document: any
          }
        }
      }
    }
  }
}
function encode(data) {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
    .join('&')
}
const Blog: React.FC<BlogPageProps> = React.memo(props => {
  const [state, setState] = useState({})
  const { colors } = useTheme()

  const data = get(props, it => it.data.allPrismicBlogPage.nodes[0].data, {})

  const { menu, footer, title, description } = data

  const handleChange = e => {
    setState({ ...state, [e.target.name]: e.target.value })
  }

  const handleSubmit = e => {
    e.preventDefault()
    const form = e.target
    const data = encode({
      'form-name': form.getAttribute('name'),
      ...state,
    })

    fetch('/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
      },
      body: data,
    })
      .then(res => {
        console.log('TCL: res', res)
        res.text()
      })
      .then(response => {
        console.log('TCL: response', response)
      })
      //navigate(form.getAttribute('action'))
      .catch(error => alert(error))
  }
  return (
    <>
      <Navbar data={menu} />
      <Page>
        <Title> {title.text} </Title>
        <Description> {description.text} </Description>
        <section className="section">
          <div className="container">
            <div className="content">
              <h1>Contact</h1>
              <form
                name="contact"
                method="post"
                action="/contact/thanks/"
                data-netlify="true"
                data-netlify-honeypot="bot-field"
                onSubmit={handleSubmit}
              >
                {/* The `form-name` hidden field is required to support form submissions without JavaScript */}
                <input type="hidden" name="form-name" value="contact" />
                <div hidden>
                  <label>
                    Don’t fill this out:{' '}
                    <input name="bot-field" onChange={handleChange} />
                  </label>
                </div>
                <div className="field">
                  <label className="label" htmlFor={'name'}>
                    Your name
                  </label>
                  <div className="control">
                    <input
                      className="input"
                      type={'text'}
                      name={'name'}
                      onChange={handleChange}
                      id={'name'}
                      required={true}
                    />
                  </div>
                </div>
                <div className="field">
                  <label className="label" htmlFor={'email'}>
                    Email
                  </label>
                  <div className="control">
                    <input
                      className="input"
                      type={'email'}
                      name={'email'}
                      onChange={handleChange}
                      id={'email'}
                      required={true}
                    />
                  </div>
                </div>
                <div className="field">
                  <label className="label" htmlFor={'message'}>
                    Message
                  </label>
                  <div className="control">
                    <textarea
                      className="textarea"
                      name={'message'}
                      onChange={handleChange}
                      id={'message'}
                      required={true}
                    />
                  </div>
                </div>
                <div className="field">
                  <button className="button is-link" type="submit">
                    Send
                  </button>
                </div>
              </form>
            </div>
          </div>
        </section>
      </Page>
      <Footer backgroundColor={colors.gallery} data={footer} />
    </>
  )
})

export default Blog

const Page = styled.div`
  padding: 0 28rem;
  background-color: ${({ theme }) => theme.colors.gallery};
  padding-top: 14.4rem;
  min-height: calc(100vh - 6.4rem);
`

const Title = styled.h1`
  font-size: 3.6rem;
  line-height: 4.2rem;
`

const Description = styled.p`
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-top: 2.4rem;
  color: ${({ theme }) => theme.colors.doveGray};
`

export const pageQuery = graphql`
  query BlogQuery {
    allPrismicBlogPage {
      nodes {
        data {
          menu {
            document {
              ...MenuCollections
            }
          }
          description {
            text
          }
          title {
            text
          }
          footer {
            document {
              ...Footer
            }
          }
        }
      }
    }
  }
`