diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js
index c8982ffc5..31185457c 100644
--- a/client/coral-embed-stream/src/index.js
+++ b/client/coral-embed-stream/src/index.js
@@ -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(
diff --git a/client/coral-plugin-stream/RileysAwesomeCommentBox.js b/client/coral-plugin-stream/RileysAwesomeCommentBox.js
new file mode 100644
index 000000000..6ccd028ba
--- /dev/null
+++ b/client/coral-plugin-stream/RileysAwesomeCommentBox.js
@@ -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
+
+ POST
+
;
+ }
+}
+
+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;
diff --git a/client/coral-plugin-stream/Stream.js b/client/coral-plugin-stream/Stream.js
index 14187c01c..650a444b0 100644
--- a/client/coral-plugin-stream/Stream.js
+++ b/client/coral-plugin-stream/Stream.js
@@ -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 ...
;
+ const {data} = this.props;
+ return
+
Login or whatever
+ {
+ data.loading
+ ? 'loading!'
+ :
+
+
Asset ID: {data.asset.id}
+
+ {
+ data.asset.comments.map(comment => {
+ return
+ {comment.body} [{comment.id}]
+
+ {
+ comment.replies.map(reply => {
+ return {reply.body} ;
+ })
+ }
+
+ ;
+ })
+ }
+
+
+ }
+
;
}
}
// 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;