diff --git a/plugins/talk-plugin-author-menu/client/actions.js b/plugins/talk-plugin-author-menu/client/actions.js index 0a806749d..960e66bb4 100644 --- a/plugins/talk-plugin-author-menu/client/actions.js +++ b/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, +}); diff --git a/plugins/talk-plugin-author-menu/client/constants.js b/plugins/talk-plugin-author-menu/client/constants.js index a11de608a..1d14e94d4 100644 --- a/plugins/talk-plugin-author-menu/client/constants.js +++ b/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`; diff --git a/plugins/talk-plugin-author-menu/client/containers/AuthorName.js b/plugins/talk-plugin-author-menu/client/containers/AuthorName.js index cbb8c84ee..9d9188167 100644 --- a/plugins/talk-plugin-author-menu/client/containers/AuthorName.js +++ b/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 } diff --git a/plugins/talk-plugin-author-menu/client/reducer.js b/plugins/talk-plugin-author-menu/client/reducer.js index 4f04d07ed..822c2a6a8 100644 --- a/plugins/talk-plugin-author-menu/client/reducer.js +++ b/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; } diff --git a/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js b/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js index a97ebe228..4821fae9b 100644 --- a/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js +++ b/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({