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