Merge branch 'master' into bump-version-1-8-0

coralproject · Jun 1, 2017 · 8b3c1b2 · 8b3c1b2
2 parents 9bd75a5 + c76e71c
commit 8b3c1b2
Show file tree

Hide file tree

Showing 22 changed files with 506 additions and 376 deletions.
diff --git a/client/coral-admin/src/graphql/index.js b/client/coral-admin/src/graphql/index.js
@@ -1,4 +1,5 @@
 import {add} from 'coral-framework/services/graphqlRegistry';
+import update from 'immutability-helper';
 const queues = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
 
 const extension = {
@@ -11,54 +12,53 @@ const extension = {
     }),
     SetCommentStatus: ({variables: {commentId, status}}) => ({
       updateQueries: {
-        CoralAdmin_Moderation: (oldData) => {
+        CoralAdmin_Moderation: (prev) => {
           const comment = queues.reduce((comment, queue) => {
-            return comment ? comment : oldData[queue].find((c) => c.id === commentId);
+            return comment ? comment : prev[queue].nodes.find((c) => c.id === commentId);
           }, null);
 
-          let accepted = oldData.accepted;
-          let acceptedCount = oldData.acceptedCount;
-          let rejected = oldData.rejected;
-          let rejectedCount = oldData.rejectedCount;
+          let acceptedNodes = prev.accepted.nodes;
+          let acceptedCount = prev.acceptedCount;
+          let rejectedNodes = prev.rejected.nodes;
+          let rejectedCount = prev.rejectedCount;
 
           if (status !== comment.status) {
             if (status === 'ACCEPTED') {
               comment.status = 'ACCEPTED';
               acceptedCount++;
-              accepted = [comment, ...accepted];
+              acceptedNodes = [comment, ...acceptedNodes];
             }
             else if (status === 'REJECTED') {
               comment.status = 'REJECTED';
               rejectedCount++;
-              rejected = [comment, ...rejected];
+              rejectedNodes = [comment, ...rejectedNodes];
             }
           }
 
-          const premod = oldData.premod.filter((c) => c.id !== commentId);
-          const flagged = oldData.flagged.filter((c) => c.id !== commentId);
-          const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
-          const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
+          const premodNodes = prev.premod.nodes.filter((c) => c.id !== commentId);
+          const flaggedNodes = prev.flagged.nodes.filter((c) => c.id !== commentId);
+          const premodCount = premodNodes.length < prev.premod.nodes.length ? prev.premodCount - 1 : prev.premodCount;
+          const flaggedCount = flaggedNodes.length < prev.flagged.nodes.length ? prev.flaggedCount - 1 : prev.flaggedCount;
 
           if (status === 'REJECTED') {
-            accepted = oldData.accepted.filter((c) => c.id !== commentId);
-            acceptedCount = accepted.length < oldData.accepted.length ? oldData.acceptedCount - 1 : oldData.acceptedCount;
+            acceptedNodes = prev.accepted.nodes.filter((c) => c.id !== commentId);
+            acceptedCount = acceptedNodes.length < prev.accepted.nodes.length ? prev.acceptedCount - 1 : prev.acceptedCount;
           }
           else if (status === 'ACCEPTED') {
-            rejected = oldData.rejected.filter((c) => c.id !== commentId);
-            rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount;
+            rejectedNodes = prev.rejected.nodes.filter((c) => c.id !== commentId);
+            rejectedCount = rejectedNodes.length < prev.rejected.nodes.length ? prev.rejectedCount - 1 : prev.rejectedCount;
           }
 
-          return {
-            ...oldData,
-            premodCount: Math.max(0, premodCount),
-            flaggedCount: Math.max(0, flaggedCount),
-            acceptedCount: Math.max(0, acceptedCount),
-            rejectedCount: Math.max(0, rejectedCount),
-            premod,
-            flagged,
-            accepted,
-            rejected,
-          };
+          return update(prev, {
+            premodCount: {$set: Math.max(0, premodCount)},
+            flaggedCount: {$set: Math.max(0, flaggedCount)},
+            acceptedCount: {$set: Math.max(0, acceptedCount)},
+            rejectedCount: {$set: Math.max(0, rejectedCount)},
+            premod: {nodes: {$set: premodNodes}},
+            flagged: {nodes: {$set: flaggedNodes}},
+            accepted: {nodes: {$set: acceptedNodes}},
+            rejected: {nodes: {$set: rejectedNodes}},
+          });
         }
       }
     }),

diff --git a/client/coral-admin/src/routes/Moderation/components/LoadMore.js b/client/coral-admin/src/routes/Moderation/components/LoadMore.js
@@ -2,32 +2,19 @@ import React, {PropTypes} from 'react';
 import {Button} from 'coral-ui';
 import styles from './styles.css';
 
-const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) =>
+const LoadMore = ({loadMore, showLoadMore}) =>
   <div className={styles.loadMoreContainer}>
     {
       showLoadMore && <Button
         className={styles.loadMore}
-        onClick={() => {
-          const lastComment = comments[comments.length - 1];
-          const cursor = lastComment ? lastComment.created_at : null;
-          return loadMore({
-            cursor,
-            sort,
-            tab,
-            asset_id: assetId
-          });
-        }}>
+        onClick={loadMore}>
         Load More
       </Button>
     }
   </div>;
 
 LoadMore.propTypes = {
-  comments: PropTypes.array.isRequired,
   loadMore: PropTypes.func.isRequired,
-  sort: PropTypes.oneOf(['CHRONOLOGICAL', 'REVERSE_CHRONOLOGICAL']).isRequired,
-  tab: PropTypes.oneOf(['rejected', 'premod', 'flagged', 'all', 'accepted']).isRequired,
-  assetId: PropTypes.string,
   showLoadMore: PropTypes.bool.isRequired
 };
 

diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -143,7 +143,7 @@ export default class Moderation extends Component {
           data={this.props.data}
           root={this.props.root}
           currentAsset={asset}
-          comments={comments}
+          comments={comments.nodes}
           activeTab={activeTab}
           singleView={moderation.singleView}
           selectedIndex={this.state.selectedIndex}

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -21,14 +21,18 @@ class ModerationQueue extends React.Component {
     comments: PropTypes.array.isRequired
   }
 
+  loadMore = () => {
+    this.props.loadMore(this.props.activeTab);
+  }
+
   componentDidUpdate (prev) {
-    const {loadMore, comments, commentCount, sort, activeTab: tab, assetId: asset_id} = this.props;
+    const {comments, commentCount} = this.props;
 
     // if the user just moderated the last (visible) comment
     // AND there are more comments available on the server,
     // go ahead and load more comments
     if (prev.comments.length > 0 && comments.length === 0 && commentCount > 0) {
-      loadMore({sort, tab, asset_id});
+      this.loadMore();
     }
   }
 
@@ -38,9 +42,6 @@ class ModerationQueue extends React.Component {
       selectedIndex,
       commentCount,
       singleView,
-      loadMore,
-      activeTab,
-      sort,
       viewUserDetail,
       ...props
     } = this.props;
@@ -75,12 +76,8 @@ class ModerationQueue extends React.Component {
           }
         </ul>
         <LoadMore
-          comments={comments}
-          loadMore={loadMore}
-          sort={sort}
-          tab={activeTab}
+          loadMore={this.loadMore}
           showLoadMore={comments.length < commentCount}
-          assetId={props.assetId}
           />
       </div>
     );

diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -7,6 +7,7 @@ import withQuery from 'coral-framework/hocs/withQuery';
 import {getDefinitionName} from 'coral-framework/utils';
 import * as notification from 'coral-admin/src/services/notification';
 import t, {timeago} from 'coral-framework/services/i18n';
+import update from 'immutability-helper';
 
 import {withSetUserStatus, withSuspendUser, withSetCommentStatus} from 'coral-framework/graphql/mutations';
 
@@ -80,12 +81,12 @@ class ModerationContainer extends Component {
     return this.props.setCommentStatus({commentId, status: 'REJECTED'});
   }
 
-  loadMore = ({limit = 10, cursor, sort, tab, asset_id}) => {
-    let variables = {
-      limit,
-      cursor,
-      sort,
-      asset_id
+  loadMore = (tab) => {
+    const variables = {
+      limit: 10,
+      cursor: this.props.root[tab].endCursor,
+      sort: this.props.data.variables.sort,
+      asset_id: this.props.data.variables.asset_id,
     };
     switch(tab) {
     case 'all':
@@ -108,14 +109,12 @@ class ModerationContainer extends Component {
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
       variables,
-      updateQuery: (oldData, {fetchMoreResult:{comments}}) => {
-        return {
-          ...oldData,
-          [tab]: [
-            ...oldData[tab],
-            ...comments
-          ]
-        };
+      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
+        return update(prev, {
+          [tab]: {
+            nodes: {$push: comments.nodes},
+          },
+        });
       }
     });
   };
@@ -145,55 +144,69 @@ class ModerationContainer extends Component {
 const LOAD_MORE_QUERY = gql`
   query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
     comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort, action_type: $action_type}) {
-      ...${getDefinitionName(Comment.fragments.comment)}
-      action_summaries {
-        count
-        ... on FlagActionSummary {
-          reason
+      nodes {
+        ...${getDefinitionName(Comment.fragments.comment)}
+        action_summaries {
+          count
+          ... on FlagActionSummary {
+            reason
+          }
         }
       }
     }
   }
   ${Comment.fragments.comment}
 `;
 
+const commentConnectionFragment = gql`
+  fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
+    nodes {
+      ...${getDefinitionName(Comment.fragments.comment)}
+    }
+    hasNextPage
+    startCursor
+    endCursor
+  }
+  ${Comment.fragments.comment}
+`;
+
 const withModQueueQuery = withQuery(gql`
   query CoralAdmin_Moderation($asset_id: ID, $sort: SORT_ORDER) {
     all: comments(query: {
       statuses: [NONE, PREMOD, ACCEPTED, REJECTED],
       asset_id: $asset_id,
       sort: $sort
     }) {
-      ...${getDefinitionName(Comment.fragments.comment)}
+      ...CoralAdmin_Moderation_CommentConnection
     }
     accepted: comments(query: {
       statuses: [ACCEPTED],
       asset_id: $asset_id,
       sort: $sort
     }) {
-      ...${getDefinitionName(Comment.fragments.comment)}
+      ...CoralAdmin_Moderation_CommentConnection
     }
     premod: comments(query: {
         statuses: [PREMOD],
         asset_id: $asset_id,
         sort: $sort
     }) {
-        ...${getDefinitionName(Comment.fragments.comment)}
+      ...CoralAdmin_Moderation_CommentConnection
     }
     flagged: comments(query: {
         action_type: FLAG,
         asset_id: $asset_id,
         statuses: [NONE, PREMOD],
         sort: $sort
     }) {
-        ...${getDefinitionName(Comment.fragments.comment)}
+      ...CoralAdmin_Moderation_CommentConnection
     }
     rejected: comments(query: {
         statuses: [REJECTED],
         asset_id: $asset_id,
         sort: $sort
     }) {
-        ...${getDefinitionName(Comment.fragments.comment)}
+      ...CoralAdmin_Moderation_CommentConnection
     }
     assets: assets {
       id
@@ -224,7 +237,7 @@ const withModQueueQuery = withQuery(gql`
       organizationName
     }
   }
-  ${Comment.fragments.comment}
+  ${commentConnectionFragment}
 `, {
   options: ({params: {id = null}, moderation: {sortOrder}}) => {
     return {

diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
@@ -87,12 +87,7 @@ class Comment extends React.Component {
           name: PropTypes.string
         })
       ),
-      replies: PropTypes.arrayOf(
-        PropTypes.shape({
-          body: PropTypes.string.isRequired,
-          id: PropTypes.string.isRequired
-        })
-      ),
+      replies: PropTypes.object,
       user: PropTypes.shape({
         id: PropTypes.string.isRequired,
         name: PropTypes.string.isRequired
@@ -195,7 +190,7 @@ class Comment extends React.Component {
     let commentClass = parentId
       ? `reply ${styles.Reply}`
       : `comment ${styles.Comment}`;
-    commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
+    commentClass += comment.id.indexOf('pending') >= 0 ? ` ${styles.pendingComment}` : '';
 
     // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
     const notifyOnError = (fn, errorToMessage) =>
@@ -375,7 +370,7 @@ class Comment extends React.Component {
             />
           : null}
         {comment.replies &&
-          comment.replies.map((reply) => {
+          comment.replies.nodes.map((reply) => {
             return commentIsIgnored(reply)
               ? <IgnoredCommentTombstone key={reply.id} />
               : <Comment
@@ -408,13 +403,10 @@ class Comment extends React.Component {
         {comment.replies &&
           <div className="coral-load-more-replies">
             <LoadMore
-              assetId={asset.id}
-              comments={comment.replies}
-              parentId={comment.id}
               topLevel={false}
               replyCount={comment.replyCount}
-              moreComments={comment.replyCount > comment.replies.length}
-              loadMore={loadMore}
+              moreComments={comment.replyCount > comment.replies.nodes.length}
+              loadMore={() => loadMore(comment.id)}
             />
           </div>}
       </div>