Merge pull request #539 from coralproject/approved-comments-queue

Approved comments queue

client/coral-admin/src/AppRouter.js

@@ -42,6 +42,9 @@ const routes = (
         <Route path='all' components={ModerationContainer}>
           <Route path=':id' components={ModerationContainer} />
         </Route>
+        <Route path='accepted' components={ModerationContainer}>
+          <Route path=':id' components={ModerationContainer} />
+        </Route>
         <Route path='premod' components={ModerationContainer}>
           <Route path=':id' components={ModerationContainer} />
         </Route>

client/coral-admin/src/components/ActionButton.js

@@ -6,6 +6,13 @@ import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQu
 const ActionButton = ({type = '', status, ...props}) => {
   const typeName = type.toLowerCase();
   const active = ((type === 'REJECT' && status === 'REJECTED') || (type === 'APPROVE' && status === 'ACCEPTED'));
+  let text = menuActionsMap[type].text;
+
+  if (text === 'Approve' && active) {
+    text = 'Approved';
+  } else if (text === 'Reject' && active) {
+    text = 'Rejected';
+  }
 
   return (
     <Button
@@ -13,7 +20,7 @@ const ActionButton = ({type = '', status, ...props}) => {
       cStyle={typeName}
       icon={menuActionsMap[type].icon}
       onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
-    >{menuActionsMap[type].text}</Button>
+    >{text}</Button>
   );
 };
 

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -138,6 +138,9 @@ class ModerationContainer extends Component {
     case 'all':
       activeTabCount = data.allCount;
       break;
+    case 'accepted':
+      activeTabCount = data.acceptedCount;
+      break;
     case 'premod':
       activeTabCount = data.premodCount;
       break;
@@ -155,6 +158,7 @@ class ModerationContainer extends Component {
         <ModerationMenu
           asset={asset}
           allCount={data.allCount}
+          acceptedCount={data.acceptedCount}
           premodCount={data.premodCount}
           rejectedCount={data.rejectedCount}
           flaggedCount={data.flaggedCount}

client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js

@@ -23,7 +23,7 @@ LoadMore.propTypes = {
   comments: PropTypes.array.isRequired,
   loadMore: PropTypes.func.isRequired,
   sort: PropTypes.oneOf(['CHRONOLOGICAL', 'REVERSE_CHRONOLOGICAL']).isRequired,
-  tab: PropTypes.oneOf(['rejected', 'premod', 'flagged', 'all']).isRequired,
+  tab: PropTypes.oneOf(['rejected', 'premod', 'flagged', 'all', 'accepted']).isRequired,
   assetId: PropTypes.string,
   showLoadMore: PropTypes.bool.isRequired
 };

client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js

@@ -10,7 +10,7 @@ import {Link} from 'react-router';
 const lang = new I18n(translations);
 
 const ModerationMenu = (
-  {asset, allCount, premodCount, rejectedCount, flaggedCount, selectSort, sort}
+  {asset, allCount, acceptedCount, premodCount, rejectedCount, flaggedCount, selectSort, sort}
 ) => {
 
   function getPath (type) {
@@ -28,6 +28,12 @@ const ModerationMenu = (
             activeClassName={styles.active}>
             <Icon name='question_answer' className={styles.tabIcon} /> {lang.t('modqueue.all')} <CommentCount count={allCount} />
           </Link>
+          <Link
+            to={getPath('accepted')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='check' className={styles.tabIcon} /> {lang.t('modqueue.approved')} <CommentCount count={acceptedCount} />
+          </Link>
           <Link
             to={getPath('premod')}
             className={`mdl-tabs__tab ${styles.tab}`}

client/coral-admin/src/graphql/mutations/index.js

@@ -54,20 +54,26 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
         },
         updateQueries: {
           ModQueue: (oldData) => {
+            const comment = oldData.all.find(c => c.id === commentId);
+            comment.status = 'ACCEPTED';
             const premod = oldData.premod.filter(c => c.id !== commentId);
             const flagged = oldData.flagged.filter(c => c.id !== commentId);
+            const accepted = [comment].concat(oldData.accepted);
             const rejected = oldData.rejected.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 rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount;
+            const acceptedCount = oldData.acceptedCount + 1;
 
             return {
               ...oldData,
               premodCount,
               flaggedCount,
+              acceptedCount,
               rejectedCount,
               premod,
               flagged,
+              accepted,
               rejected,
             };
           }
@@ -82,21 +88,26 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
         },
         updateQueries: {
           ModQueue: (oldData) => {
-            const comment = oldData.premod.concat(oldData.flagged).filter(c => c.id === commentId)[0];
+            const comment = oldData.all.find(c => c.id === commentId);
+            comment.status = 'REJECTED';
             const rejected = [comment].concat(oldData.rejected);
             const premod = oldData.premod.filter(c => c.id !== commentId);
             const flagged = oldData.flagged.filter(c => c.id !== commentId);
+            const accepted = oldData.accepted.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 rejectedCount = oldData.rejectedCount + 1;
+            const acceptedCount = accepted.length < oldData.accepted.length ? oldData.acceptedCount - 1 : oldData.acceptedCount;
 
             return {
               ...oldData,
               premodCount,
               flaggedCount,
+              acceptedCount,
               rejectedCount,
               premod,
               flagged,
+              accepted,
               rejected
             };
           }

client/coral-admin/src/graphql/queries/modQueueQuery.graphql

@@ -8,6 +8,13 @@ query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
     }) {
       ...commentView
     }
+    accepted: comments(query: {
+      statuses: [ACCEPTED],
+      asset_id: $asset_id,
+      sort: $sort
+    }) {
+      ...commentView
+    }
     premod: comments(query: {
         statuses: [PREMOD],
         asset_id: $asset_id,
@@ -38,6 +45,10 @@ query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
     allCount: commentCount(query: {
       asset_id: $asset_id
     })
+    acceptedCount: commentCount(query: {
+      statuses: [ACCEPTED],
+      asset_id: $asset_id
+    })
     premodCount: commentCount(query: {
       statuses: [PREMOD],
       asset_id: $asset_id

client/coral-admin/src/translations.json

@@ -36,6 +36,7 @@
     "modqueue": {
       "likes": "likes",
       "all": "all",
+      "approved": "approved",
       "premod": "pre-mod",
       "rejected": "rejected",
       "flagged": "flagged",
@@ -227,6 +228,8 @@
       "loading": "Cargando resultados"
     },
     "modqueue": {
+      "all": "todos",
+      "approved": "aprobado",
       "likes": "gustos",
       "premod": "pre-mod",
       "rejected": "rechazado",