Merge

client/coral-embed-stream/src/Comment.js

@@ -9,12 +9,12 @@
 import React, {PropTypes} from 'react';
 import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
 
-// import AuthorName from '../../coral-plugin-author-name/AuthorName';
-import Content from '../../coral-plugin-commentcontent/CommentContent';
-import PubDate from '../../coral-plugin-pubdate/PubDate';
+import AuthorName from 'coral-plugin-author-name/AuthorName';
+import Content from 'coral-plugin-commentcontent/CommentContent';
+import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
-import FlagComment from '../../coral-plugin-flags/FlagComment';
-import LikeButton from '../../coral-plugin-likes/LikeButton';
+import FlagComment from 'coral-plugin-flags/FlagComment';
+import LikeButton from 'coral-plugin-likes/LikeButton';
 
 const getAction = (type, comment) => comment.actions.filter((a) => a.type === type)[0];
 
@@ -26,6 +26,7 @@ class Comment extends React.Component {
   }
 
   static propTypes = {
+    refetch: PropTypes.func.isRequired,
     showSignInDialog: PropTypes.func.isRequired,
     postAction: PropTypes.func.isRequired,
     deleteAction: PropTypes.func.isRequired,
@@ -62,10 +63,12 @@ class Comment extends React.Component {
   render () {
     const {
       comment,
+      parentId,
       currentUser,
       asset,
       depth,
       postItem,
+      refetch,
       addNotification,
       showSignInDialog,
       postAction,
@@ -81,7 +84,7 @@ class Comment extends React.Component {
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}>
         <hr aria-hidden={true} />
-        {/* <AuthorName
+        <AuthorName
           author={comment.user}
           addNotification={this.props.addNotification}
           id={comment.id}
@@ -89,9 +92,7 @@ class Comment extends React.Component {
           postAction={this.props.postAction}
           showSignInDialog={this.props.showSignInDialog}
           deleteAction={this.props.deleteAction}
-          addItem={this.props.addItem}
-          updateItem={this.props.updateItem}
-          currentUser={currentUser}/>*/}
+          currentUser={currentUser}/>
         <PubDate created_at={comment.created_at} />
         <Content body={comment.body} />
 
@@ -100,10 +101,9 @@ class Comment extends React.Component {
           ? <div className="commentActionsLeft">
               <ReplyButton
                 onClick={() => {
-                  console.log('reply button click');
                   this.setState({replyBoxVisible: !this.state.replyBoxVisible});
                 }}
-                parentCommentId={comment.id}
+                parentCommentId={parentId || comment.id}
                 currentUserId={currentUser.id}
                 banned={false} />
               <LikeButton
@@ -135,17 +135,23 @@ class Comment extends React.Component {
         {
           this.state.replyBoxVisible
           ? <ReplyBox
-            parentId={comment.id}
-            addNotification={addNotification}
-            authorId={currentUser.id}
-            postItem={postItem}
-            assetId={asset.id} />
+              replyPostedHandler={() => {
+                console.log('replyPostedHandler');
+                this.setState({replyBoxVisible: false});
+                refetch();
+              }}
+              parentId={parentId || comment.id}
+              addNotification={addNotification}
+              authorId={currentUser.id}
+              postItem={postItem}
+              assetId={asset.id} />
           : null
         }
         {
           comment.replies &&
           comment.replies.map(reply => {
             return <Comment
+              refetch={refetch}
               addNotification={addNotification}
               parentId={comment.id}
               postItem={postItem}

client/coral-embed-stream/src/Embed.js

@@ -50,12 +50,43 @@ class Embed extends Component {
     }).isRequired
   }
 
+  componentDidMount () {
+
+    // stream id, logged in user, settings
+
+    // Set up messaging between embedded Iframe an parent component
+
+    // this.props.getStream(path || window.location);
+    // this.path = window.location.href.split('#')[0];
+    //
+
+    pym.sendMessage('childReady');
+
+    pym.onMessage('DOMContentLoaded', hash => {
+      const commentId = hash.replace('#', 'c_');
+      let count = 0;
+      const interval = setInterval(() => {
+        if (document.getElementById(commentId)) {
+          window.clearInterval(interval);
+          pym.scrollParentToChildEl(commentId);
+        }
+
+        if (++count > 100) { // ~10 seconds
+          // give up waiting for the comments to load.
+          // it would be weird for the page to jump after that long.
+          window.clearInterval(interval);
+        }
+      }, 100);
+    });
+
+  }
+
   componentWillReceiveProps (nextProps) {
     const {loadAsset} = this.props
     if(!isEqual(nextProps.data.asset, this.props.data.asset)) {
       loadAsset(nextProps.data.asset)
     }
- }
+  }
 
   render () {
     const {activeTab} = this.state;
@@ -89,6 +120,7 @@ class Embed extends Component {
                        {
                          user
                          ? <CommentBox
+                            refetch={refetch}
                             addNotification={this.props.addNotification}
                             postItem={this.props.postItem}
                             appendItemArray={this.props.appendItemArray}
@@ -173,5 +205,3 @@ export default compose(
   deleteAction,
   queryStream
 )(Embed);
-
-

client/coral-embed-stream/src/Pym.js

@@ -0,0 +1,3 @@
+import Pym from 'pym.js';
+
+export default new Pym.Child({polling: 100});

client/coral-embed-stream/src/Stream.js

@@ -1,12 +1,23 @@
 import React, {PropTypes} from 'react';
 import Comment from './Comment';
 
-const Stream = ({comments, currentUser, asset, postItem, addNotification, postAction, deleteAction, showSignInDialog}) => {
+const Stream = ({
+  comments,
+  currentUser,
+  asset,
+  postItem,
+  addNotification,
+  postAction,
+  deleteAction,
+  showSignInDialog,
+  refetch
+}) => {
   return (
     <div>
       {
         comments.map(comment => {
           return <Comment
+            refetch={refetch}
             addNotification={addNotification}
             depth={0}
             postItem={postItem}
@@ -24,6 +35,7 @@ const Stream = ({comments, currentUser, asset, postItem, addNotification, postAc
 };
 
 Stream.propTypes = {
+  refetch: PropTypes.func.isRequired,
   addNotification: PropTypes.func.isRequired,
   postItem: PropTypes.func.isRequired,
   asset: PropTypes.object.isRequired,

client/coral-embed-stream/src/graphql/queries/index.js

@@ -1,9 +1,8 @@
 import {graphql} from 'react-apollo';
 import STREAM_QUERY from './streamQuery.graphql';
-import Pym from 'pym.js';
+import pym from '../../Pym';
 
-const pym = new Pym.Child({polling: 100});
-let url = pym.parentUrl || 'http://localhost:3000/';
+let url = pym.parentUrl.split('#')[0] || 'http://localhost:3000/';
 
 export const queryStream = graphql(STREAM_QUERY, {
   options: {variables: {asset_url: url}}

client/coral-embed-stream/src/graphql/queries/streamQuery.graphql

@@ -2,9 +2,13 @@
 fragment commentView on Comment {
     id
     body
+    created_at
     user {
         id
         name: displayName
+        settings {
+          bio
+        }
     }
     actions {
         type: action_type

client/coral-plugin-author-name/AuthorName.js

@@ -36,7 +36,7 @@ export default class AuthorName extends Component {
         onMouseOver={this.handleMouseOver}
         onMouseLeave={this.handleMouseLeave}
       >
-        {author && author.displayName}
+        {author && author.name}
         { showTooltip && <Tooltip>
             <div className={`${packagename}-bio`}>
               {author.settings.bio}

client/coral-plugin-commentbox/CommentBox.js

@@ -11,6 +11,7 @@ class CommentBox extends Component {
 
     // updateItem: PropTypes.func,
     // comments: PropTypes.array,
+    replyPostedHandler: PropTypes.func,
     postItem: PropTypes.func.isRequired,
     assetId: PropTypes.string.isRequired,
     parentId: PropTypes.string,
@@ -31,6 +32,7 @@ class CommentBox extends Component {
       // child_id,
       // updateItem,
       // appendItemArray,
+      replyPostedHandler,
       postItem,
       assetId,
       parentId,
@@ -45,8 +47,6 @@ class CommentBox extends Component {
       parent_id: parentId
     };
 
-    console.log('CommentBox.parentId', parentId);
-
     // let related;
     // let parent_type;
     // if (parent_id) {
@@ -78,6 +78,10 @@ class CommentBox extends Component {
           // appendItemArray(parent_id || id, related, commentId, !parent_id, parent_type);
           addNotification('success', 'Your comment has been posted.');
         }
+
+        if (replyPostedHandler) {
+          replyPostedHandler();
+        }
       })
     .catch((err) => console.error(err));
     this.setState({body: ''});

client/coral-plugin-replies/ReplyBox.js

@@ -3,9 +3,10 @@ import CommentBox from '../coral-plugin-commentbox/CommentBox';
 
 const name = 'coral-plugin-replies';
 
-const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentId}) => (
+const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentId, replyPostedHandler}) => (
   <div className={`${name}-textarea`} style={styles && styles.container}>
     <CommentBox
+      replyPostedHandler={replyPostedHandler}
       parentId={parentId}
       addNotification={addNotification}
       authorId={authorId}
@@ -16,6 +17,7 @@ const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentI
 );
 
 ReplyBox.propTypes = {
+  replyPostedHandler: PropTypes.func,
   parentId: PropTypes.string,
   addNotification: PropTypes.func.isRequired,
   authorId: PropTypes.string.isRequired,

graph/typeDefs.js

@@ -61,6 +61,9 @@ type Comment {
 
   # the current status of a comment.
   status: COMMENT_STATUS
+
+  # the time when the comment was created
+  created_at: String!
 }
 
 enum ITEM_TYPE {