From 5cbd46ebd4a8193125d1afbd210b603c67edde64 Mon Sep 17 00:00:00 2001 From: Mikhail Karkachov Date: Tue, 13 Jun 2023 22:40:21 +0200 Subject: [PATCH 01/10] 1. Updated componentDidMount stage of ReportActionCompose component. 2. Updated OptionRowLHN with validation for draft message in localstorage --- src/components/LHNOptionsList/OptionRowLHN.js | 21 ++++++++++++++++++- src/pages/home/report/ReportActionCompose.js | 4 ++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index d5759c3f3b1c..437fd6d2cf28 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -2,6 +2,7 @@ import _ from 'underscore'; import React from 'react'; import PropTypes from 'prop-types'; import {View, StyleSheet} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; import * as optionRowStyles from '../../styles/optionRowStyles'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -23,12 +24,18 @@ import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteract import * as ReportActionContextMenu from '../../pages/home/report/ContextMenu/ReportActionContextMenu'; import * as ContextMenuActions from '../../pages/home/report/ContextMenu/ContextMenuActions'; import * as OptionsListUtils from '../../libs/OptionsListUtils'; +import compose from '../../libs/compose'; +import ONYXKEYS from '../../ONYXKEYS'; +import * as Report from '../../libs/actions/Report'; const propTypes = { /** Style for hovered state */ // eslint-disable-next-line react/forbid-prop-types hoverStyle: PropTypes.object, + /** The comment left by the user */ + comment: PropTypes.string, + /** The ID of the report that the option is for */ reportID: PropTypes.string.isRequired, @@ -52,6 +59,7 @@ const defaultProps = { onSelectRow: () => {}, isFocused: false, style: null, + comment: '', }; const OptionRowLHN = (props) => { @@ -85,6 +93,10 @@ const OptionRowLHN = (props) => { const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR; const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner)); + if (!optionItem.hasDraftComment && props.comment.length > 0 && !props.isFocused) { + Report.setReportWithDraft(props.reportID, true); + } + /** * Show the ReportActionContextMenu modal popover. * @@ -250,4 +262,11 @@ OptionRowLHN.propTypes = propTypes; OptionRowLHN.defaultProps = defaultProps; OptionRowLHN.displayName = 'OptionRowLHN'; -export default withLocalize(OptionRowLHN); +export default compose( + withLocalize, + withOnyx({ + comment: { + key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, + }, + }), +)(OptionRowLHN); diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index f1f5dab5bf82..9bd4efb75a4d 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -245,6 +245,10 @@ class ReportActionCompose extends React.Component { showPopoverMenu: this.showPopoverMenu, }); } + + if (this.props.comment.length !== 0) { + Report.setReportWithDraft(this.props.reportID, true); + } } componentDidUpdate(prevProps) { From de33bbc74c4e0b6b6a7032361b246bcc3ac7ae74 Mon Sep 17 00:00:00 2001 From: Mikhail Karkachov Date: Thu, 15 Jun 2023 17:49:42 +0200 Subject: [PATCH 02/10] 1. Updated OptionRowLHN component with validation for stored draft comment 2. Added ReportCommentDraftsProvider to OnyxProvider 3. Reverted previous changes in ReportActionCompose --- ios/Podfile.lock | 6 ++-- src/components/LHNOptionsList/OptionRowLHN.js | 29 +++++++++++-------- src/components/OnyxProvider.js | 7 +++-- src/pages/home/report/ReportActionCompose.js | 4 --- 4 files changed, 25 insertions(+), 21 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 6cb4235c58c8..ae913bda8338 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1019,7 +1019,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: Airship: c70eed50e429f97f5adb285423c7291fb7a032ae AirshipFrameworkProxy: 7bc4130c668c6c98e2d4c60fe4c9eb61a999be99 - boost: a7c83b31436843459a1961bfd74b96033dc77234 + boost: 57d2868c099736d80fcd648bf211b4431e51a558 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 FBLazyVector: ff54429f0110d3c722630a98096ba689c39f6d5f @@ -1062,7 +1062,7 @@ SPEC CHECKSUMS: Permission-LocationWhenInUse: 3ba99e45c852763f730eabecec2870c2382b7bd4 Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2 PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef - RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda + RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1 RCTRequired: e9e7b8b45aa9bedb2fdad71740adf07a7265b9be RCTTypeSafety: 9ae0e9206625e995f0df4d5b9ddc94411929fb30 React: a71c8e1380f07e01de721ccd52bcf9c03e81867d @@ -1135,4 +1135,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 4ed1c7b099741c82e2b0411b95f6468e72be6c76 -COCOAPODS: 1.12.0 +COCOAPODS: 1.12.1 diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 437fd6d2cf28..dab05ca06c24 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -1,8 +1,8 @@ import _ from 'underscore'; -import React from 'react'; +import React, {useEffect} from 'react'; import PropTypes from 'prop-types'; import {View, StyleSheet} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import lodashGet from 'lodash/get'; import * as optionRowStyles from '../../styles/optionRowStyles'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -13,6 +13,7 @@ import Hoverable from '../Hoverable'; import DisplayNames from '../DisplayNames'; import colors from '../../styles/colors'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; +import {withReportCommentDrafts} from '../OnyxProvider'; import Text from '../Text'; import SubscriptAvatar from '../SubscriptAvatar'; import CONST from '../../CONST'; @@ -62,12 +63,18 @@ const defaultProps = { comment: '', }; +// function OptionRowLHN(props) { const OptionRowLHN = (props) => { const optionItem = SidebarUtils.getOptionData(props.reportID); - if (!optionItem) { - return null; - } + useEffect(() => { + if (!optionItem) { + return null; + } + if (!optionItem.hasDraftComment && props.comment.length > 0) { + Report.setReportWithDraft(props.reportID, true); + } + }, []); let popoverAnchor = null; const textStyle = props.isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText; @@ -93,10 +100,6 @@ const OptionRowLHN = (props) => { const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR; const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner)); - if (!optionItem.hasDraftComment && props.comment.length > 0 && !props.isFocused) { - Report.setReportWithDraft(props.reportID, true); - } - /** * Show the ReportActionContextMenu modal popover. * @@ -264,9 +267,11 @@ OptionRowLHN.displayName = 'OptionRowLHN'; export default compose( withLocalize, - withOnyx({ - comment: { - key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, + withReportCommentDrafts({ + propName: 'comment', + transformValue: (drafts, props) => { + const draftKey = `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${props.reportID}`; + return lodashGet(drafts, draftKey, ''); }, }), )(OptionRowLHN); diff --git a/src/components/OnyxProvider.js b/src/components/OnyxProvider.js index 6cee7e5b7a62..b452ed7f3007 100644 --- a/src/components/OnyxProvider.js +++ b/src/components/OnyxProvider.js @@ -12,6 +12,7 @@ const [withCurrentDate, CurrentDateProvider] = createOnyxContext(ONYXKEYS.CURREN const [withReportActionsDrafts, ReportActionsDraftsProvider] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS); const [withBlockedFromConcierge, BlockedFromConciergeProvider] = createOnyxContext(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE); const [withBetas, BetasProvider] = createOnyxContext(ONYXKEYS.BETAS); +const [withReportCommentDrafts, ReportCommentDraftsProvider] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT); const propTypes = { /** Rendered child component */ @@ -19,7 +20,9 @@ const propTypes = { }; const OnyxProvider = (props) => ( - + {props.children} ); @@ -29,4 +32,4 @@ OnyxProvider.propTypes = propTypes; export default OnyxProvider; -export {withNetwork, withPersonalDetails, withReportActionsDrafts, withCurrentDate, withBlockedFromConcierge, withBetas, NetworkContext}; +export {withNetwork, withPersonalDetails, withReportActionsDrafts, withCurrentDate, withBlockedFromConcierge, withBetas, NetworkContext, withReportCommentDrafts}; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 17d2964025fe..ec031fe02e32 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -245,10 +245,6 @@ class ReportActionCompose extends React.Component { showPopoverMenu: this.showPopoverMenu, }); } - - if (this.props.comment.length !== 0) { - Report.setReportWithDraft(this.props.reportID, true); - } } componentDidUpdate(prevProps) { From ba582554e791c39380a903b2dd2030e22bcc444e Mon Sep 17 00:00:00 2001 From: Mikhail Karkachov Date: Thu, 15 Jun 2023 19:35:30 +0200 Subject: [PATCH 03/10] Fixed linter warnings --- src/components/LHNOptionsList/OptionRowLHN.js | 17 ++++++++++------- src/pages/home/report/ReportActionCompose.js | 19 ++++++++++++------- 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index dab05ca06c24..9cfe87ddf420 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useEffect} from 'react'; +import React, {useEffect, useCallback} from 'react'; import PropTypes from 'prop-types'; import {View, StyleSheet} from 'react-native'; import lodashGet from 'lodash/get'; @@ -63,18 +63,21 @@ const defaultProps = { comment: '', }; -// function OptionRowLHN(props) { -const OptionRowLHN = (props) => { +function OptionRowLHN(props) { const optionItem = SidebarUtils.getOptionData(props.reportID); - useEffect(() => { + const runUseEffectOnlyOnce = useCallback(() => { if (!optionItem) { return null; } - if (!optionItem.hasDraftComment && props.comment.length > 0) { + if (!optionItem.hasDraftComment && props.comment && props.comment.length > 0 && !props.isFocused) { Report.setReportWithDraft(props.reportID, true); } - }, []); + }, [optionItem, props.comment, props.isFocused, props.reportID]); + + useEffect(() => { + runUseEffectOnlyOnce(); + }, [runUseEffectOnlyOnce]); let popoverAnchor = null; const textStyle = props.isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText; @@ -259,7 +262,7 @@ const OptionRowLHN = (props) => { ); -}; +} OptionRowLHN.propTypes = propTypes; OptionRowLHN.defaultProps = defaultProps; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 344b14289c0d..17d2964025fe 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -29,7 +29,7 @@ import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFo import participantPropTypes from '../../../components/participantPropTypes'; import ParticipantLocalTime from './ParticipantLocalTime'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails'; -import {withNetwork} from '../../../components/OnyxProvider'; +import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider'; import * as User from '../../../libs/actions/User'; import Tooltip from '../../../components/Tooltip'; import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton'; @@ -245,6 +245,10 @@ class ReportActionCompose extends React.Component { showPopoverMenu: this.showPopoverMenu, }); } + + if (this.props.comment.length !== 0) { + Report.setReportWithDraft(this.props.reportID, true); + } } componentDidUpdate(prevProps) { @@ -415,7 +419,7 @@ class ReportActionCompose extends React.Component { // We only prevent the task option from showing if it's a DM and the other user is an Expensify default email if ( !Permissions.canUseTasks(this.props.betas) || - (lodashGet(this.props.report, 'participantAccountIDs', []).length === 1 && _.some(reportParticipants, (accountID) => _.contains(CONST.EXPENSIFY_ACCOUNT_IDS, accountID))) + (lodashGet(this.props.report, 'participants', []).length === 1 && _.some(reportParticipants, (email) => _.contains(CONST.EXPENSIFY_EMAILS, email))) ) { return []; } @@ -893,11 +897,11 @@ class ReportActionCompose extends React.Component { } render() { - const reportParticipants = _.without(lodashGet(this.props.report, 'participantAccountIDs', []), this.props.currentUserPersonalDetails.accountID); - const participantsWithoutExpensifyAccountIDs = _.difference(reportParticipants, CONST.EXPENSIFY_ACCOUNT_IDS); - const reportRecipient = this.props.personalDetails[participantsWithoutExpensifyAccountIDs[0]]; + const reportParticipants = _.without(lodashGet(this.props.report, 'participants', []), this.props.currentUserPersonalDetails.login); + const participantsWithoutExpensifyEmails = _.difference(reportParticipants, CONST.EXPENSIFY_EMAILS); + const reportRecipient = this.props.personalDetails[participantsWithoutExpensifyEmails[0]]; const shouldShowReportRecipientLocalTime = - ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report, this.props.currentUserPersonalDetails.accountID) && !this.props.isComposerFullSize; + ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report, this.props.currentUserPersonalDetails.login) && !this.props.isComposerFullSize; // Prevents focusing and showing the keyboard while the drawer is covering the chat. const isBlockedFromConcierge = ReportUtils.chatIncludesConcierge(this.props.report) && User.isBlockedFromConcierge(this.props.blockedFromConcierge); @@ -1220,6 +1224,7 @@ export default compose( withNavigationFocus, withLocalize, withNetwork(), + withPersonalDetails(), withCurrentUserPersonalDetails, withKeyboardState, withOnyx({ @@ -1243,7 +1248,7 @@ export default compose( selector: EmojiUtils.getPreferredSkinToneIndex, }, personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, + key: ONYXKEYS.PERSONAL_DETAILS, }, shouldShowComposeInput: { key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, From a5907531c5993af348a05e4ab3b08f432cb29dc8 Mon Sep 17 00:00:00 2001 From: Mikhail Karkachov Date: Thu, 15 Jun 2023 19:49:09 +0200 Subject: [PATCH 04/10] Recovered updates in ReportActionCompose --- src/pages/home/report/ReportActionCompose.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 17d2964025fe..2f6f91a9a247 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -29,7 +29,7 @@ import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFo import participantPropTypes from '../../../components/participantPropTypes'; import ParticipantLocalTime from './ParticipantLocalTime'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails'; -import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider'; +import {withNetwork} from '../../../components/OnyxProvider'; import * as User from '../../../libs/actions/User'; import Tooltip from '../../../components/Tooltip'; import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton'; @@ -419,7 +419,7 @@ class ReportActionCompose extends React.Component { // We only prevent the task option from showing if it's a DM and the other user is an Expensify default email if ( !Permissions.canUseTasks(this.props.betas) || - (lodashGet(this.props.report, 'participants', []).length === 1 && _.some(reportParticipants, (email) => _.contains(CONST.EXPENSIFY_EMAILS, email))) + (lodashGet(this.props.report, 'participantAccountIDs', []).length === 1 && _.some(reportParticipants, (accountID) => _.contains(CONST.EXPENSIFY_ACCOUNT_IDS, accountID))) ) { return []; } @@ -897,11 +897,11 @@ class ReportActionCompose extends React.Component { } render() { - const reportParticipants = _.without(lodashGet(this.props.report, 'participants', []), this.props.currentUserPersonalDetails.login); - const participantsWithoutExpensifyEmails = _.difference(reportParticipants, CONST.EXPENSIFY_EMAILS); - const reportRecipient = this.props.personalDetails[participantsWithoutExpensifyEmails[0]]; + const reportParticipants = _.without(lodashGet(this.props.report, 'participantAccountIDs', []), this.props.currentUserPersonalDetails.accountID); + const participantsWithoutExpensifyAccountIDs = _.difference(reportParticipants, CONST.EXPENSIFY_ACCOUNT_IDS); + const reportRecipient = this.props.personalDetails[participantsWithoutExpensifyAccountIDs[0]]; const shouldShowReportRecipientLocalTime = - ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report, this.props.currentUserPersonalDetails.login) && !this.props.isComposerFullSize; + ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report, this.props.currentUserPersonalDetails.accountID) && !this.props.isComposerFullSize; // Prevents focusing and showing the keyboard while the drawer is covering the chat. const isBlockedFromConcierge = ReportUtils.chatIncludesConcierge(this.props.report) && User.isBlockedFromConcierge(this.props.blockedFromConcierge); @@ -1224,7 +1224,6 @@ export default compose( withNavigationFocus, withLocalize, withNetwork(), - withPersonalDetails(), withCurrentUserPersonalDetails, withKeyboardState, withOnyx({ @@ -1248,7 +1247,7 @@ export default compose( selector: EmojiUtils.getPreferredSkinToneIndex, }, personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS, + key: ONYXKEYS.PERSONAL_DETAILS_LIST, }, shouldShowComposeInput: { key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, From 7d2a1f7ba3af73442ad0cf3b2de0fa0fcf2540ce Mon Sep 17 00:00:00 2001 From: Mikhail Karkachov Date: Thu, 15 Jun 2023 19:51:30 +0200 Subject: [PATCH 05/10] Fixed linter issue in OnyxProvider --- src/components/OnyxProvider.js | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components/OnyxProvider.js b/src/components/OnyxProvider.js index 71a6da9b095c..dfe96684ae3c 100644 --- a/src/components/OnyxProvider.js +++ b/src/components/OnyxProvider.js @@ -19,13 +19,23 @@ const propTypes = { children: PropTypes.node.isRequired, }; -const OnyxProvider = (props) => ( - - {props.children} - -); +function OnyxProvider(props) { + return ( + + {props.children} + + ); +} OnyxProvider.displayName = 'OnyxProvider'; OnyxProvider.propTypes = propTypes; From 68167d9599303b8775861101eb726d656142ffc8 Mon Sep 17 00:00:00 2001 From: Mikhail Karkachov Date: Mon, 19 Jun 2023 02:11:11 +0200 Subject: [PATCH 06/10] Reverted changes in Podfile.lock, updated useEffect in OptionRowLHN --- ios/Podfile.lock | 6 +++--- src/components/LHNOptionsList/OptionRowLHN.js | 9 +++++---- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 41f6eadb9bd3..048eeca5f76f 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1024,7 +1024,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: Airship: c70eed50e429f97f5adb285423c7291fb7a032ae AirshipFrameworkProxy: 7bc4130c668c6c98e2d4c60fe4c9eb61a999be99 - boost: 57d2868c099736d80fcd648bf211b4431e51a558 + boost: a7c83b31436843459a1961bfd74b96033dc77234 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 FBLazyVector: ff54429f0110d3c722630a98096ba689c39f6d5f @@ -1067,7 +1067,7 @@ SPEC CHECKSUMS: Permission-LocationWhenInUse: 3ba99e45c852763f730eabecec2870c2382b7bd4 Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2 PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef - RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1 + RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda RCTRequired: e9e7b8b45aa9bedb2fdad71740adf07a7265b9be RCTTypeSafety: 9ae0e9206625e995f0df4d5b9ddc94411929fb30 React: a71c8e1380f07e01de721ccd52bcf9c03e81867d @@ -1141,4 +1141,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 4ed1c7b099741c82e2b0411b95f6468e72be6c76 -COCOAPODS: 1.12.1 +COCOAPODS: 1.12.0 diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index e4b0903b9e2a..ccdf69dedc5d 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -67,17 +67,18 @@ function OptionRowLHN(props) { const optionItem = SidebarUtils.getOptionData(props.reportID); const runUseEffectOnlyOnce = useCallback(() => { - if (!optionItem) { - return null; - } if (!optionItem.hasDraftComment && props.comment && props.comment.length > 0 && !props.isFocused) { Report.setReportWithDraft(props.reportID, true); } + return null; }, [optionItem, props.comment, props.isFocused, props.reportID]); useEffect(() => { + if (!optionItem) { + return null; + } runUseEffectOnlyOnce(); - }, [runUseEffectOnlyOnce]); + }, [runUseEffectOnlyOnce, optionItem]); let popoverAnchor = null; const textStyle = props.isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText; From 135b8a03ee1a9f903f3899a06ce5530508c3611e Mon Sep 17 00:00:00 2001 From: Mikhail Karkachov Date: Wed, 21 Jun 2023 17:21:13 +0200 Subject: [PATCH 07/10] Refactored useEffect in OptionRowLHN --- src/components/LHNOptionsList/OptionRowLHN.js | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index ccdf69dedc5d..accf0b2b79b1 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useEffect, useCallback} from 'react'; +import React, {useEffect} from 'react'; import PropTypes from 'prop-types'; import {View, StyleSheet} from 'react-native'; import lodashGet from 'lodash/get'; @@ -66,19 +66,20 @@ const defaultProps = { function OptionRowLHN(props) { const optionItem = SidebarUtils.getOptionData(props.reportID); - const runUseEffectOnlyOnce = useCallback(() => { - if (!optionItem.hasDraftComment && props.comment && props.comment.length > 0 && !props.isFocused) { + useEffect(() => { + const updateReportDraft = () => { + if (!optionItem || optionItem.hasDraftComment || !props.comment || props.comment.length <= 0 || props.isFocused) { + return; + } Report.setReportWithDraft(props.reportID, true); - } - return null; + }; + + updateReportDraft(); }, [optionItem, props.comment, props.isFocused, props.reportID]); - useEffect(() => { - if (!optionItem) { - return null; - } - runUseEffectOnlyOnce(); - }, [runUseEffectOnlyOnce, optionItem]); + if (!optionItem) { + return null; + } let popoverAnchor = null; const textStyle = props.isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText; From 10d42834b60c2e42b3d5d855151ca0c4f65f9ebf Mon Sep 17 00:00:00 2001 From: Mikhail Karkachov Date: Wed, 21 Jun 2023 21:17:56 +0200 Subject: [PATCH 08/10] Add isMounted state to OptionRowLHN and updated useEffect logic --- src/components/LHNOptionsList/OptionRowLHN.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index accf0b2b79b1..24179a03a59e 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useEffect} from 'react'; +import React, {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; import {View, StyleSheet} from 'react-native'; import lodashGet from 'lodash/get'; @@ -66,16 +66,16 @@ const defaultProps = { function OptionRowLHN(props) { const optionItem = SidebarUtils.getOptionData(props.reportID); + const [isMounted, setIsMounted] = useState(false); + useEffect(() => { - const updateReportDraft = () => { - if (!optionItem || optionItem.hasDraftComment || !props.comment || props.comment.length <= 0 || props.isFocused) { - return; - } - Report.setReportWithDraft(props.reportID, true); - }; + if (isMounted || !optionItem) return; + setIsMounted(true); - updateReportDraft(); - }, [optionItem, props.comment, props.isFocused, props.reportID]); + if (!optionItem.hasDraftComment && props.comment && props.comment.length > 0 && !props.isFocused) { + Report.setReportWithDraft(props.reportID, true); + } + }, [optionItem, props.comment, props.isFocused, props.reportID, isMounted]); if (!optionItem) { return null; From 77e1f43a8990b42db58906070142a70ba17c6b39 Mon Sep 17 00:00:00 2001 From: Mikhail Karkachov Date: Thu, 22 Jun 2023 18:32:00 +0200 Subject: [PATCH 09/10] Removed isMounted state --- src/components/LHNOptionsList/OptionRowLHN.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 24179a03a59e..02f89c6d8997 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useEffect, useState} from 'react'; +import React, {useEffect} from 'react'; import PropTypes from 'prop-types'; import {View, StyleSheet} from 'react-native'; import lodashGet from 'lodash/get'; @@ -66,16 +66,13 @@ const defaultProps = { function OptionRowLHN(props) { const optionItem = SidebarUtils.getOptionData(props.reportID); - const [isMounted, setIsMounted] = useState(false); - useEffect(() => { - if (isMounted || !optionItem) return; - setIsMounted(true); - + if (!optionItem) return; if (!optionItem.hasDraftComment && props.comment && props.comment.length > 0 && !props.isFocused) { Report.setReportWithDraft(props.reportID, true); } - }, [optionItem, props.comment, props.isFocused, props.reportID, isMounted]); + // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again + }, []); if (!optionItem) { return null; From a9dcf2dc6d80af25761b8ef1b1f90ffdf83a78eb Mon Sep 17 00:00:00 2001 From: Mikhail Karkachov Date: Thu, 22 Jun 2023 19:48:40 +0200 Subject: [PATCH 10/10] Refactored useEffect in OptionRowLHN --- src/components/LHNOptionsList/OptionRowLHN.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 02f89c6d8997..797b5ae469de 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -67,11 +67,11 @@ function OptionRowLHN(props) { const optionItem = SidebarUtils.getOptionData(props.reportID); useEffect(() => { - if (!optionItem) return; - if (!optionItem.hasDraftComment && props.comment && props.comment.length > 0 && !props.isFocused) { - Report.setReportWithDraft(props.reportID, true); + if (!optionItem || optionItem.hasDraftComment || !props.comment || props.comment.length <= 0 || props.isFocused) { + return; } - // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again + Report.setReportWithDraft(props.reportID, true); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); if (!optionItem) {