From d9d086c61ec3bfa235238f7c56f18e7fb63e09f1 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Mon, 6 Mar 2017 13:53:56 -0700
Subject: [PATCH 01/16] remove a banned comment after it's confirmed as
 rejected

---
 client/coral-framework/graphql/mutations/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js
index a874f8f0c..40469a18e 100644
--- a/client/coral-framework/graphql/mutations/index.js
+++ b/client/coral-framework/graphql/mutations/index.js
@@ -42,6 +42,10 @@ export const postComment = graphql(POST_COMMENT, {
         updateQueries: {
           AssetQuery: (oldData, {mutationResult:{data:{createComment:{comment}}}}) => {
 
+            if (comment.status === 'REJECTED') {
+              return oldData;
+            }
+
             if (oldData.asset.settings.moderation === 'PRE') {
               return oldData;
             }

From d5b46f219ed81cd1fa05c0eec0dd676de37c69aa Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Tue, 7 Mar 2017 11:54:44 -0500
Subject: [PATCH 02/16] Adding load more button.

---
 .../ModerationQueue/ModerationContainer.js    | 16 ++++++--
 .../ModerationQueue/ModerationQueue.js        | 12 +++++-
 .../components/ModerationMenu.js              | 15 ++------
 .../coral-admin/src/graphql/queries/index.js  | 38 ++++++++++++++++++-
 .../src/graphql/queries/loadMore.graphql      | 13 +++++++
 5 files changed, 76 insertions(+), 18 deletions(-)
 create mode 100644 client/coral-admin/src/graphql/queries/loadMore.graphql

diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 25a7a9511..99a1ec656 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -21,7 +21,8 @@ import ModerationKeysModal from '../../components/ModerationKeysModal';
 
 class ModerationContainer extends Component {
   state = {
-    selectedIndex: 0
+    selectedIndex: 0,
+    sort: 'REVERSE_CHRONOLOGICAL'
   }
 
   componentWillMount() {
@@ -53,6 +54,11 @@ class ModerationContainer extends Component {
 
   }
 
+  selectSort = (sort) => {
+    this.setState({sort});
+    this.props.modQueueResort(sort);
+  }
+
   componentWillUnmount() {
     key.unbind('s');
     key.unbind('shift+/');
@@ -71,7 +77,7 @@ class ModerationContainer extends Component {
   }
 
   render () {
-    const {data, moderation, settings, assets, modQueueResort, onClose, ...props} = this.props;
+    const {data, moderation, settings, assets, onClose, ...props} = this.props;
     const providedAssetId = this.props.params.id;
     const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
 
@@ -103,7 +109,8 @@ class ModerationContainer extends Component {
           premodCount={data.premodCount}
           rejectedCount={data.rejectedCount}
           flaggedCount={data.flaggedCount}
-          modQueueResort={modQueueResort}
+          selectSort={this.selectSort}
+          sort={this.state.sort}
         />
         <ModerationQueue
           currentAsset={asset}
@@ -115,6 +122,9 @@ class ModerationContainer extends Component {
           showBanUserDialog={props.showBanUserDialog}
           acceptComment={props.acceptComment}
           rejectComment={props.rejectComment}
+          loadMore={props.loadMore}
+          assetId={providedAssetId}
+          sort={this.state.sort}
         />
         <BanUserDialog
           open={moderation.banDialog}
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index 58fdd1398..f6daea099 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
@@ -8,7 +8,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
-const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => {
+const ModerationQueue = ({comments, selectedIndex, singleView, loadMore, activeTab, sort, ...props}) => {
   return (
     <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
       <ul style={{paddingLeft: 0}}>
@@ -20,7 +20,7 @@ const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => {
             key={i}
             index={i}
             comment={comment}
-            commentType={props.activeTab}
+            commentType={activeTab}
             selected={i === selectedIndex}
             suspectWords={props.suspectWords}
             actions={actionsMap[status]}
@@ -33,6 +33,14 @@ const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => {
         : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
       }
       </ul>
+      <button onClick={() =>
+          loadMore({
+            cursor: comments[comments.length - 1].created_at,
+            sort,
+            tab: activeTab,
+            asset_id: props.assetId
+          })}
+          >Load More</button>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
index f9b0c266f..8d6a0e883 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
@@ -9,10 +9,6 @@ import {Link} from 'react-router';
 const lang = new I18n(translations);
 
 class ModerationMenu extends Component {
-  state = {
-    sort: 'REVERSE_CHRONOLOGICAL',
-  }
-
   static propTypes = {
     premodCount: PropTypes.number.isRequired,
     rejectedCount: PropTypes.number.isRequired,
@@ -22,13 +18,8 @@ class ModerationMenu extends Component {
     })
   }
 
-  selectSort = (sort) => {
-    this.setState({sort});
-    this.props.modQueueResort(sort);
-  }
-
   render() {
-    const {asset, premodCount, rejectedCount, flaggedCount} = this.props;
+    const {asset, premodCount, rejectedCount, flaggedCount, selectSort, sort} = this.props;
     const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod';
     const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected';
     const flagPath = asset ? `/admin/moderate/flagged/${asset.id}` : '/admin/moderate/flagged';
@@ -50,8 +41,8 @@ class ModerationMenu extends Component {
           <SelectField
             className={styles.selectField}
             label='Sort'
-            value={this.state.sort}
-            onChange={sort => this.selectSort(sort)}>
+            value={sort}
+            onChange={sort => selectSort(sort)}>
             <Option value={'REVERSE_CHRONOLOGICAL'}>Newest First</Option>
             <Option value={'CHRONOLOGICAL'}>Oldest First</Option>
           </SelectField>
diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js
index c4a30ad44..13164bca2 100644
--- a/client/coral-admin/src/graphql/queries/index.js
+++ b/client/coral-admin/src/graphql/queries/index.js
@@ -1,6 +1,7 @@
 import {graphql} from 'react-apollo';
 
 import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
+import MOD_QUEUE_LOAD_MORE from './loadMore.graphql';
 import METRICS from './metricsQuery.graphql';
 
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
@@ -14,7 +15,8 @@ export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
   },
   props: ({ownProps: {params: {id = null}}, data}) => ({
     data,
-    modQueueResort: modQueueResort(id, data.fetchMore)
+    modQueueResort: modQueueResort(id, data.fetchMore),
+    loadMore: loadMore(data.fetchMore)
   })
 });
 
@@ -30,6 +32,40 @@ export const getMetrics = graphql(METRICS, {
   }
 });
 
+export const loadMore = (fetchMore) => ({limit, cursor, sort, tab, asset_id}) => {
+  let statuses;
+  switch(tab) {
+  case 'premod':
+    statuses = ['PREMOD'];
+    break;
+  case 'flagged':
+    statuses = ['NONE', 'PREMOD'];
+    break;
+  case 'rejected':
+    statuses = ['REJECTED'];
+    break;
+  }
+  return fetchMore({
+    query: MOD_QUEUE_LOAD_MORE,
+    variables: {
+      limit,
+      cursor,
+      sort,
+      statuses,
+      asset_id
+    },
+    updateQuery: (oldData, {fetchMoreResult:{data:{comments}}}) => {
+      return {
+        ...oldData,
+        [tab]: [
+          ...oldData[tab],
+          ...comments
+        ]
+      };
+    }
+  });
+};
+
 export const modQueueResort = (id, fetchMore) => (sort) => {
   return fetchMore({
     query: MOD_QUEUE_QUERY,
diff --git a/client/coral-admin/src/graphql/queries/loadMore.graphql b/client/coral-admin/src/graphql/queries/loadMore.graphql
new file mode 100644
index 000000000..56966a804
--- /dev/null
+++ b/client/coral-admin/src/graphql/queries/loadMore.graphql
@@ -0,0 +1,13 @@
+#import "../fragments/commentView.graphql"
+
+query LoadMoreModQueue($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!]) {
+  comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort}) {
+    ...commentView
+    action_summaries {
+      count
+      ... on FlagActionSummary {
+        reason
+      }
+    }
+  }
+}

From 3a31ca8d3892074382d4558f218fd80671291311 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Tue, 7 Mar 2017 10:06:03 -0700
Subject: [PATCH 03/16] blur the comment until it's ready

---
 client/coral-embed-stream/src/Comment.css         | 7 ++++++-
 client/coral-embed-stream/src/Comment.js          | 1 +
 client/coral-framework/graphql/mutations/index.js | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css
index 7bc1a21f4..6966d82ab 100644
--- a/client/coral-embed-stream/src/Comment.css
+++ b/client/coral-embed-stream/src/Comment.css
@@ -3,5 +3,10 @@
 }
 
 .Comment {
-  
+
+}
+
+.pendingComment {
+  filter: blur(2px);
+  pointer-events: none;
 }
diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 72449c906..059c366ff 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -116,6 +116,7 @@ class Comment extends React.Component {
     const dontagree = getActionSummary('DontAgreeActionSummary', comment);
     let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
     commentClass += highlighted === comment.id ? ' highlighted-comment' : '';
+    commentClass += comment.id === 'pending' ? ' pendingComment' : '';
 
     // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
     const notifyOnError = (fn, errorToMessage) => async () => {
diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js
index 40469a18e..d319c2f8f 100644
--- a/client/coral-framework/graphql/mutations/index.js
+++ b/client/coral-framework/graphql/mutations/index.js
@@ -35,7 +35,7 @@ export const postComment = graphql(POST_COMMENT, {
               action_summaries: [],
               tags: [],
               status: null,
-              id: `${Date.now()}_temp_id`
+              id: 'pending'
             }
           }
         },

From 54aa3bc8fa4a0e3fb0c67a16704409b22c7ba55f Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Tue, 7 Mar 2017 12:31:43 -0500
Subject: [PATCH 04/16] Styling load more button.

---
 .../ModerationQueue/ModerationContainer.js    | 13 +++++++++++
 .../ModerationQueue/ModerationQueue.js        | 19 ++++++++--------
 .../ModerationQueue/components/LoadMore.js    | 22 +++++++++++++++++++
 .../ModerationQueue/components/styles.css     | 20 +++++++++++++++++
 4 files changed, 65 insertions(+), 9 deletions(-)
 create mode 100644 client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js

diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 99a1ec656..16de8a32e 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -100,6 +100,18 @@ class ModerationContainer extends Component {
     }
 
     const comments = data[activeTab];
+    let activeTabCount;
+    switch(activeTab) {
+    case 'premod':
+      activeTabCount = data.premodCount;
+      break;
+    case 'flagged':
+      activeTabCount = data.flaggedCount;
+      break;
+    case 'rejected':
+      activeTabCount = data.rejectedCount;
+      break;
+    }
 
     return (
       <div>
@@ -125,6 +137,7 @@ class ModerationContainer extends Component {
           loadMore={props.loadMore}
           assetId={providedAssetId}
           sort={this.state.sort}
+          commentCount={activeTabCount}
         />
         <BanUserDialog
           open={moderation.banDialog}
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index f6daea099..b90b59f81 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
@@ -6,9 +6,10 @@ import EmptyCard from '../../components/EmptyCard';
 import {actionsMap} from './helpers/moderationQueueActionsMap';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
+import LoadMore from './components/LoadMore';
 
 const lang = new I18n(translations);
-const ModerationQueue = ({comments, selectedIndex, singleView, loadMore, activeTab, sort, ...props}) => {
+const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props}) => {
   return (
     <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
       <ul style={{paddingLeft: 0}}>
@@ -33,14 +34,14 @@ const ModerationQueue = ({comments, selectedIndex, singleView, loadMore, activeT
         : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
       }
       </ul>
-      <button onClick={() =>
-          loadMore({
-            cursor: comments[comments.length - 1].created_at,
-            sort,
-            tab: activeTab,
-            asset_id: props.assetId
-          })}
-          >Load More</button>
+      <LoadMore
+        comments={comments}
+        loadMore={loadMore}
+        sort={sort}
+        tab={activeTab}
+        showLoadMore={comments.length < commentCount}
+        assetId={props.assetId}
+        />
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js
new file mode 100644
index 000000000..5ac193525
--- /dev/null
+++ b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import styles from './styles.css';
+
+const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) =>
+  <div className={styles.loadMoreContainer}>
+    {
+      showLoadMore && <Button
+        className={styles.loadMore}
+        onClick={() =>
+          loadMore({
+            cursor: comments[comments.length - 1].created_at,
+            sort,
+            tab,
+            asset_id: assetId
+          })}>
+        Load More
+      </Button>
+    }
+  </div>;
+
+export default LoadMore;
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index 59f47faad..5abbb6b7d 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -387,3 +387,23 @@ span {
     cursor: pointer;
    }
 }
+
+.loadMoreContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+};
+
+.loadMore {
+  width: 100%;
+  text-align: center;
+  color: #FFF;
+  max-width: 660px;
+  margin-bottom: 30px;
+  background-color: #2376D8;
+  cursor: pointer;
+}
+
+.loadMore:hover {
+  background-color: #4399FF;
+}

From 2a6236b61823525d181bbd4c97c25467d5cd7f35 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Tue, 7 Mar 2017 12:37:12 -0500
Subject: [PATCH 05/16] Moving ModerationMenu to a stateless compenent.

---
 .../components/ModerationMenu.js              | 81 +++++++++----------
 1 file changed, 39 insertions(+), 42 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
index 8d6a0e883..b8160e21b 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
@@ -1,4 +1,4 @@
-import React, {PropTypes, Component} from 'react';
+import React, {PropTypes} from 'react';
 import CommentCount from './CommentCount';
 import styles from './styles.css';
 import {SelectField, Option} from 'react-mdl-selectfield';
@@ -8,48 +8,45 @@ import {Link} from 'react-router';
 
 const lang = new I18n(translations);
 
-class ModerationMenu extends Component {
-  static propTypes = {
-    premodCount: PropTypes.number.isRequired,
-    rejectedCount: PropTypes.number.isRequired,
-    flaggedCount: PropTypes.number.isRequired,
-    asset: PropTypes.shape({
-      id: PropTypes.string
-    })
-  }
-
-  render() {
-    const {asset, premodCount, rejectedCount, flaggedCount, selectSort, sort} = this.props;
-    const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod';
-    const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected';
-    const flagPath = asset ? `/admin/moderate/flagged/${asset.id}` : '/admin/moderate/flagged';
-    return (
-      <div className='mdl-tabs'>
-        <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-          <div className={styles.tabBarPadding}/>
-          <div>
-            <Link to={premodPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-              {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
-            </Link>
-            <Link to={rejectPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-              {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
-            </Link>
-            <Link to={flagPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-              {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
-            </Link>
-          </div>
-          <SelectField
-            className={styles.selectField}
-            label='Sort'
-            value={sort}
-            onChange={sort => selectSort(sort)}>
-            <Option value={'REVERSE_CHRONOLOGICAL'}>Newest First</Option>
-            <Option value={'CHRONOLOGICAL'}>Oldest First</Option>
-          </SelectField>
+const ModerationMenu = ({asset, premodCount, rejectedCount, flaggedCount, selectSort, sort}) => {
+  const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod';
+  const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected';
+  const flagPath = asset ? `/admin/moderate/flagged/${asset.id}` : '/admin/moderate/flagged';
+  return (
+    <div className='mdl-tabs'>
+      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
+        <div className={styles.tabBarPadding}/>
+        <div>
+          <Link to={premodPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+            {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
+          </Link>
+          <Link to={rejectPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+            {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
+          </Link>
+          <Link to={flagPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+            {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+          </Link>
         </div>
+        <SelectField
+          className={styles.selectField}
+          label='Sort'
+          value={sort}
+          onChange={sort => selectSort(sort)}>
+          <Option value={'REVERSE_CHRONOLOGICAL'}>Newest First</Option>
+          <Option value={'CHRONOLOGICAL'}>Oldest First</Option>
+        </SelectField>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+ModerationMenu.propTypes = {
+  premodCount: PropTypes.number.isRequired,
+  rejectedCount: PropTypes.number.isRequired,
+  flaggedCount: PropTypes.number.isRequired,
+  asset: PropTypes.shape({
+    id: PropTypes.string
+  })
+};
 
 export default ModerationMenu;

From 5e4c251e835e82a24fab61dc0f2373f902a7a673 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Tue, 7 Mar 2017 10:47:51 -0700
Subject: [PATCH 06/16] style the pending comment correctly

---
 client/coral-embed-stream/src/Comment.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 059c366ff..0a3cdb78b 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -116,7 +116,7 @@ class Comment extends React.Component {
     const dontagree = getActionSummary('DontAgreeActionSummary', comment);
     let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
     commentClass += highlighted === comment.id ? ' highlighted-comment' : '';
-    commentClass += comment.id === 'pending' ? ' pendingComment' : '';
+    commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
 
     // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
     const notifyOnError = (fn, errorToMessage) => async () => {

From 95aa89faed81ed5b1530d19f5ffb1a7acae877ec Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Tue, 7 Mar 2017 14:16:44 -0500
Subject: [PATCH 07/16] Switching premod status update to updateQueries
 function.

---
 .../src/graphql/mutations/index.js            | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/graphql/mutations/index.js b/client/coral-admin/src/graphql/mutations/index.js
index fe3a1faf9..884e30e0c 100644
--- a/client/coral-admin/src/graphql/mutations/index.js
+++ b/client/coral-admin/src/graphql/mutations/index.js
@@ -22,7 +22,26 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
           commentId,
           status: 'ACCEPTED'
         },
-        refetchQueries: ['ModQueue']
+        updateQueries: {
+          ModQueue: (oldData) => {
+            const premod = oldData.premod.filter(c => c.id !== commentId);
+            const flagged = oldData.flagged.filter(c => c.id !== commentId);
+            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;
+
+            return {
+              ...oldData,
+              premodCount,
+              flaggedCount,
+              rejectedCount,
+              premod,
+              flagged,
+              rejected,
+            };
+          }
+        }
       });
     },
     rejectComment: ({commentId}) => {
@@ -31,7 +50,27 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
           commentId,
           status: 'REJECTED'
         },
-        refetchQueries: ['ModQueue']
+        updateQueries: {
+          ModQueue: (oldData) => {
+            const comment = oldData.premod.concat(oldData.flagged).filter(c => c.id === commentId)[0];
+            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 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;
+
+            return {
+              ...oldData,
+              premodCount,
+              flaggedCount,
+              rejectedCount,
+              premod,
+              flagged,
+              rejected
+            };
+          }
+        }
       });
     }
   })

From f563bcf1191617b9d5a6014e2b8f9765094118f2 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Mar 2017 16:35:01 -0500
Subject: [PATCH 08/16] Adding fix for long text

---
 .../ModerationQueue/components/ModerationHeader.js     |  2 +-
 .../containers/ModerationQueue/components/styles.css   | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
index c5a11b642..29e720337 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
@@ -11,7 +11,7 @@ const ModerationHeader = props => (
             <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
               <Link className="mdl-tabs__tab" to="/admin/moderate">All Streams</Link>
               <a className="mdl-tabs__tab">
-                {props.asset.title}
+                <span>{props.asset.title}</span>
                 <a href={props.asset.url} className={styles.settingsButton}><Icon name="settings"/></a>
               </a>
               <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index 59f47faad..fd0eb4b9c 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -114,7 +114,15 @@ span {
       }
 
       &:nth-child(2) {
-       text-align: center;
+        span {
+          text-align: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          max-width: 344px;
+          display: inline-block;
+          vertical-align: top;
+        }
       }
 
       &:last-child {

From af4a69a67704581d7f92ab14a393e46af059e636 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Mar 2017 16:50:36 -0500
Subject: [PATCH 09/16] Changing icon and link

---
 .../ModerationQueue/components/ModerationHeader.js        | 8 ++++----
 .../src/containers/ModerationQueue/components/styles.css  | 8 +++-----
 client/coral-ui/components/Icon.js                        | 2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
index 29e720337..260097979 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
@@ -10,10 +10,10 @@ const ModerationHeader = props => (
           props.asset ?
             <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
               <Link className="mdl-tabs__tab" to="/admin/moderate">All Streams</Link>
-              <a className="mdl-tabs__tab">
-                <span>{props.asset.title}</span>
-                <a href={props.asset.url} className={styles.settingsButton}><Icon name="settings"/></a>
-              </a>
+                <a className="mdl-tabs__tab" href={props.asset.url}>
+                    <span> {props.asset.title}</span>
+                    <Icon className={styles.settingsButton} name="open_in_new"/>
+                </a>
               <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
             </div>
             :
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index fd0eb4b9c..d3e811b53 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -84,11 +84,9 @@ span {
   margin-bottom: -1px;
 
   .settingsButton {
-    i {
-      vertical-align: middle;
-      margin-left: 10px;
-      margin-top: -4px;
-    }
+    vertical-align: middle;
+    margin-left: 10px;
+    margin-top: -4px;
   }
 
   .moderateAsset {
diff --git a/client/coral-ui/components/Icon.js b/client/coral-ui/components/Icon.js
index 65bf52f72..11432c753 100644
--- a/client/coral-ui/components/Icon.js
+++ b/client/coral-ui/components/Icon.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Icon as IconMDL}  from 'react-mdl';
 
-const Icon = ({className, name}) => (
+const Icon = ({className = '', name}) => (
   <IconMDL className={className} name={name} />
 );
 

From cceeafadeccfbdd52817313f2ba5df60f161ae21 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Mar 2017 16:53:42 -0500
Subject: [PATCH 10/16] Indent

---
 .../ModerationQueue/components/ModerationHeader.js        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
index 260097979..8d9f6b7e0 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
@@ -10,10 +10,10 @@ const ModerationHeader = props => (
           props.asset ?
             <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
               <Link className="mdl-tabs__tab" to="/admin/moderate">All Streams</Link>
-                <a className="mdl-tabs__tab" href={props.asset.url}>
-                    <span> {props.asset.title}</span>
-                    <Icon className={styles.settingsButton} name="open_in_new"/>
-                </a>
+              <a className="mdl-tabs__tab" href={props.asset.url}>
+                <span>{props.asset.title}</span>
+                <Icon className={styles.settingsButton} name="open_in_new"/>
+              </a>
               <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
             </div>
             :

From 0863ca26ff357b5d0309578e0ceb494b04ae5383 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 8 Mar 2017 09:56:36 -0700
Subject: [PATCH 11/16] update dashboard links

---
 .../src/containers/Dashboard/FlagWidget.js        | 13 +++++++------
 .../src/containers/Dashboard/LikeWidget.js        | 13 +++++++------
 .../src/containers/Dashboard/Widget.css           | 15 +++++++++++++++
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
index da71ac04a..4b86ec7d7 100644
--- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
@@ -16,7 +16,7 @@ const FlagWidget = (props) => {
         <thead className={styles.widgetHead}>
           <tr>
             <th>{lang.t('streams.article')}</th>
-            <th>{lang.t('dashboard.flags')}</th>
+            <th colSpan='2'>{lang.t('dashboard.flags')}</th>
           </tr>
         </thead>
         <tbody>
@@ -27,20 +27,21 @@ const FlagWidget = (props) => {
               return (
                 <tr className={styles.rowLinkify} key={asset.id}>
                   <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
+                    <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
                       <p className={styles.assetTitle}>{asset.title}</p>
                       <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
                     </Link>
                   </td>
                   <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
-                      <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                    </Link>
+                    <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
+                  </td>
+                  <td>
+                    <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
                   </td>
                 </tr>
               );
             })
-            : <tr className={styles.rowLinkify}><td colSpan="2">{lang.t('dashboard.no_flags')}</td></tr>
+            : <tr className={styles.rowLinkify}><td colSpan="3">{lang.t('dashboard.no_flags')}</td></tr>
           }
           { /* rows in a table with a fixed height will expand and ignore height.
                 this extra row will expand to fill the extra space. */
diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
index 25e851966..d52676ae4 100644
--- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
@@ -17,7 +17,7 @@ const LikeWidget = (props) => {
         <thead className={styles.widgetHead}>
           <tr>
             <th>{lang.t('streams.article')}</th>
-            <th>{lang.t('modqueue.likes')}</th>
+            <th colSpan='2'>{lang.t('modqueue.likes')}</th>
           </tr>
         </thead>
         <tbody>
@@ -28,20 +28,21 @@ const LikeWidget = (props) => {
               return (
                 <tr className={styles.rowLinkify} key={asset.id}>
                   <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
+                    <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
                       <p className={styles.assetTitle}>{asset.title}</p>
                       <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
                     </Link>
                   </td>
                   <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
-                      <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                    </Link>
+                    <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
+                  </td>
+                  <td>
+                    <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
                   </td>
                 </tr>
               );
             })
-            : <tr className={styles.rowLinkify}><td colSpan="2">{lang.t('dashboard.no_likes')}</td></tr>
+            : <tr className={styles.rowLinkify}><td colSpan="3">{lang.t('dashboard.no_likes')}</td></tr>
           }
           { /* rows in a table with a fixed height will expand and ignore height.
                 this extra row will expand to fill the extra space. */
diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css
index cb764d9cc..3170cf332 100644
--- a/client/coral-admin/src/containers/Dashboard/Widget.css
+++ b/client/coral-admin/src/containers/Dashboard/Widget.css
@@ -55,11 +55,26 @@
   padding: 10px;
 }
 
+.widgetTable tbody td:last-child {
+  padding-top: 0;
+}
+
 .linkToAsset {
   display: block;
   text-decoration: none;
 }
 
+.linkToModerate {
+  background-color: #e0e0e0;
+  padding: 10px 14px;
+  text-decoration: none;
+  color: black;
+}
+
+.linkToModerate:hover {
+  background-color: #ccc;
+}
+
 .lede {
   font-size: 0.9em;
   color: #aaa;

From 3262d136b730d7b046984396fbdbb4ea6c4ee51e Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Wed, 8 Mar 2017 15:44:19 -0500
Subject: [PATCH 12/16] Resetting report menu on close.

---
 client/coral-plugin-flags/FlagButton.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js
index 537d899cd..45110f407 100644
--- a/client/coral-plugin-flags/FlagButton.js
+++ b/client/coral-plugin-flags/FlagButton.js
@@ -32,18 +32,30 @@ class FlagButton extends Component {
     if (flagged) {
       this.setState((prev) => prev.localPost ? {...prev, localPost: null, step: 0} : {...prev, localDelete: true});
       deleteAction(localPost || flag.current_user.id);
+    } else if (this.state.showMenu){
+      this.closeMenu();
     } else {
-      this.setState({showMenu: !this.state.showMenu});
+      this.setState({showMenu: true});
     }
   }
 
+  closeMenu = () => {
+    this.setState({
+      showMenu: false,
+      itemType: '',
+      reason: '',
+      message: '',
+      step: 0
+    });
+  }
+
   onPopupContinue = () => {
     const {postFlag, postDontAgree, 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) {
-      this.setState({showMenu: false});
+      this.closeMenu();
     } else {
       this.setState({step: step + 1});
     }
@@ -114,7 +126,7 @@ class FlagButton extends Component {
   }
 
   handleClickOutside () {
-    this.setState({showMenu: false});
+    this.closeMenu();
   }
 
   render () {

From d203a9afe0e7af60f47dd16e5e2c7123b489e30d Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Wed, 8 Mar 2017 16:06:34 -0500
Subject: [PATCH 13/16] Auto-rejecting comments on ban.

---
 client/coral-admin/src/components/BanUserDialog.js     | 10 ++++++++--
 .../containers/ModerationQueue/ModerationContainer.js  |  4 +++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js
index b23d8f9d1..f6a7227b8 100644
--- a/client/coral-admin/src/components/BanUserDialog.js
+++ b/client/coral-admin/src/components/BanUserDialog.js
@@ -8,7 +8,13 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
+const onBanClick = (userId, commentId, handleBanUser, rejectComment) => (e) => {
+  e.preventDefault();
+  handleBanUser({userId})
+  .then(() => rejectComment({commentId}));
+};
+
+const BanUserDialog = ({open, handleClose, handleBanUser, rejectComment, user, commentId}) => (
   <Dialog
     className={styles.dialog}
     id="banuserDialog"
@@ -29,7 +35,7 @@ const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
         <Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
           {lang.t('bandialog.cancel')}
         </Button>
-        <Button cStyle="black" className={styles.ban} onClick={() => handleBanUser({userId: user.id})} raised>
+        <Button cStyle="black" className={styles.ban} onClick={onBanClick(user.id, commentId, handleBanUser, rejectComment)} raised>
           {lang.t('bandialog.yes_ban_user')}
         </Button>
       </div>
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 2f43911b1..1d716ff41 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -26,7 +26,7 @@ class ModerationContainer extends Component {
 
   componentWillMount() {
     const {toggleModal, singleView} = this.props;
-    
+
     this.props.fetchSettings();
     key('s', () => singleView());
     key('shift+/', () => toggleModal(true));
@@ -140,8 +140,10 @@ class ModerationContainer extends Component {
         <BanUserDialog
           open={moderation.banDialog}
           user={moderation.user}
+          commentId={moderation.commentId}
           handleClose={props.hideBanUserDialog}
           handleBanUser={props.banUser}
+          rejectComment={props.rejectComment}
         />
       <ModerationKeysModal
           open={moderation.modalOpen}

From fac3d26c2278cbc92a009352ed9a295f097d3b83 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Wed, 8 Mar 2017 16:39:53 -0500
Subject: [PATCH 14/16] Closing ban dialog after ban is complete.

---
 client/coral-admin/src/components/BanUserDialog.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js
index f6a7227b8..4f2296409 100644
--- a/client/coral-admin/src/components/BanUserDialog.js
+++ b/client/coral-admin/src/components/BanUserDialog.js
@@ -8,9 +8,10 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const onBanClick = (userId, commentId, handleBanUser, rejectComment) => (e) => {
+const onBanClick = (userId, commentId, handleBanUser, rejectComment, handleClose) => (e) => {
   e.preventDefault();
   handleBanUser({userId})
+  .then(handleClose)
   .then(() => rejectComment({commentId}));
 };
 
@@ -35,7 +36,7 @@ const BanUserDialog = ({open, handleClose, handleBanUser, rejectComment, user, c
         <Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
           {lang.t('bandialog.cancel')}
         </Button>
-        <Button cStyle="black" className={styles.ban} onClick={onBanClick(user.id, commentId, handleBanUser, rejectComment)} raised>
+        <Button cStyle="black" className={styles.ban} onClick={onBanClick(user.id, commentId, handleBanUser, rejectComment, handleClose)} raised>
           {lang.t('bandialog.yes_ban_user')}
         </Button>
       </div>

From ce7a2d54d09781eab1696536b3689c04030465e9 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 9 Mar 2017 10:59:28 -0500
Subject: [PATCH 15/16] Font Size

---
 .../src/containers/ModerationQueue/components/styles.css         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index d3e811b53..627cde5e4 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -87,6 +87,7 @@ span {
     vertical-align: middle;
     margin-left: 10px;
     margin-top: -4px;
+    font-size: 16px;
   }
 
   .moderateAsset {

From a0953c068906209a3265d1d5458185a35f372ac0 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Thu, 9 Mar 2017 13:33:00 -0500
Subject: [PATCH 16/16] Adding proptypes to loadmore component.

---
 .../containers/ModerationQueue/components/LoadMore.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js
index 5ac193525..f8d3f0ed4 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Button} from 'coral-ui';
 import styles from './styles.css';
 
@@ -19,4 +19,13 @@ const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) =>
     }
   </div>;
 
+LoadMore.propTypes = {
+  comments: PropTypes.array.isRequired,
+  loadMore: PropTypes.func.isRequired,
+  sort: PropTypes.oneOf(['CHRONOLOGICAL', 'REVERSE_CHRONOLOGICAL']).isRequired,
+  tab: PropTypes.oneOf(['rejected', 'premod', 'flagged']).isRequired,
+  assetId: PropTypes.string,
+  showLoadMore: PropTypes.bool.isRequired
+};
+
 export default LoadMore;