From b9d803d63ac1d24a764a44274fcc5d55a1972755 Mon Sep 17 00:00:00 2001 From: Carlos Dario Almonte Date: Wed, 13 Sep 2023 17:19:01 -0400 Subject: [PATCH 1/5] fix: left hand navigation row opens modal in wrong screen --- src/components/LHNOptionsList/OptionRowLHN.js | 18 +++++++++++++++++- .../LHNOptionsList/OptionRowLHNData.js | 3 +++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 3cfd7c4c4138..fd10d02f796c 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -1,8 +1,9 @@ import _ from 'underscore'; -import React, {useState, useRef} from 'react'; +import React, {useState, useRef, useCallback} from 'react'; import PropTypes from 'prop-types'; import {View, StyleSheet} from 'react-native'; import lodashGet from 'lodash/get'; +import {useFocusEffect} from '@react-navigation/native'; import * as optionRowStyles from '../../styles/optionRowStyles'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -65,6 +66,7 @@ const defaultProps = { function OptionRowLHN(props) { const popoverAnchor = useRef(null); + const isFocusedRef = useRef(true); const {translate} = useLocalize(); @@ -104,12 +106,26 @@ function OptionRowLHN(props) { const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || optionItem.isWaitingForTaskCompleteFromAssignee || ReportUtils.isWaitingForIOUActionFromCurrentUser(optionItem)); + useFocusEffect( + useCallback(() => { + isFocusedRef.current = true; + return () => { + if (!props.isSmallScreenWidth) { + return; + } + isFocusedRef.current = false; + }; + }, []), + ); /** * Show the ReportActionContextMenu modal popover. * * @param {Object} [event] - A press event. */ const showPopover = (event) => { + if (!isFocusedRef.current) { + return; + } setIsContextMenuActive(true); ReportActionContextMenu.showContextMenu( ContextMenuActions.CONTEXT_MENU_TYPES.REPORT, diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 87358f05b9c9..c0fbbc51214d 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -18,6 +18,7 @@ import * as TransactionUtils from '../../libs/TransactionUtils'; import participantPropTypes from '../participantPropTypes'; import CONST from '../../CONST'; import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; const propTypes = { /** If true will disable ever setting the OptionRowLHN to focused */ @@ -53,6 +54,7 @@ const propTypes = { }), ...withCurrentReportIDPropTypes, + ...windowDimensionsPropTypes, ...basePropTypes, }; @@ -218,5 +220,6 @@ export default React.memo( `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportActions, [fullReport.parentReportActionID, 'originalMessage', 'IOUTransactionID'], '')}`, }, }), + withWindowDimensions, )(OptionRowLHNData), ); From 341ef3218ddc93d094b1aaf8d41bfb7d7a4020b2 Mon Sep 17 00:00:00 2001 From: Carlos Dario Almonte Date: Wed, 20 Sep 2023 16:53:15 -0400 Subject: [PATCH 2/5] test: add useFocusEffect to navigation mock --- tests/utils/LHNTestUtils.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/utils/LHNTestUtils.js b/tests/utils/LHNTestUtils.js index 7cb69b23a578..92b8662da5a6 100644 --- a/tests/utils/LHNTestUtils.js +++ b/tests/utils/LHNTestUtils.js @@ -15,6 +15,7 @@ jest.mock('@react-navigation/native', () => { const actualNav = jest.requireActual('@react-navigation/native'); return { ...actualNav, + useFocusEffect: jest.fn(), useIsFocused: () => ({ navigate: mockedNavigate, }), From a00e349672f908081ea5f4fbc68af1207b455320 Mon Sep 17 00:00:00 2001 From: Carlos Dario Almonte Date: Thu, 21 Sep 2023 09:42:17 -0400 Subject: [PATCH 3/5] refactor: use hook instead of HOC for useWindowDimensions --- src/components/LHNOptionsList/OptionRowLHN.js | 4 +++- src/components/LHNOptionsList/OptionRowLHNData.js | 3 --- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index fd10d02f796c..f41e56ca3760 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -26,6 +26,7 @@ import * as ReportUtils from '../../libs/ReportUtils'; import useLocalize from '../../hooks/useLocalize'; import Permissions from '../../libs/Permissions'; import Tooltip from '../Tooltip'; +import useWindowDimensions from '../../hooks/useWindowDimensions'; const propTypes = { /** Style for hovered state */ @@ -67,6 +68,7 @@ const defaultProps = { function OptionRowLHN(props) { const popoverAnchor = useRef(null); const isFocusedRef = useRef(true); + const {isSmallScreenWidth} = useWindowDimensions(); const {translate} = useLocalize(); @@ -110,7 +112,7 @@ function OptionRowLHN(props) { useCallback(() => { isFocusedRef.current = true; return () => { - if (!props.isSmallScreenWidth) { + if (!isSmallScreenWidth) { return; } isFocusedRef.current = false; diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index c0fbbc51214d..87358f05b9c9 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -18,7 +18,6 @@ import * as TransactionUtils from '../../libs/TransactionUtils'; import participantPropTypes from '../participantPropTypes'; import CONST from '../../CONST'; import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; const propTypes = { /** If true will disable ever setting the OptionRowLHN to focused */ @@ -54,7 +53,6 @@ const propTypes = { }), ...withCurrentReportIDPropTypes, - ...windowDimensionsPropTypes, ...basePropTypes, }; @@ -220,6 +218,5 @@ export default React.memo( `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportActions, [fullReport.parentReportActionID, 'originalMessage', 'IOUTransactionID'], '')}`, }, }), - withWindowDimensions, )(OptionRowLHNData), ); From 876f810d76cdc360dbfc17f60f9c3f982d2d1111 Mon Sep 17 00:00:00 2001 From: Carlos Dario Almonte Date: Fri, 22 Sep 2023 08:38:40 -0400 Subject: [PATCH 4/5] fix: use isSmallScreenWidth inside longpress callback instead of useFocusEffect --- src/components/LHNOptionsList/OptionRowLHN.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index f41e56ca3760..af5b73421e7c 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -112,9 +112,6 @@ function OptionRowLHN(props) { useCallback(() => { isFocusedRef.current = true; return () => { - if (!isSmallScreenWidth) { - return; - } isFocusedRef.current = false; }; }, []), @@ -125,7 +122,7 @@ function OptionRowLHN(props) { * @param {Object} [event] - A press event. */ const showPopover = (event) => { - if (!isFocusedRef.current) { + if (!isFocusedRef.current && isSmallScreenWidth) { return; } setIsContextMenuActive(true); From 1acc828b973759ec7a6e515f6b06c60ef864714f Mon Sep 17 00:00:00 2001 From: Carlos Dario Almonte Date: Thu, 28 Sep 2023 08:53:04 -0400 Subject: [PATCH 5/5] fix: eslint rule no conditional hooks OptioRowLHN --- src/components/LHNOptionsList/OptionRowLHN.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index af5b73421e7c..fb6fd59870a0 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -75,6 +75,15 @@ function OptionRowLHN(props) { const optionItem = props.optionItem; const [isContextMenuActive, setIsContextMenuActive] = useState(false); + useFocusEffect( + useCallback(() => { + isFocusedRef.current = true; + return () => { + isFocusedRef.current = false; + }; + }, []), + ); + if (!optionItem) { return null; } @@ -108,14 +117,6 @@ function OptionRowLHN(props) { const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || optionItem.isWaitingForTaskCompleteFromAssignee || ReportUtils.isWaitingForIOUActionFromCurrentUser(optionItem)); - useFocusEffect( - useCallback(() => { - isFocusedRef.current = true; - return () => { - isFocusedRef.current = false; - }; - }, []), - ); /** * Show the ReportActionContextMenu modal popover. *