35 | );
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/CashayBook.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import RecentPosts from './RecentPosts';
3 | import LeastRecentPosts from './LeastRecentPosts';
4 | import LatestPostComments from './LatestPostComments';
5 | import {cashay} from 'cashay';
6 | import {connect} from 'react-redux';
7 |
8 | const queryPostCount = `
9 | query {
10 | postCount: getPostCount
11 | }`;
12 |
13 | const mutationHandlers = {
14 | createPost(optimisticVariables, docFromServer, currentResponse, getEntities, invalidate) {
15 | if (optimisticVariables) {
16 | return currentResponse.postCount++;
17 | }
18 | return docFromServer.createPost.postCount;
19 | },
20 | removePostById(optimisticVariables, docFromServer, currentResponse) {
21 | if (optimisticVariables) {
22 | return currentResponse.postCount--;
23 | }
24 | currentResponse.postCount = docFromServer.removePostById.postCount;
25 | return currentResponse;
26 | }
27 | };
28 | const cashayOptions = {
29 | component: 'CashayBook',
30 | mutationHandlers
31 | };
32 | const mapStateToProps = () => ({cashay: cashay.query(queryPostCount, cashayOptions)});
33 |
34 | @connect(mapStateToProps)
35 | export default class CashayBook extends Component {
36 | render() {
37 | const {postCount} = this.props.cashay.data;
38 | const {isComplete} = this.props.cashay;
39 | return (
40 |
41 |
42 |
Welcome to the Cashay book!
43 | {isComplete ? `We currently have ${postCount} posts!` : "LOADING AHH I CANT WAIT IM SO EXCITED"}
44 |
47 |
8 |
{comment.karma} - {comment.content}
9 |
73 |
{comments.map(comment => )}
74 |
75 |
14 | New Comment:
15 | Post!
17 |
18 | )
19 | }
20 |
21 | handleChange = event => {
22 | this.setState({content: event.target.value.substr(0, 140)});
23 | }
24 |
25 | handleSubmit = () => {
26 | const variables = {
27 | content: this.state.content,
28 | postId: this.props.postId,
29 | _id: uuid.v4()
30 | };
31 | this.setState({content: ''});
32 | cashay.mutate('createComment', {variables, components: {comments: variables.postId}})
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/LatestPostComments.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {cashay} from 'cashay';
3 | import {connect} from 'react-redux';
4 | import Comment from './Comment';
5 | const queryPostCount = `
6 | query {
7 | latestPostId: getLatestPostId
8 | latestPostComments: getCommentsByPostId(postId: $postId) {
9 | _id,
10 | content,
11 | karma
12 | }
13 | }`;
14 |
15 | const cashayOptions = {
16 | component: 'LatestPostComments',
17 | variables: {
18 | postId: (response, cashayDataState) => response.latestPostId
19 | }
20 | };
21 | const mapStateToProps = (state, props) => {
22 | return {
23 | cashayResponse: cashay.query(queryPostCount, cashayOptions)
24 |
25 | }
26 | };
27 |
28 | @connect(mapStateToProps)
29 | export default class LatestPostComments extends Component {
30 | render() {
31 | const {isComplete} = this.props.cashayResponse;
32 | const {latestPostId, latestPostComments} = this.props.cashayResponse.data;
33 | return (
34 |
35 |
36 |
37 |
38 |
LATEST POST COMMENTS
39 | (Example of a multi-part query)
40 |
41 |
Latest post ID: {latestPostId}
42 |
Comments for post
43 |
{latestPostComments.map(comment => )}
44 |
69 |
LEAST RECENT POSTS
70 |
Create your very own post!
71 |
{leastRecentPosts.map(post => )}
72 | {leastRecentPosts.BOF ? null :
73 |
Get 2 More
74 | }
75 |
15 |
16 | {post.title}
17 | Try to Delete Me
18 |
19 | {showComments ?
: null}
20 |
21 | {showComments ? 'Hide Comments' : 'Show Comments'}
22 |
23 |
33 |
35 | , document.getElementById('root')
36 | );
37 |
38 | // use this for graphiql
39 | // render(
65 |
RECENT POSTS
66 |
Create your very own post!
67 |
{recentPosts.map(post => )}
68 | {recentPosts.EOF ? null :
69 |
Get 2 More
70 | }
71 |