Skip to content

Instantly share code, notes, and snippets.

@jasmo2
Created December 12, 2019 18:57
Show Gist options
  • Save jasmo2/7f5095daf2d9ba7505db67ef65b1d86e to your computer and use it in GitHub Desktop.
Save jasmo2/7f5095daf2d9ba7505db67ef65b1d86e to your computer and use it in GitHub Desktop.
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
}
}
}
}
}
}
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment