merge conficts

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

@@ -0,0 +1,16 @@
+import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
+
+export const openFeaturedDialog = (comment, asset) => ({
+  type: OPEN_FEATURED_DIALOG,
+  comment: {
+    id: comment.id,
+    tags: comment.tags,
+  },
+  asset: {
+    id: asset.id,
+  },
+});
+
+export const closeFeaturedDialog = () => ({
+  type: CLOSE_FEATURED_DIALOG,
+});

plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.css

@@ -0,0 +1,41 @@
+.dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 400px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 20px;
+  border-radius: 4px;
+}
+  
+.header {
+  color: black;
+  font-size: 1.5em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
+  
+.close {
+  display: block;
+  position: absolute;
+  top: 24px;
+  right: 20px;
+}
+
+.cancel {
+  margin-right: 5px;
+}
+
+.perform {
+  min-width: 90px;
+}
+
+.buttons {
+  margin-top: 8px;
+  margin-bottom: 6px;
+  text-align: right;
+}
+
+.content {
+  margin-bottom: 20px;
+}

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import {Dialog} from 'coral-ui';
+import styles from './FeaturedDialog.css';
+import {t} from 'plugin-api/beta/client/services';
+import Button from 'coral-ui/components/Button';
+
+const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => {
+
+  const onPerform = async () => {
+    await postTag();
+    await closeFeaturedDialog();
+  };
+
+  return (
+    <Dialog
+      className={cn(styles.dialog, 'talk-featured-dialog')}
+      id="talkFeaturedDialog"
+      open={showFeaturedDialog}
+      onCancel={closeFeaturedDialog} >
+      <span className={styles.close} onClick={closeFeaturedDialog}>×</span>
+      <h2 className={styles.header}>{t('talk-plugin-featured-comments.feature_comment')}</h2>
+      <div className={styles.content}>
+        {t('talk-plugin-featured-comments.are_you_sure')}
+      </div>
+      <div className={styles.buttons}>
+        <Button
+          className={cn(styles.cancel, 'talk-featured-dialog-button-cancel')}
+          cStyle="cancel"
+          onClick={closeFeaturedDialog}
+          raised >
+          {t('talk-plugin-featured-comments.cancel')}
+        </Button>
+        <Button 
+          className={cn(styles.perform, 'talk-featured-dialog-button-confirm')}
+          cStyle="black"
+          onClick={onPerform}
+          raised >
+          {t('talk-plugin-featured-comments.yes_feature_comment')}
+        </Button>
+      </div>
+    </Dialog>
+  );
+};
+
+FeaturedDialog.propTypes = {
+  showFeaturedDialog: PropTypes.bool.isRequired,
+  closeFeaturedDialog: PropTypes.func.isRequired,
+};
+
+export default FeaturedDialog;

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

@@ -1,9 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './ModTag.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
-import {getErrorMessages} from 'plugin-api/beta/client/utils';
 
 export default class ModTag extends React.Component {
   constructor() {
@@ -29,17 +29,12 @@ export default class ModTag extends React.Component {
     });
   }
 
-  postTag = async () => {
-    try {
-      await this.props.postTag();
-    }
-    catch(err) {
-      this.props.notify('error', getErrorMessages(err));
-    }
+  openFeaturedDialog = (comment, asset) => {
+    this.props.openFeaturedDialog(comment, asset);
   }
 
   render() {
-    const {alreadyTagged, deleteTag} = this.props;
+    const {alreadyTagged, deleteTag, comment, asset} = this.props;
 
     return alreadyTagged ? (
       <span className={cn(styles.tag, styles.featured)}
@@ -51,10 +46,19 @@ export default class ModTag extends React.Component {
       </span>
     ) : (
       <span className={cn(styles.tag, {[styles.featured]: alreadyTagged})}
-        onClick={this.postTag} >
+        onClick={() => this.openFeaturedDialog(comment, asset)} >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
         {alreadyTagged ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.feature')}
       </span>
     );
   }
 }
+
+ModTag.propTypes = {
+  alreadyTagged: PropTypes.bool,
+  deleteTag: PropTypes.func,
+  notify: PropTypes.func,
+  openFeaturedDialog: PropTypes.func,
+  comment: PropTypes.object,
+  asset: PropTypes.object,
+};

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

@@ -0,0 +1,4 @@
+const prefix = 'TALK_FEATURED_COMMENTS_ACTIONS';
+
+export const OPEN_FEATURED_DIALOG = `${prefix}_OPEN_FEATURED_DIALOG`;
+export const CLOSE_FEATURED_DIALOG = `${prefix}_CLOSE_FEATURED_DIALOG`;

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

@@ -0,0 +1,23 @@
+import {compose} from 'react-apollo';
+import {bindActionCreators} from 'redux';
+import FeaturedDialog from '../components/FeaturedDialog';
+import {withTags, connect} from 'plugin-api/beta/client/hocs';
+import {closeFeaturedDialog} from '../actions';
+
+const mapStateToProps = ({talkPluginFeaturedComments: state}) => ({
+  showFeaturedDialog: state.showFeaturedDialog,
+  comment: state.comment,
+  asset: state.asset,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    closeFeaturedDialog,
+  }, dispatch);
+
+const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withTags('featured'),
+);
+
+export default enhance(FeaturedDialog);

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

@@ -65,6 +65,14 @@ const COMMENT_FEATURED_SUBSCRIPTION = gql`
     commentFeatured(asset_id: $assetId) {
       comment {
         ...${getDefinitionName(Comment.fragments.comment)}
+        status_history {
+          type
+          created_at
+          assigned_by {
+            id
+            username
+          }
+        }
       }
       user {
         id

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

@@ -2,11 +2,13 @@ import ModTag from '../components/ModTag';
 import {withTags, connect} from 'plugin-api/beta/client/hocs';
 import {gql, compose} from 'react-apollo';
 import {bindActionCreators} from 'redux';
+import {openFeaturedDialog} from '../actions';
 import {notify} from 'plugin-api/beta/client/actions/notification';
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     notify,
+    openFeaturedDialog,
   }, dispatch);
 
 const fragments = {
@@ -24,4 +26,3 @@ const enhance = compose(
 );
 
 export default enhance(ModTag);
-

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

@@ -6,19 +6,22 @@ import update from 'immutability-helper';
 import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
+import FeaturedDialog from './containers/FeaturedDialog';
 import {gql} from 'react-apollo';
+import reducer from './reducer';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {prependNewNodes} from 'plugin-api/beta/client/utils';
 
 export default {
   translations,
+  reducer,
   slots: {
     streamTabsPrepend: [Tab],
     streamTabPanes: [TabPane],
     commentInfoBar: [Tag],
     moderationActions: [ModActionButton],
-    adminModeration: [ModSubscription],
+    adminModeration: [ModSubscription, FeaturedDialog],
     adminCommentInfoBar: [ModTag],
   },
   mutations: {

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

@@ -0,0 +1,32 @@
+import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
+
+const initialState = {
+  showFeaturedDialog: false,
+  comment: {
+    id: null,
+    tags: []
+  },
+  asset: {
+    id: null,
+  },
+};
+
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+  case OPEN_FEATURED_DIALOG:
+    return {
+      ...state,
+      comment: action.comment,
+      asset: action.asset,
+      showFeaturedDialog: true,
+    };
+  case CLOSE_FEATURED_DIALOG:
+    return {
+      ...state,
+      featuredCommentId: null,
+      showFeaturedDialog: false,
+    };
+  default :
+    return state;
+  }
+}

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

@@ -9,6 +9,10 @@ en:
     notify_self_featured: 'The comment from {0} is now featured and approved'
     notify_featured: '{0} featured and approved comment "{1}"'
     notify_unfeatured: '{0} unfeatured comment "{1}"'
+    feature_comment: Feature comment?
+    are_you_sure: Are you sure you would like to feature this comment?
+    cancel: Cancel
+    yes_feature_comment: Yes, feature comment
 es:
   talk-plugin-featured-comments:
     un_feature: Desmarcar
@@ -17,3 +21,7 @@ es:
     featured_comments: Comentarios Remarcados
     go_to_conversation: Ir al comentario
     tooltip_description: Comentarios seleccionados por nuestro equipo que valen la pena ser leidos
+    feature_comment: Destacar comentario?
+    are_you_sure: Está seguro que desea destacar este comentario?
+    cancel: Cancelar
+    yes_feature_comment: Si, destacar comentario