Merge branch 'master' into mod-queue

Dockerfile

@@ -17,7 +17,7 @@ RUN npm install
 COPY . /usr/src/app
 
 # Compile static assets
-# RUN npm run build
+RUN npm run build
 
 # Prune development dependancies
 RUN npm prune --production

client/coral-embed-stream/public/samplearticle.html

@@ -9,7 +9,7 @@
 <div id='coralStreamEmbed'></div>
 <script type='text/javascript' src='http://pym.nprapps.org/pym.v1.min.js'></script>
 <script>
-var pymParent = new pym.Parent('coralStreamEmbed', 'index.html', {});
+var pymParent = new pym.Parent('coralStreamEmbed', 'index.html', {title: 'comments'});
 pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})</script>
 </div>
   </body>

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

@@ -11,6 +11,7 @@ import Content from '../../coral-plugin-commentcontent/CommentContent'
 import PubDate from '../../coral-plugin-pubdate/PubDate'
 import Count from '../../coral-plugin-comment-count/CommentCount'
 import Flag from '../../coral-plugin-flags/FlagButton'
+import AuthorName from '../../coral-plugin-author-name/AuthorName'
 import {ReplyBox, ReplyButton} from '../../coral-plugin-replies'
 import Pym from 'pym.js'
 
@@ -110,13 +111,15 @@ class CommentStream extends Component {
                 postItem={this.props.postItem}
                 appendItemArray={this.props.appendItemArray}
                 updateItem={this.props.updateItem}
-                id={rootItemId}/>
+                id={rootItemId}
+                reply={false}/>
             </div>
             {
               rootItem.comments.map((commentId) => {
                 const comment = this.props.items[commentId]
-                return <div className="comment">
+                return <div className="comment" key={commentId}>
                   <hr aria-hidden={true}/>
+                  <AuthorName name={comment.username}/>
                   <PubDate created_at={comment.created_at}/>
                   <Content content={comment.body}/>
                   <div className="commentActions">
@@ -135,14 +138,16 @@ class CommentStream extends Component {
                       postItem={this.props.postItem}
                       appendItemArray={this.props.appendItemArray}
                       updateItem={this.props.updateItem}
-                      id={commentId}
+                      id={rootItemId}
+                      parent_id={commentId}
                       showReply={comment.showReply}/>
                     {
                       comment.children &&
                       comment.children.map((replyId) => {
                       let reply = this.props.items[replyId]
-                      return <div className="reply">
+                      return <div className="reply" key={replyId}>
                         <hr aria-hidden={true}/>
+                        <AuthorName name={reply.username}/>
                         <PubDate created_at={reply.created_at}/>
                         <Content content={reply.body}/>
                         <div className="replyActions">

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

@@ -56,7 +56,7 @@ hr {
 
 .coral-plugin-commentbox-textarea {
   flex: 1;
-  padding: 10px;
+  padding: 5px;
 }
 
 .coral-plugin-commentbox-button-container {
@@ -75,6 +75,12 @@ hr {
   border-radius: 2px;
 }
 
+.coral-plugin-commentbox-username {
+  width: 50%;
+  padding-left: 5px;
+  margin-bottom: 5px;
+}
+
 /* Comment styles */
 .comment {
   margin-bottom: 10px;
@@ -84,6 +90,12 @@ hr {
   margin-bottom: 10px;
 }
 
+.coral-plugin-author-name-text {
+  display: inline-block;
+  margin-right: 10px;
+  font-weight: bolder;
+}
+
 
 /* Reply styles */
 

client/coral-embed-stream/webpack.config.dev.js

@@ -9,13 +9,14 @@ module.exports = {
     path.join(__dirname, 'src', 'app')
   ],
   output: {
-    path: path.join(__dirname, 'dist'),
+    path: path.join(__dirname, '..', '..','dist', 'coral-embed-stream'),
     filename: 'bundle.js',
     publicPath: '/'
   },
   resolve: {
     root: [
-      path.resolve(__dirname, 'src')
+      path.resolve(__dirname, 'src'),
+      path.resolve(__dirname, '..')
     ],
     extensions: ['', '.js', '.jsx']
   },

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

@@ -97,12 +97,10 @@ export function getStream (assetId) {
 
           /* Check for root and child comments. */
           if (
-            item.type === 'comment' &&
             item.asset_id === assetId &&
             !item.parent_id) {
             rootComments.push(item.id)
           } else if (
-            item.type === 'comment' &&
             item.asset_id === assetId
           ) {
             let children = childComments[item.parent_id] || []
@@ -178,18 +176,22 @@ export function postItem (item, type, id) {
     }
     let options = {
       method: 'POST',
-      body: JSON.stringify(item)
+      body: JSON.stringify(item),
+      headers: {
+        'Content-Type':'application/json'
+      }
     }
-    return fetch('api/v1/' + type, options)
+    console.log('postItem', options);
+    return fetch('/api/v1/' + type, options)
       .then(
         response => {
-          return response.ok ? response.json()
+          return response.ok ? response.text()
           : Promise.reject(response.status + ' ' + response.statusText)
         }
       )
-      .then((json) => {
-        dispatch(addItem(json))
-        return json.id
+      .then((id) => {
+        dispatch(addItem({...item, id}))
+        return id
       })
   }
 }
@@ -223,7 +225,7 @@ export function postAction (id, type, user_id) {
     }
 
     dispatch(appendItemArray(id, type, user_id))
-    return fetch('api/v1/comments/' + id + '/actions', options)
+    return fetch('/api/v1/comments/' + id + '/actions', options)
       .then(
         response => {
           return response.ok ? response.text()

client/coral-plugin-author-name/AuthorName.js

@@ -0,0 +1,9 @@
+import React from 'react'
+const packagename = 'coral-plugin-author-name'
+
+const AuthorName = ({name}) =>
+<div className={packagename + '-text'}>
+  {name}
+</div>
+
+export default AuthorName

client/coral-plugin-commentbox/CommentBox.js

@@ -8,56 +8,67 @@ class CommentBox extends Component {
   static propTypes = {
     postItem: PropTypes.func,
     updateItem: PropTypes.func,
-    item_id: PropTypes.string,
+    id: PropTypes.string,
     comments: PropTypes.array,
     reply: PropTypes.bool
   }
 
   state = {
-    content: ''
+    body: '',
+    username: ''
   }
 
   postComment = () => {
-    const {postItem, updateItem, item_id, reply, addNotification, appendItemArray} = this.props
+    const {postItem, updateItem, id, parent_id, addNotification, appendItemArray} = this.props
     let comment = {
-      content: this.state.content
+      body: this.state.body,
+      asset_id: id,
+      username: this.state.username
     }
     let related
-    if (reply) {
-      comment.parent_id = item_id
+    if (parent_id) {
+      comment.parent_id = parent_id
       related = 'children'
     } else {
-      comment.asset_id = item_id
       related = 'comments'
     }
-    updateItem(item_id, 'showReply', false)
+    updateItem(parent_id, 'showReply', false)
     postItem(comment, 'comments')
-    .then((id) => {
-      appendItemArray(item_id, related, id)
+    .then((comment_id) => {
+      appendItemArray(parent_id || id, related, comment_id)
       addNotification('success', 'Your comment has been posted.')
     }).catch((err) => console.error(err))
-    this.setState({content: ''})
+    this.setState({body: ''})
   }
 
   render () {
     const {styles, reply} = this.props
     // How to handle language in plugins? Should we have a dependency on our central translation file?
     return <div>
+        <div className={name + '-container'}>
+        <input type='text'
+          className={name + '-username'}
+          style={styles && styles.textarea}
+          value={this.state.username}
+          id={reply ? 'replyUser' : 'commentUser'}
+          placeholder='Name'
+          onChange={(e) => this.setState({username: e.target.value})}/>
+      </div>
       <div
-        className={name + '-container'}
-        style={styles && styles.container}>
+        className={name + '-container'}>
           <label
             htmlFor={ reply ? 'replyText' : 'commentText'}
             className="screen-reader-text"
             aria-hidden={true}>
-            {reply ? 'Reply': 'Comment'}
+            {reply ? lang.t('reply'): lang.t('comment')}
           </label>
           <textarea
             className={name + '-textarea'}
             style={styles && styles.textarea}
-            value={this.state.content}
+            value={this.state.body}
+            placeholder='Comment'
             id={reply ? 'replyText' : 'commentText'}
-            onChange={(e) => this.setState({content: e.target.value})}
+            onChange={(e) => this.setState({body: e.target.value})}
             rows={3}/>
         </div>
         <div className={name + '-button-container'}>
@@ -76,9 +87,13 @@ export default CommentBox
 
 const lang = new I18n({
   en: {
-    post: 'Post'
+    post: 'Post',
+    reply: 'Reply',
+    comment: 'Comment',
   },
   es: {
-    post: 'Publicar'
+    post: 'Publicar',
+    reply: 'Respuesta',
+    comment: 'Comentario'
   }
 })

client/coral-plugin-replies/ReplyBox.js

@@ -8,7 +8,8 @@ const ReplyBox = (props) => <div
    style={props.styles && props.styles.container}>
      {
        props.showReply && <CommentBox
-         item_id = {props.item_id}
+         id = {props.id}
+         parent_id = {props.parent_id}
          postItem = {props.postItem}
          addNotification = {props.addNotification}
          appendItemArray = {props.appendItemArray}

client/coral-plugin-replies/ReplyButton.js

@@ -5,7 +5,7 @@ const name = 'coral-plugin-replies'
 
 const ReplyButton = (props) => <button
     className={name + '-reply-button'}
-    onClick={(e) => props.updateItem(props.item_id || props.parent_id, 'showReply', true)}>
+    onClick={(e) => props.updateItem(props.id || props.parent_id, 'showReply', true)}>
     <i className={name + '-icon material-icons'}
       aria-hidden={true}>reply</i>
     {lang.t('reply')}

models/comment.js

@@ -17,6 +17,7 @@ const CommentSchema = new Schema({
   },
   asset_id: String,
   author_id: String,
+  username: String,
   status: {
     type: String,
     enum: ['accepted', 'rejected', ''],

package.json

@@ -5,12 +5,12 @@
   "main": "app.js",
   "scripts": {
     "start": "./bin/www",
-    "build": "webpack --config ./client/coral-embed-stream/webpack.config.js",
+    "build": "./node_modules/webpack/bin/webpack.js --config ./client/coral-embed-stream/webpack.config.js",
     "lint": "eslint .",
     "pretest": "npm install",
     "test": "mocha tests --recursive",
     "test-watch": "mocha tests --recursive -w",
-    "embed-start": "node client/coral-embed-stream/dev-server.js"
+    "embed-start": "./node_modules/webpack/bin/webpack.js --config ./client/coral-embed-stream/webpack.config.dev.js && ./bin/www"
   },
   "config": {
     "pre-git": {

routes/api/comments/index.js

@@ -59,8 +59,8 @@ router.get('/status/pending', (req, res, next) => {
 //==============================================================================
 
 router.post('/', (req, res, next) => {
-  const {body, author_id, asset_id, parent_id, status} = req.body;
-  let comment  = new Comment({body, author_id, asset_id, parent_id, status});
+  const {body, author_id, asset_id, parent_id, status, username} = req.body;
+  let comment  = new Comment({body, author_id, asset_id, parent_id, status, username});
   comment.save().then(({id}) => {
     res.status(200).send({'id': id});
   }).catch(error => {