From 8d696bf66d344602e22e40f4c48308e73e9099ce Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 26 Feb 2024 14:49:40 +0100 Subject: [PATCH 1/9] fix: save chosen suggestion in Onyx --- src/ONYXKEYS.ts | 2 ++ src/libs/actions/Report.ts | 9 +++++ .../ComposerWithSuggestions.js | 1 + .../ReportActionCompose/SuggestionMention.js | 35 +++++++++++++++---- .../report/ReportActionCompose/Suggestions.js | 2 ++ 5 files changed, 43 insertions(+), 6 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index f0b400687b12..d8618549b08d 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -296,6 +296,7 @@ const ONYXKEYS = { REPORT_ACTIONS_DRAFTS: 'reportActionsDrafts_', REPORT_ACTIONS_REACTIONS: 'reportActionsReactions_', REPORT_DRAFT_COMMENT: 'reportDraftComment_', + REPORT_DRAFT_LAST_MENTION: 'reportDraftLastMention_', REPORT_DRAFT_COMMENT_NUMBER_OF_LINES: 'reportDraftCommentNumberOfLines_', REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_', REPORT_USER_IS_TYPING: 'reportUserIsTyping_', @@ -464,6 +465,7 @@ type OnyxCollectionValuesMapping = { [ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS]: OnyxTypes.ReportActionsDrafts; [ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS]: OnyxTypes.ReportActionReactions; [ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT]: string; + [ONYXKEYS.COLLECTION.REPORT_DRAFT_LAST_MENTION]: string; [ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES]: number; [ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE]: boolean; [ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING]: OnyxTypes.ReportUserIsTyping; diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index f29f8a4fbaab..819e856d6930 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -1056,6 +1056,14 @@ function setReportWithDraft(reportID: string, hasDraft: boolean): Promise return Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {hasDraft}); } +/** + * Saves the last chosen mention from mention suggestion list for the report. + * This is used to determine if the mention suggestion list should be opened/remain opened. + */ +function saveReportDraftLastMention(reportID: string, comment: string) { + Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_LAST_MENTION}${reportID}`, comment); +} + /** Broadcasts whether or not a user is typing on a report over the report's private pusher channel. */ function broadcastUserIsTyping(reportID: string) { const privateReportChannelName = getReportChannelName(reportID); @@ -2969,4 +2977,5 @@ export { updateReportName, resolveActionableMentionWhisper, updateRoomVisibility, + saveReportDraftLastMention }; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 12e31495af2b..8ba36604c453 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -635,6 +635,7 @@ function ComposerWithSuggestions({ composerHeight={composerHeight} measureParentContainer={measureParentContainer} isAutoSuggestionPickerLarge={isAutoSuggestionPickerLarge} + reportID={reportID} // Input value={value} setValue={setValue} diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js index 6bdea2cb4a27..e2e288aff442 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js @@ -1,18 +1,22 @@ import PropTypes from 'prop-types'; -import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'; +import { withOnyx } from 'react-native-onyx'; import _ from 'underscore'; import * as Expensicons from '@components/Icon/Expensicons'; import MentionSuggestions from '@components/MentionSuggestions'; -import {usePersonalDetails} from '@components/OnyxProvider'; +import { usePersonalDetails } from '@components/OnyxProvider'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; +import * as Report from '@libs/actions/Report'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as SuggestionsUtils from '@libs/SuggestionUtils'; import * as UserUtils from '@libs/UserUtils'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; import * as SuggestionProps from './suggestionProps'; + /** * Check if this piece of string looks like a mention * @param {String} str @@ -31,6 +35,8 @@ const propTypes = { /** A ref to this component */ forwardedRef: PropTypes.shape({current: PropTypes.shape({})}), + reportDraftLastMentionCollection: PropTypes.object.isRequired, + ...SuggestionProps.implementationBaseProps, }; @@ -50,6 +56,8 @@ function SuggestionMention({ isAutoSuggestionPickerLarge, measureParentContainer, isComposerFocused, + reportID, + reportDraftLastMentionCollection = {}, }) { const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const {translate, formatPhoneNumber} = useLocalize(); @@ -64,6 +72,8 @@ function SuggestionMention({ shouldExcludeTextAreaNodes: false, }); + const reportDraftLastMention = reportDraftLastMentionCollection[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_LAST_MENTION}${reportID}`] || ''; + // Used to decide whether to block the suggestions list from showing to prevent flickering const shouldBlockCalc = useRef(false); @@ -87,8 +97,9 @@ function SuggestionMention({ ...prevState, suggestedMentions: [], })); + Report.saveReportDraftLastMention(reportID, mentionCode); }, - [value, suggestionValues.atSignIndex, suggestionValues.suggestedMentions, suggestionValues.mentionPrefix, updateComment, setSelection], + [value, suggestionValues.atSignIndex, suggestionValues.suggestedMentions, suggestionValues.mentionPrefix, updateComment, setSelection, reportID], ); /** @@ -213,6 +224,11 @@ function SuggestionMention({ let suggestionWord; let prefix; + if (reportDraftLastMention && (lastWord === reportDraftLastMention || !lastWord && secondToLastWord === reportDraftLastMention)) { + resetSuggestions(); + return; + } + // Detect if the last two words contain a mention (two words are needed to detect a mention with a space in it) if (lastWord.startsWith('@')) { atSignIndex = leftString.lastIndexOf(lastWord); @@ -249,10 +265,13 @@ function SuggestionMention({ })); setHighlightedMentionIndex(0); }, - [getMentionOptions, personalDetails, resetSuggestions, setHighlightedMentionIndex, value, isComposerFocused], + [getMentionOptions, personalDetails, resetSuggestions, setHighlightedMentionIndex, value, isComposerFocused, reportDraftLastMention], ); useEffect(() => { + if (!value && reportDraftLastMention || !value.includes(reportDraftLastMention)) { + Report.saveReportDraftLastMention(reportID, ''); + } if (value.length < previousValue.length) { // A workaround to not show the suggestions list when the user deletes a character before the mention. // It is caused by a buggy behavior of the TextInput on iOS. Should be fixed after migration to Fabric. @@ -261,7 +280,7 @@ function SuggestionMention({ } calculateMentionSuggestion(selection.end); - }, [selection, value, previousValue, calculateMentionSuggestion]); + }, [selection, value, previousValue, calculateMentionSuggestion, reportDraftLastMention]); const updateShouldShowSuggestionMenuToFalse = useCallback(() => { setSuggestionValues((prevState) => { @@ -333,4 +352,8 @@ const SuggestionMentionWithRef = React.forwardRef((props, ref) => ( SuggestionMentionWithRef.displayName = 'SuggestionMentionWithRef'; -export default SuggestionMentionWithRef; +export default withOnyx({ + reportDraftLastMentionCollection: { + key: ONYXKEYS.COLLECTION.REPORT_DRAFT_LAST_MENTION, + }, +})(SuggestionMentionWithRef); diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.js b/src/pages/home/report/ReportActionCompose/Suggestions.js index 5dc71fec6419..d4fef511dba4 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.js +++ b/src/pages/home/report/ReportActionCompose/Suggestions.js @@ -44,6 +44,7 @@ function Suggestions({ measureParentContainer, isAutoSuggestionPickerLarge, isComposerFocused, + reportID, }) { const suggestionEmojiRef = useRef(null); const suggestionMentionRef = useRef(null); @@ -145,6 +146,7 @@ function Suggestions({ /> From 365002c1f7a75228837088801dc7ff86f052c5a2 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 27 Feb 2024 08:07:27 +0100 Subject: [PATCH 2/9] fix: change the onyx key name --- src/ONYXKEYS.ts | 4 +-- src/libs/actions/Report.ts | 2 +- .../ReportActionCompose/SuggestionMention.js | 25 +++++++++---------- 3 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index d8618549b08d..da0d01a84a6e 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -296,7 +296,7 @@ const ONYXKEYS = { REPORT_ACTIONS_DRAFTS: 'reportActionsDrafts_', REPORT_ACTIONS_REACTIONS: 'reportActionsReactions_', REPORT_DRAFT_COMMENT: 'reportDraftComment_', - REPORT_DRAFT_LAST_MENTION: 'reportDraftLastMention_', + LAST_SELECTED_MENTION_SUGGESTION: 'reportDraftLastMention_', REPORT_DRAFT_COMMENT_NUMBER_OF_LINES: 'reportDraftCommentNumberOfLines_', REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_', REPORT_USER_IS_TYPING: 'reportUserIsTyping_', @@ -465,7 +465,7 @@ type OnyxCollectionValuesMapping = { [ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS]: OnyxTypes.ReportActionsDrafts; [ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS]: OnyxTypes.ReportActionReactions; [ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT]: string; - [ONYXKEYS.COLLECTION.REPORT_DRAFT_LAST_MENTION]: string; + [ONYXKEYS.COLLECTION.LAST_SELECTED_MENTION_SUGGESTION]: string; [ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES]: number; [ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE]: boolean; [ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING]: OnyxTypes.ReportUserIsTyping; diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index 819e856d6930..8a1abd4ea305 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -1061,7 +1061,7 @@ function setReportWithDraft(reportID: string, hasDraft: boolean): Promise * This is used to determine if the mention suggestion list should be opened/remain opened. */ function saveReportDraftLastMention(reportID: string, comment: string) { - Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_LAST_MENTION}${reportID}`, comment); + Onyx.merge(`${ONYXKEYS.COLLECTION.LAST_SELECTED_MENTION_SUGGESTION}${reportID}`, comment); } /** Broadcasts whether or not a user is typing on a report over the report's private pusher channel. */ diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js index e2e288aff442..b1419a774de4 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js @@ -1,10 +1,10 @@ import PropTypes from 'prop-types'; -import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'; -import { withOnyx } from 'react-native-onyx'; +import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import * as Expensicons from '@components/Icon/Expensicons'; import MentionSuggestions from '@components/MentionSuggestions'; -import { usePersonalDetails } from '@components/OnyxProvider'; +import {usePersonalDetails} from '@components/OnyxProvider'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; @@ -35,7 +35,8 @@ const propTypes = { /** A ref to this component */ forwardedRef: PropTypes.shape({current: PropTypes.shape({})}), - reportDraftLastMentionCollection: PropTypes.object.isRequired, + // eslint-disable-next-line react/require-default-props + lastSelectedMentionSuggestion: PropTypes.string, ...SuggestionProps.implementationBaseProps, }; @@ -57,7 +58,7 @@ function SuggestionMention({ measureParentContainer, isComposerFocused, reportID, - reportDraftLastMentionCollection = {}, + lastSelectedMentionSuggestion = '', }) { const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const {translate, formatPhoneNumber} = useLocalize(); @@ -72,8 +73,6 @@ function SuggestionMention({ shouldExcludeTextAreaNodes: false, }); - const reportDraftLastMention = reportDraftLastMentionCollection[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_LAST_MENTION}${reportID}`] || ''; - // Used to decide whether to block the suggestions list from showing to prevent flickering const shouldBlockCalc = useRef(false); @@ -224,7 +223,7 @@ function SuggestionMention({ let suggestionWord; let prefix; - if (reportDraftLastMention && (lastWord === reportDraftLastMention || !lastWord && secondToLastWord === reportDraftLastMention)) { + if (lastSelectedMentionSuggestion && (lastWord === lastSelectedMentionSuggestion || (!lastWord && secondToLastWord === lastSelectedMentionSuggestion))) { resetSuggestions(); return; } @@ -265,11 +264,11 @@ function SuggestionMention({ })); setHighlightedMentionIndex(0); }, - [getMentionOptions, personalDetails, resetSuggestions, setHighlightedMentionIndex, value, isComposerFocused, reportDraftLastMention], + [getMentionOptions, personalDetails, resetSuggestions, setHighlightedMentionIndex, value, isComposerFocused, lastSelectedMentionSuggestion], ); useEffect(() => { - if (!value && reportDraftLastMention || !value.includes(reportDraftLastMention)) { + if ((!value && lastSelectedMentionSuggestion) || !value.includes(lastSelectedMentionSuggestion)) { Report.saveReportDraftLastMention(reportID, ''); } if (value.length < previousValue.length) { @@ -280,7 +279,7 @@ function SuggestionMention({ } calculateMentionSuggestion(selection.end); - }, [selection, value, previousValue, calculateMentionSuggestion, reportDraftLastMention]); + }, [selection, value, previousValue, calculateMentionSuggestion, lastSelectedMentionSuggestion]); const updateShouldShowSuggestionMenuToFalse = useCallback(() => { setSuggestionValues((prevState) => { @@ -353,7 +352,7 @@ const SuggestionMentionWithRef = React.forwardRef((props, ref) => ( SuggestionMentionWithRef.displayName = 'SuggestionMentionWithRef'; export default withOnyx({ - reportDraftLastMentionCollection: { - key: ONYXKEYS.COLLECTION.REPORT_DRAFT_LAST_MENTION, + lastSelectedMentionSuggestion: { + key: ({reportID}) => `${ONYXKEYS.COLLECTION.LAST_SELECTED_MENTION_SUGGESTION}${reportID}`, }, })(SuggestionMentionWithRef); From 224edd6af6c542bf51f8052505a63b03e8c9465b Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 27 Feb 2024 09:04:15 +0100 Subject: [PATCH 3/9] fix: run prettier --- src/libs/actions/Report.ts | 2 +- src/pages/home/report/ReportActionCompose/SuggestionMention.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index 8a1abd4ea305..b870b3465b07 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -2977,5 +2977,5 @@ export { updateReportName, resolveActionableMentionWhisper, updateRoomVisibility, - saveReportDraftLastMention + saveReportDraftLastMention, }; diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js index b1419a774de4..11b3dc5e4a03 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js @@ -16,7 +16,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import * as SuggestionProps from './suggestionProps'; - /** * Check if this piece of string looks like a mention * @param {String} str From a0b37c7e2a978ca993d780aa6bcf856f8e0d3c02 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 27 Feb 2024 09:37:01 +0100 Subject: [PATCH 4/9] fix: lint --- src/pages/home/report/ReportActionCompose/SuggestionMention.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js index 11b3dc5e4a03..370f0bb6ed8a 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js @@ -278,7 +278,7 @@ function SuggestionMention({ } calculateMentionSuggestion(selection.end); - }, [selection, value, previousValue, calculateMentionSuggestion, lastSelectedMentionSuggestion]); + }, [selection, value, previousValue, calculateMentionSuggestion, lastSelectedMentionSuggestion, reportID]); const updateShouldShowSuggestionMenuToFalse = useCallback(() => { setSuggestionValues((prevState) => { From 3077a8e6b7f9884588aae73c445b70b1f9fedfa0 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 27 Feb 2024 12:01:34 +0100 Subject: [PATCH 5/9] fix: minor fix --- src/pages/home/report/ReportActionCompose/SuggestionMention.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js index 370f0bb6ed8a..4ba3c2680b9f 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js @@ -34,6 +34,8 @@ const propTypes = { /** A ref to this component */ forwardedRef: PropTypes.shape({current: PropTypes.shape({})}), + /* Onyx Props */ + /** Last selected mention from the mention suggestion list */ // eslint-disable-next-line react/require-default-props lastSelectedMentionSuggestion: PropTypes.string, From a677046843ee7578a17fe63069464597e07a783d Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 27 Feb 2024 14:32:38 +0100 Subject: [PATCH 6/9] fix: add missing proptype --- src/pages/home/report/ReportActionCompose/SuggestionMention.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js index 4ba3c2680b9f..e067fbaa7c0b 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js @@ -39,6 +39,9 @@ const propTypes = { // eslint-disable-next-line react/require-default-props lastSelectedMentionSuggestion: PropTypes.string, + /** The reportID of the report */ + reportID: PropTypes.string.isRequired, + ...SuggestionProps.implementationBaseProps, }; From 190a284bd831e60e66c4896c3de854213acaf299 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 1 Mar 2024 12:46:04 +0100 Subject: [PATCH 7/9] fix: restore functionality after resolving conflicts --- src/ONYXKEYS.ts | 2 +- .../ReportActionCompose/SuggestionEmoji.tsx | 2 +- .../ReportActionCompose/SuggestionMention.tsx | 47 ++++++++++++------- .../ReportActionCompose/Suggestions.tsx | 5 ++ 4 files changed, 37 insertions(+), 19 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 6b8fc08a8cfc..3f4a977b0629 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -298,7 +298,7 @@ const ONYXKEYS = { REPORT_ACTIONS_DRAFTS: 'reportActionsDrafts_', REPORT_ACTIONS_REACTIONS: 'reportActionsReactions_', REPORT_DRAFT_COMMENT: 'reportDraftComment_', - LAST_SELECTED_MENTION_SUGGESTION: 'reportDraftLastMention_', + LAST_SELECTED_MENTION_SUGGESTION: 'lastSelectedMentionSuggestion_', REPORT_DRAFT_COMMENT_NUMBER_OF_LINES: 'reportDraftCommentNumberOfLines_', REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_', REPORT_USER_IS_TYPING: 'reportUserIsTyping_', diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx index 0ae45d2d705d..ba2a8eccde21 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx @@ -25,7 +25,7 @@ type SuggestionEmojiOnyxProps = { preferredSkinTone: number; }; -type SuggestionEmojiProps = SuggestionProps & +type SuggestionEmojiProps = Omit & SuggestionEmojiOnyxProps & { /** Function to clear the input */ resetKeyboardInput?: () => void; diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 419652ea230b..4ff6f83e0e3e 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -1,7 +1,9 @@ import Str from 'expensify-common/lib/str'; import lodashSortBy from 'lodash/sortBy'; -import type {ForwardedRef} from 'react'; +import type {ForwardedRef, RefAttributes} from 'react'; import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import type {OnyxEntry} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import * as Expensicons from '@components/Icon/Expensicons'; import type {Mention} from '@components/MentionSuggestions'; import MentionSuggestions from '@components/MentionSuggestions'; @@ -10,16 +12,16 @@ import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; -import * as LoginUtils from '@libs/LoginUtils'; import * as Report from '@libs/actions/Report'; +import * as LoginUtils from '@libs/LoginUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as SuggestionsUtils from '@libs/SuggestionUtils'; import * as UserUtils from '@libs/UserUtils'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; import type {PersonalDetailsList} from '@src/types/onyx'; import type {SuggestionsRef} from './ReportActionCompose'; import type {SuggestionProps} from './Suggestions'; -import ONYXKEYS from '@src/ONYXKEYS'; type SuggestionValues = { suggestedMentions: Mention[]; @@ -40,8 +42,15 @@ const defaultSuggestionsValues: SuggestionValues = { mentionPrefix: '', }; +type SuggestionMentionOnyxProps = { + /** The last selected mention suggestion */ + lastSelectedMentionSuggestion: OnyxEntry; +}; + +type SuggestionMentionProps = SuggestionProps & SuggestionMentionOnyxProps; + function SuggestionMention( - {value, selection, setSelection, updateComment, isAutoSuggestionPickerLarge, measureParentContainer, isComposerFocused}: SuggestionProps, + {value, selection, setSelection, updateComment, isAutoSuggestionPickerLarge, measureParentContainer, isComposerFocused, lastSelectedMentionSuggestion, reportID}: SuggestionMentionProps, ref: ForwardedRef, ) { const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT; @@ -99,10 +108,9 @@ function SuggestionMention( ...prevState, suggestedMentions: [], })); - // Report.saveReportDraftLastMention(reportID, mentionCode); + Report.saveReportDraftLastMention(reportID, mentionCode); }, - [value, suggestionValues.atSignIndex, suggestionValues.suggestedMentions, suggestionValues.mentionPrefix, updateComment, setSelection, formatLoginPrivateDomain], - // [value, suggestionValues.atSignIndex, suggestionValues.suggestedMentions, suggestionValues.mentionPrefix, updateComment, setSelection, reportID], + [value, suggestionValues.atSignIndex, suggestionValues.suggestedMentions, suggestionValues.mentionPrefix.length, formatLoginPrivateDomain, updateComment, setSelection, reportID], ); /** @@ -226,10 +234,10 @@ function SuggestionMention( let suggestionWord = ''; let prefix: string; - // if (lastSelectedMentionSuggestion && (lastWord === lastSelectedMentionSuggestion || (!lastWord && secondToLastWord === lastSelectedMentionSuggestion))) { - // resetSuggestions(); - // return; - // } + if (lastSelectedMentionSuggestion && (lastWord === lastSelectedMentionSuggestion || (!lastWord && secondToLastWord === lastSelectedMentionSuggestion))) { + resetSuggestions(); + return; + } // Detect if the last two words contain a mention (two words are needed to detect a mention with a space in it) if (lastWord.startsWith('@')) { @@ -268,13 +276,14 @@ function SuggestionMention( setHighlightedMentionIndex(0); }, // [getMentionOptions, personalDetails, resetSuggestions, setHighlightedMentionIndex, value, isComposerFocused, lastSelectedMentionSuggestion], - [getMentionOptions, personalDetails, resetSuggestions, setHighlightedMentionIndex, value, isComposerFocused], + [isComposerFocused, value, lastSelectedMentionSuggestion, setHighlightedMentionIndex, resetSuggestions, getMentionOptions, personalDetails], ); useEffect(() => { - // if ((!value && lastSelectedMentionSuggestion) || !value.includes(lastSelectedMentionSuggestion)) { - // Report.saveReportDraftLastMention(reportID, ''); - // } + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + if ((!value && lastSelectedMentionSuggestion) || (lastSelectedMentionSuggestion && !value.includes(lastSelectedMentionSuggestion))) { + Report.saveReportDraftLastMention(reportID, ''); + } if (value.length < previousValue.length) { // A workaround to not show the suggestions list when the user deletes a character before the mention. // It is caused by a buggy behavior of the TextInput on iOS. Should be fixed after migration to Fabric. @@ -283,7 +292,7 @@ function SuggestionMention( } calculateMentionSuggestion(selection.end); - }, [selection, value, previousValue, calculateMentionSuggestion]); + }, [selection, value, previousValue, calculateMentionSuggestion, lastSelectedMentionSuggestion, reportID]); const updateShouldShowSuggestionMenuToFalse = useCallback(() => { setSuggestionValues((prevState) => { @@ -333,4 +342,8 @@ function SuggestionMention( SuggestionMention.displayName = 'SuggestionMention'; -export default forwardRef(SuggestionMention); +export default withOnyx, SuggestionMentionOnyxProps>({ + lastSelectedMentionSuggestion: { + key: ({reportID}) => `${ONYXKEYS.COLLECTION.LAST_SELECTED_MENTION_SUGGESTION}${reportID}`, + }, +})(forwardRef(SuggestionMention)); diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.tsx b/src/pages/home/report/ReportActionCompose/Suggestions.tsx index 61026a792919..97f5d82ef6c5 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/Suggestions.tsx @@ -46,6 +46,9 @@ type SuggestionProps = { /** The height of the composer */ composerHeight?: number; + + /** The report ID */ + reportID: string; }; /** @@ -66,6 +69,7 @@ function Suggestions( measureParentContainer, isAutoSuggestionPickerLarge = true, isComposerFocused, + reportID }: SuggestionProps, ref: ForwardedRef, ) { @@ -167,6 +171,7 @@ function Suggestions( /> From 2681996a278806a270fcf8fd40adf52e791b28f9 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 1 Mar 2024 12:48:01 +0100 Subject: [PATCH 8/9] fix: prettier --- src/pages/home/report/ReportActionCompose/Suggestions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.tsx b/src/pages/home/report/ReportActionCompose/Suggestions.tsx index 97f5d82ef6c5..89f755b49f1f 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/Suggestions.tsx @@ -69,7 +69,7 @@ function Suggestions( measureParentContainer, isAutoSuggestionPickerLarge = true, isComposerFocused, - reportID + reportID, }: SuggestionProps, ref: ForwardedRef, ) { From 78b7a48a61d4ffa4f9697ef99dbfe99771f3d59a Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 13 Mar 2024 09:11:40 +0100 Subject: [PATCH 9/9] fix: minor fix --- .../home/report/ReportActionCompose/SuggestionMention.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 4ff6f83e0e3e..bd5434bf8171 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -275,8 +275,7 @@ function SuggestionMention( })); setHighlightedMentionIndex(0); }, - // [getMentionOptions, personalDetails, resetSuggestions, setHighlightedMentionIndex, value, isComposerFocused, lastSelectedMentionSuggestion], - [isComposerFocused, value, lastSelectedMentionSuggestion, setHighlightedMentionIndex, resetSuggestions, getMentionOptions, personalDetails], + [isComposerFocused, value, lastSelectedMentionSuggestion, reportID, setHighlightedMentionIndex, resetSuggestions, getMentionOptions, personalDetails], ); useEffect(() => {