From 59e21cccbaa84e7266d0a4dd6941574d81394d0e Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Sep 2017 10:51:27 -0300
Subject: [PATCH 01/19] Container for Button

---
 .../talk-plugin-featured-comments/client/components/Button.js | 3 +--
 .../talk-plugin-featured-comments/client/containers/Button.js | 4 ++++
 2 files changed, 5 insertions(+), 2 deletions(-)
 create mode 100644 plugins/talk-plugin-featured-comments/client/containers/Button.js

diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.js b/plugins/talk-plugin-featured-comments/client/components/Button.js
index c581ce027..5bb174c30 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Button.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Button.js
@@ -3,7 +3,6 @@ import cn from 'classnames';
 import styles from './Button.css';
 import {pluginName} from '../../package.json';
 import {can} from 'plugin-api/beta/client/services';
-import {withTags} from 'plugin-api/beta/client/hocs';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
 const Button = (props) => {
@@ -23,4 +22,4 @@ const Button = (props) => {
   ) : null ;
 };
 
-export default withTags('featured')(Button);
+export default Button;
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Button.js b/plugins/talk-plugin-featured-comments/client/containers/Button.js
new file mode 100644
index 000000000..d927b0125
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/containers/Button.js
@@ -0,0 +1,4 @@
+import Button from '../components/Button';
+import {withTags} from 'plugin-api/beta/client/hocs';
+
+export default withTags('featured')(Button);

From 908b3c20b48ad0f48e302f80307f917ef5d44103 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Sep 2017 10:59:16 -0300
Subject: [PATCH 02/19] Adding FeaturedButton (we already have Button with
 Coral-UI)

---
 .../client/components/Comment.js                            | 4 ++--
 .../client/components/{Button.css => FeaturedButton.css}    | 0
 .../client/components/{Button.js => FeaturedButton.js}      | 6 +++---
 .../client/components/ModActionButton.js                    | 5 ++---
 .../client/containers/Button.js                             | 4 ----
 .../client/containers/FeaturedButton.js                     | 4 ++++
 .../client/containers/ModActionButton.js                    | 6 ++++--
 7 files changed, 15 insertions(+), 14 deletions(-)
 rename plugins/talk-plugin-featured-comments/client/components/{Button.css => FeaturedButton.css} (100%)
 rename plugins/talk-plugin-featured-comments/client/components/{Button.js => FeaturedButton.js} (85%)
 delete mode 100644 plugins/talk-plugin-featured-comments/client/containers/Button.js
 create mode 100644 plugins/talk-plugin-featured-comments/client/containers/FeaturedButton.js

diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js
index 1c2045110..779844177 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Comment.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js
@@ -5,7 +5,7 @@ import {t, timeago} from 'plugin-api/beta/client/services';
 import {Slot, CommentAuthorName} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {pluginName} from '../../package.json';
-import Button from './Button';
+import FeaturedButton from '../containers/FeaturedButton';
 
 class Comment extends React.Component {
 
@@ -50,7 +50,7 @@ class Comment extends React.Component {
               inline
             />
 
-            <Button
+            <FeaturedButton
               root={root}
               data={data}
               comment={comment}
diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css
similarity index 100%
rename from plugins/talk-plugin-featured-comments/client/components/Button.css
rename to plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css
diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js
similarity index 85%
rename from plugins/talk-plugin-featured-comments/client/components/Button.js
rename to plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js
index 5bb174c30..0555fbf81 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Button.js
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import cn from 'classnames';
-import styles from './Button.css';
+import styles from './FeaturedButton.css';
 import {pluginName} from '../../package.json';
 import {can} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-const Button = (props) => {
+const FeaturedButton = (props) => {
   const {alreadyTagged, deleteTag, postTag, user} = props;
 
   return can(user, 'MODERATE_COMMENTS') ? (
@@ -22,4 +22,4 @@ const Button = (props) => {
   ) : null ;
 };
 
-export default Button;
+export default FeaturedButton;
diff --git a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
index 5f7abcf06..5eabcdde7 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
+++ b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
@@ -3,10 +3,9 @@ import cn from 'classnames';
 import styles from './ModActionButton.css';
 import {pluginName} from '../../package.json';
 import {t} from 'plugin-api/beta/client/services';
-import {withTags} from 'plugin-api/beta/client/hocs';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-export class Button extends React.Component {
+export class ModActionButton extends React.Component {
   constructor() {
     super();
 
@@ -56,5 +55,5 @@ export class Button extends React.Component {
   }
 }
 
-export default withTags('featured')(Button);
+export default ModActionButton;
 
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Button.js b/plugins/talk-plugin-featured-comments/client/containers/Button.js
deleted file mode 100644
index d927b0125..000000000
--- a/plugins/talk-plugin-featured-comments/client/containers/Button.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Button from '../components/Button';
-import {withTags} from 'plugin-api/beta/client/hocs';
-
-export default withTags('featured')(Button);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/containers/FeaturedButton.js
new file mode 100644
index 000000000..ba6f1587c
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/containers/FeaturedButton.js
@@ -0,0 +1,4 @@
+import FeaturedButton from '../components/FeaturedButton';
+import {withTags} from 'plugin-api/beta/client/hocs';
+
+export default withTags('featured')(FeaturedButton);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
index e6ccc0f72..c66c0f4c6 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
@@ -1,10 +1,12 @@
 import {compose} from 'react-apollo';
-import {excludeIf} from 'plugin-api/beta/client/hocs';
-import {can} from 'plugin-api/beta/client/services';
+
 import Button from '../components/Button';
+import {can} from 'plugin-api/beta/client/services';
+import {excludeIf, withTags} from 'plugin-api/beta/client/hocs';
 
 const enhance = compose(
   excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')),
+  withTags('featured')
 );
 
 export default enhance(Button);

From 65085fea65aabdde425b8253f5dd9b47b7ff72dd Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Sep 2017 11:02:02 -0300
Subject: [PATCH 03/19] No need to handle errors here

---
 .../client/containers/ApproveCommentAction.js | 22 +++++--------------
 .../client/containers/RejectCommentAction.js  | 22 +++++--------------
 2 files changed, 10 insertions(+), 34 deletions(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
index c75711a56..2c532801e 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
@@ -1,28 +1,16 @@
 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';
-import isNil from 'lodash/isNil';
 
 class ApproveCommentActionContainer extends React.Component {
 
-  approveComment = async () => {
+  approveComment = () => {
     const {setCommentStatus, comment} = this.props;
 
-    try {
-      const result = await setCommentStatus({
-        commentId: comment.id,
-        status: 'ACCEPTED'
-      });
-
-      if (!isNil(result.data.setCommentStatus)) {
-        throw result.data.setCommentStatus.errors;
-      }
-      
-    } catch (err) {
-      notify('error', getErrorMessages(err));
-    }
+    setCommentStatus({
+      commentId: comment.id,
+      status: 'ACCEPTED'
+    });
   }
 
   render() {
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index 5497d0e8e..d4c317f4c 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -1,28 +1,16 @@
 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 RejectCommentAction from '../components/RejectCommentAction';
-import isNil from 'lodash/isNil';
 
 class RejectCommentActionContainer extends React.Component {
 
-  rejectComment = async () => {
+  rejectComment = () => {
     const {setCommentStatus, comment} = this.props;
 
-    try {
-      const result = await setCommentStatus({
-        commentId: comment.id,
-        status: 'REJECTED'
-      });
-
-      if (!isNil(result.data.setCommentStatus)) {
-        throw result.data.setCommentStatus.errors;
-      }
-      
-    } catch (err) {
-      notify('error', getErrorMessages(err));
-    }
+    setCommentStatus({
+      commentId: comment.id,
+      status: 'REJECTED'
+    });
   }
 
   render() {

From 1e9cc82b17099547017aa41e635cb40ecdb7f208 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Sep 2017 11:31:59 -0300
Subject: [PATCH 04/19] Using redux to handle the tooltip state

---
 .../client/actions.js                         | 10 +++
 .../client/components/ModerationActions.js    | 32 ++-------
 .../client/constants.js                       |  4 ++
 .../client/containers/ModerationActions.js    | 66 +++++++++++++++++--
 .../client/index.js                           |  2 +
 .../client/reducer.js                         | 23 +++++++
 6 files changed, 107 insertions(+), 30 deletions(-)
 create mode 100644 plugins/talk-plugin-moderation-actions/client/actions.js
 create mode 100644 plugins/talk-plugin-moderation-actions/client/constants.js
 create mode 100644 plugins/talk-plugin-moderation-actions/client/reducer.js

diff --git a/plugins/talk-plugin-moderation-actions/client/actions.js b/plugins/talk-plugin-moderation-actions/client/actions.js
new file mode 100644
index 000000000..4cc3a7dec
--- /dev/null
+++ b/plugins/talk-plugin-moderation-actions/client/actions.js
@@ -0,0 +1,10 @@
+import {OPEN_TOOLTIP, CLOSE_TOOLTIP} from './constants';
+
+export const openTooltip = (id) => ({
+  type: OPEN_TOOLTIP,
+  id,
+});
+
+export const closeTooltip = () => ({
+  type: CLOSE_TOOLTIP,
+});
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index 3a3b54156..016c14728 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
@@ -9,39 +9,19 @@ import ApproveCommentAction from '../containers/ApproveCommentAction';
 import {Slot} from 'plugin-api/beta/client/components';
 
 export default class ModerationActions extends React.Component {
-  constructor() {
-    super();
-
-    this.state = {
-      tooltip: false
-    };
-  }
-
-  toogleTooltip = () => {
-    const {tooltip} = this.state;
-    this.setState({
-      tooltip: !tooltip
-    });
-  }
-
-  hideTooltip = () => {
-    this.setState({
-      tooltip: false
-    });
-  }
 
   render() {
-    const {tooltip} = this.state;
-    const {comment, asset, data} = this.props;
+    const {comment, asset, data, tooltipVisible, toogleTooltip, hideTooltip} = this.props;
 
     return(
-      <ClickOutside onClickOutside={this.hideTooltip}>
+      <ClickOutside onClickOutside={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} /> : 
+          <span onClick={toogleTooltip} className={cn(styles.arrow, 'talk-plugin-moderation-actions-arrow')}>
+            {tooltipVisible ? <Icon name="keyboard_arrow_up" className={styles.icon} /> : 
               <Icon name="keyboard_arrow_down" className={styles.icon} />}
           </span>
-          {tooltip && (
+
+          {tooltipVisible && (
             <Tooltip>
 
               <Slot
diff --git a/plugins/talk-plugin-moderation-actions/client/constants.js b/plugins/talk-plugin-moderation-actions/client/constants.js
new file mode 100644
index 000000000..ce3e96d5f
--- /dev/null
+++ b/plugins/talk-plugin-moderation-actions/client/constants.js
@@ -0,0 +1,4 @@
+const prefix = 'TALK_MODERATION_ACTIONS';
+
+export const OPEN_TOOLTIP = `${prefix}_OPEN_TOOLTIP`;
+export const CLOSE_TOOLTIP = `${prefix}_CLOSE_TOOLTIP`;
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
index ffb711e18..4b9059772 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
@@ -1,14 +1,72 @@
+import React from 'react';
+import {bindActionCreators} from 'redux';
 import {gql, compose} from 'react-apollo';
+import {openTooltip, closeTooltip} from '../actions';
 import {can} from 'plugin-api/beta/client/services';
+import {getShallowChanges} from 'plugin-api/beta/client/utils';
 import ModerationActions from '../components/ModerationActions';
 import {connect, excludeIf, withFragments} from 'plugin-api/beta/client/hocs';
 
-const mapStateToProps = ({auth}) => ({
-  user: auth.user
+class ModerationActionsContainer extends React.Component {
+
+  shouldComponentUpdate(nextProps) {
+    
+    // Specifically handle `showTooltipForComment` if it is the only change.
+    const changes = getShallowChanges(this.props, nextProps);
+    if (changes.length === 1 && changes[0] === 'showTooltipForComment') {
+      const commentId = this.props.comment.id;
+      if (
+        commentId !== this.props.showTooltipForComment &&
+        commentId !== nextProps.showTooltipForComment
+      ) {
+        return false;
+      }
+    }
+    
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
+  }
+
+  toogleTooltip = () => {
+    if (this.props.showTooltipForComment === this.props.comment.id) {
+      this.props.closeTooltip();
+    } else {
+      this.props.openTooltip(this.props.comment.id);
+    }
+  }
+
+  hideTooltip = () => {
+    if (this.props.showTooltipForComment === this.props.comment.id) {
+      this.props.closeTooltip();
+    }
+  }
+
+  render() {
+    return <ModerationActions
+      data={this.props.data}
+      root={this.props.root}
+      asset={this.props.asset}
+      comment={this.props.comment}
+      tooltipVisible={this.props.showTooltipForComment === this.props.comment.id}
+      toogleTooltip={this.toogleTooltip}
+      hideTooltip={this.hideTooltip}
+    />;
+  }
+}
+
+const mapStateToProps = ({auth, talkPluginModerationActions: state}) => ({
+  user: auth.user,
+  showTooltipForComment: state.showTooltipForComment,
 });
 
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    openTooltip,
+    closeTooltip,
+  }, dispatch);
+
 const enhance = compose(
-  connect(mapStateToProps),
+  connect(mapStateToProps, mapDispatchToProps),
   withFragments({
     asset: gql`
       fragment TalkModerationActions_asset on Asset {
@@ -29,4 +87,4 @@ const enhance = compose(
   excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')),
 );
 
-export default enhance(ModerationActions);
+export default enhance(ModerationActionsContainer);
diff --git a/plugins/talk-plugin-moderation-actions/client/index.js b/plugins/talk-plugin-moderation-actions/client/index.js
index 3343505f3..fefcac710 100644
--- a/plugins/talk-plugin-moderation-actions/client/index.js
+++ b/plugins/talk-plugin-moderation-actions/client/index.js
@@ -1,9 +1,11 @@
 import ModerationActions from './containers/ModerationActions';
 import translations from './translations.yml';
+import reducer from './reducer';
 
 export default {
   slots: {
     commentInfoBar: [ModerationActions],
   },
+  reducer,
   translations
 };
diff --git a/plugins/talk-plugin-moderation-actions/client/reducer.js b/plugins/talk-plugin-moderation-actions/client/reducer.js
new file mode 100644
index 000000000..ac95ed60f
--- /dev/null
+++ b/plugins/talk-plugin-moderation-actions/client/reducer.js
@@ -0,0 +1,23 @@
+import {OPEN_TOOLTIP, CLOSE_TOOLTIP} from './constants';
+
+const initialState = {
+  showTooltipForComment: null,
+};
+
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+  case OPEN_TOOLTIP:
+    return {
+      ...state,
+      showTooltipForComment: action.id,
+    };
+  case CLOSE_TOOLTIP:
+    return {
+      ...state,
+      showTooltipForComment: null,
+      contentSlot: null,
+    };
+  default :
+    return state;
+  }
+}

From a22ee3fefe22e11e4293e9dfb601951ca8167d02 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Sep 2017 11:44:01 -0300
Subject: [PATCH 05/19] Removing can since thats already checked

---
 .../client/containers/ModActionButton.js              | 11 ++++-------
 plugins/talk-plugin-featured-comments/client/index.js |  2 +-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
index c66c0f4c6..fe3491fee 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
@@ -1,12 +1,9 @@
 import {compose} from 'react-apollo';
-
-import Button from '../components/Button';
-import {can} from 'plugin-api/beta/client/services';
-import {excludeIf, withTags} from 'plugin-api/beta/client/hocs';
+import ModActionButton from '../components/ModActionButton';
+import {withTags} from 'plugin-api/beta/client/hocs';
 
 const enhance = compose(
-  excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')),
-  withTags('featured')
+  withTags('featured'),
 );
 
-export default enhance(Button);
+export default enhance(ModActionButton);
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index 765951652..579d8e812 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -1,11 +1,11 @@
 import Tab from './containers/Tab';
 import Tag from './containers/Tag';
-import ModActionButton from './components/ModActionButton';
 import TabPane from './containers/TabPane';
 import translations from './translations.yml';
 import update from 'immutability-helper';
 import reducer from './reducer';
 import ModTag from './containers/ModTag';
+import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';

From 06c45faeb03ebdebbdcf2f29e22b14021a521284 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Sep 2017 13:57:24 -0300
Subject: [PATCH 06/19] Read/Write Fragments to update the cache

---
 .../client/index.js                           | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index 579d8e812..2ebde06a1 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -7,6 +7,7 @@ import reducer from './reducer';
 import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
+import {gql} from 'react-apollo';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {prependNewNodes} from 'plugin-api/beta/client/utils';
@@ -84,8 +85,28 @@ export default {
           }
 
           return updated;
-        },
-      }
+        }
+      },
+      update: (proxy) => {
+
+        if (name !== 'FEATURED') {
+          return;
+        }
+
+        const fragmentId = `Comment_${variables.id}`;
+
+        const fragment = gql`
+          fragment Talk_ModerationActions_addTag on Comment {
+            status
+          }
+        `;
+
+        const data = proxy.readFragment({fragment, id: fragmentId});
+
+        data.status = 'ACCEPTED';
+
+        proxy.writeFragment({fragment, id: fragmentId, data});
+      },
     }),
     RemoveTag: ({variables}) => ({
       updateQueries: {

From 51f6c0738d20c18b24a637cc8469959808b335bd Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Sep 2017 15:02:01 -0300
Subject: [PATCH 07/19] Containers

---
 .../client/containers/ApproveCommentAction.js | 32 +++++++++++++----
 .../client/containers/RejectCommentAction.js  | 34 ++++++++++++++-----
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
index 2c532801e..79c41d622 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
@@ -1,16 +1,24 @@
 import React from 'react';
-import {withSetCommentStatus} from 'plugin-api/beta/client/hocs';
+import {compose} from 'react-apollo';
+import {bindActionCreators} from 'redux';
+import {getErrorMessages} from 'plugin-api/beta/client/utils';
+import {notify} from 'plugin-api/beta/client/actions/notification';
 import ApproveCommentAction from '../components/ApproveCommentAction';
+import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
 
 class ApproveCommentActionContainer extends React.Component {
 
   approveComment = () => {
     const {setCommentStatus, comment} = this.props;
-
-    setCommentStatus({
-      commentId: comment.id,
-      status: 'ACCEPTED'
-    });
+    
+    try {
+      setCommentStatus({
+        commentId: comment.id,
+        status: 'ACCEPTED'
+      });
+    } catch (err) {
+      notify('error', getErrorMessages(err));
+    }
   }
 
   render() {
@@ -18,4 +26,14 @@ class ApproveCommentActionContainer extends React.Component {
   }
 }
 
-export default withSetCommentStatus(ApproveCommentActionContainer);
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    notify,
+  }, dispatch);
+
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withSetCommentStatus
+);
+
+export default enhance(ApproveCommentActionContainer);
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index d4c317f4c..c6e3a6f8c 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -1,16 +1,24 @@
 import React from 'react';
-import {withSetCommentStatus} from 'plugin-api/beta/client/hocs';
+import {compose} from 'react-apollo';
+import {bindActionCreators} from 'redux';
+import {getErrorMessages} from 'plugin-api/beta/client/utils';
+import {notify} from 'plugin-api/beta/client/actions/notification';
 import RejectCommentAction from '../components/RejectCommentAction';
+import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
 
 class RejectCommentActionContainer extends React.Component {
 
-  rejectComment = () => {
+  approveComment = () => {
     const {setCommentStatus, comment} = this.props;
-
-    setCommentStatus({
-      commentId: comment.id,
-      status: 'REJECTED'
-    });
+    
+    try {
+      setCommentStatus({
+        commentId: comment.id,
+        status: 'REJECTED'
+      });
+    } catch (err) {
+      notify('error', getErrorMessages(err));
+    }
   }
 
   render() {
@@ -18,4 +26,14 @@ class RejectCommentActionContainer extends React.Component {
   }
 }
 
-export default withSetCommentStatus(RejectCommentActionContainer);
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    notify,
+  }, dispatch);
+
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withSetCommentStatus
+);
+
+export default enhance(RejectCommentActionContainer);

From c93b53c25b44e2417860888f94890473187c37d8 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Sep 2017 15:11:22 -0300
Subject: [PATCH 08/19] pdates

---
 .../client/actions.js                         | 10 +++---
 .../components/{Tooltip.css => Menu.css}      |  6 ++--
 .../client/components/{Tooltip.js => Menu.js} |  4 +--
 .../client/components/ModerationActions.js    | 20 +++++------
 .../client/constants.js                       |  4 +--
 .../client/containers/ModerationActions.js    | 36 +++++++++----------
 .../client/containers/RejectCommentAction.js  |  2 +-
 .../client/reducer.js                         | 13 ++++---
 8 files changed, 45 insertions(+), 50 deletions(-)
 rename plugins/talk-plugin-moderation-actions/client/components/{Tooltip.css => Menu.css} (95%)
 rename plugins/talk-plugin-moderation-actions/client/components/{Tooltip.js => Menu.js} (77%)

diff --git a/plugins/talk-plugin-moderation-actions/client/actions.js b/plugins/talk-plugin-moderation-actions/client/actions.js
index 4cc3a7dec..de4714d21 100644
--- a/plugins/talk-plugin-moderation-actions/client/actions.js
+++ b/plugins/talk-plugin-moderation-actions/client/actions.js
@@ -1,10 +1,10 @@
-import {OPEN_TOOLTIP, CLOSE_TOOLTIP} from './constants';
+import {OPEN_MENU, CLOSE_MENU} from './constants';
 
-export const openTooltip = (id) => ({
-  type: OPEN_TOOLTIP,
+export const openMenu = (id) => ({
+  type: OPEN_MENU,
   id,
 });
 
-export const closeTooltip = () => ({
-  type: CLOSE_TOOLTIP,
+export const closeMenu = () => ({
+  type: CLOSE_MENU,
 });
diff --git a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css b/plugins/talk-plugin-moderation-actions/client/components/Menu.css
similarity index 95%
rename from plugins/talk-plugin-moderation-actions/client/components/Tooltip.css
rename to plugins/talk-plugin-moderation-actions/client/components/Menu.css
index def7cac82..3ef43d82e 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css
+++ b/plugins/talk-plugin-moderation-actions/client/components/Menu.css
@@ -1,4 +1,4 @@
-.tooltip {
+.menu {
   background-color: white;
   border: solid 1px #999;
   border-radius: 3px;
@@ -14,7 +14,7 @@
   color: #616161;
 }
 
-.tooltip::before{
+.menu::before{
   content: '';
   border: 10px solid transparent;
   border-top-color: #999;
@@ -24,7 +24,7 @@
   transform: rotate(180deg);
 }
 
-.tooltip::after{
+.menu::after{
   content: '';
   border: 10px solid transparent;
   border-top-color: white;
diff --git a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js b/plugins/talk-plugin-moderation-actions/client/components/Menu.js
similarity index 77%
rename from plugins/talk-plugin-moderation-actions/client/components/Tooltip.js
rename to plugins/talk-plugin-moderation-actions/client/components/Menu.js
index db7e56c1e..470349b69 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/Menu.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
-import styles from './Tooltip.css';
+import styles from './Menu.css';
 import {t} from 'plugin-api/beta/client/services';
 
 export default ({className = '', children}) => (
-  <div className={cn(styles.tooltip, className)}>
+  <div className={cn(styles.menu, className)}>
     <h3 className={styles.headline}>
       {t('talk-plugin-moderation-actions.moderation_actions')}
     </h3>
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index 016c14728..565d795c1 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import Tooltip from './Tooltip';
+import Menu from './Menu';
 import styles from './ModerationActions.css';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import ClickOutside from 'coral-framework/components/ClickOutside';
@@ -9,31 +9,27 @@ import ApproveCommentAction from '../containers/ApproveCommentAction';
 import {Slot} from 'plugin-api/beta/client/components';
 
 export default class ModerationActions extends React.Component {
-
   render() {
-    const {comment, asset, data, tooltipVisible, toogleTooltip, hideTooltip} = this.props;
+    const {comment, asset, data, menuVisible, toogleMenu, hideMenu} = this.props;
 
     return(
-      <ClickOutside onClickOutside={hideTooltip}>
+      <ClickOutside onClickOutside={hideMenu}>
         <div className={cn(styles.moderationActions, 'talk-plugin-moderation-actions')}>
-          <span onClick={toogleTooltip} className={cn(styles.arrow, 'talk-plugin-moderation-actions-arrow')}>
-            {tooltipVisible ? <Icon name="keyboard_arrow_up" className={styles.icon} /> : 
+          <span onClick={toogleMenu} className={cn(styles.arrow, 'talk-plugin-moderation-actions-arrow')}>
+            {menuVisible ? <Icon name="keyboard_arrow_up" className={styles.icon} /> : 
               <Icon name="keyboard_arrow_down" className={styles.icon} />}
           </span>
-
-          {tooltipVisible && (
-            <Tooltip>
-
+          {menuVisible && (
+            <Menu>
               <Slot
                 className="talk-plugin-modetarion-actions-slot"
                 fill="moderationActions"
                 queryData={{comment, asset}}
                 data={data}
               />
-
               <ApproveCommentAction comment={comment} />
               <RejectCommentAction comment={comment} />
-            </Tooltip>
+            </Menu>
           )}
         </div>
       </ClickOutside>
diff --git a/plugins/talk-plugin-moderation-actions/client/constants.js b/plugins/talk-plugin-moderation-actions/client/constants.js
index ce3e96d5f..de3d5c909 100644
--- a/plugins/talk-plugin-moderation-actions/client/constants.js
+++ b/plugins/talk-plugin-moderation-actions/client/constants.js
@@ -1,4 +1,4 @@
 const prefix = 'TALK_MODERATION_ACTIONS';
 
-export const OPEN_TOOLTIP = `${prefix}_OPEN_TOOLTIP`;
-export const CLOSE_TOOLTIP = `${prefix}_CLOSE_TOOLTIP`;
+export const OPEN_MENU = `${prefix}_OPEN_MENU`;
+export const CLOSE_MENU = `${prefix}_CLOSE_MENU`;
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
index 4b9059772..984c7f57a 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {bindActionCreators} from 'redux';
 import {gql, compose} from 'react-apollo';
-import {openTooltip, closeTooltip} from '../actions';
+import {openMenu, closeMenu} from '../actions';
 import {can} from 'plugin-api/beta/client/services';
 import {getShallowChanges} from 'plugin-api/beta/client/utils';
 import ModerationActions from '../components/ModerationActions';
@@ -11,13 +11,13 @@ class ModerationActionsContainer extends React.Component {
 
   shouldComponentUpdate(nextProps) {
     
-    // Specifically handle `showTooltipForComment` if it is the only change.
+    // Specifically handle `showMenuForComment` if it is the only change.
     const changes = getShallowChanges(this.props, nextProps);
-    if (changes.length === 1 && changes[0] === 'showTooltipForComment') {
+    if (changes.length === 1 && changes[0] === 'showMenuForComment') {
       const commentId = this.props.comment.id;
       if (
-        commentId !== this.props.showTooltipForComment &&
-        commentId !== nextProps.showTooltipForComment
+        commentId !== this.props.showMenuForComment &&
+        commentId !== nextProps.showMenuForComment
       ) {
         return false;
       }
@@ -27,17 +27,17 @@ class ModerationActionsContainer extends React.Component {
     return changes.length !== 0;
   }
 
-  toogleTooltip = () => {
-    if (this.props.showTooltipForComment === this.props.comment.id) {
-      this.props.closeTooltip();
+  toogleMenu = () => {
+    if (this.props.showMenuForComment === this.props.comment.id) {
+      this.props.closeMenu();
     } else {
-      this.props.openTooltip(this.props.comment.id);
+      this.props.openMenu(this.props.comment.id);
     }
   }
 
-  hideTooltip = () => {
-    if (this.props.showTooltipForComment === this.props.comment.id) {
-      this.props.closeTooltip();
+  hideMenu = () => {
+    if (this.props.showMenuForComment === this.props.comment.id) {
+      this.props.closeMenu();
     }
   }
 
@@ -47,22 +47,22 @@ class ModerationActionsContainer extends React.Component {
       root={this.props.root}
       asset={this.props.asset}
       comment={this.props.comment}
-      tooltipVisible={this.props.showTooltipForComment === this.props.comment.id}
-      toogleTooltip={this.toogleTooltip}
-      hideTooltip={this.hideTooltip}
+      menuVisible={this.props.showMenuForComment === this.props.comment.id}
+      toogleMenu={this.toogleMenu}
+      hideMenu={this.hideMenu}
     />;
   }
 }
 
 const mapStateToProps = ({auth, talkPluginModerationActions: state}) => ({
   user: auth.user,
-  showTooltipForComment: state.showTooltipForComment,
+  showMenuForComment: state.showMenuForComment,
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    openTooltip,
-    closeTooltip,
+    openMenu,
+    closeMenu,
   }, dispatch);
 
 const enhance = compose(
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index c6e3a6f8c..e6116b525 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -8,7 +8,7 @@ import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
 
 class RejectCommentActionContainer extends React.Component {
 
-  approveComment = () => {
+  rejectComment = () => {
     const {setCommentStatus, comment} = this.props;
     
     try {
diff --git a/plugins/talk-plugin-moderation-actions/client/reducer.js b/plugins/talk-plugin-moderation-actions/client/reducer.js
index ac95ed60f..d8531708b 100644
--- a/plugins/talk-plugin-moderation-actions/client/reducer.js
+++ b/plugins/talk-plugin-moderation-actions/client/reducer.js
@@ -1,21 +1,20 @@
-import {OPEN_TOOLTIP, CLOSE_TOOLTIP} from './constants';
+import {OPEN_MENU, CLOSE_MENU} from './constants';
 
 const initialState = {
-  showTooltipForComment: null,
+  showMenuForComment: null,
 };
 
 export default function reducer(state = initialState, action) {
   switch (action.type) {
-  case OPEN_TOOLTIP:
+  case OPEN_MENU:
     return {
       ...state,
-      showTooltipForComment: action.id,
+      showMenuForComment: action.id
     };
-  case CLOSE_TOOLTIP:
+  case CLOSE_MENU:
     return {
       ...state,
-      showTooltipForComment: null,
-      contentSlot: null,
+      showMenuForComment: null
     };
   default :
     return state;

From 5e4a48f4cc824f9f327efc0c39e9e14b3fcf2aa3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Sep 2017 15:38:42 -0300
Subject: [PATCH 09/19] Updates

---
 .../client/components/ApproveCommentAction.js               | 4 ++--
 .../client/components/ModerationActions.js                  | 1 +
 .../client/components/styles.css                            | 6 +++---
 .../client/containers/ApproveCommentAction.js               | 6 +++++-
 .../client/containers/RejectCommentAction.js                | 6 +++++-
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
index f75a98c27..c31f61023 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
@@ -7,9 +7,9 @@ import cn from 'classnames';
 const isApproved = (status) => (status === 'ACCEPTED');
 
 export default ({approveComment, comment: {status}}) => (
-  <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={approveComment}>
+  <button className={cn(styles.button, {[styles.approved]: isApproved(status)}, 'talk-plugin-moderation-actions-reject')} onClick={approveComment}>
     {isApproved(status) ? (
-      <span className={styles.approved}>
+      <span>
         <Icon name="check_circle" className={styles.icon} />
         {t('talk-plugin-moderation-actions.approved_comment')}
       </span>
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index 565d795c1..5e22aa82d 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
@@ -26,6 +26,7 @@ export default class ModerationActions extends React.Component {
                 fill="moderationActions"
                 queryData={{comment, asset}}
                 data={data}
+                hideMenu={hideMenu}
               />
               <ApproveCommentAction comment={comment} />
               <RejectCommentAction comment={comment} />
diff --git a/plugins/talk-plugin-moderation-actions/client/components/styles.css b/plugins/talk-plugin-moderation-actions/client/components/styles.css
index 12ae4bad5..4f5cdcb75 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/styles.css
+++ b/plugins/talk-plugin-moderation-actions/client/components/styles.css
@@ -12,10 +12,10 @@
   width: 100%;
   text-align: left;
   letter-spacing: 0.3px;
+}
 
-  &:hover {
-    background-color: #D8D8D8;
-  }
+.button:not(.approved):hover {
+  background-color: #D8D8D8;
 }
 
 .icon {
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
index 79c41d622..c9255284c 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import {compose} from 'react-apollo';
+import {closeMenu} from '../actions';
 import {bindActionCreators} from 'redux';
 import {getErrorMessages} from 'plugin-api/beta/client/utils';
 import {notify} from 'plugin-api/beta/client/actions/notification';
@@ -9,13 +10,15 @@ import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
 class ApproveCommentActionContainer extends React.Component {
 
   approveComment = () => {
-    const {setCommentStatus, comment} = this.props;
+    const {setCommentStatus, closeMenu, comment} = this.props;
     
     try {
       setCommentStatus({
         commentId: comment.id,
         status: 'ACCEPTED'
       });
+
+      closeMenu();
     } catch (err) {
       notify('error', getErrorMessages(err));
     }
@@ -29,6 +32,7 @@ class ApproveCommentActionContainer extends React.Component {
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     notify,
+    closeMenu
   }, dispatch);
 
 const enhance = compose(
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index e6116b525..b95148743 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import {compose} from 'react-apollo';
+import {closeMenu} from '../actions';
 import {bindActionCreators} from 'redux';
 import {getErrorMessages} from 'plugin-api/beta/client/utils';
 import {notify} from 'plugin-api/beta/client/actions/notification';
@@ -9,13 +10,15 @@ import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
 class RejectCommentActionContainer extends React.Component {
 
   rejectComment = () => {
-    const {setCommentStatus, comment} = this.props;
+    const {setCommentStatus, closeMenu, comment} = this.props;
     
     try {
       setCommentStatus({
         commentId: comment.id,
         status: 'REJECTED'
       });
+      
+      closeMenu();
     } catch (err) {
       notify('error', getErrorMessages(err));
     }
@@ -29,6 +32,7 @@ class RejectCommentActionContainer extends React.Component {
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     notify,
+    closeMenu
   }, dispatch);
 
 const enhance = compose(

From aa364e1abeaee4b4350fbf27f925bd4bbdaa0a53 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 12 Sep 2017 12:58:25 -0300
Subject: [PATCH 10/19] Renaming Fragment and variable name

---
 plugins/talk-plugin-featured-comments/client/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index 2ebde06a1..12c4a724f 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -89,14 +89,14 @@ export default {
       },
       update: (proxy) => {
 
-        if (name !== 'FEATURED') {
+        if (variables.name !== 'FEATURED') {
           return;
         }
 
         const fragmentId = `Comment_${variables.id}`;
 
         const fragment = gql`
-          fragment Talk_ModerationActions_addTag on Comment {
+          fragment Talk_FeaturedComments_addTag on Comment {
             status
           }
         `;

From 6bac6ee5c5bdf73a8f28e99dfc0cce0f253ea9d8 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 12 Sep 2017 12:59:48 -0300
Subject: [PATCH 11/19] Removed old code

---
 plugins/talk-plugin-featured-comments/client/index.js | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index 12c4a724f..7b419c545 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -61,17 +61,6 @@ export default {
           if (previous.asset.comments) {
             updated = update(previous, {
               asset: {
-                comments: {
-                  nodes: {
-                    $apply: (nodes) => nodes.map((node) => {
-                      if (node.id === variables.id) {
-                        node.status = 'ACCEPTED';
-                      }
-    
-                      return node;
-                    })
-                  }
-                },
                 featuredComments: {
                   nodes: {
                     $apply: (nodes) => prependNewNodes(nodes, [comment]),

From 0042767fad3015449dbcd6e0b7b104d86ce76ca5 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 12 Sep 2017 13:12:35 -0300
Subject: [PATCH 12/19] No approve button for Approved comments

---
 .../client/components/ApproveCommentAction.js | 24 +++++++++----------
 .../client/components/styles.css              |  2 ++
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
index f75a98c27..f683acae6 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
@@ -7,17 +7,15 @@ import cn from 'classnames';
 const isApproved = (status) => (status === 'ACCEPTED');
 
 export default ({approveComment, comment: {status}}) => (
-  <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={approveComment}>
-    {isApproved(status) ? (
-      <span className={styles.approved}>
-        <Icon name="check_circle" className={styles.icon} />
-        {t('talk-plugin-moderation-actions.approved_comment')}
-      </span>
-    ) : (
-      <span>
-        <Icon name="done" className={styles.icon} />
-        {t('talk-plugin-moderation-actions.approve_comment')}
-      </span>
-    )}
-  </button>
+  isApproved(status) ? (
+    <span className={styles.approved}>
+      <Icon name="check_circle" className={styles.icon} />
+      {t('talk-plugin-moderation-actions.approved_comment')}
+    </span>
+  ) : (
+    <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={approveComment}>
+      <Icon name="done" className={styles.icon} />
+      {t('talk-plugin-moderation-actions.approve_comment')}
+    </button>
+  )
 );
diff --git a/plugins/talk-plugin-moderation-actions/client/components/styles.css b/plugins/talk-plugin-moderation-actions/client/components/styles.css
index 12ae4bad5..c1ef4a98b 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/styles.css
+++ b/plugins/talk-plugin-moderation-actions/client/components/styles.css
@@ -24,6 +24,8 @@
 }
 
 .approved {
+  display: inline-block;
   color: #519954;
   font-weight: bold;
+  padding: 6px;
 }
\ No newline at end of file

From dbeca830a28860cf5040e3a4157a41c1929ba52c Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 12 Sep 2017 13:30:15 -0300
Subject: [PATCH 13/19] Closing after featuring and unfeaturing

---
 .../client/components/ModActionButton.js          | 15 +++++++++++++--
 .../client/containers/ModActionButton.js          | 10 +++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
index 5eabcdde7..b1811d2fc 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
+++ b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
@@ -29,12 +29,23 @@ export class ModActionButton extends React.Component {
     });
   }
 
+  handleDeleteTag = () => {
+    this.props.deleteTag();
+    this.props.closeTooltip();
+  }
+
+  handlePostTag = () => {
+    this.props.postTag();
+    this.props.closeTooltip();
+  }
+
   render() {
-    const {alreadyTagged, deleteTag, postTag} = this.props;
+    const {alreadyTagged} = this.props;
+    const {handleDeleteTag, handlePostTag} = this;
 
     return (
       <button className={cn(`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged})}
-        onClick={alreadyTagged ? deleteTag : postTag}
+        onClick={alreadyTagged ? handleDeleteTag : handlePostTag}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave} >
 
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
index fe3491fee..520ce9344 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
@@ -1,9 +1,17 @@
 import {compose} from 'react-apollo';
+import {bindActionCreators} from 'redux';
 import ModActionButton from '../components/ModActionButton';
-import {withTags} from 'plugin-api/beta/client/hocs';
+import {withTags, connect} from 'plugin-api/beta/client/hocs';
+import {closeTooltip} from 'plugins/talk-plugin-moderation-actions/client/actions';
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    closeTooltip,
+  }, dispatch);
 
 const enhance = compose(
   withTags('featured'),
+  connect(null, mapDispatchToProps),
 );
 
 export default enhance(ModActionButton);

From 9c08b586eca4a7bd2d287f79119587b61c6b0509 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 12 Sep 2017 13:40:26 -0300
Subject: [PATCH 14/19] Hiding after action

---
 .../client/components/ModerationActions.js                    | 4 ++--
 .../client/containers/ApproveCommentAction.js                 | 4 +++-
 .../client/containers/RejectCommentAction.js                  | 2 ++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index 016c14728..a7a21b186 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
@@ -31,8 +31,8 @@ export default class ModerationActions extends React.Component {
                 data={data}
               />
 
-              <ApproveCommentAction comment={comment} />
-              <RejectCommentAction comment={comment} />
+              <ApproveCommentAction comment={comment} hideTooltip={hideTooltip} />
+              <RejectCommentAction comment={comment} hideTooltip={hideTooltip} />
             </Tooltip>
           )}
         </div>
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
index 2c532801e..63b2b245f 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
@@ -5,12 +5,14 @@ import ApproveCommentAction from '../components/ApproveCommentAction';
 class ApproveCommentActionContainer extends React.Component {
 
   approveComment = () => {
-    const {setCommentStatus, comment} = this.props;
+    const {setCommentStatus, comment, hideTooltip} = this.props;
 
     setCommentStatus({
       commentId: comment.id,
       status: 'ACCEPTED'
     });
+
+    hideTooltip();
   }
 
   render() {
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index d4c317f4c..05c39d22f 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -11,6 +11,8 @@ class RejectCommentActionContainer extends React.Component {
       commentId: comment.id,
       status: 'REJECTED'
     });
+    
+    hideTooltip();
   }
 
   render() {

From 297b9051634d7aa169a91bb50e3f1510af8032e3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 12 Sep 2017 13:42:49 -0300
Subject: [PATCH 15/19] Hiding after action

---
 .../client/containers/RejectCommentAction.js                  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index 05c39d22f..dc940b834 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -5,13 +5,13 @@ import RejectCommentAction from '../components/RejectCommentAction';
 class RejectCommentActionContainer extends React.Component {
 
   rejectComment = () => {
-    const {setCommentStatus, comment} = this.props;
+    const {setCommentStatus, comment, hideTooltip} = this.props;
 
     setCommentStatus({
       commentId: comment.id,
       status: 'REJECTED'
     });
-    
+
     hideTooltip();
   }
 

From 0e7d74559f12bc2d58c7938127094298cdd119b2 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 12 Sep 2017 14:08:19 -0300
Subject: [PATCH 16/19] Notify errors

---
 .../client/containers/ApproveCommentAction.js | 31 ++++++++++++++-----
 .../client/containers/RejectCommentAction.js  | 29 +++++++++++++----
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
index 63b2b245f..19000ba1f 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
@@ -1,16 +1,25 @@
 import React from 'react';
+import {bindActionCreators} from 'redux';
+import {connect} from 'plugin-api/beta/client/hocs';
+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 = () => {
-    const {setCommentStatus, comment, hideTooltip} = this.props;
+  approveComment = async () => {
+    const {setCommentStatus, comment, hideTooltip, notify} = this.props;
 
-    setCommentStatus({
-      commentId: comment.id,
-      status: 'ACCEPTED'
-    });
+    try {
+      await setCommentStatus({
+        commentId: comment.id,
+        status: 'ACCEPTED'
+      });
+    }
+    catch(err) {
+      notify('error', getErrorMessages(err));
+    }
 
     hideTooltip();
   }
@@ -20,4 +29,12 @@ class ApproveCommentActionContainer extends React.Component {
   }
 }
 
-export default withSetCommentStatus(ApproveCommentActionContainer);
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    notify
+  }, dispatch);
+
+export default compose(
+  withSetCommentStatus,
+  connect(null, mapDispatchToProps)
+)(ApproveCommentActionContainer);
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index dc940b834..1636cf44a 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -1,16 +1,25 @@
 import React from 'react';
+import {bindActionCreators} from 'redux';
+import {connect} from 'plugin-api/beta/client/hocs';
+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 {
 
   rejectComment = () => {
-    const {setCommentStatus, comment, hideTooltip} = this.props;
+    const {setCommentStatus, comment, hideTooltip, notify} = this.props;
 
-    setCommentStatus({
-      commentId: comment.id,
-      status: 'REJECTED'
-    });
+    try {
+      await setCommentStatus({
+        commentId: comment.id,
+        status: 'REJECTED'
+      });
+    }
+    catch(err) {
+      notify('error', getErrorMessages(err));
+    }
 
     hideTooltip();
   }
@@ -20,4 +29,12 @@ class RejectCommentActionContainer extends React.Component {
   }
 }
 
-export default withSetCommentStatus(RejectCommentActionContainer);
+const mapDispatchToProps = (dispatch) =>
+bindActionCreators({
+  notify
+}, dispatch);
+
+export default compose(
+  withSetCommentStatus,
+  connect(null, mapDispatchToProps)
+)(RejectCommentActionContainer);

From 7115d4c31faf9f07c12fe73cef9992c4624557bb Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 12 Sep 2017 15:02:29 -0300
Subject: [PATCH 17/19] Missing async

---
 .../client/containers/RejectCommentAction.js                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index 3b4ce5d31..e13ddf32c 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -9,7 +9,7 @@ import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
 
 class RejectCommentActionContainer extends React.Component {
 
-  rejectComment = () => {
+  rejectComment = async () => {
     const {setCommentStatus, comment, hideMenu, notify} = this.props;
 
     try {

From 64be131047dcdc5628acbf7eab9e419357318887 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 12 Sep 2017 15:09:11 -0300
Subject: [PATCH 18/19] Final

---
 .../client/components/ModActionButton.js                     | 4 ++--
 .../client/containers/ModActionButton.js                     | 4 ++--
 .../client/components/ModerationActions.js                   | 5 ++---
 .../client/containers/ApproveCommentAction.js                | 3 +--
 .../client/containers/RejectCommentAction.js                 | 3 +--
 5 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
index b1811d2fc..8290ae8b6 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
+++ b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
@@ -31,12 +31,12 @@ export class ModActionButton extends React.Component {
 
   handleDeleteTag = () => {
     this.props.deleteTag();
-    this.props.closeTooltip();
+    this.props.closeMenu();
   }
 
   handlePostTag = () => {
     this.props.postTag();
-    this.props.closeTooltip();
+    this.props.closeMenu();
   }
 
   render() {
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
index 520ce9344..6f02164b2 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
@@ -2,11 +2,11 @@ import {compose} from 'react-apollo';
 import {bindActionCreators} from 'redux';
 import ModActionButton from '../components/ModActionButton';
 import {withTags, connect} from 'plugin-api/beta/client/hocs';
-import {closeTooltip} from 'plugins/talk-plugin-moderation-actions/client/actions';
+import {closeMenu} from 'plugins/talk-plugin-moderation-actions/client/actions';
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    closeTooltip,
+    closeMenu,
   }, dispatch);
 
 const enhance = compose(
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index fcb350979..a4a753d60 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
@@ -26,10 +26,9 @@ export default class ModerationActions extends React.Component {
                 fill="moderationActions"
                 queryData={{comment, asset}}
                 data={data}
-                hideMenu={hideMenu}
               />
-              <ApproveCommentAction comment={comment} hideTooltip={hideTooltip} />
-              <RejectCommentAction comment={comment} hideTooltip={hideTooltip} />
+              <ApproveCommentAction comment={comment} hideMenu={hideMenu} />
+              <RejectCommentAction comment={comment} hideMenu={hideMenu} />
             </Menu>
           )}
         </div>
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
index 3cca0bda6..4c4a457a2 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
@@ -1,8 +1,7 @@
 import React from 'react';
+import {compose} from 'react-apollo';
 import {bindActionCreators} from 'redux';
-import {connect} from 'plugin-api/beta/client/hocs';
 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';
 import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index e13ddf32c..246cdfe2d 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -1,8 +1,7 @@
 import React from 'react';
+import {compose} from 'react-apollo';
 import {bindActionCreators} from 'redux';
-import {connect} from 'plugin-api/beta/client/hocs';
 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';
 import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';

From bfdfd981358a0f66844d75939cb89c3099e84bfc Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 12 Sep 2017 15:11:01 -0300
Subject: [PATCH 19/19] Linting

---
 .../client/containers/RejectCommentAction.js                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index 246cdfe2d..e744eb1d7 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {compose} from 'react-apollo';
 import {bindActionCreators} from 'redux';
-import {getErrorMessages} from 'plugin-api/beta/client/utils'
+import {getErrorMessages} from 'plugin-api/beta/client/utils';
 import {notify} from 'plugin-api/beta/client/actions/notification';
 import RejectCommentAction from '../components/RejectCommentAction';
 import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';