createComment and suspect list

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

@@ -0,0 +1,42 @@
+// this component will
+// render its children
+// render a like button
+// render a permalink button
+// render a reply button
+// render a flag button
+// translate things?
+
+import React, {PropTypes} from 'react';
+import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
+
+const Comment = ({comment}) => {
+  console.log('A Comment', comment);
+  return (
+    <div className="comment" id={`c_${comment.id}`}>
+      <hr aria-hidden={true} />
+      {comment.body}
+      <PermalinkButton articleUrl={'some string'} commentId={comment.id} />
+    </div>
+  );
+};
+
+Comment.propTypes = {
+  comment: PropTypes.shape({
+    depth: PropTypes.number,
+    actions: PropTypes.array.isRequired,
+    body: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    replies: PropTypes.arrayOf(
+      PropTypes.shape({
+        body: PropTypes.string.isRequired,
+        id: PropTypes.string.isRequired
+      })
+    ),
+    user: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
+    }).isRequired
+  }).isRequired
+};
+
+export default Comment;

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

@@ -11,6 +11,8 @@ import {
   authActions
 } from '../../coral-framework';
 
+import Comment from './Comment';
+
 import CommentBox from '../../coral-plugin-commentbox/CommentBox';
 import InfoBox from '../../coral-plugin-infobox/InfoBox';
 import Content from '../../coral-plugin-commentcontent/CommentContent';
@@ -37,7 +39,7 @@ import SuspendedAccount from '../../coral-framework/components/SuspendedAccount'
 const {addNotification, clearNotification} = notificationActions;
 const {logout, showSignInDialog} = authActions;
 
-class CommentStream extends Component {
+class Embed extends Component {
 
   constructor (props) {
     super(props);
@@ -57,10 +59,11 @@ class CommentStream extends Component {
   }
 
   static propTypes = {
-    data: PropTypes.object.isRequired
+    data: PropTypes.object.isRequired,
   }
 
   componentDidMount () {
+    // stream id, logged in user, settings
     return;
 
     // Set up messaging between embedded Iframe an parent component
@@ -151,134 +154,8 @@ class CommentStream extends Component {
                     showSignInDialog={showSignInDialog}/>
                 }
                 {
-                  asset.comments.map((comment) => {
-                    return <div className="comment" key={comment.id} id={`c_${comment.id}`}>
-                      <hr aria-hidden={true}/>
-                      <AuthorName
-                        author={comment.user}
-                        addNotification={this.props.addNotification}
-                        id={comment.id}
-                        author_id={comment.user.id}
-                        postAction={this.props.postAction}
-                        showSignInDialog={this.props.showSignInDialog}
-                        deleteAction={this.props.deleteAction}
-                        addItem={this.props.addItem}
-                        updateItem={this.props.updateItem}
-                        currentUser={currentUser}/>
-                      <PubDate created_at={comment.created_at}/>
-                      <Content body={comment.body}/>
-                      <div className="commentActionsLeft">
-                        <ReplyButton
-                          updateItem={this.props.updateItem}
-                          id={comment.id}
-                          currentUser={currentUser}
-                          showReply={comment.showReply}
-                          banned={false/* banned*/}/>
-                        <LikeButton
-                          addNotification={this.props.addNotification}
-                          id={comment.id}
-                          like={comment.actions/* Need to find a way to identify which is a like.*/}
-                          showSignInDialog={this.props.showSignInDialog}
-                          postAction={this.props.postAction}
-                          deleteAction={this.props.deleteAction}
-                          addItem={this.props.addItem}
-                          updateItem={this.props.updateItem}
-                          currentUser={currentUser}
-                          banned={false/* banned*/}/>
-                      </div>
-                      <div className="commentActionsRight">
-                        <FlagComment
-                          addNotification={this.props.addNotification}
-                          id={comment.id}
-                          author_id={comment.user.id}
-                          flag={comment.actions/* Need to find a way to identify which is a flag.*/}
-                          postAction={this.props.postAction}
-                          deleteAction={this.props.deleteAction}
-                          addItem={this.props.addItem}
-                          showSignInDialog={this.props.showSignInDialog}
-                          updateItem={this.props.updateItem}
-                          banned={false/* banned*/}
-                          currentUser={currentUser}/>
-                        <PermalinkButton
-                          commentId={comment.id}
-                          articleURL={this.path}/>
-                      </div>
-                      <ReplyBox
-                        addNotification={this.props.addNotification}
-                        postItem={this.props.postItem}
-                        appendItemArray={this.props.appendItemArray}
-                        updateItem={this.props.updateItem}
-                        id={asset.id}
-                        author={null}
-                        parent_id={comment.id}
-                        premod={'post'}
-                        currentUser={null/* user*/}
-                        charCount={100/* charCountEnable && charCount*/}
-                        showReply={false/* comment.showReply need a way to do these sorts of comment-level settings*/}/>
-                      {
-                        comment.replies.map((reply) => {
-                          return <div className="reply" key={reply.id} id={`c_${reply.id}`}>
-                            <hr aria-hidden={true}/>
-                            <AuthorName author={reply.author}/>
-                            <PubDate created_at={reply.created_at}/>
-                            <Content body={reply.body}/>
-                            <div className="replyActionsLeft">
-                              <ReplyButton
-                                updateItem={this.props.updateItem}
-                                id={reply.id}
-                                banned={false/* banned*/}
-                                currentUser={this.props.auth.user}
-                                showReply={reply.showReply}/>
-                              <LikeButton
-                                addNotification={this.props.addNotification}
-                                id={reply.id}
-                                like={reply.actions}
-                                postAction={this.props.postAction}
-                                deleteAction={this.props.deleteAction}
-                                addItem={this.props.addItem}
-                                showSignInDialog={this.props.showSignInDialog}
-                                updateItem={this.props.updateItem}
-                                currentUser={currentUser}
-                                banned={false/* banned*/}/>
-                            </div>
-                            <div className="replyActionsRight">
-                              <FlagComment
-                                addNotification={this.props.addNotification}
-                                id={reply.id}
-                                author_id={comment.user_id}
-                                flag={reply.actions}
-                                postAction={this.props.postAction}
-                                showSignInDialog={this.props.showSignInDialog}
-                                deleteAction={this.props.deleteAction}
-                                addItem={this.props.addItem}
-                                updateItem={this.props.updateItem}
-                                banned={false/* banned*/}
-                                currentUser={null}/>
-                              <PermalinkButton
-                                commentId={reply.parent_id}
-                                articleURL={this.path}
-                              />
-                            </div>
-                            {
-                              <ReplyBox
-                                addNotification={this.props.addNotification}
-                                postItem={this.props.postItem}
-                                appendItemArray={this.props.appendItemArray}
-                                updateItem={this.props.updateItem}
-                                id={asset.id}
-                                author={reply.user}
-                                parent_id={comment.id}
-                                child_id={reply.id}
-                                premod={'post'/* moderation*/}
-                                banned={false/* banned*/}
-                                currentUser={null}
-                                charCount={null/* charCountEnable && charCount*/}
-                                showReply={reply.showReply}/>
-                            }
-                          </div>;
-                        })
-                    }
-                  </div>;
+                  asset.comments.map(comment => {
+                    return <Comment key={comment.id} comment={comment} />;
                   })
                 }
             {
@@ -439,4 +316,4 @@ export default compose(
     }}),
   }),
   connect(mapStateToProps, mapDispatchToProps)
-)(CommentStream);
+)(Embed);

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

@@ -5,11 +5,11 @@ import {ApolloProvider} from 'react-apollo';
 import {client} from 'coral-framework/client';
 import store from 'coral-framework/store';
 
-import Stream from './CommentStream';
+import Embed from './Embed';
 
 render(
   <ApolloProvider client={client} store={store}>
-    <Stream />
+    <Embed />
   </ApolloProvider>
   , document.querySelector('#coralStream')
 );

client/coral-plugin-comment-count/CommentCount.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {I18n} from '../coral-framework';
 import translations from './translations.json';
 const name = 'coral-plugin-comment-count';
@@ -9,6 +9,10 @@ const CommentCount = ({count}) => {
   </div>;
 };
 
+CommentCount.propTypes = {
+  count: PropTypes.number.isRequired
+};
+
 export default CommentCount;
 
 const lang = new I18n(translations);

graph/mutators.js

@@ -118,7 +118,7 @@ const createPublicComment = (context, commentInput) => {
         // If the comment was flagged as being suspect, we need to add a
         // flag to it to indicate that it needs to be looked at.
         // Otherwise just return the new comment.
-        if (wordlist.suspect) {
+        if (wordlist != null && wordlist.suspect) {
 
           // TODO: this is kind of fragile, we should refactor this to resolve
           // all these const's that we're using like 'comments', 'flag' to be