2017-03-12 07:33:01 +00:00
|
|
|
import { gql, graphql } from 'react-apollo'
|
2017-01-22 12:27:06 +00:00
|
|
|
|
|
|
|
function Submit ({ createPost }) {
|
|
|
|
function handleSubmit (e) {
|
|
|
|
e.preventDefault()
|
|
|
|
|
|
|
|
let title = e.target.elements.title.value
|
|
|
|
let url = e.target.elements.url.value
|
|
|
|
|
|
|
|
if (title === '' || url === '') {
|
|
|
|
window.alert('Both fields are required.')
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
|
|
|
|
// prepend http if missing from url
|
|
|
|
if (!url.match(/^[a-zA-Z]+:\/\//)) {
|
|
|
|
url = `http://${url}`
|
|
|
|
}
|
|
|
|
|
|
|
|
createPost(title, url)
|
|
|
|
|
|
|
|
// reset form
|
|
|
|
e.target.elements.title.value = ''
|
|
|
|
e.target.elements.url.value = ''
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
|
|
<h1>Submit</h1>
|
|
|
|
<input placeholder='title' name='title' />
|
|
|
|
<input placeholder='url' name='url' />
|
|
|
|
<button type='submit'>Submit</button>
|
|
|
|
<style jsx>{`
|
|
|
|
form {
|
|
|
|
border-bottom: 1px solid #ececec;
|
|
|
|
padding-bottom: 20px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
h1 {
|
|
|
|
font-size: 20px;
|
|
|
|
}
|
|
|
|
input {
|
|
|
|
display: block;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
`}</style>
|
|
|
|
</form>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const createPost = gql`
|
|
|
|
mutation createPost($title: String!, $url: String!) {
|
|
|
|
createPost(title: $title, url: $url) {
|
|
|
|
id
|
|
|
|
title
|
|
|
|
votes
|
|
|
|
url
|
|
|
|
createdAt
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
|
|
|
|
|
|
|
export default graphql(createPost, {
|
|
|
|
props: ({ mutate }) => ({
|
|
|
|
createPost: (title, url) => mutate({
|
|
|
|
variables: { title, url },
|
|
|
|
updateQueries: {
|
|
|
|
allPosts: (previousResult, { mutationResult }) => {
|
|
|
|
const newPost = mutationResult.data.createPost
|
|
|
|
return Object.assign({}, previousResult, {
|
|
|
|
// Append the new post
|
2017-01-27 16:06:17 +00:00
|
|
|
allPosts: [newPost, ...previousResult.allPosts]
|
2017-01-22 12:27:06 +00:00
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})(Submit)
|