Merge branch 'master' of github.com:coralproject/talk into comment-component

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

@@ -43,6 +43,7 @@ class Comment extends React.Component {
     postLike: PropTypes.func.isRequired,
     deleteAction: PropTypes.func.isRequired,
     parentId: PropTypes.string,
+    highlighted: PropTypes.string,
     addNotification: PropTypes.func.isRequired,
     postItem: PropTypes.func.isRequired,
     depth: PropTypes.number.isRequired,
@@ -87,6 +88,7 @@ class Comment extends React.Component {
       addNotification,
       showSignInDialog,
       postLike,
+      highlighted,
       postFlag,
       postDontAgree,
       loadMore,
@@ -98,10 +100,12 @@ class Comment extends React.Component {
     const like = getActionSummary('LikeActionSummary', comment);
     const flag = getActionSummary('FlagActionSummary', comment);
     const dontagree = getActionSummary('DontAgreeActionSummary', comment);
+    let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
+    commentClass += highlighted === comment.id ? ' highlighted-comment' : '';
 
     return (
       <div
-        className={parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`}
+        className={commentClass}
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}>
         <hr aria-hidden={true} />
@@ -163,6 +167,7 @@ class Comment extends React.Component {
               postItem={postItem}
               depth={depth + 1}
               asset={asset}
+              highlighted={highlighted}
               currentUser={currentUser}
               postLike={postLike}
               postFlag={postFlag}

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

@@ -31,12 +31,13 @@ import ChangeUsernameContainer from '../../coral-sign-in/containers/ChangeUserna
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
 import RestrictedContent from 'coral-framework/components/RestrictedContent';
 import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
+import Comment from './Comment';
 import LoadMore from './LoadMore';
 import NewCount from './NewCount';
 
 class Embed extends Component {
 
-  state = {activeTab: 0, showSignInDialog: false};
+  state = {activeTab: 0, showSignInDialog: false, activeReplyBox: ''};
 
   changeTab = (tab) => {
 
@@ -59,23 +60,6 @@ class Embed extends Component {
 
   componentDidMount () {
     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) {
@@ -85,11 +69,29 @@ class Embed extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if(!isEqual(prevProps.data.comment, this.props.data.comment)) {
+
+      // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
+      setTimeout(()=>pym.scrollParentToChildEl(`c_${this.props.data.comment.id}`), 0);
+    }
+  }
+
+  setActiveReplyBox (reactKey) {
+    if (!this.props.currentUser) {
+      const offset = document.getElementById(`c_${reactKey}`).getBoundingClientRect().top - 75;
+      this.props.showSignInDialog(offset);
+    } else {
+      this.setState({activeReplyBox: reactKey});
+    }
+  }
+
   render () {
     const {activeTab} = this.state;
     const {closedAt, countCache = {}} = this.props.asset;
-    const {loading, asset, refetch} = this.props.data;
+    const {loading, asset, refetch, comment} = this.props.data;
     const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
+    const highlightedComment = comment && comment.parent ? comment.parent : comment;
 
     const openStream = closedAt === null;
 
@@ -159,6 +161,28 @@ class Embed extends Component {
             }
             {!loggedIn && <SignInContainer requireEmailConfirmation={asset.settings.requireEmailConfirmation} offset={signInOffset}/>}
             {loggedIn &&  user && <ChangeUsernameContainer loggedIn={loggedIn} offset={signInOffset} user={user} />}
+            {
+              highlightedComment &&
+              <Comment
+                refetch={refetch}
+                setActiveReplyBox={this.setActiveReplyBox}
+                activeReplyBox={this.state.activeReplyBox}
+                addNotification={addNotification}
+                depth={0}
+                postItem={this.props.postItem}
+                asset={asset}
+                currentUser={user}
+                highlighted={comment.id}
+                postLike={this.props.postLike}
+                postFlag={this.props.postFlag}
+                postDontAgree={this.props.postDontAgree}
+                loadMore={this.props.loadMore}
+                deleteAction={this.props.deleteAction}
+                showSignInDialog={this.props.showSignInDialog}
+                key={highlightedComment.id}
+                reactKey={highlightedComment.id}
+                comment={highlightedComment} />
+            }
             <NewCount
               commentCount={asset.commentCount}
               countCache={countCache[asset.id]}
@@ -171,6 +195,8 @@ class Embed extends Component {
               refetch={refetch}
               addNotification={this.props.addNotification}
               postItem={this.props.postItem}
+              setActiveReplyBox={this.setActiveReplyBox}
+              activeReplyBox={this.state.activeReplyBox}
               asset={asset}
               currentUser={user}
               postLike={this.props.postLike}

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

@@ -5,7 +5,6 @@ import {NEW_COMMENT_COUNT_POLL_INTERVAL} from 'coral-framework/constants/comment
 class Stream extends React.Component {
 
   static propTypes = {
-    refetch: PropTypes.func.isRequired,
     addNotification: PropTypes.func.isRequired,
     postItem: PropTypes.func.isRequired,
     asset: PropTypes.object.isRequired,
@@ -19,7 +18,6 @@ class Stream extends React.Component {
   constructor(props) {
     super(props);
     this.state = {activeReplyBox: '', countPoll: null};
-    this.setActiveReplyBox = this.setActiveReplyBox.bind(this);
   }
 
   componentDidMount() {
@@ -42,15 +40,6 @@ class Stream extends React.Component {
     clearInterval(this.state.countPoll);
   }
 
-  setActiveReplyBox (reactKey) {
-    if (!this.props.currentUser) {
-      const offset = document.getElementById(`c_${reactKey}`).getBoundingClientRect().top - 75;
-      this.props.showSignInDialog(offset);
-    } else {
-      this.setState({activeReplyBox: reactKey});
-    }
-  }
-
   render () {
     const {
       comments,
@@ -63,8 +52,7 @@ class Stream extends React.Component {
       postDontAgree,
       loadMore,
       deleteAction,
-      showSignInDialog,
-      refetch
+      showSignInDialog
     } = this.props;
 
     return (
@@ -72,9 +60,8 @@ class Stream extends React.Component {
         {
           comments.map(comment =>
             <Comment
-              refetch={refetch}
-              setActiveReplyBox={this.setActiveReplyBox}
-              activeReplyBox={this.state.activeReplyBox}
+              setActiveReplyBox={this.props.setActiveReplyBox}
+              activeReplyBox={this.props.activeReplyBox}
               addNotification={addNotification}
               depth={0}
               postItem={postItem}

client/coral-embed-stream/style/default.css

@@ -180,6 +180,11 @@ hr {
   float: right;
 }
 
+.highlighted-comment {
+  padding-left: 10px;
+  border-left: 3px solid rgb(35,118,216);
+}
+
 /* Tag Labels */
 
 .coral-plugin-tag-label {

client/coral-embed/index.js

@@ -58,10 +58,11 @@
 
     // ensure el has an id, as pym can't directly accept the HTMLElement
     if ( ! el.id) {el.id = '_' + String(Math.random());}
-    var asset = opts.asset || window.location;
+    var asset = opts.asset || window.location.href.split('#')[0];
+    var comment = window.location.hash.slice(1);
     var pymParent = new pym.Parent(
       el.id,
-      buildStreamIframeUrl(opts.talk, asset),
+      buildStreamIframeUrl(opts.talk, asset, comment),
       {
         title: opts.title,
         asset_url: asset,
@@ -76,14 +77,18 @@
   return Coral;
 
   // build the URL to load in the pym iframe
-  function buildStreamIframeUrl(talkBaseUrl, asset) {
-    var iframeUrl = [
+  function buildStreamIframeUrl(talkBaseUrl, asset, comment) {
+    var iframeArray = [
       talkBaseUrl,
       (talkBaseUrl.match(/\/$/) ? '' : '/'), // make sure no double-'/' if opts.talk already ends with '/'
       'embed/stream?asset_url=',
       encodeURIComponent(asset)
-    ].join('');
-    return iframeUrl;
+    ];
+    
+    if (comment) {
+      iframeArray.push(`&comment_id=${comment}`);
+    }
+    return iframeArray.join('');
   }
 
   // Set up postMessage listeners/handlers on the pymParent

client/coral-framework/graphql/queries/commentQuery.graphql

@@ -0,0 +1,13 @@
+#import "../fragments/commentView.graphql"
+
+query commentQuery($id: ID!) {
+  comment(id: $id) {
+    ...commentView
+    parent {
+      ...commentView
+      replies {
+        ...commentView
+      }
+    }
+  }
+}

client/coral-framework/graphql/queries/index.js

@@ -87,7 +87,8 @@ export const loadMore = (data) => ({limit, cursor, parent_id, asset_id, sort}, n
 export const queryStream = graphql(STREAM_QUERY, {
   options: () => ({
     variables: {
-      asset_url: getQueryVariable('asset_url')
+      asset_url: getQueryVariable('asset_url'),
+      comment_id: getQueryVariable('comment_id')
     }
   }),
   props: ({data}) => ({

client/coral-framework/graphql/queries/streamQuery.graphql

@@ -1,6 +1,15 @@
 #import "../fragments/commentView.graphql"
 
-query AssetQuery($asset_url: String!) {
+query AssetQuery($asset_url: String!, $comment_id: ID!) {
+    comment(id: $comment_id) {
+      ...commentView
+      parent {
+        ...commentView
+        replies {
+          ...commentView
+        }
+      }
+    }
     asset(url: $asset_url) {
         id
         title