Created
February 18, 2017 18:49
-
-
Save RyanCCollins/2a752b3d53dcd546dca054a1fbd37737 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// From client/containers/BlogPost/comments.graphql.ts | |
import gql from 'graphql-tag'; | |
export default gql` | |
mutation CreateComment($post: ID!, $body: String, $author: String) { | |
createComment(data:{ post: $post, body: $body, author: $author }) | |
} | |
`; | |
// From client/containers/BlogPost/index.tsx | |
import * as React from 'react'; | |
import { graphql } from 'react-apollo'; | |
import { LoadingIndicator, Post } from 'components'; | |
import POST_QUERY from './post.graphql'; | |
import COMMENT_MUTATION from './comments.graphql'; | |
import { BlogLayout } from './styles'; | |
interface IPostComments { | |
body: string; | |
author: string; | |
} | |
interface IPost { | |
id: string; | |
tags: Array<{ name: string }>; | |
title: string; | |
image: string; | |
content: string; | |
comments: IPostComments[]; | |
} | |
interface IBlogProps extends React.Props<any> { | |
loading: boolean; | |
error?: { message: string }; | |
post?: IPost; | |
submitComment?: Function; | |
refetch: Function; | |
params: { | |
postId: String; | |
}; | |
}; | |
type IBlogPropTypes = IBlogProps; | |
class Blog extends React.Component<IBlogPropTypes, any> { | |
constructor() { | |
super(); | |
this.handleAddingComment = this.handleAddingComment.bind(this); | |
this.handleChangingCommentInput = this.handleChangingCommentInput.bind(this); | |
this.handleEnterKeyUp = this.handleEnterKeyUp.bind(this); | |
this.state = { | |
input: '', | |
}; | |
} | |
private handleChangingCommentInput({ target }) { | |
this.setState({ | |
input: target.value, | |
}); | |
} | |
private handleAddingComment() { | |
const { input } = this.state; | |
const author = 'Unknown'; | |
const { postId } = this.props.params; | |
this.props.submitComment({ | |
body: input, | |
author, | |
post: postId, | |
}).then(() => { | |
this.props.refetch(); | |
alert('Sorry, but this is just a demonstration. Please don\'t hate us'); | |
this.setState({ | |
input: '', | |
}); | |
}); | |
} | |
private handleEnterKeyUp(e) { | |
if (e.keyCode === 13) { | |
e.preventDefault(); | |
this.handleAddingComment(); | |
} | |
} | |
public render() { | |
const { loading, post, error } = this.props; | |
return ( | |
<BlogLayout> | |
{error && <p>{error.message}</p>} | |
<LoadingIndicator isLoading={loading} /> | |
{post && | |
<Post | |
comment={{ | |
input: this.state.input, | |
onChange: this.handleChangingCommentInput, | |
onSubmit: this.handleAddingComment, | |
onKeyUp: this.handleEnterKeyUp, | |
}} | |
{...post} | |
/> | |
} | |
</BlogLayout> | |
); | |
} | |
} | |
const withData = graphql(POST_QUERY, { | |
skip: ({ params }) => !params || (params && !params.postId), | |
options: ({ params }) => ({ | |
variables: { | |
id: params.postId, | |
}, | |
}), | |
props: ({ data: { loading, post, error, refetch } }) => ({ | |
loading, | |
post, | |
error, | |
refetch, | |
}), | |
}); | |
const withMutation = graphql(COMMENT_MUTATION, { | |
props: ({ mutate }) => ({ | |
submitComment: mutate, | |
}), | |
}); | |
export default withData(withMutation(Blog)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment