coralproject · riley · Nov 4, 2016 · Nov 2, 2016 · Nov 2, 2016 · Nov 2, 2016
diff --git a/app.js b/app.js
@@ -6,5 +6,6 @@ const express = require('express');
 const app = express();
 
 app.use('/api/v1', require('./routes/api'));
+app.use('/client/', express.static('./dist'));
 
 module.exports = app;
diff --git a/client/coral-embed-stream/public/samplearticle.html b/client/coral-embed-stream/public/samplearticle.html
@@ -0,0 +1,16 @@
+<html>
+  <head>
+  </head>
+  <body>
+  <div style="margin-left:auto; margin-right:auto; width:500px">
+    <h1>Lorem ipsum</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis sollicitudin eros a ornare. Curabitur dignissim vestibulum massa non rhoncus. Cras laoreet ante vel nunc hendrerit, ac imperdiet neque egestas. Suspendisse aliquet iaculis fermentum. Pellentesque interdum nec elit sed tincidunt. Donec volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa, sed vehicula mauris velit non lectus. Integer non enim nec neque congue faucibus porttitor sit amet dui.</p>
+<p>Nunc pharetra orci id diam feugiat, vitae rutrum magna efficitur. Morbi porttitor blandit lorem, et facilisis tellus luctus at. Morbi tincidunt eget nisl id placerat. Nullam consectetur quam vel mauris lacinia, non consectetur est faucibus. Duis cursus auctor nulla nec sagittis. Aenean sem erat, ultrices a hendrerit consectetur, accumsan non lorem. Integer ac neque sed magna sodales vulputate at quis neque. Praesent eget ornare lacus. Donec ultricies, dolor eget commodo faucibus, arcu velit ullamcorper tellus, in cursus tellus elit sed urna. Suspendisse in consequat magna. Duis vel ullamcorper tortor, vel cursus libero. Proin et nisi luctus ligula faucibus luctus. Morbi pulvinar, justo ac feugiat elementum, libero tellus congue justo, pharetra ultrices felis felis id leo. Integer mattis quam tempus libero porta, ac pretium ligula elementum.</p>
+<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', {});
+pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})</script>
+</div>
+  </body>
+</html>
diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
@@ -14,7 +14,7 @@ import Flag from '../../coral-plugin-flags/FlagButton'
 import {ReplyBox, ReplyButton} from '../../coral-plugin-replies'
 import Pym from 'pym.js'
 
-const {addItem, updateItem, postItem, getItemsQuery, postAction, appendItemRelated} = itemActions
+const {addItem, updateItem, postItem, getStream, postAction, appendItemArray} = itemActions
 const {addNotification, clearNotification} = notificationActions
 const {setLoggedInUser} = authActions
 
@@ -38,8 +38,8 @@ const {setLoggedInUser} = authActions
       postItem: (data, type, id) => {
         return dispatch(postItem(data, type, id))
       },
-      getItemsQuery: (rootId) => {
-        return dispatch(getItemsQuery(rootId))
+      getStream: (rootId) => {
+        return dispatch(getStream(rootId))
       },
       addNotification: (type, text) => {
         return dispatch(addNotification(type, text))
@@ -53,8 +53,8 @@ const {setLoggedInUser} = authActions
       postAction: (item, action, user) => {
         return dispatch(postAction(item, action, user))
       },
-      appendItemRelated: (item, property, value) => {
-        return dispatch(appendItemRelated(item, property, value))
+      appendItemArray: (item, property, value) => {
+        return dispatch(appendItemArray(item, property, value))
       }
     }
   }
@@ -72,7 +72,7 @@ class CommentStream extends Component {
     // Set up messaging between embedded Iframe an parent component
     // Using recommended Pym init code which violates .eslint standards
     new Pym.Child({ polling: 500 })
-    this.props.getItemsQuery('assetTest')
+    this.props.getStream('assetTest')
   }
 
   render () {
@@ -97,60 +97,58 @@ class CommentStream extends Component {
 
       const rootItemId = 'assetTest'
       const rootItem = this.props.items[rootItemId]
-      console.log(this.props.items);
       return <div>
         {
           rootItem ?
             <div>
             <div id="commentBox">
               <Count
-                item_id={rootItemId}
+                id={rootItemId}
                 items={this.props.items}/>
               <CommentBox
                 addNotification={this.props.addNotification}
                 postItem={this.props.postItem}
-                appendItemRelated={this.props.appendItemRelated}
+                appendItemArray={this.props.appendItemArray}
                 updateItem={this.props.updateItem}
-                item_id={rootItemId}/>
+                id={rootItemId}/>
             </div>
             {
-              rootItem.related.comment.map((commentId) => {
+              rootItem.comments.map((commentId) => {
                 const comment = this.props.items[commentId]
                 return <div className="comment">
                   <hr aria-hidden={true}/>
                   <PubDate created_at={comment.created_at}/>
-                  <Content content={comment.data.content}/>
+                  <Content content={comment.body}/>
                   <div className="commentActions">
                     <Flag
                       addNotification={this.props.addNotification}
-                      item_id={commentId}
+                      id={commentId}
                       flag={comment.flag}
                       postAction={this.props.postAction}
                       currentUser={this.props.auth.user}/>
                     <ReplyButton
                       updateItem={this.props.updateItem}
-                      item_id={commentId}/>
+                      id={commentId}/>
                   </div>
                     <ReplyBox
                       addNotification={this.props.addNotification}
                       postItem={this.props.postItem}
-                      appendItemRelated={this.props.appendItemRelated}
+                      appendItemArray={this.props.appendItemArray}
                       updateItem={this.props.updateItem}
-                      item_id={commentId}
+                      id={commentId}
                       showReply={comment.showReply}/>
                     {
-                      comment.related &&
-                      comment.related.child &&
-                      comment.related.child.map((replyId) => {
+                      comment.children &&
+                      comment.children.map((replyId) => {
                       let reply = this.props.items[replyId]
                       return <div className="reply">
                         <hr aria-hidden={true}/>
                         <PubDate created_at={reply.created_at}/>
-                        <Content content={reply.data.content}/>
+                        <Content content={reply.body}/>
                         <div className="replyActions">
                           <Flag
                             addNotificiation={this.props.addNotification}
-                            item_id={replyId}
+                            id={replyId}
                             flag={reply.flag}
                             postAction={this.props.postAction}
                             currentUser={this.props.auth.user}/>

diff --git a/client/coral-embed-stream/webpack.config.js b/client/coral-embed-stream/webpack.config.js
@@ -8,7 +8,7 @@ module.exports = {
   devtool: 'source-map',
   entry: [
     'babel-polyfill',
-    './src/app'
+    path.join(__dirname, 'src', 'app')
   ],
   output: {
     path: path.join(__dirname, '..', '..','dist', 'coral-embed-stream'),
@@ -23,13 +23,13 @@ module.exports = {
   },
   plugins: [
     new Copy([{
-      from: './index.html'
+      from: path.join(__dirname, 'index.html')
     },
     {
-      from: './style/default.css'
+      from: path.join(__dirname, 'style', 'default.css')
     },
     {
-      from: './public/',
+      from: path.join(__dirname, 'public'),
       to: './'
     },
     {

diff --git a/client/coral-framework/store/actions/items.js b/client/coral-framework/store/actions/items.js
@@ -10,7 +10,6 @@ import mocks from '../../mocks.json'
 export const ADD_ITEM = 'ADD_ITEM'
 export const UPDATE_ITEM = 'UPDATE_ITEM'
 export const APPEND_ITEM_ARRAY = 'APPEND_ITEM_ARRAY'
-export const APPEND_ITEM_RELATED = 'APPEND_ITEM_RELATED'
 
 /**
  * Action creators
@@ -26,13 +25,13 @@ export const APPEND_ITEM_RELATED = 'APPEND_ITEM_RELATED'
  */
 
 export const addItem = (item) => {
-  if (!item.item_id) {
+  if (!item.id) {
     console.warn('addItem called without an item id.')
   }
   return {
     type: ADD_ITEM,
     item: item,
-    item_id: item.item_id
+    id: item.id
   }
 }
 
@@ -41,36 +40,26 @@ export const addItem = (item) => {
 * Useful for item-level toggles, etc.
 *
 * @params
-*  item_id - the id of the item to be posted
+*  id - the id of the item to be posted
 *  property - the property to be updated
 *  value - the value that the property should be set to
 *
 */
 
 
-export const updateItem = (item_id, property, value) => {
+export const updateItem = (id, property, value) => {
   return {
     type: UPDATE_ITEM,
-    item_id,
+    id,
     property,
     value
   }
 }
 
-export const appendItemArray = (item_id, property, value) => {
+export const appendItemArray = (id, property, value) => {
   return {
     type: APPEND_ITEM_ARRAY,
-    item_id,
-    property,
-    value
-  }
-}
-
-
-export const appendItemRelated = (item_id, property, value) => {
-  return {
-    type: APPEND_ITEM_RELATED,
-    item_id,
+    id,
     property,
     value
   }
@@ -89,26 +78,50 @@ export const appendItemRelated = (item_id, property, value) => {
 * @dispatches
 *   A set of items to the item store
 */
-export function getItemsQuery (rootId) {
+export function getStream (assetId) {
   return (dispatch) => {
-    // return fetch('/v1/exec/view/' + rootId)
-    //   .then(
-    //     response => {
-    //       return response.ok ? response.json() : Promise.reject(response.status + ' ' + response.statusText)
-    //     }
-    //   )
-    //   .then((json) => {
-    //     let items = json.results[0].Docs
-    //     for (var i = 0; i < items.length; i++) {
-    //       dispatch(addItem(items[i]))
-    //     }
-    //     return (items)
-    //   })
-    console.log('Loading mock data', mocks);
-    let mockData = mocks.query
-    for (var i=0; i < mockData.length; i++ ) {
-      dispatch(addItem(mockData[i]))
-    }
+    return fetch('/api/v1/stream?asset_id='+assetId)
+      .then(
+        response => {
+          return response.ok ? response.json() : Promise.reject(response.status + ' ' + response.statusText)
+        }
+      )
+      .then((json) => {
+
+        /* Sort comments by date*/
+        let rootComments = []
+        let childComments = {}
+        const sorted = json.sort((a,b) => b.created_at - a.created_at)
+        sorted.reduce((prev, item) => {
+          dispatch(addItem(item))
+
+          /* 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] || []
+            childComments[item.parent_id] = children.concat(item.id)
+          }
+        }, {})
+
+        dispatch(addItem({
+          id: assetId,
+          comments: rootComments
+        }))
+
+        const keys = Object.keys(childComments)
+        for (var i=0; i < keys.length; i++ ) {
+          dispatch(updateItem(keys[i], 'children', childComments[keys[i]]))
+        }
+
+        return (json)
+      })
   }
 }
 
@@ -158,31 +171,25 @@ export function getItemsArray (ids) {
 *   The newly put item to the item store
 */
 
-export function postItem (data, type, id) {
+export function postItem (item, type, id) {
   return (dispatch) => {
-    let item = {
-      type,
-      data,
-      version: 1
-    }
     if (id) {
-      item.item_id = id
+      item.id = id
     }
     let options = {
       method: 'POST',
       body: JSON.stringify(item)
     }
-    return fetch('/v1/item', options)
+    return fetch('api/v1/' + type, options)
       .then(
         response => {
           return response.ok ? response.json()
           : Promise.reject(response.status + ' ' + response.statusText)
         }
       )
       .then((json) => {
-        // Patch until ID is returned from backend
         dispatch(addItem(json))
-        return json.item_id
+        return json.id
       })
   }
 }
@@ -194,7 +201,7 @@ export function postItem (data, type, id) {
 * Posts an action to an item
 *
 * @params
-*   item_id - the id of the item on which the action is taking place
+*   id - the id of the item on which the action is taking place
 *   action - the name of the action
 *   user - the user performing the action
 *   host - the coral host
@@ -204,13 +211,19 @@ export function postItem (data, type, id) {
 *
 */
 
-export function postAction (item, action, user) {
+export function postAction (id, type, user_id) {
   return (dispatch) => {
-    let options = {
-      method: 'POST'
+    const action = {
+      type,
+      user_id
     }
-    dispatch(appendItemArray(item, action, user))
-    return fetch('/v1/action/' + action + '/user/' + user + '/on/item/' + item, options)
+    const options = {
+      method: 'POST',
+      body: JSON.stringify(action)
+    }
+
+    dispatch(appendItemArray(id, type, user_id))
+    return fetch('api/v1/comments/' + id + '/actions', options)
       .then(
         response => {
           return response.ok ? response.text()

diff --git a/client/coral-framework/store/reducers/items.js b/client/coral-framework/store/reducers/items.js
@@ -8,18 +8,13 @@ const initialState = fromJS({})
 export default (state = initialState, action) => {
   switch (action.type) {
     case actions.ADD_ITEM:
-      return state.set(action.item_id, fromJS(action.item))
+      return state.set(action.id, fromJS(action.item))
     case actions.UPDATE_ITEM:
-      return state.updateIn([action.item_id, 'data', action.property], () =>
+      return state.updateIn([action.id, action.property], () =>
         fromJS(action.value)
       )
     case actions.APPEND_ITEM_ARRAY:
-      return state.updateIn([action.item_id, 'data', action.property], (prop) => {
-        return prop ? prop.push(action.value) : fromJS([action.value])
-      }
-    )
-    case actions.APPEND_ITEM_RELATED:
-      return state.updateIn([action.item_id, 'related', action.property], (prop) => {
+      return state.updateIn([action.id, action.property], (prop) => {
         return prop ? prop.push(action.value) : fromJS([action.value])
       }
     )