Hide menu after action

plugins/talk-plugin-author-menu/client/actions.js

@@ -1,4 +1,4 @@
-import {SET_CONTENT_SLOT, RESET_CONTENT_SLOT} from './constants';
+import {SET_CONTENT_SLOT, RESET_CONTENT_SLOT, OPEN_MENU, CLOSE_MENU} from './constants';
 
 export const setContentSlot = (slot) => ({
   type: SET_CONTENT_SLOT,
@@ -8,3 +8,12 @@ export const setContentSlot = (slot) => ({
 export const resetContentSlot = () => ({
   type: RESET_CONTENT_SLOT,
 });
+
+export const openMenu = (id) => ({
+  type: OPEN_MENU,
+  id,
+});
+
+export const closeMenu = () => ({
+  type: CLOSE_MENU,
+});

plugins/talk-plugin-author-menu/client/constants.js

@@ -2,4 +2,6 @@ const prefix = 'TALK_AUTHOR_MENU';
 
 export const SET_CONTENT_SLOT = `${prefix}_SET_CONTENT_SLOT`;
 export const RESET_CONTENT_SLOT = `${prefix}_RESET_CONTENT_SLOT`;
+export const OPEN_MENU = `${prefix}_OPEN_MENU`;
+export const CLOSE_MENU = `${prefix}_CLOSE_MENU`;
 

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

@@ -2,29 +2,23 @@ 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} from '../actions';
+import {setContentSlot, resetContentSlot, openMenu, closeMenu} from '../actions';
 import {compose, gql} from 'react-apollo';
 import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
 
 class AuthorNameContainer extends React.Component {
-  state = {
-    menuVisible: false
-  };
 
   toggleMenu = () => {
-    this.setState({
-      menuVisible: !this.state.menuVisible,
-    });
+    if (this.props.showMenuForComment === this.props.comment.id) {
+      this.props.closeMenu();
+    } else {
+      this.props.openMenu(this.props.comment.id);
+    }
   }
 
   hideMenu = () => {
-    if (this.state.menuVisible) {
-      this.setState({
-        menuVisible: false
-      });
-      if (this.props.contentSlot) {
-        this.props.resetContentSlot();
-      }
+    if (this.props.showMenuForComment === this.props.comment.id) {
+      this.props.closeMenu();
     }
   }
 
@@ -35,7 +29,7 @@ class AuthorNameContainer extends React.Component {
       asset={this.props.asset}
       comment={this.props.comment}
       contentSlot={this.props.contentSlot}
-      menuVisible={this.state.menuVisible}
+      menuVisible={this.props.showMenuForComment === this.props.comment.id}
       toggleMenu={this.toggleMenu}
       hideMenu={this.hideMenu}
     />;
@@ -49,10 +43,16 @@ const slots = [
 
 const mapStateToProps = ({talkPluginAuthorMenu: state}) => ({
   contentSlot: state.contentSlot,
+  showMenuForComment: state.showMenuForComment,
 });
 
 const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({setContentSlot, resetContentSlot}, dispatch);
+  bindActionCreators({
+    setContentSlot,
+    resetContentSlot,
+    openMenu,
+    closeMenu,
+  }, dispatch);
 
 const withAuthorNameFragments = withFragments({
   root: gql`
@@ -68,6 +68,7 @@ const withAuthorNameFragments = withFragments({
   comment: gql`
     fragment TalkAuthorMenu_AuthorName_comment on Comment {
       __typename
+      id
       user {
         username
       }

plugins/talk-plugin-author-menu/client/reducer.js

@@ -1,7 +1,8 @@
-import {SET_CONTENT_SLOT, RESET_CONTENT_SLOT} from './constants';
+import {SET_CONTENT_SLOT, RESET_CONTENT_SLOT, OPEN_MENU, CLOSE_MENU} from './constants';
 
 const initialState = {
   contentSlot: null,
+  showMenuForComment: null,
 };
 
 export default function reducer(state = initialState, action) {
@@ -16,6 +17,17 @@ export default function reducer(state = initialState, action) {
       ...state,
       contentSlot: initialState.contentSlot,
     };
+  case OPEN_MENU:
+    return {
+      ...state,
+      showMenuForComment: action.id,
+    };
+  case CLOSE_MENU:
+    return {
+      ...state,
+      showMenuForComment: null,
+      contentSlot: null,
+    };
   default :
     return state;
   }

plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js

@@ -3,17 +3,17 @@ import IgnoreUserConfirmation from '../components/IgnoreUserConfirmation';
 import {compose, gql} from 'react-apollo';
 import {connect, withFragments, withIgnoreUser} from 'plugin-api/beta/client/hocs';
 import {bindActionCreators} from 'redux';
-import {setContentSlot} from 'plugins/talk-plugin-author-menu/client/actions';
+import {closeMenu} from 'plugins/talk-plugin-author-menu/client/actions';
 
 class IgnoreUserConfirmationContainer extends React.Component {
 
   ignoreUser = () => {
     this.props.ignoreUser(this.props.comment.user.id);
-    this.props.setContentSlot(null);
+    this.props.closeMenu();
   };
 
   cancel = () => {
-    this.props.setContentSlot(null);
+    this.props.closeMenu();
   }
 
   render() {
@@ -27,7 +27,7 @@ class IgnoreUserConfirmationContainer extends React.Component {
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    setContentSlot,
+    closeMenu,
   }, dispatch);
 
 const withIgnoreUserConfirmationFragments = withFragments({