Posting flags correctly and displaying flags when clicked.

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

@@ -51,8 +51,8 @@ const {setLoggedInUser} = authActions
       setLoggedInUser: (user_id) => {
         return dispatch(setLoggedInUser(user_id))
       },
-      postAction: (item, action, user) => {
-        return dispatch(postAction(item, action, user))
+      postAction: (item, action, user, item_type) => {
+        return dispatch(postAction(item, action, user, item_type))
       },
       appendItemArray: (item, property, value, addToFront, itemType) => {
         return dispatch(appendItemArray(item, property, value, addToFront, itemType))
@@ -126,8 +126,10 @@ class CommentStream extends Component {
                     <Flag
                       addNotification={this.props.addNotification}
                       id={commentId}
-                      flag={comment.flag}
+                      flag={this.props.items.actions[comment.flag]}
                       postAction={this.props.postAction}
+                      addItem={this.props.addItem}
+                      updateItem={this.props.updateItem}
                       currentUser={this.props.auth.user}/>
                     <ReplyButton
                       updateItem={this.props.updateItem}
@@ -152,10 +154,12 @@ class CommentStream extends Component {
                         <Content body={reply.body}/>
                         <div className="replyActions">
                           <Flag
-                            addNotificiation={this.props.addNotification}
+                            addNotification={this.props.addNotification}
                             id={replyId}
-                            flag={reply.flag}
+                            flag={this.props.items.actions[reply.flag]}
                             postAction={this.props.postAction}
+                            addItem={this.props.addItem}
+                            updateItem={this.props.updateItem}
                             currentUser={this.props.auth.user}/>
                           <ReplyButton
                             updateItem={this.props.updateItem}

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

@@ -130,9 +130,8 @@ export function getStream (assetId) {
         }
 
         /* Hydrate actions on comments */
-        const actions = Object.keys(json.actions)
-        for (var i=0; i < actions.length; i++ ) {
-          dispatch(updateItem(actions[i].item_id, actions[i].type, actions[i].id, 'actions'))
+        for (var i=0; i < json.actions.length; i++ ) {
+          dispatch(updateItem(json.actions[i].item_id, json.actions[i].action_type, json.actions[i].id, 'comments'))
         }
 
         return (json)
@@ -229,25 +228,28 @@ export function postItem (item, type, id) {
 *
 */
 
-export function postAction (item_id, type, user_id) {
+export function postAction (item_id, action_type, user_id, item_type) {
   return (dispatch) => {
     const action = {
-      type,
+      action_type,
       user_id
     }
     const options = {
       method: 'POST',
+      headers: {
+        'Content-Type':'application/json'
+      },
       body: JSON.stringify(action)
     }
 
-    return fetch('/api/v1/comments/' + item_id + '/actions', options)
+    return fetch('/api/v1/' + item_type + '/' + item_id + '/actions', options)
       .then(
         response => {
           return response.ok ? response.json()
           : Promise.reject(response.status + ' ' + response.statusText)
         }
       ).then((json)=>{
-        return json.id
+        return json
       })
   }
 }

client/coral-plugin-flags/FlagButton.js

@@ -2,13 +2,17 @@ import React from 'react'
 
 const name='coral-plugin-flags'
 
-const FlagButton = ({flag, item_id, postAction, currentUser, addNotification}) => {
-  const flagged = flag && flag.includes(currentUser)
+const FlagButton = ({flag, id, postAction, addItem, updateItem, addNotification}) => {
+  const flagged = flag && flag.current_user
   const onFlagClick = () => {
-    postAction(item_id, 'flag', currentUser)
+    postAction(id, 'flag', '123', 'comments')
+      .then((action) => {
+        addItem({...action, current_user:true}, 'actions')
+        updateItem(action.item_id, action.action_type, action.id, 'comments')
+      })
     addNotification('success', 'Thank you for reporting this comment. Our moderation team has been notified and will review it shortly.')
-
   }
+
   return <div className={name + '-container'}>
     <button onClick={onFlagClick} className={name + '-button'}>
       <i className={name + '-icon material-icons'}

models/action.js

@@ -48,7 +48,8 @@ ActionSchema.statics.getActionSummaries = function(item_ids) {
       if (!actionObj[action.item_id]) {
         actionObj[action.item_id] = {
           id: action.id,
-          type: action.action_type,
+          item_type: action.item_type,
+          action_type: action.action_type,
           count: 1,
           current_user: false //Update this later when we have authentication
         };