From 9fbd1d3a770158db33548c5bf211ff708c8ec4e5 Mon Sep 17 00:00:00 2001 From: David Jay Date: Tue, 24 Jan 2017 11:49:59 -0500 Subject: [PATCH 1/6] Displaying author names and bios. --- client/coral-embed-stream/src/Comment.js | 8 +++----- .../src/graphql/queries/streamQuery.graphql | 3 +++ client/coral-plugin-author-name/AuthorName.js | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index bbc8b6e00..554ebdf23 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -9,7 +9,7 @@ import React, {PropTypes} from 'react'; import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton'; -// import AuthorName from '../../coral-plugin-author-name/AuthorName'; +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'; @@ -81,7 +81,7 @@ class Comment extends React.Component { id={`c_${comment.id}`} style={{marginLeft: depth * 30}}>
- {/* */} + currentUser={currentUser}/> diff --git a/client/coral-embed-stream/src/graphql/queries/streamQuery.graphql b/client/coral-embed-stream/src/graphql/queries/streamQuery.graphql index aae62ccd7..8bd57bcb7 100644 --- a/client/coral-embed-stream/src/graphql/queries/streamQuery.graphql +++ b/client/coral-embed-stream/src/graphql/queries/streamQuery.graphql @@ -5,6 +5,9 @@ fragment commentView on Comment { user { id name: displayName + settings { + bio + } } actions { type: action_type diff --git a/client/coral-plugin-author-name/AuthorName.js b/client/coral-plugin-author-name/AuthorName.js index bf970b3c4..610d425f8 100644 --- a/client/coral-plugin-author-name/AuthorName.js +++ b/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 &&
{author.settings.bio} From 33d274386a3acd88ef4df7d80f54399b35c28ea8 Mon Sep 17 00:00:00 2001 From: David Jay Date: Tue, 24 Jan 2017 12:24:30 -0500 Subject: [PATCH 2/6] Re-adding display of comment date. --- .../coral-embed-stream/src/graphql/queries/streamQuery.graphql | 1 + graph/typeDefs.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/client/coral-embed-stream/src/graphql/queries/streamQuery.graphql b/client/coral-embed-stream/src/graphql/queries/streamQuery.graphql index 8bd57bcb7..0e067c0b2 100644 --- a/client/coral-embed-stream/src/graphql/queries/streamQuery.graphql +++ b/client/coral-embed-stream/src/graphql/queries/streamQuery.graphql @@ -2,6 +2,7 @@ fragment commentView on Comment { id body + created_at user { id name: displayName diff --git a/graph/typeDefs.js b/graph/typeDefs.js index 75deee196..3d484d976 100644 --- a/graph/typeDefs.js +++ b/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 { From 75bcf291544a96e5fd926a67078777a5d91bb779 Mon Sep 17 00:00:00 2001 From: David Jay Date: Tue, 24 Jan 2017 12:37:50 -0500 Subject: [PATCH 3/6] Replies to replies are children of the root comment. --- client/coral-embed-stream/src/Comment.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 554ebdf23..2dc6a2d83 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -62,6 +62,7 @@ class Comment extends React.Component { render () { const { comment, + parentId, currentUser, asset, depth, @@ -101,7 +102,7 @@ class Comment extends React.Component { console.log('reply button click'); this.setState({replyBoxVisible: !this.state.replyBoxVisible}); }} - parentCommentId={comment.id} + parentCommentId={parentId || comment.id} currentUserId={currentUser.id} banned={false} /> Date: Tue, 24 Jan 2017 10:43:29 -0700 Subject: [PATCH 4/6] posting a reply refetches comments --- client/coral-embed-stream/src/Comment.js | 25 +++++++++++--------- client/coral-embed-stream/src/Embed.js | 1 + client/coral-embed-stream/src/Stream.js | 14 ++++++++++- client/coral-plugin-commentbox/CommentBox.js | 5 ++-- client/coral-plugin-replies/ReplyBox.js | 4 +++- 5 files changed, 34 insertions(+), 15 deletions(-) diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 2dc6a2d83..6e4c4b525 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/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, @@ -67,6 +68,7 @@ class Comment extends React.Component { asset, depth, postItem, + refetch, addNotification, showSignInDialog, postAction, @@ -99,7 +101,6 @@ class Comment extends React.Component { ?
{ - console.log('reply button click'); this.setState({replyBoxVisible: !this.state.replyBoxVisible}); }} parentCommentId={parentId || comment.id} @@ -134,17 +135,19 @@ class Comment extends React.Component { { this.state.replyBoxVisible ? + refetch={refetch} + parentId={parentId || comment.id} + addNotification={addNotification} + authorId={currentUser.id} + postItem={postItem} + assetId={asset.id} /> : null } { comment.replies && comment.replies.map(reply => { return { +const Stream = ({ + comments, + currentUser, + asset, + postItem, + addNotification, + postAction, + deleteAction, + showSignInDialog, + refetch +}) => { return (
{ comments.map(comment => { return console.error(err)); this.setState({body: ''}); diff --git a/client/coral-plugin-replies/ReplyBox.js b/client/coral-plugin-replies/ReplyBox.js index fe9987bf7..81e2035ea 100644 --- a/client/coral-plugin-replies/ReplyBox.js +++ b/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, refetch}) => (
Date: Tue, 24 Jan 2017 12:51:52 -0500 Subject: [PATCH 5/6] Fixing permalinks and moving Pym to a seperate file. --- client/coral-embed-stream/src/Embed.js | 39 ++++++++++--------- client/coral-embed-stream/src/Pym.js | 3 ++ .../src/graphql/queries/index.js | 5 +-- 3 files changed, 25 insertions(+), 22 deletions(-) create mode 100644 client/coral-embed-stream/src/Pym.js diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index cf336256c..caf71990d 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -1,6 +1,6 @@ import React, {Component, PropTypes} from 'react'; -// import Pym from 'pym.js'; +import pym from './Pym'; import {compose} from 'react-apollo'; import {connect} from 'react-redux'; @@ -71,24 +71,25 @@ class Embed extends Component { // this.props.getStream(path || window.location); // this.path = window.location.href.split('#')[0]; // - // this.pym.sendMessage('childReady'); - // - // this.pym.onMessage('DOMContentLoaded', hash => { - // const commentId = hash.replace('#', 'c_'); - // let count = 0; - // const interval = setInterval(() => { - // if (document.getElementById(commentId)) { - // window.clearInterval(interval); - // this.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); - // }); + + 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); + }); } diff --git a/client/coral-embed-stream/src/Pym.js b/client/coral-embed-stream/src/Pym.js new file mode 100644 index 000000000..8e9073e2c --- /dev/null +++ b/client/coral-embed-stream/src/Pym.js @@ -0,0 +1,3 @@ +import Pym from 'pym.js'; + +export default new Pym.Child({polling: 100}); diff --git a/client/coral-embed-stream/src/graphql/queries/index.js b/client/coral-embed-stream/src/graphql/queries/index.js index ecf875aaa..41ae07116 100644 --- a/client/coral-embed-stream/src/graphql/queries/index.js +++ b/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}} From 4e8306bcc97d11013be55f61c76d85e46a2a89f9 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Tue, 24 Jan 2017 10:55:51 -0700 Subject: [PATCH 6/6] close reply box when comment is posted --- client/coral-embed-stream/src/Comment.js | 6 +++++- .../coral-framework/modules/notification/Notification.js | 1 - client/coral-plugin-commentbox/CommentBox.js | 9 ++++++--- client/coral-plugin-replies/ReplyBox.js | 6 +++--- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 6e4c4b525..1310358fe 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -135,7 +135,11 @@ class Comment extends React.Component { { this.state.replyBoxVisible ? { + console.log('replyPostedHandler'); + this.setState({replyBoxVisible: false}); + refetch(); + }} parentId={parentId || comment.id} addNotification={addNotification} authorId={currentUser.id} diff --git a/client/coral-framework/modules/notification/Notification.js b/client/coral-framework/modules/notification/Notification.js index 43ef921d8..2a5e1d693 100644 --- a/client/coral-framework/modules/notification/Notification.js +++ b/client/coral-framework/modules/notification/Notification.js @@ -1,7 +1,6 @@ import React from 'react'; const Notification = (props) => { - console.log(props); if (props.notification.text) { setTimeout(() => { props.clearNotification(); diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index 9251d16dc..409a0ea4d 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -11,7 +11,7 @@ class CommentBox extends Component { // updateItem: PropTypes.func, // comments: PropTypes.array, - refetch: PropTypes.func.isRequired, + replyPostedHandler: PropTypes.func, postItem: PropTypes.func.isRequired, assetId: PropTypes.string.isRequired, parentId: PropTypes.string, @@ -32,11 +32,11 @@ class CommentBox extends Component { // child_id, // updateItem, // appendItemArray, + replyPostedHandler, postItem, assetId, parentId, addNotification, - refetch, authorId } = this.props; @@ -78,7 +78,10 @@ class CommentBox extends Component { // appendItemArray(parent_id || id, related, commentId, !parent_id, parent_type); addNotification('success', 'Your comment has been posted.'); } - refetch(); + + if (replyPostedHandler) { + replyPostedHandler(); + } }) .catch((err) => console.error(err)); this.setState({body: ''}); diff --git a/client/coral-plugin-replies/ReplyBox.js b/client/coral-plugin-replies/ReplyBox.js index 81e2035ea..ac1a702f8 100644 --- a/client/coral-plugin-replies/ReplyBox.js +++ b/client/coral-plugin-replies/ReplyBox.js @@ -3,10 +3,10 @@ import CommentBox from '../coral-plugin-commentbox/CommentBox'; const name = 'coral-plugin-replies'; -const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentId, refetch}) => ( +const ReplyBox = ({styles, postItem, assetId, authorId, addNotification, parentId, replyPostedHandler}) => (