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 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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: {