Skip to content

Commit

Permalink
Merge pull request #28154 from eh2077/fix-21527
Browse files Browse the repository at this point in the history 
fix: sync draft and edit status of thread first chat
  • Loading branch information
@techievivek
techievivek authored Sep 27, 2023
2 parents d61f55a + ea01dab commit 41ddd74
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 54 deletions.
7 changes: 4 additions & 3 deletions src/libs/actions/Report.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1249,11 +1249,12 @@ function editReportComment(reportID, originalReportAction, textForNewComment) {
* Saves the draft for a comment report action. This will put the comment into "edit mode"
*
* @param {String} reportID
* @param {Number} reportActionID
* @param {Object} reportAction
* @param {String} draftMessage
*/
function saveReportActionDraft(reportID, reportActionID, draftMessage) {
Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage);
function saveReportActionDraft(reportID, reportAction, draftMessage) {
const originalReportID = ReportUtils.getOriginalReportID(reportID, reportAction);
Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}_${reportAction.reportActionID}`, draftMessage);
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/pages/home/report/ContextMenu/ContextMenuActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ export default [
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID));
return;
}
const editAction = () => Report.saveReportActionDraft(reportID, reportAction.reportActionID, _.isEmpty(draftMessage) ? getActionText(reportAction) : '');
const editAction = () => Report.saveReportActionDraft(reportID, reportAction, _.isEmpty(draftMessage) ? getActionText(reportAction) : '');

if (closePopover) {
// Hide popover, then call editAction
Expand Down
2 changes: 1 addition & 1 deletion src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ function ComposerWithSuggestions({
(action) => ReportUtils.canEditReportAction(action) && !ReportActionsUtils.isMoneyRequestAction(action),
);
if (lastReportAction) {
Report.saveReportActionDraft(reportID, lastReportAction.reportActionID, _.last(lastReportAction.message).html);
Report.saveReportActionDraft(reportID, lastReportAction, _.last(lastReportAction.message).html);
}
}
},
Expand Down
3 changes: 2 additions & 1 deletion src/pages/home/report/ReportActionItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -668,7 +668,8 @@ export default compose(
withReportActionsDrafts({
propName: 'draftMessage',
transformValue: (drafts, props) => {
const draftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${props.report.reportID}_${props.action.reportActionID}`;
const originalReportID = ReportUtils.getOriginalReportID(props.report.reportID, props.action);
const draftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}_${props.action.reportActionID}`;
return lodashGet(drafts, draftKey, '');
},
}),
Expand Down
71 changes: 23 additions & 48 deletions src/pages/home/report/ReportActionItemMessageEdit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,11 @@ 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 setShouldShowComposeInputKeyboardAware from '../../../libs/setShouldShowComposeInputKeyboardAware';
import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
Expand All @@ -22,6 +20,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
import Tooltip from '../../../components/Tooltip';
import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
import * as ReportUtils from '../../../libs/ReportUtils';
import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
import * as EmojiUtils from '../../../libs/EmojiUtils';
import reportPropTypes from '../../reportPropTypes';
import ExceededCommentLength from '../../../components/ExceededCommentLength';
Expand All @@ -31,14 +30,12 @@ import * as ComposerUtils from '../../../libs/ComposerUtils';
import * as User from '../../../libs/actions/User';
import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
import getButtonState from '../../../libs/getButtonState';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import useLocalize from '../../../hooks/useLocalize';
import useKeyboardState from '../../../hooks/useKeyboardState';
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';
import * as Browser from '../../../libs/Browser';

const propTypes = {
Expand All @@ -64,22 +61,15 @@ 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]),

...withLocalizePropTypes,
};

const defaultProps = {
forwardedRef: () => {},
report: {},
shouldDisableEmojiPicker: false,
preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
drafts: {},
};

// native ids
Expand All @@ -90,7 +80,7 @@ const isMobileSafari = Browser.isMobileSafari();

function ReportActionItemMessageEdit(props) {
const reportScrollManager = useReportScrollManager();
const {translate} = useLocalize();
const {translate, preferredLocale} = useLocalize();
const {isKeyboardShown} = useKeyboardState();
const {isSmallScreenWidth} = useWindowDimensions();

Expand Down Expand Up @@ -122,6 +112,13 @@ function ReportActionItemMessageEdit(props) {
const isFocusedRef = useRef(false);
const insertedEmojis = useRef([]);

useEffect(() => {
if (ReportActionsUtils.isDeletedAction(props.action) || props.draftMessage === props.action.message[0].html) {
return;
}
setDraft(Str.htmlDecode(props.draftMessage));
}, [props.draftMessage, props.action]);

useEffect(() => {
// required for keeping last state of isFocused variable
isFocusedRef.current = isFocused;
Expand Down Expand Up @@ -175,9 +172,9 @@ function ReportActionItemMessageEdit(props) {
const debouncedSaveDraft = useMemo(
() =>
_.debounce((newDraft) => {
Report.saveReportActionDraft(props.reportID, props.action.reportActionID, newDraft);
Report.saveReportActionDraft(props.reportID, props.action, newDraft);
}, 1000),
[props.reportID, props.action.reportActionID],
[props.reportID, props.action],
);

/**
Expand All @@ -200,7 +197,7 @@ function ReportActionItemMessageEdit(props) {
*/
const updateDraft = useCallback(
(newDraftInput) => {
const {text: newDraft, emojis} = EmojiUtils.replaceAndExtractEmojis(newDraftInput, props.preferredSkinTone, props.preferredLocale);
const {text: newDraft, emojis} = EmojiUtils.replaceAndExtractEmojis(newDraftInput, props.preferredSkinTone, preferredLocale);

if (!_.isEmpty(emojis)) {
insertedEmojis.current = [...insertedEmojis.current, ...emojis];
Expand Down Expand Up @@ -228,15 +225,15 @@ function ReportActionItemMessageEdit(props) {
debouncedSaveDraft(props.action.message[0].html);
}
},
[props.action.message, debouncedSaveDraft, debouncedUpdateFrequentlyUsedEmojis, props.preferredSkinTone, props.preferredLocale],
[props.action.message, debouncedSaveDraft, debouncedUpdateFrequentlyUsedEmojis, props.preferredSkinTone, preferredLocale],
);

/**
* Delete the draft of the comment being edited. This will take the comment out of "edit mode" with the old content.
*/
const deleteDraft = useCallback(() => {
debouncedSaveDraft.cancel();
Report.saveReportActionDraft(props.reportID, props.action.reportActionID, '');
Report.saveReportActionDraft(props.reportID, props.action, '');

if (isActive()) {
ReportActionComposeFocusManager.clear();
Expand All @@ -250,7 +247,7 @@ function ReportActionItemMessageEdit(props) {
keyboardDidHideListener.remove();
});
}
}, [props.action.reportActionID, debouncedSaveDraft, props.index, props.reportID, reportScrollManager, isActive]);
}, [props.action, debouncedSaveDraft, props.index, props.reportID, reportScrollManager, isActive]);

/**
* Save the draft of the comment to be the new comment message. This will take the comment out of "edit mode" with
Expand All @@ -268,21 +265,6 @@ 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) {
textInputRef.current.blur();
Expand All @@ -291,7 +273,7 @@ function ReportActionItemMessageEdit(props) {
}
Report.editReportComment(props.reportID, props.action, trimmedNewDraft);
deleteDraft();
}, [props.action, debouncedSaveDraft, deleteDraft, draft, props.reportID, props.drafts]);
}, [props.action, debouncedSaveDraft, deleteDraft, draft, props.reportID]);

/**
* @param {String} emoji
Expand Down Expand Up @@ -453,17 +435,10 @@ ReportActionItemMessageEdit.propTypes = propTypes;
ReportActionItemMessageEdit.defaultProps = defaultProps;
ReportActionItemMessageEdit.displayName = 'ReportActionItemMessageEdit';

export default compose(
withLocalize,
withReportActionsDrafts({
propName: 'drafts',
}),
)(
React.forwardRef((props, ref) => (
<ReportActionItemMessageEdit
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
forwardedRef={ref}
/>
)),
);
export default React.forwardRef((props, ref) => (
<ReportActionItemMessageEdit
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
forwardedRef={ref}
/>
));

0 comments on commit 41ddd74

Please sign in to comment.