Implement approve and live updates

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import {gql} from 'react-apollo';
+import {connect} from 'react-redux';
+import Comment from 'coral-admin/src/routes/Moderation/containers/Comment';
+import {handleCommentChange} from 'coral-admin/src/graphql/utils';
+import {getDefinitionName} from 'coral-framework/utils';
+import truncate from 'lodash/truncate';
+import t from 'coral-framework/services/i18n';
+
+function prepareNotificationText(text) {
+  return truncate(text, {length: 50}).replace('\n', ' ');
+}
+
+class ModSubscription extends React.Component {
+  unsubscribe = null;
+
+  componentWillMount() {
+    this.unsubscribe = this.props.data.subscribeToMore({
+      document: COMMENT_FEATURED_SUBSCRIPTION,
+      variables: {
+        assetId: this.props.data.variables.asset_id,
+      },
+      updateQuery: (prev, {subscriptionData: {data: {commentFeatured: comment}}}) => {
+        const sort = this.props.data.variables.sort;
+        const user = comment.status_history[comment.status_history.length - 1].assigned_by;
+        const notify = {
+          activeQueue: this.props.activeTab,
+          text: t(
+            'talk-plugin-featured-comments.notify_featured',
+            user.username,
+            prepareNotificationText(comment.body)
+          ),
+          anyQueue: true,
+        };
+        return handleCommentChange(prev, comment, sort, notify);
+      },
+    });
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
+
+  render() {
+    return null;
+  }
+}
+
+const COMMENT_FEATURED_SUBSCRIPTION = gql`
+  subscription CommentFeatured($assetId: ID){
+    commentFeatured(asset_id: $assetId){
+      ...${getDefinitionName(Comment.fragments.comment)}
+      status_history {
+        type
+        created_at
+        assigned_by {
+          id
+          username
+        }
+      }
+    }
+  }
+  ${Comment.fragments.comment}
+`;
+
+const mapStateToProps = (state) => ({
+  sortOrder: state.moderation.toJS().sortOrder,
+});
+
+export default connect(mapStateToProps, null)(ModSubscription);

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

@@ -6,6 +6,7 @@ import translations from './translations.yml';
 import update from 'immutability-helper';
 import reducer from './reducer';
 import ModTag from './containers/ModTag';
+import ModSubscription from './containers/ModSubscription';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {insertCommentsSorted} from 'plugin-api/beta/client/utils';
@@ -18,7 +19,8 @@ export default {
     streamTabPanes: [TabPane],
     commentInfoBar: [Tag],
     commentReactions: [Button],
-    adminCommentInfoBar: [ModTag]
+    adminModeration: [ModSubscription],
+    adminCommentInfoBar: [ModTag],
   },
   mutations: {
     IgnoreUser: ({variables}) => ({

plugins/talk-plugin-featured-comments/client/translations.yml

@@ -6,6 +6,7 @@ en:
     featured_comments: Featured Comments
     go_to_conversation: Go to conversation
     tooltip_description: Comments selected by our team as worth reading
+    notify_featured: '{0} featured and approved comment "{1}"'
 es:
   talk-plugin-featured-comments:
     un_feature: Desmarcar
@@ -13,4 +14,4 @@ es:
     featured: Remarcado
     featured_comments: Comentarios Remarcados
     go_to_conversation: Ir al comentario
-    tooltip_description: Comentarios seleccionados por nuestro equipo que valen la pena ser leidos
+    tooltip_description: Comentarios seleccionados por nuestro equipo que valen la pena ser leidos

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

@@ -1,4 +1,48 @@
+const {check} = require('perms/utils');
+
 module.exports = {
+  typeDefs: `
+    type Subscription {
+
+      # Subscribe to featured comments.
+      commentFeatured(asset_id: ID): Comment
+    }
+  `,
+  resolvers: {
+    Subscription: {
+      commentFeatured: ({comment}) => {
+        return comment;
+      },
+    },
+  },
+  setupFunctions: {
+    commentFeatured: (options, args) => ({
+      commentFeatured: {
+        filter: ({comment}, {user}) => {
+          if (args.asset_id === null) {
+            return check(user, ['ADMIN', 'MODERATOR']);
+          }
+          return comment.asset_id === args.asset_id;
+        },
+      },
+    }),
+  },
+  hooks: {
+    RootMutation: {
+      addTag: {
+        async post(obj, {tag: {name, id, item_type}}, {mutators: {Comment}, pubsub}, info, result) {
+          if (name === 'FEATURED' && item_type === 'COMMENTS') {
+            const comment = await Comment.setStatus({id: id, status: 'ACCEPTED'});
+            if (comment) {
+              pubsub.publish('commentFeatured', {comment});
+            }
+            return result;
+          }
+          return result;
+        },
+      },
+    },
+  },
   tags: [
     {
       name: 'FEATURED',