diff --git a/app.js b/app.js index e7ded2f9c7..7ce7c91ab9 100644 --- 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 new file mode 100644 index 0000000000..493fc29fac --- /dev/null +++ b/client/coral-embed-stream/public/samplearticle.html @@ -0,0 +1,16 @@ + + + + +
+

Lorem ipsum

+

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.

+

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.

+
+ + +
+ + diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 28d35860da..da5e25ff46 100644 --- 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
{ rootItem ?
+ id={rootItemId}/>
{ - rootItem.related.comment.map((commentId) => { + rootItem.comments.map((commentId) => { const comment = this.props.items[commentId] return
- +
+ id={commentId}/>
{ - comment.related && - comment.related.child && - comment.related.child.map((replyId) => { + comment.children && + comment.children.map((replyId) => { let reply = this.props.items[replyId] return
- +
diff --git a/client/coral-embed-stream/webpack.config.js b/client/coral-embed-stream/webpack.config.js index 10076a159e..2db94e6af3 100644 --- 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 index fe45feb0cc..019b1bfbe3 100644 --- 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,21 +171,16 @@ 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() @@ -180,9 +188,8 @@ export function postItem (data, type, id) { } ) .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 index e8f0bbbdfd..2bba3bf1bd 100644 --- 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]) } ) diff --git a/client/coral-plugin-comment-count/CommentCount.js b/client/coral-plugin-comment-count/CommentCount.js index 861fc5df33..6c3b2e5eb2 100644 --- a/client/coral-plugin-comment-count/CommentCount.js +++ b/client/coral-plugin-comment-count/CommentCount.js @@ -2,16 +2,16 @@ import React from 'react' const name = 'coral-plugin-comment-count' -const CommentCount = ({items, item_id}) => { +const CommentCount = ({items, id}) => { let count = 0 - if (items[item_id]) { - count += items[item_id].related.comment.length + if (items[id]) { + count += items[id].comments.length } const itemKeys = Object.keys(items) for (var i=0; i < itemKeys.length; i++) { const item = items[itemKeys[i]] - if (item.type === 'comment' && item.related && item.related.child) { - count += item.related.child.length + if (item.type === 'comment' && item.children) { + count += item.children.length } } diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index a321444071..c893be0753 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -18,22 +18,22 @@ class CommentBox extends Component { } postComment = () => { - const {postItem, updateItem, item_id, reply, addNotification, appendItemRelated} = this.props + const {postItem, updateItem, item_id, reply, addNotification, appendItemArray} = this.props let comment = { content: this.state.content } let related if (reply) { comment.parent_id = item_id - related = 'child' + related = 'children' } else { comment.asset_id = item_id - related = 'comment' + related = 'comments' } updateItem(item_id, 'showReply', false) - postItem(comment, 'comment') + postItem(comment, 'comments') .then((id) => { - appendItemRelated(item_id, related, id) + appendItemArray(item_id, related, id) addNotification('success', 'Your comment has been posted.') }).catch((err) => console.error(err)) this.setState({content: ''}) diff --git a/client/coral-plugin-replies/ReplyBox.js b/client/coral-plugin-replies/ReplyBox.js index 7a89bdeeb4..d496a63f75 100644 --- a/client/coral-plugin-replies/ReplyBox.js +++ b/client/coral-plugin-replies/ReplyBox.js @@ -11,7 +11,7 @@ const ReplyBox = (props) =>
diff --git a/package.json b/package.json index b7fb48d349..0968632020 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "main": "app.js", "scripts": { "start": "./bin/www", + "build": "webpack --config ./client/coral-embed-stream/webpack.config.js", "lint": "eslint .", "pretest": "npm install", "test": "mocha tests", diff --git a/routes/api/index.js b/routes/api/index.js index 12f456a601..c7e5601ed4 100644 --- a/routes/api/index.js +++ b/routes/api/index.js @@ -3,6 +3,7 @@ const express = require('express'); const router = express.Router(); router.use('/comments', require('./comments')); +router.use('/stream', require('./stream')); router.use('/settings', require('./settings')); router.use('/queue', require('./queue')); diff --git a/routes/api/stream/index.js b/routes/api/stream/index.js new file mode 100644 index 0000000000..b41e03dbbd --- /dev/null +++ b/routes/api/stream/index.js @@ -0,0 +1,33 @@ +const express = require('express'); + +const router = express.Router(); + +router.get('/', (req, res) => { + console.log('Stream endpoint has been hit with asset_id ', req.query.asset_id); + res.json([ + { + 'id': 'abc', + 'type': 'comment', + 'body': 'Sample comment', + 'created_at': new Date().getTime(), + 'asset_id': 'assetTest' + }, + { + 'id': 'xyz', + 'type': 'comment', + 'body': 'Sample reply', + 'created_at': new Date().getTime() - 600000, + 'parent_id': 'abc', + 'asset_id': 'assetTest' + }, + { + 'id': 'def', + 'type': 'comment', + 'body': 'Another comment', + 'created_at': new Date().getTime() - 400000, + 'asset_id': 'assetTest' + } + ]); +}); + +module.exports = router;