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

import React from 'react';
import {bindActionCreators} from 'redux';
import {gql, compose} from 'react-apollo';
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';
import {connect, excludeIf, withFragments} from 'plugin-api/beta/client/hocs';

class ModerationActionsContainer extends React.Component {

  shouldComponentUpdate(nextProps) {
    
    // Specifically handle `showMenuForComment` if it is the only change.
    const changes = getShallowChanges(this.props, nextProps);
    if (changes.length === 1 && changes[0] === 'showMenuForComment') {
      const commentId = this.props.comment.id;
      if (
        commentId !== this.props.showMenuForComment &&
        commentId !== nextProps.showMenuForComment
      ) {
        return false;
      }
    }
    
    // Prevent Slot from rerendering when no props has shallowly changed.
    return changes.length !== 0;
  }

  toogleMenu = () => {
    if (this.props.showMenuForComment === this.props.comment.id) {
      this.props.closeMenu();
    } else {
      this.props.openMenu(this.props.comment.id);
    }
  }

  hideMenu = () => {
    if (this.props.showMenuForComment === this.props.comment.id) {
      this.props.closeMenu();
    }
  }

  render() {
    return <ModerationActions
      data={this.props.data}
      root={this.props.root}
      asset={this.props.asset}
      comment={this.props.comment}
      toogleMenu={this.toogleMenu}
      hideMenu={this.hideMenu}
      menuVisible={this.props.showMenuForComment === this.props.comment.id}
    />;
  }
}

const mapStateToProps = ({auth, talkPluginModerationActions: state}) => ({
  user: auth.user,
  showMenuForComment: state.showMenuForComment,
});

const mapDispatchToProps = (dispatch) =>
  bindActionCreators({
    openMenu,
    closeMenu,
  }, dispatch);

const enhance = compose(
  connect(mapStateToProps, mapDispatchToProps),
  withFragments({
    root: gql`
      fragment TalkModerationActions_root on RootQuery {
        me {
          id
        }
      }`
    ,
    asset: gql`
      fragment TalkModerationActions_asset on Asset {
        id
      }`
    ,
    comment: gql`
      fragment TalkModerationActions_comment on Comment {
        id
        status
        user {
          id
        }
        tags {
          tag {
            name
          }
        }
      }
  `}),
  excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')),
);

export default enhance(ModerationActionsContainer);