Merge pull request #27 from coralproject/post-comment

Chronological replies and multiline comments

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

@@ -121,7 +121,7 @@ class CommentStream extends Component {
                   <hr aria-hidden={true}/>
                   <AuthorName name={comment.username}/>
                   <PubDate created_at={comment.created_at}/>
-                  <Content content={comment.body}/>
+                  <Content body={comment.body}/>
                   <div className="commentActions">
                     {
                     // <Flag
@@ -151,7 +151,7 @@ class CommentStream extends Component {
                         <hr aria-hidden={true}/>
                         <AuthorName name={reply.username}/>
                         <PubDate created_at={reply.created_at}/>
-                        <Content content={reply.body}/>
+                        <Content body={reply.body}/>
                         <div className="replyActions">
                           {
                             // <Flag

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

@@ -122,4 +122,5 @@ hr {
 
 .coral-plugin-pubdate-text {
   color: #CCC;
+  display: inline-block;
 }

client/coral-framework/store/actions/items.js

@@ -56,12 +56,13 @@ export const updateItem = (id, property, value) => {
   }
 }
 
-export const appendItemArray = (id, property, value) => {
+export const appendItemArray = (id, property, value, addToFront) => {
   return {
     type: APPEND_ITEM_ARRAY,
     id,
     property,
-    value
+    value,
+    addToFront
   }
 }
 
@@ -115,7 +116,7 @@ export function getStream (assetId) {
 
         const keys = Object.keys(childComments)
         for (var i=0; i < keys.length; i++ ) {
-          dispatch(updateItem(keys[i], 'children', childComments[keys[i]]))
+          dispatch(updateItem(keys[i], 'children', childComments[keys[i]].reverse()))
         }
 
         return (json)

client/coral-framework/store/reducers/items.js

@@ -15,7 +15,12 @@ export default (state = initialState, action) => {
       )
     case actions.APPEND_ITEM_ARRAY:
       return state.updateIn([action.id, action.property], (prop) => {
-        return prop ? prop.unshift(action.value) : fromJS([action.value])
+        if (action.addToFront) {
+          return prop ? prop.unshift(action.value) : fromJS([action.value])
+        } else {
+          return prop ? prop.push(action.value) : fromJS([action.value])
+        }
+
       }
     )
     default:

client/coral-plugin-commentbox/CommentBox.js

@@ -35,7 +35,7 @@ class CommentBox extends Component {
     updateItem(parent_id, 'showReply', false)
     postItem(comment, 'comments')
     .then((comment_id) => {
-      appendItemArray(parent_id || id, related, comment_id)
+      appendItemArray(parent_id || id, related, comment_id, parent_id ? true : false)
       addNotification('success', 'Your comment has been posted.')
     }).catch((err) => console.error(err))
     this.setState({body: ''})

client/coral-plugin-commentcontent/CommentContent.js

@@ -1,10 +1,17 @@
 import React from 'react'
 const name = 'coral-plugin-replies'
 
-const Content = (props) => <div
-  className={name + '-text'}
-  style={props.styles && props.styles.text}>
-  {props.content}
-</div>
+const Content = ({body, styles}) => {
+  const textbreaks = body.split('\n')
+  return <div
+    className={name + '-text'}
+    style={styles && styles.text}>
+    {
+      textbreaks.map((line, i) => <span key={i} className={name+'-line'}>
+        {line} <br className={name+'-linebreak'}/>
+      </span>)
+    }
+  </div>
+}
 
 export default Content