talk/plugins/talk-plugin-author-menu/client/containers/AuthorName.js

import React from 'react';
import { connect, withFragments } from 'plugin-api/beta/client/hocs';
import { bindActionCreators } from 'redux';
import AuthorName from '../components/AuthorName';
import {
  setContentSlot,
  resetContentSlot,
  openMenu,
  closeMenu,
} from '../actions';
import { compose, gql } from 'react-apollo';
import {
  getSlotFragmentSpreads,
  getShallowChanges,
} from 'plugin-api/beta/client/utils';

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

  toggleMenu = () => {
    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 (
      <AuthorName
        data={this.props.data}
        root={this.props.root}
        asset={this.props.asset}
        comment={this.props.comment}
        contentSlot={this.props.contentSlot}
        menuVisible={this.props.showMenuForComment === this.props.comment.id}
        toggleMenu={this.toggleMenu}
        hideMenu={this.hideMenu}
      />
    );
  }
}

const slots = ['authorMenuInfos', 'authorMenuActions'];

const mapStateToProps = ({ talkPluginAuthorMenu: state }) => ({
  contentSlot: state.contentSlot,
  showMenuForComment: state.showMenuForComment,
});

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

const withAuthorNameFragments = withFragments({
  root: gql`
    fragment TalkAuthorMenu_AuthorName_root on RootQuery {
      __typename
      ${getSlotFragmentSpreads(slots, 'root')}
    }`,
  asset: gql`
    fragment TalkAuthorMenu_AuthorName_asset on Asset {
      __typename
      ${getSlotFragmentSpreads(slots, 'asset')}
    }`,
  comment: gql`
    fragment TalkAuthorMenu_AuthorName_comment on Comment {
      __typename
      id
      user {
        username
      }
      ${getSlotFragmentSpreads(slots, 'comment')}
    }`,
});

const enhance = compose(
  connect(mapStateToProps, mapDispatchToProps),
  withAuthorNameFragments
);

export default enhance(AuthorNameContainer);