Using redux to handle the tooltip state

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,
+});

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

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`;

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);

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
 };

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;
+  }
+}