From bf1e59c4f160ae1452858e10da82b535b06344b1 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Fri, 9 Apr 2021 00:08:21 -0700 Subject: [PATCH] Really non-performant comment editing --- src/libs/actions/Report.js | 2 +- .../home/report/ReportActionContextMenu.js | 12 ++- src/pages/home/report/ReportActionItem.js | 9 +- src/pages/home/report/ReportActionItemEdit.js | 75 ---------------- .../home/report/ReportActionItemGrouped.js | 12 ++- .../report/ReportActionItemMessageEdit.js | 85 +++++++++++++++++++ .../home/report/ReportActionItemSingle.js | 11 ++- 7 files changed, 116 insertions(+), 90 deletions(-) delete mode 100644 src/pages/home/report/ReportActionItemEdit.js create mode 100644 src/pages/home/report/ReportActionItemMessageEdit.js diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 7499e092fc2a..e47404b0e5c0 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -917,7 +917,7 @@ function editReportComment(reportID, reportAction, htmlForNewComment) { } function saveReportActionDraft(reportID, reportActionID, draftMessage) { - Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage); + Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage); } export { diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js index b2f6ec0e3c5c..09b4e03c657e 100644 --- a/src/pages/home/report/ReportActionContextMenu.js +++ b/src/pages/home/report/ReportActionContextMenu.js @@ -9,7 +9,7 @@ import { } from '../../../components/Icon/Expensicons'; import getReportActionContextMenuStyles from '../../../styles/getReportActionContextMenuStyles'; import ReportActionContextMenuItem from './ReportActionContextMenuItem'; -import {editReportComment, saveReportActionDraft} from '../../../libs/actions/Report'; +import {saveReportActionDraft} from '../../../libs/actions/Report'; import ReportActionPropTypes from './ReportActionPropTypes'; import Clipboard from '../../../libs/Clipboard'; import {isReportMessageAttachment} from '../../../libs/reportUtils'; @@ -95,10 +95,10 @@ class ReportActionContextMenu extends React.Component { { text: 'Edit Comment', icon: Pencil, - shouldShow: this.props.reportAction.actorEmail === this.props.session.email, + shouldShow: this.props.reportAction.actorEmail === this.props.session.email + && !isReportMessageAttachment(this.getActionText()), onPress: () => { - editReportComment(this.props.reportID, this.props.reportAction, "blah blah Yuwen test 21"); - saveReportActionDraft(this.props.reportID, this.props.reportAction.reportActionID, "blah blah Yuwen test 21"); + saveReportActionDraft(this.props.reportID, this.props.reportAction.reportActionID, this.getActionText()); }, }, @@ -111,6 +111,10 @@ class ReportActionContextMenu extends React.Component { }, ]; + getActionText() { + const message = _.last(lodashGet(this.props.reportAction, 'message', null)); + return lodashGet(message, 'text', ''); + } render() { const wrapperStyle = getReportActionContextMenuStyles(this.props.isMini); diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 926e088e1023..a28786bfa56c 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -15,7 +15,6 @@ import PopoverWithMeasuredContent from '../../../components/PopoverWithMeasuredC import ReportActionItemSingle from './ReportActionItemSingle'; import ReportActionItemGrouped from './ReportActionItemGrouped'; import ReportActionContextMenu from './ReportActionContextMenu'; -import ReportActionItemEdit from './ReportActionItemEdit'; const propTypes = { // The ID of the report this action is on. @@ -91,17 +90,15 @@ class ReportActionItem extends Component { } render() { - return this.props.draftMessage ? ( - - ) : ( + return ( {hovered => ( {!this.props.displayAsGroup - ? - : } + ? + : } - - - - {_.map(this.props.action.person, (fragment, index) => ( - - ))} - - - this.textInput = el} - onChangeText={() => {}} // Debounced saveDraftComment - defaultValue={this.props.draftMessage} - maxLines={16} // This is the same that slack has - style={[styles.textInputCompose, styles.flex4]} - /> - - - - - Cancel - - - - - Save - - - - - ); - } -} - -ReportActionItemEdit.propTypes = propTypes; -export default ReportActionItemEdit; diff --git a/src/pages/home/report/ReportActionItemGrouped.js b/src/pages/home/report/ReportActionItemGrouped.js index 616b3f103c99..c6c90691a438 100644 --- a/src/pages/home/report/ReportActionItemGrouped.js +++ b/src/pages/home/report/ReportActionItemGrouped.js @@ -1,19 +1,27 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; +import _ from 'underscore'; import ReportActionPropTypes from './ReportActionPropTypes'; import ReportActionItemMessage from './ReportActionItemMessage'; import styles from '../../../styles/styles'; +import ReportActionItemMessageEdit from './ReportActionItemMessageEdit'; const propTypes = { // All the data of the action action: PropTypes.shape(ReportActionPropTypes).isRequired, + + draftMessage: PropTypes.string.isRequired, + + reportID: PropTypes.number.isRequired, }; -const ReportActionItemGrouped = ({action}) => ( +const ReportActionItemGrouped = ({action, draftMessage}) => ( - + {_.isEmpty(draftMessage) + ? + : } ); diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js new file mode 100644 index 000000000000..a6c60d56d3b9 --- /dev/null +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -0,0 +1,85 @@ +import React from 'react'; +import {View, Pressable, Text} from 'react-native'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; +import ReportActionPropTypes from './ReportActionPropTypes'; +import styles from '../../../styles/styles'; +import TextInputFocusable from '../../../components/TextInputFocusable'; +import {editReportComment, saveReportActionDraft} from '../../../libs/actions/Report'; + +const propTypes = { + // All the data of the action + action: PropTypes.shape(ReportActionPropTypes).isRequired, + + // Draft message + draftMessage: PropTypes.string.isRequired, + + reportID: PropTypes.number.isRequired, +}; + +class ReportActionItemMessageEdit extends React.Component { + constructor(props) { + super(props); + this.updateDraft = this.updateDraft.bind(this); + this.deleteDraft = this.deleteDraft.bind(this); + this.debouncedSaveDraft = _.debounce(this.debouncedSaveDraft.bind(this), 1000, false); + this.publishDraft = this.publishDraft.bind(this); + + this.state = { + draft: this.props.draftMessage, + }; + } + + /** + * Update the value of the draft in Onyx + * + * @param {String} newDraft + */ + updateDraft(newDraft) { + this.setState({draft: newDraft}); + this.debouncedSaveDraft(newDraft); + } + + deleteDraft() { + saveReportActionDraft(this.props.reportID, this.props.action.reportActionID, ''); + } + + debouncedSaveDraft() { + saveReportActionDraft(this.props.reportID, this.props.action.reportActionID, this.state.draft); + } + + publishDraft() { + editReportComment(this.props.reportID, this.props.action, this.state.draft); + this.deleteDraft(); + } + + render() { + return ( + + this.textInput = el} + onChangeText={this.updateDraft} // Debounced saveDraftComment + defaultValue={this.props.draftMessage} + maxLines={16} // This is the same that slack has + style={[styles.textInputCompose, styles.flex4]} + /> + + + + Cancel + + + + + Save + + + + + ); + } +} + +ReportActionItemMessageEdit.propTypes = propTypes; +export default ReportActionItemMessageEdit; diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index e9cc33f9d085..0bc936886dff 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -12,6 +12,7 @@ import ReportActionItemDate from './ReportActionItemDate'; import Avatar from '../../../components/Avatar'; import ONYXKEYS from '../../../ONYXKEYS'; import personalDetailsPropType from '../../personalDetailsPropType'; +import ReportActionItemMessageEdit from './ReportActionItemMessageEdit'; const propTypes = { // All the data of the action @@ -19,9 +20,13 @@ const propTypes = { // All of the personalDetails personalDetails: PropTypes.objectOf(personalDetailsPropType).isRequired, + + draftMessage: PropTypes.string.isRequired, + + reportID: PropTypes.number.isRequired, }; -const ReportActionItemSingle = ({action, personalDetails}) => { +const ReportActionItemSingle = ({action, personalDetails, draftMessage, reportID}) => { const {avatar, displayName} = personalDetails[action.actorEmail] || {}; const avatarUrl = action.automatic ? `${CONST.CLOUDFRONT_URL}/images/icons/concierge_2019.svg` @@ -52,7 +57,9 @@ const ReportActionItemSingle = ({action, personalDetails}) => { ))} - + {_.isEmpty(draftMessage) + ? + : } );