From bbfd017998631a74625fa3a4308de57ee63daa15 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 18 Jan 2017 15:27:48 -0700
Subject: [PATCH] adding changes

---
 client/coral-embed-stream/src/index.js        |  7 ++-
 .../RileysAwesomeCommentBox.js                | 58 +++++++++++++++++++
 client/coral-plugin-stream/Stream.js          | 50 +++++++++++++++-
 3 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 client/coral-plugin-stream/RileysAwesomeCommentBox.js

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 <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;
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 <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;