diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index cb03d12b4caf..8a6d957ad167 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -7,11 +7,13 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import Str from 'expensify-common/lib/str'; import reportActionPropTypes from './reportActionPropTypes'; import styles from '../../../styles/styles'; +import compose from '../../../libs/compose'; import themeColors from '../../../styles/themes/default'; import * as StyleUtils from '../../../styles/StyleUtils'; import containerComposeStyles from '../../../styles/containerComposeStyles'; import Composer from '../../../components/Composer'; import * as Report from '../../../libs/actions/Report'; +import {withReportActionsDrafts} from '../../../components/OnyxProvider'; import openReportActionComposeViewWhenClosingMessageEdit from '../../../libs/openReportActionComposeViewWhenClosingMessageEdit'; import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager'; import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton'; @@ -37,6 +39,7 @@ import useWindowDimensions from '../../../hooks/useWindowDimensions'; import useReportScrollManager from '../../../hooks/useReportScrollManager'; import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction'; import focusWithDelay from '../../../libs/focusWithDelay'; +import ONYXKEYS from '../../../ONYXKEYS'; const propTypes = { /** All the data of the action */ @@ -61,6 +64,10 @@ const propTypes = { /** Whether or not the emoji picker is disabled */ shouldDisableEmojiPicker: PropTypes.bool, + /** Draft message - if this is set the comment is in 'edit' mode */ + // eslint-disable-next-line react/forbid-prop-types + drafts: PropTypes.object, + /** Stores user's preferred skin tone */ preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -72,6 +79,7 @@ const defaultProps = { report: {}, shouldDisableEmojiPicker: false, preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE, + drafts: {}, }; // native ids @@ -231,6 +239,21 @@ function ReportActionItemMessageEdit(props) { const trimmedNewDraft = draft.trim(); + const report = ReportUtils.getReport(props.reportID); + + // Updates in child message should cause the parent draft message to change + if (report.parentReportActionID && lodashGet(props.action, 'childType', '') === CONST.REPORT.TYPE.CHAT) { + if (lodashGet(props.drafts, [`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${report.parentReportID}_${props.action.reportActionID}`], undefined)) { + Report.saveReportActionDraft(report.parentReportID, props.action.reportActionID, trimmedNewDraft); + } + } + // Updates in the parent message should cause the child draft message to change + if (props.action.childReportID) { + if (lodashGet(props.drafts, [`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${props.action.childReportID}_${props.action.reportActionID}`], undefined)) { + Report.saveReportActionDraft(props.action.childReportID, props.action.reportActionID, trimmedNewDraft); + } + } + // When user tries to save the empty message, it will delete it. Prompt the user to confirm deleting. if (!trimmedNewDraft) { ReportActionContextMenu.showDeleteModal(props.reportID, props.action, false, deleteDraft, () => InteractionManager.runAfterInteractions(() => textInputRef.current.focus())); @@ -238,7 +261,7 @@ function ReportActionItemMessageEdit(props) { } Report.editReportComment(props.reportID, props.action, trimmedNewDraft); deleteDraft(); - }, [props.action, debouncedSaveDraft, deleteDraft, draft, props.reportID]); + }, [props.action, debouncedSaveDraft, deleteDraft, draft, props.reportID, props.drafts]); /** * @param {String} emoji @@ -395,7 +418,12 @@ ReportActionItemMessageEdit.propTypes = propTypes; ReportActionItemMessageEdit.defaultProps = defaultProps; ReportActionItemMessageEdit.displayName = 'ReportActionItemMessageEdit'; -export default withLocalize( +export default compose( + withLocalize, + withReportActionsDrafts({ + propName: 'drafts', + }), +)( React.forwardRef((props, ref) => (