adding changes

This commit is contained in:
Riley Davis
2017-01-18 15:27:48 -07:00
parent 5f63af8140
commit bbfd017998
3 changed files with 111 additions and 4 deletions
+6 -1
View File
@@ -6,7 +6,12 @@ import {ApolloProvider} from 'react-apollo';
import Stream from '../../coral-plugin-stream/Stream';
const client = new ApolloClient({
networkInterface: createNetworkInterface({uri: '/api/v1/graph/ql'})
networkInterface: createNetworkInterface({
uri: '/api/v1/graph/ql',
opts: {
credentials: 'same-origin'
}
})
});
render(
@@ -0,0 +1,58 @@
import React, {Component} from 'react';
import {graphql} from 'react-apollo';
import gql from 'graphql-tag';
export class RileysAwesomeCommentBox extends Component {
postComment() {
console.log(this.props);
console.log('postComment', this.props.asset_id);
this.props.mutate({
variables: {
asset_id: this.props.asset_id,
body: this.textarea.value,
parent_id: null
}
}).then(({data}) => {
console.log('it workt');
console.log(data);
});
}
render() {
return <div>
<textarea ref={textarea => this.textarea = textarea}></textarea>
<button onClick={this.postComment.bind(this)}>POST</button>
</div>;
}
}
const postComment = gql`
fragment commentView on Comment {
id
body
user {
name: displayName
}
actions {
type: action_type
count
current: current_user {
id
created_at
}
}
}
mutation CreateComment ($asset_id: ID!, $parent_id: ID, $body: String!) {
createComment(asset_id:$asset_id, parent_id:$parent_id, body:$body) {
...commentView
}
}
`;
const RileysAwesomeCommentBoxWithData = graphql(
postComment
)(RileysAwesomeCommentBox);
export default RileysAwesomeCommentBoxWithData;
+47 -3
View File
@@ -1,8 +1,10 @@
import React, {Component} from 'react';
import {graphql} from 'react-apollo';
import gql from 'graphql-tag';
import {fetchSignIn} from 'coral-framework/actions/auth';
import RileysAwesomeCommentBox from 'coral-plugin-stream/RileysAwesomeCommentBox';
const assetID = '';
const assetID = '6187a94b-0b6d-4a96-ac6b-62b529cd8410';
// MyComponent is a "presentational" or apollo-unaware component,
// It could be a simple React class:
@@ -12,14 +14,46 @@ class Stream extends Component {
super(props);
}
logMeIn() {
fetchSignIn({email: 'your@example.com', password: 'yourmom'})(() => {});
}
render() {
console.log(this.props);
return <div>...</div>;
const {data} = this.props;
return <div>
<button onClick={this.logMeIn.bind(this)}>Login or whatever</button>
{
data.loading
? 'loading!'
: <div>
<RileysAwesomeCommentBox asset_id={data.asset.id} />
<p>Asset ID: {data.asset.id}</p>
<ul>
{
data.asset.comments.map(comment => {
return <li key={comment.id}>
{comment.body} [{comment.id}]
<ul>
{
comment.replies.map(reply => {
return <li key={reply.id}>{reply.body}</li>;
})
}
</ul>
</li>;
})
}
</ul>
</div>
}
</div>;
}
}
// Initialize GraphQL queries or mutations with the `gql` tag
const StreamQuery = gql`fragment commentView on Comment {
id
body
user {
name: displayName
@@ -36,6 +70,7 @@ const StreamQuery = gql`fragment commentView on Comment {
query AssetQuery($asset_id: ID!) {
asset(id: $asset_id) {
id
title
url
comments {
@@ -47,8 +82,17 @@ query AssetQuery($asset_id: ID!) {
}
}`;
// We then can use `graphql` to pass the query results returned by MyQuery
// to MyComponent as a prop (and update them as the results change)
const StreamWithData = graphql(StreamQuery, {options: {variables: {asset_id: assetID}}})(Stream);
const StreamWithData = graphql(
StreamQuery, {
options: {
variables: {
asset_id: assetID
}
}
}
)(Stream);
export default StreamWithData;