Updating frontend actions to new format.

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

@@ -18,7 +18,8 @@ import LikeButton from 'coral-plugin-likes/LikeButton';
 
 import styles from './Comment.css';
 
-const getAction = (type, comment) => comment.actions.filter((a) => a.type === type)[0];
+const getActionSummary = (type, comment) => comment.action_summaries
+  .filter((a) => a.__typename === type)[0];
 
 class Comment extends React.Component {
 
@@ -35,7 +36,8 @@ class Comment extends React.Component {
     setActiveReplyBox: PropTypes.func.isRequired,
     refetch: PropTypes.func.isRequired,
     showSignInDialog: PropTypes.func.isRequired,
-    postAction: PropTypes.func.isRequired,
+    postFlag: PropTypes.func.isRequired,
+    postLike: PropTypes.func.isRequired,
     deleteAction: PropTypes.func.isRequired,
     parentId: PropTypes.string,
     addNotification: PropTypes.func.isRequired,
@@ -51,7 +53,7 @@ class Comment extends React.Component {
     }),
     comment: PropTypes.shape({
       depth: PropTypes.number,
-      actions: PropTypes.array.isRequired,
+      action_summaries: PropTypes.array.isRequired,
       body: PropTypes.string.isRequired,
       id: PropTypes.string.isRequired,
       replies: PropTypes.arrayOf(
@@ -78,14 +80,15 @@ class Comment extends React.Component {
       refetch,
       addNotification,
       showSignInDialog,
-      postAction,
+      postLike,
+      postFlag,
       setActiveReplyBox,
       activeReplyBox,
       deleteAction
     } = this.props;
 
-    const like = getAction('LIKE', comment);
-    const flag = getAction('FLAG', comment);
+    const like = getActionSummary('LikeActionSummary', comment);
+    const flag = getActionSummary('FlagActionSummary', comment);
 
     return (
       <div
@@ -101,7 +104,7 @@ class Comment extends React.Component {
               <LikeButton
                 like={like}
                 id={comment.id}
-                postAction={postAction}
+                postLike={postLike}
                 deleteAction={deleteAction}
                 showSignInDialog={showSignInDialog}
                 currentUser={currentUser} />
@@ -117,7 +120,7 @@ class Comment extends React.Component {
             flag={flag}
             id={comment.id}
             author_id={comment.user.id}
-            postAction={postAction}
+            postFlag={postFlag}
             deleteAction={deleteAction}
             showSignInDialog={showSignInDialog}
             currentUser={currentUser} />
@@ -150,7 +153,8 @@ class Comment extends React.Component {
               depth={depth + 1}
               asset={asset}
               currentUser={currentUser}
-              postAction={postAction}
+              postLike={postLike}
+              postFlag={postFlag}
               deleteAction={deleteAction}
               showSignInDialog={showSignInDialog}
               reactKey={reply.id}
@@ -158,7 +162,6 @@ class Comment extends React.Component {
               comment={reply} />;
           })
         }
-
       </div>
     );
   }

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

@@ -10,7 +10,7 @@ const {addNotification, clearNotification} = notificationActions;
 const {fetchAssetSuccess} = assetActions;
 
 import {queryStream} from 'coral-framework/graphql/queries';
-import {postComment, postAction, deleteAction} from 'coral-framework/graphql/mutations';
+import {postComment, postFlag, postLike, deleteAction} from 'coral-framework/graphql/mutations';
 import {editName} from 'coral-framework/actions/user';
 import {Notification, notificationActions, authActions, assetActions, pym} from 'coral-framework';
 
@@ -91,7 +91,7 @@ class Embed extends Component {
       minHeight: document.body.scrollHeight + 200
     } : {};
 
-    if (loading) {
+    if (loading || !asset) {
       return <Spinner />;
     }
 
@@ -146,7 +146,8 @@ class Embed extends Component {
               postItem={this.props.postItem}
               asset={asset}
               currentUser={user}
-              postAction={this.props.postAction}
+              postLike={this.props.postLike}
+              postFlag={this.props.postFlag}
               deleteAction={this.props.deleteAction}
               showSignInDialog={this.props.showSignInDialog}
               comments={asset.comments} />
@@ -209,7 +210,8 @@ const mapDispatchToProps = dispatch => ({
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   postComment,
-  postAction,
+  postFlag,
+  postLike,
   deleteAction,
   queryStream
 )(Embed);

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

@@ -37,7 +37,8 @@ class Stream extends React.Component {
       asset,
       postItem,
       addNotification,
-      postAction,
+      postFlag,
+      postLike,
       deleteAction,
       showSignInDialog,
       refetch
@@ -56,7 +57,8 @@ class Stream extends React.Component {
               postItem={postItem}
               asset={asset}
               currentUser={currentUser}
-              postAction={postAction}
+              postLike={postLike}
+              postFlag={postFlag}
               deleteAction={deleteAction}
               showSignInDialog={showSignInDialog}
               key={comment.id}

client/coral-framework/graphql/fragments/actionSummaryView.graphql

@@ -0,0 +1,8 @@
+fragment actionSummaryView on ActionSummary {
+  __typename
+  count
+  current_user {
+    id
+    created_at
+  }
+}

client/coral-framework/graphql/fragments/commentView.graphql

@@ -1,3 +1,5 @@
+#import "../fragments/actionSummaryView.graphql"
+
 fragment commentView on Comment {
     id
     body
@@ -7,12 +9,7 @@ fragment commentView on Comment {
         id
         name: displayName
     }
-    actions {
-        type: action_type
-        count
-        current: current_user {
-            id
-            created_at
-        }
+    action_summaries {
+      ...actionSummaryView
     }
 }

client/coral-framework/graphql/mutations/deleteAction.graphql

@@ -1,3 +1,7 @@
 mutation deleteAction ($id: ID!) {
-    deleteAction(id:$id)
+    deleteAction(id:$id) {
+      errors {
+        translation_key
+      }
+    }
 }

client/coral-framework/graphql/mutations/index.js

@@ -1,6 +1,7 @@
 import {graphql} from 'react-apollo';
 import POST_COMMENT from './postComment.graphql';
-import POST_ACTION from './postAction.graphql';
+import POST_FLAG from './postFlag.graphql';
+import POST_LIKE from './postLike.graphql';
 import DELETE_ACTION from './deleteAction.graphql';
 
 import commentView from '../fragments/commentView.graphql';
@@ -21,12 +22,23 @@ export const postComment = graphql(POST_COMMENT, {
     }}),
 });
 
-export const postAction = graphql(POST_ACTION, {
+export const postLike = graphql(POST_LIKE, {
   props: ({mutate}) => ({
-    postAction: (action) => {
+    postLike: (like) => {
       return mutate({
         variables: {
-          action
+          like
+        }
+      });
+    }}),
+});
+
+export const postFlag = graphql(POST_FLAG, {
+  props: ({mutate}) => ({
+    postFlag: (flag) => {
+      return mutate({
+        variables: {
+          flag
         }
       });
     }}),

client/coral-framework/graphql/mutations/postAction.graphql

@@ -1,5 +0,0 @@
-mutation CreateAction ($action: CreateActionInput!) {
-    createAction(action:$action) {
-        id
-    }
-}

client/coral-framework/graphql/mutations/postComment.graphql

@@ -2,6 +2,11 @@
 
 mutation CreateComment ($asset_id: ID!, $parent_id: ID, $body: String!) {
     createComment(asset_id:$asset_id, parent_id:$parent_id, body:$body) {
-        ...commentView
+        comment {
+          ...commentView
+        }
+        errors {
+          translation_key
+        }
     }
 }

client/coral-framework/graphql/mutations/postFlag.graphql

@@ -0,0 +1,10 @@
+mutation CreateFlag($flag: CreateFlagInput!) {
+  createFlag(flag:$flag) {
+    flag {
+      id
+    }
+    errors {
+      translation_key
+    }
+  }
+}

client/coral-framework/graphql/mutations/postLike.graphql

@@ -0,0 +1,10 @@
+mutation CreateLike ($like: CreateLikeInput!) {
+  createLike(like:$like) {
+    like {
+      id
+    }
+    errors {
+      translation_key
+    }
+  }
+}

client/coral-framework/graphql/queries/index.js

@@ -13,7 +13,7 @@ function getQueryVariable(variable) {
   }
 
   // If no query is included, return a default string for development
-  return 'http://dev.default.stream';
+  return 'http://localhost/default/stream';
 }
 
 export const queryStream = graphql(STREAM_QUERY, {

client/coral-plugin-flags/FlagButton.js

@@ -12,7 +12,7 @@ class FlagButton extends Component {
     showMenu: false,
     itemType: '',
     reason: '',
-    note: '',
+    message: '',
     step: 0,
     posted: false,
     localPost: null,
@@ -23,7 +23,7 @@ class FlagButton extends Component {
   onReportClick = () => {
     const {currentUser, flag, deleteAction} = this.props;
     const {localPost, localDelete} = this.state;
-    const flagged = (flag && flag.current && !localDelete) || localPost;
+    const flagged = (flag && flag.current_user && !localDelete) || localPost;
     if (!currentUser) {
       const offset = document.getElementById(`c_${this.props.id}`).getBoundingClientRect().top - 75;
       this.props.showSignInDialog(offset);
@@ -31,15 +31,15 @@ class FlagButton extends Component {
     }
     if (flagged) {
       this.setState((prev) => prev.localPost ? {...prev, localPost: null, step: 0} : {...prev, localDelete: true});
-      deleteAction(localPost || flag.current.id);
+      deleteAction(localPost || flag.current_user.id);
     } else {
       this.setState({showMenu: !this.state.showMenu});
     }
   }
 
   onPopupContinue = () => {
-    const {postAction, id, author_id} = this.props;
-    const {itemType, reason, step, posted} = this.state;
+    const {postFlag, id, author_id} = this.props;
+    const {itemType, reason, step, posted, message} = this.state;
 
     // Proceed to the next step or close the menu if we've reached the end
     if (step + 1 >= this.props.getPopupMenu.length) {
@@ -67,13 +67,14 @@ class FlagButton extends Component {
       if (itemType === 'COMMENTS') {
         this.setState({localPost: 'temp'});
       }
-      postAction({
+      postFlag({
         item_id,
         item_type: itemType,
-        action_type: 'FLAG'
+        reason,
+        message
       }).then(({data}) => {
         if (itemType === 'COMMENTS') {
-          this.setState({localPost: data.createAction.id});
+          this.setState({localPost: data.createFlag.flag.id});
         }
       });
     }
@@ -99,7 +100,7 @@ class FlagButton extends Component {
   }
 
   onNoteTextChange = (e) => {
-    this.setState({note: e.target.value});
+    this.setState({message: e.target.value});
   }
 
   handleClickOutside () {
@@ -109,7 +110,7 @@ class FlagButton extends Component {
   render () {
     const {flag, getPopupMenu} = this.props;
     const {localPost, localDelete} = this.state;
-    const flagged = (flag && flag.current && !localDelete) || localPost;
+    const flagged = (flag && flag.current_user && !localDelete) || localPost;
     const popupMenu = getPopupMenu[this.state.step](this.state.itemType);
 
     return <div className={`${name}-container`}>
@@ -150,15 +151,15 @@ class FlagButton extends Component {
                 }
                 {
                   this.state.reason && <div>
-                  <label htmlFor={'note'} className={`${name}-popup-radio-label`}>
+                  <label htmlFor={'message'} className={`${name}-popup-radio-label`}>
                     {lang.t('flag-reason')}
                   </label><br/>
                   <textarea
                       className={`${name}-reason-text`}
-                      id="note"
+                      id="message"
                       rows={4}
                       onChange={this.onNoteTextChange}
-                      value={this.state.note}/>
+                      value={this.state.message}/>
                   </div>
                 }
               </form>

client/coral-plugin-likes/LikeButton.js

@@ -12,7 +12,7 @@ class LikeButton extends Component {
       count: PropTypes.number
     }),
     id: PropTypes.string,
-    postAction: PropTypes.func.isRequired,
+    postLike: PropTypes.func.isRequired,
     deleteAction: PropTypes.func.isRequired,
     showSignInDialog: PropTypes.func.isRequired,
     currentUser: PropTypes.shape({
@@ -26,9 +26,9 @@ class LikeButton extends Component {
   }
 
   render() {
-    const {like, id, postAction, deleteAction, showSignInDialog, currentUser} = this.props;
+    const {like, id, postLike, deleteAction, showSignInDialog, currentUser} = this.props;
     const {localPost, localDelete} = this.state;
-    const liked = (like && like.current && !localDelete) || localPost;
+    const liked = (like && like.current_user && !localDelete) || localPost;
     let count = like ? like.count : 0;
     if (localPost) {count += 1;}
     if (localDelete) {count -= 1;}
@@ -44,16 +44,15 @@ class LikeButton extends Component {
       }
       if (!liked) {
         this.setState({localPost: 'temp', localDelete: false});
-        postAction({
+        postLike({
           item_id: id,
-          item_type: 'COMMENTS',
-          action_type: 'LIKE'
+          item_type: 'COMMENTS'
         }).then(({data}) => {
-          this.setState({localPost: data.createAction.id});
+          this.setState({localPost: data.createLike.like.id});
         });
       } else {
         this.setState((prev) => prev.localPost ? {...prev, localPost: null} : {...prev, localDelete: true});
-        deleteAction(localPost || like.current.id);
+        deleteAction(localPost || like.current_user.id);
       }
     };