From 19a755d59ff032ec3df7a0510d733a5a7b160817 Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Fri, 9 Nov 2018 20:38:58 -0300 Subject: [PATCH] Fix when message have multiple actions (#2331) * Fix when message have multiple actions * Feedback review --- app/actions/views/post.js | 9 ++- .../action_menu/action_menu.js | 59 ++++++++++++------- .../message_attachments/action_menu/index.js | 8 ++- .../message_attachments/message_attachment.js | 7 +-- app/reducers/views/post.js | 10 +++- 5 files changed, 60 insertions(+), 33 deletions(-) diff --git a/app/actions/views/post.js b/app/actions/views/post.js index 8a7c2f7d5..1d7dc9827 100644 --- a/app/actions/views/post.js +++ b/app/actions/views/post.js @@ -52,12 +52,17 @@ export function setMenuActionSelector(dataSource, onSelect, options) { }; } -export function selectAttachmentMenuAction(postId, actionId, dataSource, displayText, value) { +export function selectAttachmentMenuAction(postId, actionId, displayText, value) { return (dispatch) => { dispatch({ type: ViewTypes.SUBMIT_ATTACHMENT_MENU_ACTION, postId, - data: {displayText, value}, + data: { + [actionId]: { + displayText, + value, + }, + }, }); dispatch(doPostAction(postId, actionId, value)); diff --git a/app/components/message_attachments/action_menu/action_menu.js b/app/components/message_attachments/action_menu/action_menu.js index f8d0eedc0..57f0313fc 100644 --- a/app/components/message_attachments/action_menu/action_menu.js +++ b/app/components/message_attachments/action_menu/action_menu.js @@ -2,11 +2,13 @@ // See LICENSE.txt for license information. import React, {PureComponent} from 'react'; -import {Text, View} from 'react-native'; +import {Text, TouchableOpacity, View} from 'react-native'; import PropTypes from 'prop-types'; import {intlShape} from 'react-intl'; import Icon from 'react-native-vector-icons/FontAwesome'; +import {displayUsername} from 'mattermost-redux/utils/user_utils'; + import FormattedText from 'app/components/formatted_text'; import {preventDoubleTap} from 'app/utils/tap'; import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme'; @@ -24,6 +26,7 @@ export default class ActionMenu extends PureComponent { options: PropTypes.arrayOf(PropTypes.object), postId: PropTypes.string.isRequired, selected: PropTypes.object, + teammateNameDisplay: PropTypes.string, theme: PropTypes.object.isRequired, navigator: PropTypes.object, }; @@ -56,12 +59,18 @@ export default class ActionMenu extends PureComponent { return; } - const {dataSource, actions, postId, id} = this.props; + const { + actions, + dataSource, + id, + postId, + teammateNameDisplay, + } = this.props; let selectedText; let selectedValue; if (dataSource === ViewTypes.DATA_SOURCE_USERS) { - selectedText = selected.username; + selectedText = displayUsername(selected, teammateNameDisplay); selectedValue = selected.id; } else if (dataSource === ViewTypes.DATA_SOURCE_CHANNELS) { selectedText = selected.display_name; @@ -73,11 +82,11 @@ export default class ActionMenu extends PureComponent { this.setState({selectedText}); - actions.selectAttachmentMenuAction(postId, id, dataSource, selectedText, selectedValue); - } + actions.selectAttachmentMenuAction(postId, id, selectedText, selectedValue); + }; goToMenuActionSelector = preventDoubleTap(() => { - const {intl} = this.context; + const {formatMessage} = this.context.intl; const {navigator, theme, actions, dataSource, options, name} = this.props; actions.setMenuActionSelector(dataSource, this.handleSelect, options); @@ -85,7 +94,7 @@ export default class ActionMenu extends PureComponent { navigator.push({ backButtonTitle: '', screen: 'MenuActionSelector', - title: name || intl.formatMessage({id: 'mobile.action_menu.select', defaultMessage: 'Select an option'}), + title: name || formatMessage({id: 'mobile.action_menu.select', defaultMessage: 'Select an option'}), animated: true, navigatorStyle: { navBarTextColor: theme.sidebarHeaderTextColor, @@ -129,21 +138,24 @@ export default class ActionMenu extends PureComponent { return ( - - - {text} - - - + + + + {text} + + + + {submitted} ); @@ -152,6 +164,9 @@ export default class ActionMenu extends PureComponent { const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { + flex: { + flex: 1, + }, container: { width: '100%', flex: 1, diff --git a/app/components/message_attachments/action_menu/index.js b/app/components/message_attachments/action_menu/index.js index 118431e43..0a0ee77c5 100644 --- a/app/components/message_attachments/action_menu/index.js +++ b/app/components/message_attachments/action_menu/index.js @@ -4,16 +4,20 @@ import {bindActionCreators} from 'redux'; import {connect} from 'react-redux'; -import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; +import {getTeammateNameDisplaySetting, getTheme} from 'mattermost-redux/selectors/entities/preferences'; import {setMenuActionSelector, selectAttachmentMenuAction} from 'app/actions/views/post'; import ActionMenu from './action_menu'; function mapStateToProps(state, ownProps) { + const actions = state.views.post.submittedMenuActions[ownProps.postId]; + const selected = actions?.[ownProps.id]; + return { + selected, + teammateNameDisplay: getTeammateNameDisplaySetting(state), theme: getTheme(state), - selected: state.views.post.submittedMenuActions[ownProps.postId], }; } diff --git a/app/components/message_attachments/message_attachment.js b/app/components/message_attachments/message_attachment.js index e604f9558..7b8557fc5 100644 --- a/app/components/message_attachments/message_attachment.js +++ b/app/components/message_attachments/message_attachment.js @@ -114,7 +114,7 @@ export default class MessageAttachment extends PureComponent { }); return ( - + {content} ); @@ -546,10 +546,5 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { marginTop: 5, padding: 5, }, - actionsContainer: { - flex: 1, - flexDirection: 'row', - flexWrap: 'wrap', - }, }; }); diff --git a/app/reducers/views/post.js b/app/reducers/views/post.js index 90710120c..04e9d64b7 100644 --- a/app/reducers/views/post.js +++ b/app/reducers/views/post.js @@ -20,7 +20,15 @@ function submittedMenuActions(state = {}, action) { switch (action.type) { case ViewTypes.SUBMIT_ATTACHMENT_MENU_ACTION: { const nextState = {...state}; - nextState[action.postId] = action.data; + if (nextState[action.postId]) { + nextState[action.postId] = { + ...nextState[action.postId], + ...action.data, + }; + } else { + nextState[action.postId] = action.data; + } + return nextState; } case UserTypes.LOGOUT_SUCCESS: