Integrate featured into activity indicator subscription

client/coral-admin/src/routes/Moderation/containers/Indicator.js

@@ -7,10 +7,15 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import withQueueConfig from '../hoc/withQueueConfig';
 import baseQueueConfig from '../queueConfig';
+import Slot from 'coral-framework/components/Slot';
 
 class IndicatorContainer extends Component {
   subscriptions = [];
 
+  handleCommentChange = (root, comment) => {
+    return handleIndicatorChange(root, comment, this.props.queueConfig);
+  };
+
   subscribeToUpdates() {
     const parameters = [
       {
@@ -19,7 +24,7 @@ class IndicatorContainer extends Component {
           prev,
           { subscriptionData: { data: { commentAdded: comment } } }
         ) => {
-          return handleIndicatorChange(prev, comment, this.props.queueConfig);
+          return this.handleCommentChange(prev, comment);
         },
       },
       {
@@ -28,7 +33,7 @@ class IndicatorContainer extends Component {
           prev,
           { subscriptionData: { data: { commentFlagged: comment } } }
         ) => {
-          return handleIndicatorChange(prev, comment, this.props.queueConfig);
+          return this.handleCommentChange(prev, comment);
         },
       },
       {
@@ -37,25 +42,25 @@ class IndicatorContainer extends Component {
           prev,
           { subscriptionData: { data: { commentAccepted: comment } } }
         ) => {
-          return handleIndicatorChange(prev, comment, this.props.queueConfig);
+          return this.handleCommentChange(prev, comment);
         },
       },
       {
         document: COMMENT_REJECTED_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentRejected: { comment } } } }
+          { subscriptionData: { data: { commentRejected: comment } } }
         ) => {
-          return handleIndicatorChange(prev, comment, this.props.queueConfig);
+          return this.handleCommentChange(prev, comment);
         },
       },
       {
         document: COMMENT_RESET_SUBSCRIPTION,
         updateQuery: (
           prev,
-          { subscriptionData: { data: { commentReset: { comment } } } }
+          { subscriptionData: { data: { commentReset: comment } } }
         ) => {
-          return handleIndicatorChange(prev, comment, this.props.queueConfig);
+          return this.handleCommentChange(prev, comment);
         },
       },
     ];
@@ -97,7 +102,16 @@ class IndicatorContainer extends Component {
       return null;
     }
 
-    return <Indicator />;
+    return (
+      <span>
+        <Indicator />
+        <Slot
+          data={this.props.data}
+          handleCommentChange={this.handleCommentChange}
+          fill="adminModerationIndicator"
+        />
+      </span>
+    );
   }
 }
 
@@ -146,7 +160,7 @@ const COMMENT_FLAGGED_SUBSCRIPTION = gql`
 
 const COMMENT_ACCEPTED_SUBSCRIPTION = gql`
   subscription TalkAdmin_ModerationIndicator_CommentAccepted {
-    commentAccepted{
+    commentAccepted {
       ${fields}
     }
   }
@@ -154,7 +168,7 @@ const COMMENT_ACCEPTED_SUBSCRIPTION = gql`
 
 const COMMENT_REJECTED_SUBSCRIPTION = gql`
   subscription TalkAdmin_ModerationIndicator_CommentRejected {
-    commentRejected{
+    commentRejected {
       ${fields}
     }
   }

plugins/talk-plugin-featured-comments/client/containers/ModIndicatorSubscription.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { gql } from 'react-apollo';
+
+class ModIndicatorSubscription extends React.Component {
+  subscriptions = null;
+
+  componentWillMount() {
+    const configs = [
+      {
+        document: COMMENT_FEATURED_SUBSCRIPTION,
+        updateQuery: (
+          prev,
+          { subscriptionData: { data: { commentFeatured: { comment } } } }
+        ) => {
+          return this.props.handleCommentChange(prev, comment);
+        },
+      },
+      {
+        document: COMMENT_UNFEATURED_SUBSCRIPTION,
+        updateQuery: (
+          prev,
+          { subscriptionData: { data: { commentUnfeatured: { comment } } } }
+        ) => {
+          return this.props.handleCommentChange(prev, comment);
+        },
+      },
+    ];
+    this.subscriptions = configs.map(config =>
+      this.props.data.subscribeToMore(config)
+    );
+  }
+
+  componentWillUnmount() {
+    this.subscriptions.forEach(unsubscribe => unsubscribe());
+  }
+
+  render() {
+    return null;
+  }
+}
+
+const COMMENT_FEATURED_SUBSCRIPTION = gql`
+  subscription TalkFeaturedComments_Indicator_CommentFeatured {
+    commentFeatured {
+      comment {
+        status
+        actions {
+          __typename
+          ... on FlagAction {
+            reason
+          }
+          user {
+            id
+            role
+          }
+        }
+        status_history {
+          type
+          assigned_by {
+            id
+          }
+        }
+      }
+    }
+  }
+`;
+
+const COMMENT_UNFEATURED_SUBSCRIPTION = gql`
+  subscription TalkFeaturedComments_Indicator_CommentUnfeatured {
+    commentUnfeatured {
+      comment {
+        status
+        actions {
+          __typename
+          ... on FlagAction {
+            reason
+          }
+          user {
+            id
+            role
+          }
+        }
+        status_history {
+          type
+          assigned_by {
+            id
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default ModIndicatorSubscription;

plugins/talk-plugin-featured-comments/client/index.js

@@ -6,6 +6,7 @@ import update from 'immutability-helper';
 import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
+import ModIndicatorSubscription from './containers/ModIndicatorSubscription';
 import FeaturedDialog from './containers/FeaturedDialog';
 import { gql } from 'react-apollo';
 import reducer from './reducer';
@@ -23,6 +24,7 @@ export default {
     moderationActions: [ModActionButton],
     adminModeration: [ModSubscription, FeaturedDialog],
     adminCommentInfoBar: [ModTag],
+    adminModerationIndicator: [ModIndicatorSubscription],
   },
   mutations: {
     IgnoreUser: ({ variables }) => ({

plugins/talk-plugin-featured-comments/index.js

@@ -36,7 +36,7 @@ module.exports = {
     commentFeatured: (options, args) => ({
       commentFeatured: {
         filter: ({ comment }, { user }) => {
-          if (args.asset_id === null) {
+          if (!args.asset_id) {
             return check(user, ['ADMIN', 'MODERATOR']);
           }
           return comment.asset_id === args.asset_id;
@@ -46,7 +46,7 @@ module.exports = {
     commentUnfeatured: (options, args) => ({
       commentUnfeatured: {
         filter: ({ comment }, { user }) => {
-          if (args.asset_id === null) {
+          if (!args.asset_id) {
             return check(user, ['ADMIN', 'MODERATOR']);
           }
           return comment.asset_id === args.asset_id;