From e36fa6fdc527cf7beded6cc2a26c464e04693a1e Mon Sep 17 00:00:00 2001
From: Jinksi <ericjinks@gmail.com>
Date: Thu, 5 Oct 2017 09:08:27 +1000
Subject: [PATCH 1/3] Add <NetlifyForm />

---
 src/App.js                    |   8 +-
 src/components/NetlifyForm.js | 230 ++++++++++++++++++++++++++++++++++
 src/globalStyles.js           |  33 ++++-
 src/views/Contact.js          |  37 ++++++
 4 files changed, 306 insertions(+), 2 deletions(-)
 create mode 100644 src/components/NetlifyForm.js
 create mode 100644 src/views/Contact.js

diff --git a/src/App.js b/src/App.js
index bfe936b..9d26173 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import Helmet from 'react-helmet'
 import ScrollToTop from './components/ScrollToTop'
 import Home from './views/Home'
 import About from './views/About'
+import Contact from './views/Contact'
 import NoMatch from './views/NoMatch'
 import Nav from './components/Nav'
 import NavLink from './components/NavLink'
@@ -13,7 +14,7 @@ import GithubCorner from './components/GithubCorner'
 import ServiceWorkerNotifications from './components/ServiceWorkerNotifications'
 import globalStyles from './globalStyles'
 
-const siteTitle = 'HyperStatic'
+export const siteTitle = 'HyperStatic'
 const routes = [
   {
     title: 'Home',
@@ -25,6 +26,11 @@ const routes = [
     path: '/about/',
     comp: About,
     exact: true
+  }, {
+    title: 'Contact',
+    path: '/contact/',
+    comp: Contact,
+    exact: true
   }
 ]
 
diff --git a/src/components/NetlifyForm.js b/src/components/NetlifyForm.js
new file mode 100644
index 0000000..d8d050d
--- /dev/null
+++ b/src/components/NetlifyForm.js
@@ -0,0 +1,230 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import { stringify } from 'qs'
+import { color } from '../globalStyles'
+import { siteTitle } from '../App'
+const fetch = window.fetch
+
+class Form extends Component {
+  state = {
+    name: '',
+    email: '',
+    message: '',
+    subject: `New Submission from ${siteTitle}!`,
+    _gotcha: '',
+    disabled: false,
+    alert: '',
+    action: '/contact-us/',
+    'form-name': 'Contact'
+  }
+
+  form = null
+
+  componentDidMount () {
+    Array.from(document.querySelectorAll('.Form .Input')).forEach(input => {
+      input.addEventListener('invalid', () => {
+        console.log(input)
+        input.dataset.touched = true
+      })
+      input.addEventListener('blur', () => {
+        if (input.value !== '') input.dataset.touched = true
+      })
+    })
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault()
+    const data = {
+      name: this.state.name,
+      email: this.state.email,
+      message: this.state.message,
+      subject: this.state.subject,
+      _gotcha: this.state._gotcha,
+      'form-name': this.state['form-name']
+    }
+    this.setState({ disabled: true })
+    fetch(this.state.action + '?' + stringify(data), {
+      method: 'POST'
+    })
+      .then(res => {
+        if (res.ok) {
+          return res
+        } else {
+          throw new Error('Network error')
+        }
+      })
+      .then(res => {
+        this.setState({
+          disabled: false,
+          alert: 'Thanks for your enquiry, we will get back to you soon.',
+          name: '',
+          email: '',
+          message: '',
+          subject: `New Submission from ${window.location.host}!`,
+          _gotcha: ''
+        })
+      })
+      .catch(err => {
+        console.log(err)
+        this.setState({
+          disabled: false,
+          alert: '❗️ There is a problem, your message has not been sent, please try contacting us via email'
+        })
+      })
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      [e.target.name]: e.target.value
+    })
+  }
+
+  render () {
+    return (
+      <StyledForm
+        name={this.state['form-name']}
+        ref={(form) => { this.form = form }}
+        className='Form'
+        action={this.state.action}
+        onSubmit={this.handleSubmit}
+        data-netlify=''
+        data-netlify-honeypot='_gotcha'
+      >
+        { this.state.alert && <Alert>{this.state.alert}</Alert> }
+        <Label className='Label'>
+          <Input value={this.state.name} onChange={this.handleChange} className='Input' type='text' placeholder='Your Name' name='name' required disabled={this.state.disabled ? 'disabled' : ''} />
+          <LineGroup />
+        </Label>
+        <Label className='Label'>
+          <Input value={this.state.email} onChange={this.handleChange} className='Input' type='email' placeholder='Your Email' name='email' required disabled={this.state.disabled ? 'disabled' : ''} />
+          <LineGroup />
+        </Label>
+        <Label className='Label'>
+          <Textarea value={this.state.message} onChange={this.handleChange} className='Input' placeholder='Message' name='message' rows='10' required disabled={this.state.disabled ? 'disabled' : ''} />
+          <LineGroup />
+        </Label>
+        <Input type='text' name='_gotcha' style={{display: 'none'}} value={this.state._gotcha} onChange={this.handleChange} />
+        <Input type='hidden' name='subject' value={this.state.subject} />
+        <Input type='hidden' name='form-name' value={this.state['form-name']} />
+        <Button className='button' type='submit' value='Send' disabled={this.state.disabled ? 'disabled' : ''} />
+      </StyledForm>
+    )
+  }
+}
+
+export default Form
+
+const LineGroup = () => (
+  <Line className='Line' viewBox='0 0 40 2' preserveAspectRatio='none'>
+    <path d='M0 1 L40 1' />
+    <path d='M0 1 L40 1' className='focus' />
+    <path d='M0 1 L40 1' className='invalid' />
+    <path d='M0 1 L40 1' className='valid' />
+  </Line>
+)
+
+const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  max-width: 500px;
+  margin: 2.5rem 0;
+
+  & > * + * {
+    margin-top: 1.5rem;
+  }
+`
+const Label = styled.label`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+`
+const Line = styled.svg`
+  width: 100%;
+  height: 1px;
+  stroke: #bababa;
+  stroke-width: 2px;
+
+  & .focus,
+  & .valid,
+  & .invalid {
+    transition: all 0.2s;
+    stroke-dasharray: 0, 20;
+    stroke-dashoffset: -20;
+  }
+
+  & .focus {
+    stroke: black;
+  }
+
+  & .valid {
+    stroke: hsl(166, 72%, 40%);
+  }
+
+  & .invalid {
+    stroke: var(--col1);
+  }
+`
+const Input = styled.input`
+  font-family: inherit;
+  font-weight: 400;
+  flex-grow: 1;
+  box-sizing: border-box;
+  display: block;
+  margin: 0;
+  border: none;
+  padding: 0.5em 0;
+  line-height: 1;
+  transition: border-color 0.2s;
+  resize: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus ~ ${Line} .focus,
+  &:valid ~ ${Line} .valid,
+  &[data-touched]:invalid ~ ${Line} .invalid {
+    stroke-dasharray: 40, 0;
+    stroke-dashoffset: 0;
+  }
+
+  &[disabled]{
+    opacity: .4;
+    pointer-events: none;
+    cursor: progress;
+  }
+`
+const Textarea = Input.withComponent('textarea')
+const Alert = styled.p`
+  background: whitesmoke;
+  width: 100%;
+  padding: 2rem;
+`
+const Button = styled.input`
+  background: ${color.primary};
+  color: white;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-weight: 400;
+  letter-spacing: .15em;
+  font-size: 1.4rem;
+  display: inline-block;
+  padding: 1rem 2rem;
+  border: none;
+  transition: all .2s ease;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    color: white;
+  }
+
+  &[disabled] {
+    opacity: .4;
+    pointer-events: none;
+    cursor: progress;
+  }
+`
diff --git a/src/globalStyles.js b/src/globalStyles.js
index 13567f6..bf089ae 100644
--- a/src/globalStyles.js
+++ b/src/globalStyles.js
@@ -47,9 +47,10 @@ export default () => injectGlobal`
     color: ${color.primary};
   }
 
-  strong{
+  strong {
     font-weight: 600;
   }
+
   p {
     margin-top: 0;
     margin-bottom: 1em;
@@ -59,4 +60,34 @@ export default () => injectGlobal`
     margin: 0;
     margin-bottom: 0.5em;
   }
+
+  pre {
+    background: ${color.lightGrey};
+    line-height: 1.45;
+    font-size: 85%;
+    border-radius: 3px;
+    padding: 16px;
+  }
+
+  code {
+    font-size: 85%;
+    padding: 0.15em 0;
+    background: ${color.lightGrey};
+    border-radius: 3px;
+
+    &:before,
+    &:after {
+      letter-spacing: -0.2em;
+      content: "\00a0";
+    }
+
+    pre & {
+      font-size: inherit;
+
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+  }
 `
diff --git a/src/views/Contact.js b/src/views/Contact.js
new file mode 100644
index 0000000..60061da
--- /dev/null
+++ b/src/views/Contact.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import Helmet from 'react-helmet'
+import Page from '../components/Page'
+import PageHeader from '../components/PageHeader'
+import NetlifyForm from '../components/NetlifyForm'
+import { Container, Section } from '../components/common'
+import Marked from 'react-markdown'
+
+const content = `
+  # Example contact form
+
+  This form is setup to use Netlify's form handling:
+
+  - the form action is set to the current absolute url: \`action: '/contact/'\`
+  - a name attribute is sent with the form's data \`'form-name': 'Contact'\`
+  - netlify data attributes are added to the form \`data-netlify data-netlify-honeypot\`
+
+  Find out more in the [Netlify Docs](https://www.netlify.com/docs/form-handling/).
+`
+
+export default ({ title }) => (
+  <Page>
+    <PageHeader title={title} subtitle='<Contact />' />
+    <Section thin>
+      <Container>
+        <Marked source={content} />
+        <br />
+        <h3>{'<NetlifyForm />'}</h3>
+        <NetlifyForm />
+        <em>Note: this will only work when deployed on Netlify</em>
+      </Container>
+    </Section>
+    <Helmet>
+      <title>{title}</title>
+    </Helmet>
+  </Page>
+)

From 3db52816f4bbd1b26b89d8302770bae1dfe964cf Mon Sep 17 00:00:00 2001
From: Jinksi <ericjinks@gmail.com>
Date: Thu, 5 Oct 2017 09:13:21 +1000
Subject: [PATCH 2/3] update <NetlifyForm /> action

---
 src/components/NetlifyForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NetlifyForm.js b/src/components/NetlifyForm.js
index d8d050d..63ffcda 100644
--- a/src/components/NetlifyForm.js
+++ b/src/components/NetlifyForm.js
@@ -14,7 +14,7 @@ class Form extends Component {
     _gotcha: '',
     disabled: false,
     alert: '',
-    action: '/contact-us/',
+    action: '/contact/',
     'form-name': 'Contact'
   }
 

From 436622488cf6c0393c297ceec45ac374c35cae9e Mon Sep 17 00:00:00 2001
From: Jinksi <ericjinks@gmail.com>
Date: Thu, 5 Oct 2017 09:18:17 +1000
Subject: [PATCH 3/3] Update note

---
 src/views/Contact.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/views/Contact.js b/src/views/Contact.js
index 60061da..8263d0d 100644
--- a/src/views/Contact.js
+++ b/src/views/Contact.js
@@ -28,6 +28,8 @@ export default ({ title }) => (
         <h3>{'<NetlifyForm />'}</h3>
         <NetlifyForm />
         <em>Note: this will only work when deployed on Netlify</em>
+        <br />
+        <em>Also, this form is active and I will receive submissions</em> 😉
       </Container>
     </Section>
     <Helmet>