Approve

plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './RejectCommentAction.css';
+import {t} from 'plugin-api/beta/client/services';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+import cn from 'classnames';
+
+const isApproved = (status) => status === "APPROVED";
+
+export default ({comment: {status}, approveComment}) => (
+  <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={approveComment}>
+    {isApproved(status) ? (
+      <span>
+        <Icon name="done" className={cn(styles.icon, styles.approved)} />
+        {t('talk-plugin-moderation-actions.approved_comment')}
+      </span>
+    ) : (
+      <span>
+        <Icon name="done" className={cn(styles.icon)} />
+        {t('talk-plugin-moderation-actions.approve_comment')}
+      </span>
+    )}
+  </button>
+);

plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import cn from 'classnames';
-import styles from './ModerationActions.css';
 import Tooltip from './Tooltip';
+import styles from './ModerationActions.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
-import RejectCommentAction from '../containers/RejectCommentAction';
 import ClickOutside from 'coral-framework/components/ClickOutside';
+import RejectCommentAction from '../containers/RejectCommentAction';
+import ApproveCommentAction from '../containers/ApproveCommentAction';
 
 export default class ModerationActions extends React.Component {
   constructor() {
@@ -37,10 +38,12 @@ export default class ModerationActions extends React.Component {
       <ClickOutside onClickOutside={this.hideTooltip}>
         <div className={cn(styles.moderationActions, 'talk-plugin-moderation-actions')}>
           <span onClick={this.toogleTooltip} className={cn(styles.arrow, 'talk-plugin-moderation-actions-arrow')}>
-            {tooltip ? <Icon name="keyboard_arrow_up" className={styles.icon} /> : <Icon name="keyboard_arrow_down" className={styles.icon} />}
+            {tooltip ? <Icon name="keyboard_arrow_up" className={styles.icon} /> : 
+              <Icon name="keyboard_arrow_down" className={styles.icon} />}
           </span>
           {tooltip && (
             <Tooltip>
+              <ApproveCommentAction comment={comment} />
               <RejectCommentAction comment={comment} />
             </Tooltip>
           )}

plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {getErrorMessages} from 'plugin-api/beta/client/utils';
+import {withSetCommentStatus} from 'plugin-api/beta/client/hocs';
+import {notify} from 'plugin-api/beta/client/actions/notification';
+import ApproveCommentAction from '../components/ApproveCommentAction';
+
+class ApproveCommentActionContainer extends React.Component {
+
+  approveComment = async () => {
+    const {setCommentStatus, comment} = this.props;
+
+    try {
+      const result = await setCommentStatus({
+        commentId: comment.id,
+        status: 'APPROVED'
+      });
+
+      if (result.data.setCommentStatus.errors) {
+        throw result.data.setCommentStatus.errors;
+      }
+      
+    } catch (err) {
+      notify('error', getErrorMessages(err));
+    }
+  }
+
+  render() {
+    return <ApproveCommentAction comment={this.props.comment} approveComment={this.approveComment}/>
+  }
+}
+
+export default withSetCommentStatus(ApproveCommentActionContainer);

plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js

@@ -17,7 +17,7 @@ const enhance = compose(
         status
       }
   `}),
-  excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS'))
+  excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')),
 );
 
 export default enhance(ModerationActions);

plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import {withSetCommentStatus} from 'plugin-api/beta/client/hocs';
-import RejectCommentAction from '../components/RejectCommentAction';
-import {notify} from 'plugin-api/beta/client/actions/notification';
 import {getErrorMessages} from 'plugin-api/beta/client/utils';
+import {withSetCommentStatus} from 'plugin-api/beta/client/hocs';
+import {notify} from 'plugin-api/beta/client/actions/notification';
+import RejectCommentAction from '../components/RejectCommentAction';
 
 class RejectCommentActionContainer extends React.Component {
 
@@ -10,11 +10,15 @@ class RejectCommentActionContainer extends React.Component {
     const {setCommentStatus, comment} = this.props;
 
     try {
-      const result = await setCommentStatus({commentId: comment.id, status: 'REJECTED'});
-      
+      const result = await setCommentStatus({
+        commentId: comment.id,
+        status: 'REJECTED'
+      });
+
       if (result.data.setCommentStatus.errors) {
         throw result.data.setCommentStatus.errors;
       }
+      
     } catch (err) {
       notify('error', getErrorMessages(err));
     }

plugins/talk-plugin-moderation-actions/client/translations.yml

@@ -1,8 +1,12 @@
 en:
   talk-plugin-moderation-actions:
     reject_comment: "Reject"
+    approve_comment: "Approve"
+    approved_comment: "Approved"
     moderation_actions: "Moderation Actions"
 es:
   talk-plugin-moderation-actions:
     reject_comment: "Rechazar"
+    approve_comment: "Aprobar"
+    approved_comment: "Aprobado"
     moderation_actions: "Acciones de Moderación"