From d14fa33077000c73b0b28e7a95d8726e9f3ce72e Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Fri, 20 Jan 2017 12:36:33 -0700
Subject: [PATCH] rename files to make more sense

---
 client/coral-embed-stream/src/Comment.js      |  42 ++++++
 .../src/{CommentStream.js => Embed.js}        | 141 ++----------------
 client/coral-embed-stream/src/Stream.js       |   0
 client/coral-embed-stream/src/index.js        |   4 +-
 .../CommentCount.js                           |   6 +-
 5 files changed, 58 insertions(+), 135 deletions(-)
 create mode 100644 client/coral-embed-stream/src/Comment.js
 rename client/coral-embed-stream/src/{CommentStream.js => Embed.js} (56%)
 create mode 100644 client/coral-embed-stream/src/Stream.js

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
new file mode 100644
index 000000000..d13729f8f
--- /dev/null
+++ b/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;
diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/Embed.js
similarity index 56%
rename from client/coral-embed-stream/src/CommentStream.js
rename to client/coral-embed-stream/src/Embed.js
index 9f08a2259..32f4628d4 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/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 @@ const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appen
 const {addNotification, clearNotification} = notificationActions;
 const {logout, showSignInDialog} = authActions;
 
-class CommentStream extends Component {
+class Embed extends Component {
 
   constructor (props) {
     super(props);
@@ -57,11 +59,12 @@ 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
@@ -154,134 +157,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} />;
                   })
                 }
             {
@@ -418,4 +295,4 @@ export default compose(
     }),
   }),
   connect(mapStateToProps, mapDispatchToProps)
-)(CommentStream);
+)(Embed);
diff --git a/client/coral-embed-stream/src/Stream.js b/client/coral-embed-stream/src/Stream.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js
index 67b4bad29..f75146f0a 100644
--- a/client/coral-embed-stream/src/index.js
+++ b/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')
 );
diff --git a/client/coral-plugin-comment-count/CommentCount.js b/client/coral-plugin-comment-count/CommentCount.js
index 623274e53..764984634 100644
--- a/client/coral-plugin-comment-count/CommentCount.js
+++ b/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);