Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import * as React from 'react';
import { graphql } from 'react-apollo';
import { LoadingIndicator, Post, Section } from 'components';
import POST_QUERY from './post.graphql';
import COMMENT_MUTATION from './comments.graphql';
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 (
<Section
alignItems="center"
flexDirection="column"
pad={{ vertical: 'large', horizontal: 'small' }}
full={{ vertical: true }}
backgroundColor="#f5f5f5"
>
{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}
/>
}
</Section>
);
}
}
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));
// 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/post.graphql.ts
import gql from 'graphql-tag';
export default gql`
query Post($id: ID!) {
post(id: $id) {
id: _id
title
image
content
comments {
body
author
}
}
}
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment