Merge master

plugins/talk-plugin-featured-comments/README.md

@@ -0,0 +1,19 @@
+---
+title: talk-plugin-featured-comments
+permalink: /plugin/talk-plugin-featured-comments/
+layout: plugin
+plugin:
+    name: talk-plugin-featured-comments
+    default: true
+    provides:
+        - Server
+        - Client
+---
+
+Enables the ability for Moderators to feature and un-feature comments via the
+Stream and the Admin. Featured comments show in a first-place tab on the Stream
+if there are any featured comments on that story.
+
+When paired with the [talk-plugin-moderator-actions](/talk/plugin/talk-plugin-moderator-actions)
+plugin, moderators will have the option of featuring comments from the comment
+stream.

plugins/talk-plugin-featured-comments/client/components/Comment.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './Comment.css';
 import { t } from 'plugin-api/beta/client/services';
@@ -18,8 +19,8 @@ class Comment extends React.Component {
   };
 
   render() {
-    const { comment, asset, root, data } = this.props;
-    const queryData = { comment, asset, root };
+    const { comment, asset, root } = this.props;
+    const slotPassthrough = { comment, asset, root };
     return (
       <div className={cn(styles.root, `${pluginName}-comment`)}>
         <Slot
@@ -27,8 +28,8 @@ class Comment extends React.Component {
           className={cn(styles.quote, `${pluginName}-comment-body`)}
           fill="commentContent"
           defaultComponent={CommentContent}
-          data={data}
-          queryData={queryData}
+          passthrough={slotPassthrough}
+          size={1}
         />
 
         <div className={cn(`${pluginName}-comment-username-box`)}>
@@ -36,8 +37,7 @@ class Comment extends React.Component {
             className={cn(styles.username, `${pluginName}-comment-username`)}
             fill="commentAuthorName"
             defaultComponent={CommentAuthorName}
-            queryData={queryData}
-            data={data}
+            passthrough={slotPassthrough}
             inline
           />
 
@@ -45,9 +45,7 @@ class Comment extends React.Component {
             fill="commentTimestamp"
             defaultComponent={CommentTimestamp}
             className={cn(styles.timestamp, `${pluginName}-comment-timestamp`)}
-            created_at={comment.created_at}
-            data={data}
-            queryData={queryData}
+            passthrough={{ created_at: comment.created_at, ...slotPassthrough }}
             inline
           />
         </div>
@@ -62,19 +60,11 @@ class Comment extends React.Component {
           >
             <Slot
               fill="commentReactions"
-              root={root}
-              data={data}
-              comment={comment}
-              asset={asset}
+              passthrough={slotPassthrough}
               inline
             />
 
-            <FeaturedButton
-              root={root}
-              data={data}
-              comment={comment}
-              asset={asset}
-            />
+            <FeaturedButton root={root} comment={comment} asset={asset} />
           </div>
           <div
             className={cn(
@@ -99,4 +89,11 @@ class Comment extends React.Component {
   }
 }
 
+Comment.propTypes = {
+  viewComment: PropTypes.func,
+  comment: PropTypes.object,
+  asset: PropTypes.object,
+  root: PropTypes.object,
+};
+
 export default Comment;

plugins/talk-plugin-featured-comments/client/components/TabPane.js

@@ -22,7 +22,6 @@ class TabPane extends React.Component {
   render() {
     const {
       root,
-      data,
       asset: { featuredComments, ...asset },
       viewComment,
     } = this.props;
@@ -32,7 +31,6 @@ class TabPane extends React.Component {
           <Comment
             key={comment.id}
             root={root}
-            data={data}
             comment={comment}
             asset={asset}
             viewComment={viewComment}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { gql } from 'react-apollo';
 import { subscriptionFields } from 'coral-admin/src/routes/Moderation/graphql';
+import { compose, withSubscribeToMore } from 'plugin-api/beta/client/hocs';
 
 class ModIndicatorSubscription extends React.Component {
   subscriptions = null;
@@ -27,7 +28,7 @@ class ModIndicatorSubscription extends React.Component {
       },
     ];
     this.subscriptions = configs.map(config =>
-      this.props.data.subscribeToMore(config)
+      this.props.subscribeToMore(config)
     );
   }
 
@@ -60,4 +61,4 @@ const COMMENT_UNFEATURED_SUBSCRIPTION = gql`
   }
 `;
 
-export default ModIndicatorSubscription;
+export default compose(withSubscribeToMore)(ModIndicatorSubscription);

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

@@ -6,6 +6,11 @@ import { getDefinitionName } from 'coral-framework/utils';
 import truncate from 'lodash/truncate';
 import t from 'coral-framework/services/i18n';
 import { subscriptionFields } from 'coral-admin/src/routes/Moderation/graphql';
+import {
+  compose,
+  withSubscribeToMore,
+  withVariables,
+} from 'plugin-api/beta/client/hocs';
 
 function prepareNotificationText(text) {
   return truncate(text, { length: 50 }).replace('\n', ' ');
@@ -19,7 +24,7 @@ class ModSubscription extends React.Component {
       {
         document: COMMENT_FEATURED_SUBSCRIPTION,
         variables: {
-          assetId: this.props.data.variables.asset_id,
+          assetId: this.props.variables.asset_id,
         },
         updateQuery: (
           prev,
@@ -39,7 +44,7 @@ class ModSubscription extends React.Component {
       {
         document: COMMENT_UNFEATURED_SUBSCRIPTION,
         variables: {
-          assetId: this.props.data.variables.asset_id,
+          assetId: this.props.variables.asset_id,
         },
         updateQuery: (
           prev,
@@ -62,7 +67,7 @@ class ModSubscription extends React.Component {
       },
     ];
     this.subscriptions = configs.map(config =>
-      this.props.data.subscribeToMore(config)
+      this.props.subscribeToMore(config)
     );
   }
 
@@ -111,4 +116,8 @@ const mapStateToProps = state => ({
   user: state.auth.user,
 });
 
-export default connect(mapStateToProps, null)(ModSubscription);
+export default compose(
+  connect(mapStateToProps, null),
+  withVariables,
+  withSubscribeToMore
+)(ModSubscription);

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

@@ -2,7 +2,12 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import { compose, gql } from 'react-apollo';
 import TabPane from '../components/TabPane';
-import { withFragments, connect } from 'plugin-api/beta/client/hocs';
+import {
+  withFragments,
+  connect,
+  withFetchMore,
+  withVariables,
+} from 'plugin-api/beta/client/hocs';
 import Comment from '../containers/Comment';
 import { viewComment } from 'coral-embed-stream/src/actions/stream';
 import {
@@ -13,15 +18,15 @@ import update from 'immutability-helper';
 
 class TabPaneContainer extends React.Component {
   loadMore = () => {
-    return this.props.data.fetchMore({
+    return this.props.fetchMore({
       query: LOAD_MORE_QUERY,
       variables: {
         limit: 5,
         cursor: this.props.asset.featuredComments.endCursor,
         asset_id: this.props.asset.id,
-        sortOrder: this.props.data.variables.sortOrder,
-        sortBy: this.props.data.variables.sortBy,
-        excludeIgnored: this.props.data.variables.excludeIgnored,
+        sortOrder: this.props.variables.sortOrder,
+        sortBy: this.props.variables.sortBy,
+        excludeIgnored: this.props.variables.excludeIgnored,
       },
       updateQuery: (previous, { fetchMoreResult: { comments } }) => {
         const updated = update(previous, {
@@ -86,6 +91,8 @@ const mapDispatchToProps = dispatch =>
 
 const enhance = compose(
   connect(null, mapDispatchToProps),
+  withFetchMore,
+  withVariables,
   withFragments({
     root: gql`
       fragment TalkFeaturedComments_TabPane_root on RootQuery {

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

@@ -1,3 +1,18 @@
+ar:
+  talk-plugin-featured-comments:
+    un_feature: إلغاء التميّز
+    feature: ميّز
+    featured: متميز
+    featured_comments: التعليقات المميزة
+    go_to_conversation: انتقل إلى المحادثة
+    tooltip_description: تعليقات مختارة من قبل فريقنا تستحق القراءة
+    notify_self_featured: 'التعليق من {0} هو الآن مميّز و موافق عليه'
+    notify_featured: '{0} ميّز و وافق على التعليق "{1}"'
+    notify_unfeatured: '{0} ألغي تميّز التعليق "{1}"'
+    feature_comment: ميّز التعليق؟
+    are_you_sure: هل أنت متأكد أنك تريد تميّز هذا التعليق؟
+    cancel: إلغاء
+    yes_feature_comment: نعم، ميّز التعليق؟
 da:
   talk-plugin-featured-comments:
     un_feature: Un-Feature