Merge branch 'master' into i18n-refactor

2026-08-18 12:30:39 +08:00 · 2017-05-11 09:02:21 -07:00
parent c0fc87ea21 fe5ddbe323
commit 653091fdf9
43 changed files with 771 additions and 405 deletions
@@ -5,7 +5,7 @@ import key from 'keymaster';
 import isEqual from 'lodash/isEqual';
 import styles from './components/styles.css';

-import {modQueueQuery} from '../../graphql/queries';
+import {modQueueQuery, getQueueCounts} from '../../graphql/queries';
 import {banUser, setCommentStatus} from '../../graphql/mutations';

 import {fetchSettings} from 'actions/settings';
@@ -220,6 +220,7 @@ const mapDispatchToProps = dispatch => ({
 export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  setCommentStatus,
+  getQueueCounts,
  modQueueQuery,
  banUser
 )(ModerationContainer);
@@ -9,51 +9,67 @@ import translations from 'coral-admin/src/translations';
 import LoadMore from './components/LoadMore';

 const lang = new I18n(translations);
-const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props}) => {
-  return (
-    <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
-      <ul style={{paddingLeft: 0}}>
-      {
-        comments.length
-        ? comments.map((comment, i) => {
-          const status = comment.action_summaries ? 'FLAGGED' : comment.status;
-          return <Comment
-            key={i}
-            index={i}
-            comment={comment}
-            selected={i === selectedIndex}
-            suspectWords={props.suspectWords}
-            bannedWords={props.bannedWords}
-            actions={actionsMap[status]}
-            showBanUserDialog={props.showBanUserDialog}
-            acceptComment={props.acceptComment}
-            rejectComment={props.rejectComment}
-            currentAsset={props.currentAsset}
-          />;
-        })
-        : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
-      }
-      </ul>
-      <LoadMore
-        comments={comments}
-        loadMore={loadMore}
-        sort={sort}
-        tab={activeTab}
-        showLoadMore={comments.length < commentCount}
-        assetId={props.assetId}
-        />
-    </div>
-  );
-};
+class ModerationQueue extends React.Component {

-ModerationQueue.propTypes = {
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  currentAsset: PropTypes.object,
-  showBanUserDialog: PropTypes.func.isRequired,
-  rejectComment: PropTypes.func.isRequired,
-  acceptComment: PropTypes.func.isRequired,
-  comments: PropTypes.array.isRequired
-};
+  static propTypes = {
+    bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+    suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+    currentAsset: PropTypes.object,
+    showBanUserDialog: PropTypes.func.isRequired,
+    rejectComment: PropTypes.func.isRequired,
+    acceptComment: PropTypes.func.isRequired,
+    comments: PropTypes.array.isRequired
+  }
+
+  componentDidUpdate (prev) {
+    const {loadMore, comments, commentCount, sort, activeTab: tab, assetId: asset_id} = 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});
+    }
+  }
+
+  render () {
+    const {comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props} = this.props;
+
+    return (
+      <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
+        <ul style={{paddingLeft: 0}}>
+          {
+            comments.length
+            ? comments.map((comment, i) => {
+              const status = comment.action_summaries ? 'FLAGGED' : comment.status;
+              return <Comment
+                key={i}
+                index={i}
+                comment={comment}
+                selected={i === selectedIndex}
+                suspectWords={props.suspectWords}
+                bannedWords={props.bannedWords}
+                actions={actionsMap[status]}
+                showBanUserDialog={props.showBanUserDialog}
+                acceptComment={props.acceptComment}
+                rejectComment={props.rejectComment}
+                currentAsset={props.currentAsset}
+                />;
+            })
+            : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
+          }
+        </ul>
+        <LoadMore
+          comments={comments}
+          loadMore={loadMore}
+          sort={sort}
+          tab={activeTab}
+          showLoadMore={comments.length < commentCount}
+          assetId={props.assetId}
+          />
+      </div>
+    );
+  }
+}

 export default ModerationQueue;
@@ -66,15 +66,17 @@ const Comment = ({actions = [], comment, ...props}) => {
          <div className={styles.sideActions}>
            {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
            <div className={`actions ${styles.actions}`}>
-              {actions.map((action, i) =>
-                <ActionButton key={i}
-                              type={action}
-                              user={comment.user}
-                              status={comment.status}
-                              acceptComment={() => props.acceptComment({commentId: comment.id})}
-                              rejectComment={() => props.rejectComment({commentId: comment.id})}
-                />
-              )}
+              {actions.map((action, i) => {
+                const active = (action === 'REJECT' && comment.status === 'REJECTED') ||
+                               (action === 'APPROVE' && comment.status === 'ACCEPTED');
+                return <ActionButton key={i}
+                  type={action}
+                  user={comment.user}
+                  status={comment.status}
+                  active={active}
+                  acceptComment={() => props.acceptComment({commentId: comment.id})}
+                  rejectComment={() => props.rejectComment({commentId: comment.id})} />;
+              })}
            </div>
          </div>
        </div>
@@ -1,9 +1,25 @@
 import React, {PropTypes} from 'react';
 import styles from './CommentCount.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+const lang = new I18n(translations);

-const CommentCount = props => (
-  <span className={styles.count}>{props.count}</span>
-);
+const CommentCount = ({count}) => {
+  let number = count;
+
+  // shorten large counts to abbreviations
+  if (number / 1e9 > 1) {
+    number = `${(number / 1e9).toFixed(1)}${lang.t('modqueue.billion')}`;
+  } else if (number / 1e6 > 1) {
+    number = `${(number / 1e6).toFixed(1)}${lang.t('modqueue.million')}`;
+  } else if (number / 1e3 > 1) {
+    number = `${(number / 1e3).toFixed(1)}${lang.t('modqueue.thousand')}`;
+  }
+
+  return (
+    <span className={styles.count}>{number}</span>
+  );
+};

 CommentCount.propTypes = {
  count: PropTypes.number.isRequired
@@ -7,13 +7,16 @@ const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) =>
    {
      showLoadMore && <Button
        className={styles.loadMore}
-        onClick={() =>
-          loadMore({
-            cursor: comments[comments.length - 1].created_at,
+        onClick={() => {
+          const lastComment = comments[comments.length - 1];
+          const cursor = lastComment ? lastComment.created_at : null;
+          return loadMore({
+            cursor,
            sort,
            tab,
            asset_id: assetId
-          })}>
+          });
+        }}>
        Load More
      </Button>
    }