Permissions to moderate comments

plugin-api/beta/client/hocs/index.js

@@ -8,4 +8,5 @@ export {default as withEmit} from 'coral-framework/hocs/withEmit';
 export {
   withIgnoreUser,
   withStopIgnoringUser,
+  withSetCommentStatus,
 } from 'coral-framework/graphql/mutations';

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

@@ -15,4 +15,8 @@
 
 .arrow:hover {
   cursor: pointer;
+}
+
+.icon {
+  font-size: 16px;
 }

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

@@ -31,11 +31,12 @@ export default class Tag extends React.Component {
 
   render() {
     const {tooltip} = this.state;
+    console.log(this.props);
     return(
       <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" /> : <Icon name="keyboard_arrow_down" />}
+            {tooltip ? <Icon name="keyboard_arrow_up" className={styles.icon} /> : <Icon name="keyboard_arrow_down" className={styles.icon} />}
           </span>
           {tooltip && (
             <Tooltip>

plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css

@@ -4,12 +4,16 @@
 
 .button {
   composes: buttonReset from "coral-framework/styles/reset.css";
-  padding: 3px 6px;
-  font-size: 12px;
+  padding: 6px;
+  font-size: 14px;
   transition: color 100ms, background 100ms;
+  border-radius: 3px;
 
   &:hover {
-    background-color: rgba(1, 1, 1, 0.8);
-    color: white;
+    background-color: #efefef;
   }
 }
+
+.icon {
+  margin-right: 15px;
+}

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

@@ -6,9 +6,9 @@ import cn from 'classnames';
 
 export default ({rejectComment}) => (
   <button
-    className={cn(styles.button, 'talk-plugin-reject-comment-action')}
+    className={cn(styles.button, 'talk-plugin-moderation-actions-reject')}
     onClick={rejectComment}>
-    <Icon name="clear" />
-    {t('talk-plugin-reject-comment.reject_comment')}
+    <Icon name="clear" className={styles.icon} />
+    {t('talk-plugin-moderation-actions.reject_comment')}
   </button>
 );

plugins/talk-plugin-moderation-actions/client/components/Tooltip.css

@@ -9,7 +9,7 @@
   z-index: 10;
   top: 32px;
   right: 0px;
-  width: 160px;
+  width: 140px;
   text-align: left;
   color: #616161;
 }
@@ -39,26 +39,8 @@
   display: inline-block;
   margin: 0;
   padding: 0;
-  font-size: 1.02em;
-  margin-left: 6px;
-  letter-spacing: 0.2px;
+  font-size: 1em;
   vertical-align: middle;
   margin-bottom: 2px;
   line-height: 22px;
-}
-
-.icon {
-  font-size: 1.4em;
-  vertical-align: middle;
-}
-
-.description {
-  width: 100%;
-  box-sizing: border-box;
-  white-space: pre-wrap;
-  padding: 0;
-  margin: 0;
-  padding-left: 25px;
-  font-weight: 400;
-  font-size: 1em;
 }

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

@@ -5,5 +5,10 @@ import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
 export default ({className = '', children}) => (
-  <div className={cn(styles.tooltip, className)}>{children}</div>
+  <div className={cn(styles.tooltip, className)}>
+    <h3 className={styles.headline}>
+      {t('talk-plugin-moderation-actions.moderation_actions')}
+    </h3>
+    {children}
+  </div>
 );

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import {gql, compose} from 'react-apollo';
+import {connect, excludeIf} from 'plugin-api/beta/client/hocs';
+import ModerationActions from '../components/ModerationActions';
+import {can} from 'plugin-api/beta/client/services';
+
+const mapStateToProps = ({auth}) => ({
+  user: auth.user
+});
+
+const enhance = compose(
+  connect(mapStateToProps),
+  excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS'))
+);
+
+export default enhance(ModerationActions);

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

@@ -1,12 +1,5 @@
 import React from 'react';
-import {compose} from 'react-apollo';
-import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
+import {withSetCommentStatus} from 'plugin-api/beta/client/hocs';
 import RejectCommentAction from '../components/RejectCommentAction';
 
-// change this
-
-const enhance = compose(
-  withSetCommentStatus
-);
-
-export default enhance(RejectCommentAction);
+export default withSetCommentStatus(RejectCommentAction);

plugins/talk-plugin-moderation-actions/client/index.js

@@ -1,7 +1,5 @@
-// import RejectCommentAction from './containers/RejectCommentAction';
-import ModerationActions from './components/ModerationActions';
+import ModerationActions from './containers/ModerationActions';
 import translations from './translations.yml';
-import update from 'immutability-helper';
 
 export default {
   slots: {

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

@@ -1,6 +1,8 @@
 en:
-  talk-plugin-reject-comment:
-    reject_comment: "Reject comment"
+  talk-plugin-moderation-actions:
+    reject_comment: "Reject"
+    moderation_actions: "Moderation Actions"
 es:
-  talk-plugin-reject-user:
-    reject_comment: "Rechazar commentario"
+  talk-plugin-moderation-actions:
+    reject_comment: "Rechazar"
+    moderation_actions: "Acciones de Moderación"