diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 7262d10ed..8a81f9fe6 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -38,12 +38,12 @@ class Comment extends React.Component { // id of currently opened ReplyBox. tracked in Stream.js activeReplyBox: PropTypes.string.isRequired, setActiveReplyBox: PropTypes.func.isRequired, - refetch: PropTypes.func.isRequired, showSignInDialog: PropTypes.func.isRequired, postFlag: PropTypes.func.isRequired, 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, @@ -85,10 +85,10 @@ class Comment extends React.Component { asset, depth, postItem, - refetch, addNotification, showSignInDialog, postLike, + highlighted, postFlag, postDontAgree, loadMore, @@ -100,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 (

@@ -158,7 +160,6 @@ class Comment extends React.Component { comment.replies && comment.replies.map(reply => { return { @@ -60,22 +61,24 @@ 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); - } + // pym.onMessage('DOMContentLoaded', hash => { - 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); - }); + // 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) { @@ -83,13 +86,27 @@ class Embed extends Component { if(!isEqual(nextProps.data.asset, this.props.data.asset)) { loadAsset(nextProps.data.asset); } + + // if(!isEqual(nextProps.data.comment, this.props.data.comment)) { + // pym.scrollParentToChildEl(nextProps.data.comment.id); + // } + } + + 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 +176,28 @@ class Embed extends Component { } {!loggedIn && } {loggedIn && user && } + { + highlightedComment && + + } ({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}) => ({ @@ -98,12 +98,4 @@ export const queryStream = graphql(STREAM_QUERY, { }) }); -export const commentQuery = graphql(COMMENT_QUERY, { - options: () => ({ - variables: { - id: getQueryVariable('comment_id') - } - }) -}); - export const myCommentHistory = graphql(MY_COMMENT_HISTORY, {}); diff --git a/client/coral-framework/graphql/queries/streamQuery.graphql b/client/coral-framework/graphql/queries/streamQuery.graphql index 0a7f6c549..4f09f628e 100644 --- a/client/coral-framework/graphql/queries/streamQuery.graphql +++ b/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