From 8e3baa2e0b972272c5b68b074f1672700ee47e05 Mon Sep 17 00:00:00 2001 From: OlimpiaZurek Date: Tue, 12 Sep 2023 10:21:39 +0200 Subject: [PATCH 1/5] migrate PopoverReportActionContextMenu class to function component --- .../PopoverReportActionContextMenu.js | 448 +++++++++--------- 1 file changed, 214 insertions(+), 234 deletions(-) diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js index dd0813132a8e..4dbf5a32cac2 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js @@ -1,13 +1,11 @@ -import React from 'react'; +import React, {forwardRef, useEffect, useState, useRef, useImperativeHandle, useCallback} from 'react'; import {Dimensions} from 'react-native'; import _ from 'underscore'; -import lodashGet from 'lodash/get'; import * as Report from '../../../../libs/actions/Report'; import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; import PopoverWithMeasuredContent from '../../../../components/PopoverWithMeasuredContent'; import BaseReportActionContextMenu from './BaseReportActionContextMenu'; import ConfirmModal from '../../../../components/ConfirmModal'; -import CONST from '../../../../CONST'; import * as ReportActionsUtils from '../../../../libs/ReportActionsUtils'; import * as IOU from '../../../../libs/actions/IOU'; @@ -15,82 +13,59 @@ const propTypes = { ...withLocalizePropTypes, }; -class PopoverReportActionContextMenu extends React.Component { - constructor(props) { - super(props); - - this.state = { - reportID: '0', - reportActionID: '0', - originalReportID: '0', - reportAction: {}, - selection: '', - reportActionDraftMessage: '', - isPopoverVisible: false, - isDeleteCommentConfirmModalVisible: false, - shouldSetModalVisibilityForDeleteConfirmation: true, - cursorRelativePosition: { - horizontal: 0, - vertical: 0, - }, - - // The horizontal and vertical position (relative to the screen) where the popover will display. - popoverAnchorPosition: { - horizontal: 0, - vertical: 0, - }, - isArchivedRoom: false, - isChronosReport: false, - isPinnedChat: false, - isUnreadChat: false, - }; - this.onPopoverShow = () => {}; - this.onPopoverHide = () => {}; - this.onPopoverHideActionCallback = () => {}; - this.contextMenuAnchor = undefined; - this.showContextMenu = this.showContextMenu.bind(this); - this.hideContextMenu = this.hideContextMenu.bind(this); - this.measureContextMenuAnchorPosition = this.measureContextMenuAnchorPosition.bind(this); - this.confirmDeleteAndHideModal = this.confirmDeleteAndHideModal.bind(this); - this.hideDeleteModal = this.hideDeleteModal.bind(this); - this.showDeleteModal = this.showDeleteModal.bind(this); - this.runAndResetOnPopoverShow = this.runAndResetOnPopoverShow.bind(this); - this.runAndResetOnPopoverHide = this.runAndResetOnPopoverHide.bind(this); - this.getContextMenuMeasuredLocation = this.getContextMenuMeasuredLocation.bind(this); - this.isActiveReportAction = this.isActiveReportAction.bind(this); - this.clearActiveReportAction = this.clearActiveReportAction.bind(this); - - this.dimensionsEventListener = null; - - this.contentRef = React.createRef(); - this.setContentRef = (ref) => { - this.contentRef.current = ref; +const PopoverReportActionContextMenu = forwardRef((props, ref) => { + const reportIDRef = useRef('0'); + const typeRef = useRef(''); + const reportActionRef = useRef({}); + const reportActionIDRef = useRef('0'); + const originalReportIDRef = useRef('0'); + const selectionRef = useRef(''); + const reportActionDraftMessageRef = useRef(''); + + const cursorRelativePosition = useRef({ + horizontal: 0, + vertical: 0, + }); + + // The horizontal and vertical position (relative to the screen) where the popover will display. + const popoverAnchorPosition = useRef({ + horizontal: 0, + vertical: 0, + }); + + const [instanceID, setInstanceID] = useState(''); + + const [isPopoverVisible, setIsPopoverVisible] = useState(false); + const [isDeleteCommentConfirmModalVisible, setIsDeleteCommentConfirmModalVisible] = useState(false); + const [shouldSetModalVisibilityForDeleteConfirmation, setShouldSetModalVisibilityForDeleteConfirmation] = useState(true); + const [isArchivedRoom, setIsArchivedRoom] = useState(false); + const [isChronosReport, setIsChronosReport] = useState(false); + const [isPinnedChat, setIsPinnedChat] = useState(false); + const [isUnreadChat, setIsUnreadChat] = useState(false); + + const contentRef = useRef(null); + const anchorRef = useRef(null); + const dimensionsEventListener = useRef(null); + const contextMenuAnchor = useRef(null); + const contextMenuTargetNode = useRef(null); + + const onPopoverShow = useRef(() => {}); + const onPopoverHide = useRef(() => {}); + const onCancelDeleteModal = useRef(() => {}); + const onComfirmDeleteModal = useRef(() => {}); + + const onPopoverHideActionCallback = useRef(() => {}); + const callbackWhenDeleteModalHide = useRef(() => {}); + + useEffect(() => { + dimensionsEventListener.current = Dimensions.addEventListener('change', measureContextMenuAnchorPosition); + + return () => { + if (dimensionsEventListener.current) { + dimensionsEventListener.current.remove(); + } }; - this.setContentRef = this.setContentRef.bind(this); - this.anchorRef = React.createRef(); - } - - componentDidMount() { - this.dimensionsEventListener = Dimensions.addEventListener('change', this.measureContextMenuAnchorPosition); - } - - shouldComponentUpdate(nextProps, nextState) { - const previousLocale = lodashGet(this.props, 'preferredLocale', CONST.LOCALES.DEFAULT); - const nextLocale = lodashGet(nextProps, 'preferredLocale', CONST.LOCALES.DEFAULT); - return ( - this.state.isPopoverVisible !== nextState.isPopoverVisible || - this.state.popoverAnchorPosition !== nextState.popoverAnchorPosition || - this.state.isDeleteCommentConfirmModalVisible !== nextState.isDeleteCommentConfirmModalVisible || - previousLocale !== nextLocale - ); - } - - componentWillUnmount() { - if (!this.dimensionsEventListener) { - return; - } - this.dimensionsEventListener.remove(); - } + }, []); /** * Get the Context menu anchor position @@ -98,15 +73,15 @@ class PopoverReportActionContextMenu extends React.Component { * * @returns {Promise} */ - getContextMenuMeasuredLocation() { + const getContextMenuMeasuredLocation = () => { return new Promise((resolve) => { - if (this.contextMenuAnchor) { - (this.contextMenuAnchor.current || this.contextMenuAnchor).measureInWindow((x, y) => resolve({x, y})); + if (contextMenuAnchor.current) { + (contextMenuAnchor.current || contextMenuAnchor).measureInWindow((x, y) => resolve({x, y})); } else { resolve({x: 0, y: 0}); } }); - } + }; /** * Whether Context Menu is active for the Report Action. @@ -114,13 +89,9 @@ class PopoverReportActionContextMenu extends React.Component { * @param {Number|String} actionID * @return {Boolean} */ - isActiveReportAction(actionID) { - return Boolean(actionID) && (this.state.reportActionID === actionID || this.state.reportAction.reportActionID === actionID); - } - - clearActiveReportAction() { - this.setState({reportID: '0', reportAction: {}}); - } + const isActiveReportAction = (actionID) => { + return Boolean(actionID) && (reportActionIDRef.current === actionID || reportActionRef.current.reportActionID === actionID); + }; /** * Show the ReportActionContextMenu modal popover. @@ -132,7 +103,6 @@ class PopoverReportActionContextMenu extends React.Component { * @param {String} reportID - Active Report Id * @param {Object} reportActionID - ReportAction for ContextMenu * @param {String} originalReportID - The currrent Report Id of the reportAction - * @param {String} draftMessage - ReportAction Draftmessage * @param {Function} [onShow] - Run a callback when Menu is shown * @param {Function} [onHide] - Run a callback when Menu is hidden * @param {Boolean} isArchivedRoom - Whether the provided report is an archived room @@ -140,7 +110,7 @@ class PopoverReportActionContextMenu extends React.Component { * @param {Boolean} isPinnedChat - Flag to check if the chat is pinned in the LHN. Used for the Pin/Unpin action * @param {Boolean} isUnreadChat - Flag to check if the chat is unread in the LHN. Used for the Mark as Read/Unread action */ - showContextMenu( + const showContextMenu = ( type, event, selection, @@ -155,130 +125,125 @@ class PopoverReportActionContextMenu extends React.Component { isChronosReport = false, isPinnedChat = false, isUnreadChat = false, - ) { + ) => { const nativeEvent = event.nativeEvent || {}; - this.contextMenuAnchor = contextMenuAnchor; - this.contextMenuTargetNode = nativeEvent.target; - - // Singleton behaviour of ContextMenu creates race conditions when user requests multiple contextMenus. - // But it is possible that every new request registers new callbacks thus instanceID is used to corelate those callbacks - this.instanceID = Math.random().toString(36).substr(2, 5); - - this.onPopoverShow = onShow; - this.onPopoverHide = onHide; - - this.getContextMenuMeasuredLocation().then(({x, y}) => { - this.setState({ - cursorRelativePosition: { - horizontal: nativeEvent.pageX - x, - vertical: nativeEvent.pageY - y, - }, - popoverAnchorPosition: { - horizontal: nativeEvent.pageX, - vertical: nativeEvent.pageY, - }, - type, - reportID, - reportActionID, - originalReportID, - selection, - isPopoverVisible: true, - reportActionDraftMessage: draftMessage, - isArchivedRoom, - isChronosReport, - isPinnedChat, - isUnreadChat, - }); + contextMenuAnchor.current = contextMenuAnchor; + contextMenuTargetNode.current = nativeEvent.target; + + setInstanceID(Math.random().toString(36).substr(2, 5)); + + onPopoverShow.current = onShow; + onPopoverHide.current = onHide; + + getContextMenuMeasuredLocation().then(({x, y}) => { + popoverAnchorPosition.current = { + horizontal: nativeEvent.pageX - x, + vertical: nativeEvent.pageY - y, + }; + + popoverAnchorPosition.current = { + horizontal: nativeEvent.pageX, + vertical: nativeEvent.pageY, + }; + typeRef.current = type; + reportIDRef.current = reportID; + reportActionIDRef.current = reportActionID; + originalReportIDRef.current = originalReportID; + selectionRef.current = selection; + setIsPopoverVisible(true); + reportActionDraftMessageRef.current = draftMessage; + setIsArchivedRoom(isArchivedRoom); + setIsChronosReport(isChronosReport); + setIsPinnedChat(isPinnedChat); + setIsUnreadChat(isUnreadChat); }); - } + }; /** * This gets called on Dimensions change to find the anchor coordinates for the action context menu. */ - measureContextMenuAnchorPosition() { - if (!this.state.isPopoverVisible) { + const measureContextMenuAnchorPosition = useCallback(() => { + if (!isPopoverVisible) { return; } - this.getContextMenuMeasuredLocation().then(({x, y}) => { + + getContextMenuMeasuredLocation().then(({x, y}) => { if (!x || !y) { return; } - this.setState((prev) => ({ - popoverAnchorPosition: { - horizontal: prev.cursorRelativePosition.horizontal + x, - vertical: prev.cursorRelativePosition.vertical + y, - }, - })); + + popoverAnchorPosition.current = { + horizontal: cursorRelativePosition.horizontal + x, + vertical: cursorRelativePosition.vertical + y, + }; }); - } + }, [isPopoverVisible, getContextMenuMeasuredLocation, cursorRelativePosition]); /** * After Popover shows, call the registered onPopoverShow callback and reset it */ - runAndResetOnPopoverShow() { - this.onPopoverShow(); + const runAndResetOnPopoverShow = () => { + onPopoverShow.current(); // After we have called the action, reset it. - this.onPopoverShow = () => {}; - } + onPopoverShow.current = () => {}; + }; /** * After Popover hides, call the registered onPopoverHide & onPopoverHideActionCallback callback and reset it */ - runAndResetOnPopoverHide() { - this.setState({reportID: '0', reportActionID: '0', originalReportID: '0'}, () => { - this.onPopoverHide = this.runAndResetCallback(this.onPopoverHide); - this.onPopoverHideActionCallback = this.runAndResetCallback(this.onPopoverHideActionCallback); - }); - } + const runAndResetOnPopoverHide = () => { + reportIDRef.current = '0'; + reportActionIDRef.current = '0'; + originalReportIDRef.current = '0'; + + onPopoverHide.current = runAndResetCallback(onPopoverHide.current); + onPopoverHideActionCallback.current = runAndResetCallback(onPopoverHideActionCallback.current); + }; /** * Hide the ReportActionContextMenu modal popover. * @param {Function} onHideActionCallback Callback to be called after popover is completely hidden */ - hideContextMenu(onHideActionCallback) { + const hideContextMenu = (onHideActionCallback) => { if (_.isFunction(onHideActionCallback)) { - this.onPopoverHideActionCallback = onHideActionCallback; + onPopoverHideActionCallback.current = onHideActionCallback; } - this.setState({ - selection: '', - reportActionDraftMessage: '', - isPopoverVisible: false, - }); - } + + selectionRef.current = ''; + reportActionDraftMessageRef.current = ''; + setIsPopoverVisible(false); + }; /** * Run the callback and return a noop function to reset it * @param {Function} callback * @returns {Function} */ - runAndResetCallback(callback) { + const runAndResetCallback = (callback) => { callback(); return () => {}; - } - - confirmDeleteAndHideModal() { - this.callbackWhenDeleteModalHide = () => (this.onComfirmDeleteModal = this.runAndResetCallback(this.onComfirmDeleteModal)); + }; - if (ReportActionsUtils.isMoneyRequestAction(this.state.reportAction)) { - IOU.deleteMoneyRequest(this.state.reportAction.originalMessage.IOUTransactionID, this.state.reportAction); + const confirmDeleteAndHideModal = useCallback(() => { + callbackWhenDeleteModalHide.current = () => (onComfirmDeleteModal.current = runAndResetCallback(onComfirmDeleteModal.current)); + if (ReportActionsUtils.isMoneyRequestAction(reportAction)) { + IOU.deleteMoneyRequest(reportActionRef.current.originalMessage.IOUTransactionID, reportActionRef.current); } else { - Report.deleteReportComment(this.state.reportID, this.state.reportAction); + Report.deleteReportComment(reportIDRef.current, reportActionRef.current); } - this.setState({isDeleteCommentConfirmModalVisible: false}); - } - - hideDeleteModal() { - this.callbackWhenDeleteModalHide = () => (this.onCancelDeleteModal = this.runAndResetCallback(this.onCancelDeleteModal)); - this.setState({ - isDeleteCommentConfirmModalVisible: false, - shouldSetModalVisibilityForDeleteConfirmation: true, - isArchivedRoom: false, - isChronosReport: false, - isPinnedChat: false, - isUnreadChat: false, - }); - } + setIsDeleteCommentConfirmModalVisible(false); + }, [reportActionRef]); + + const hideDeleteModal = () => { + callbackWhenDeleteModalHide.current = () => (onCancelDeleteModal.current = runAndResetCallback(onCancelDeleteModal.current)); + setIsDeleteCommentConfirmModalVisible(false); + setShouldSetModalVisibilityForDeleteConfirmation(true); + setIsArchivedRoom(false); + setIsChronosReport(false); + setIsPinnedChat(false); + setIsUnreadChat(false); + }; /** * Opens the Confirm delete action modal @@ -288,67 +253,82 @@ class PopoverReportActionContextMenu extends React.Component { * @param {Function} [onConfirm] * @param {Function} [onCancel] */ - showDeleteModal(reportID, reportAction, shouldSetModalVisibility = true, onConfirm = () => {}, onCancel = () => {}) { - this.onCancelDeleteModal = onCancel; - this.onComfirmDeleteModal = onConfirm; - this.setState({ - reportID, - reportAction, - shouldSetModalVisibilityForDeleteConfirmation: shouldSetModalVisibility, - isDeleteCommentConfirmModalVisible: true, - }); - } - - render() { - return ( - <> - - - - {}, onCancel = () => {}) => { + onCancelDeleteModal.current = onCancel; + onComfirmDeleteModal.current = onConfirm; + + reportIDRef.current = reportID; + reportActionRef.current = reportAction; + + setShouldSetModalVisibilityForDeleteConfirmation(shouldSetModalVisibility); + setIsDeleteCommentConfirmModalVisible(true); + }; + + useImperativeHandle(ref, () => ({ + showContextMenu, + hideContextMenu, + showDeleteModal, + hideDeleteModal, + isActiveReportAction, + instanceID, + runAndResetOnPopoverHide, + })); + + const reportAction = reportActionRef.current; + + return ( + <> + + - - ); - } -} + + { + reportIDRef.current = '0'; + reportActionRef.current = {}; + callbackWhenDeleteModalHide.current(); + }} + prompt={props.translate('reportActionContextMenu.deleteConfirmation', {action: reportAction})} + confirmText={props.translate('common.delete')} + cancelText={props.translate('common.cancel')} + danger + /> + + ); +}); PopoverReportActionContextMenu.propTypes = propTypes; +PopoverReportActionContextMenu.displayName = 'PopoverReportActionContextMenu'; export default withLocalize(PopoverReportActionContextMenu); From eebfe3dd363932ed4e5dd8e73e8966cde5327203 Mon Sep 17 00:00:00 2001 From: OlimpiaZurek Date: Tue, 12 Sep 2023 16:22:00 +0200 Subject: [PATCH 2/5] code improvements after cr --- .../PopoverReportActionContextMenu.js | 158 +++++++++--------- 1 file changed, 79 insertions(+), 79 deletions(-) diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js index 4dbf5a32cac2..b57fc3f8e172 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js @@ -2,18 +2,15 @@ import React, {forwardRef, useEffect, useState, useRef, useImperativeHandle, use import {Dimensions} from 'react-native'; import _ from 'underscore'; import * as Report from '../../../../libs/actions/Report'; -import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; import PopoverWithMeasuredContent from '../../../../components/PopoverWithMeasuredContent'; import BaseReportActionContextMenu from './BaseReportActionContextMenu'; import ConfirmModal from '../../../../components/ConfirmModal'; import * as ReportActionsUtils from '../../../../libs/ReportActionsUtils'; import * as IOU from '../../../../libs/actions/IOU'; +import useLocalize from '../../../../hooks/useLocalize'; -const propTypes = { - ...withLocalizePropTypes, -}; - -const PopoverReportActionContextMenu = forwardRef((props, ref) => { +function PopoverReportActionContextMenu(_props, ref) { + const {translate} = useLocalize(); const reportIDRef = useRef('0'); const typeRef = useRef(''); const reportActionRef = useRef({}); @@ -38,15 +35,16 @@ const PopoverReportActionContextMenu = forwardRef((props, ref) => { const [isPopoverVisible, setIsPopoverVisible] = useState(false); const [isDeleteCommentConfirmModalVisible, setIsDeleteCommentConfirmModalVisible] = useState(false); const [shouldSetModalVisibilityForDeleteConfirmation, setShouldSetModalVisibilityForDeleteConfirmation] = useState(true); - const [isArchivedRoom, setIsArchivedRoom] = useState(false); - const [isChronosReport, setIsChronosReport] = useState(false); - const [isPinnedChat, setIsPinnedChat] = useState(false); - const [isUnreadChat, setIsUnreadChat] = useState(false); + + const [isRoomArchived, setIsRoomArchived] = useState(false); + const [isChronosReportEnabled, setIsChronosReportEnabled] = useState(false); + const [isChatPinned, setIsChatPinned] = useState(false); + const [hasUnreadMessages, setHasUnreadMessages] = useState(false); const contentRef = useRef(null); const anchorRef = useRef(null); const dimensionsEventListener = useRef(null); - const contextMenuAnchor = useRef(null); + const contextMenuAnchorRef = useRef(null); const contextMenuTargetNode = useRef(null); const onPopoverShow = useRef(() => {}); @@ -57,31 +55,54 @@ const PopoverReportActionContextMenu = forwardRef((props, ref) => { const onPopoverHideActionCallback = useRef(() => {}); const callbackWhenDeleteModalHide = useRef(() => {}); - useEffect(() => { - dimensionsEventListener.current = Dimensions.addEventListener('change', measureContextMenuAnchorPosition); - - return () => { - if (dimensionsEventListener.current) { - dimensionsEventListener.current.remove(); - } - }; - }, []); - /** * Get the Context menu anchor position * We calculate the achor coordinates from measureInWindow async method * * @returns {Promise} */ - const getContextMenuMeasuredLocation = () => { - return new Promise((resolve) => { - if (contextMenuAnchor.current) { - (contextMenuAnchor.current || contextMenuAnchor).measureInWindow((x, y) => resolve({x, y})); - } else { - resolve({x: 0, y: 0}); + const getContextMenuMeasuredLocation = useCallback( + () => + new Promise((resolve) => { + if (contextMenuAnchorRef.current && _.isFunction(contextMenuAnchorRef.current.measureInWindow)) { + contextMenuAnchorRef.current.measureInWindow((x, y) => resolve({x, y})); + } else { + resolve({x: 0, y: 0}); + } + }), + [], + ); + + /** + * This gets called on Dimensions change to find the anchor coordinates for the action context menu. + */ + const measureContextMenuAnchorPosition = useCallback(() => { + if (!isPopoverVisible) { + return; + } + + getContextMenuMeasuredLocation().then(({x, y}) => { + if (!x || !y) { + return; } + + popoverAnchorPosition.current = { + horizontal: cursorRelativePosition.horizontal + x, + vertical: cursorRelativePosition.vertical + y, + }; }); - }; + }, [isPopoverVisible, getContextMenuMeasuredLocation]); + + useEffect(() => { + dimensionsEventListener.current = Dimensions.addEventListener('change', measureContextMenuAnchorPosition); + + return () => { + if (!dimensionsEventListener.current) { + return; + } + dimensionsEventListener.current.remove(); + }; + }, [measureContextMenuAnchorPosition]); /** * Whether Context Menu is active for the Report Action. @@ -127,7 +148,7 @@ const PopoverReportActionContextMenu = forwardRef((props, ref) => { isUnreadChat = false, ) => { const nativeEvent = event.nativeEvent || {}; - contextMenuAnchor.current = contextMenuAnchor; + contextMenuAnchorRef.current = contextMenuAnchor; contextMenuTargetNode.current = nativeEvent.target; setInstanceID(Math.random().toString(36).substr(2, 5)); @@ -152,33 +173,13 @@ const PopoverReportActionContextMenu = forwardRef((props, ref) => { selectionRef.current = selection; setIsPopoverVisible(true); reportActionDraftMessageRef.current = draftMessage; - setIsArchivedRoom(isArchivedRoom); - setIsChronosReport(isChronosReport); - setIsPinnedChat(isPinnedChat); - setIsUnreadChat(isUnreadChat); + setIsRoomArchived(isArchivedRoom); + setIsChronosReportEnabled(isChronosReport); + setIsChatPinned(isPinnedChat); + setHasUnreadMessages(isUnreadChat); }); }; - /** - * This gets called on Dimensions change to find the anchor coordinates for the action context menu. - */ - const measureContextMenuAnchorPosition = useCallback(() => { - if (!isPopoverVisible) { - return; - } - - getContextMenuMeasuredLocation().then(({x, y}) => { - if (!x || !y) { - return; - } - - popoverAnchorPosition.current = { - horizontal: cursorRelativePosition.horizontal + x, - vertical: cursorRelativePosition.vertical + y, - }; - }); - }, [isPopoverVisible, getContextMenuMeasuredLocation, cursorRelativePosition]); - /** * After Popover shows, call the registered onPopoverShow callback and reset it */ @@ -189,6 +190,16 @@ const PopoverReportActionContextMenu = forwardRef((props, ref) => { onPopoverShow.current = () => {}; }; + /** + * Run the callback and return a noop function to reset it + * @param {Function} callback + * @returns {Function} + */ + const runAndResetCallback = (callback) => { + callback(); + return () => {}; + }; + /** * After Popover hides, call the registered onPopoverHide & onPopoverHideActionCallback callback and reset it */ @@ -215,19 +226,9 @@ const PopoverReportActionContextMenu = forwardRef((props, ref) => { setIsPopoverVisible(false); }; - /** - * Run the callback and return a noop function to reset it - * @param {Function} callback - * @returns {Function} - */ - const runAndResetCallback = (callback) => { - callback(); - return () => {}; - }; - const confirmDeleteAndHideModal = useCallback(() => { callbackWhenDeleteModalHide.current = () => (onComfirmDeleteModal.current = runAndResetCallback(onComfirmDeleteModal.current)); - if (ReportActionsUtils.isMoneyRequestAction(reportAction)) { + if (ReportActionsUtils.isMoneyRequestAction(reportActionRef.current)) { IOU.deleteMoneyRequest(reportActionRef.current.originalMessage.IOUTransactionID, reportActionRef.current); } else { Report.deleteReportComment(reportIDRef.current, reportActionRef.current); @@ -239,10 +240,10 @@ const PopoverReportActionContextMenu = forwardRef((props, ref) => { callbackWhenDeleteModalHide.current = () => (onCancelDeleteModal.current = runAndResetCallback(onCancelDeleteModal.current)); setIsDeleteCommentConfirmModalVisible(false); setShouldSetModalVisibilityForDeleteConfirmation(true); - setIsArchivedRoom(false); - setIsChronosReport(false); - setIsPinnedChat(false); - setIsUnreadChat(false); + setIsRoomArchived(false); + setIsChronosReportEnabled(false); + setIsChatPinned(false); + setHasUnreadMessages(false); }; /** @@ -299,17 +300,17 @@ const PopoverReportActionContextMenu = forwardRef((props, ref) => { reportActionID={reportActionIDRef.current} draftMessage={reportActionDraftMessageRef.current} selection={selectionRef.current} - isArchivedRoom={isArchivedRoom} - isChronosReport={isChronosReport} - isPinnedChat={isPinnedChat} - isUnreadChat={isUnreadChat} + isArchivedRoom={isRoomArchived} + isChronosReport={isChronosReportEnabled} + isPinnedChat={isChatPinned} + isUnreadChat={hasUnreadMessages} anchor={contextMenuTargetNode} contentRef={contentRef} originalReportID={originalReportIDRef.current} /> { reportActionRef.current = {}; callbackWhenDeleteModalHide.current(); }} - prompt={props.translate('reportActionContextMenu.deleteConfirmation', {action: reportAction})} - confirmText={props.translate('common.delete')} - cancelText={props.translate('common.cancel')} + prompt={translate('reportActionContextMenu.deleteConfirmation', {action: reportAction})} + confirmText={translate('common.delete')} + cancelText={translate('common.cancel')} danger /> ); -}); +} -PopoverReportActionContextMenu.propTypes = propTypes; PopoverReportActionContextMenu.displayName = 'PopoverReportActionContextMenu'; -export default withLocalize(PopoverReportActionContextMenu); +export default forwardRef(PopoverReportActionContextMenu); From 0f6938d2c569ffb51d73102a1cd0d5846522fe07 Mon Sep 17 00:00:00 2001 From: OlimpiaZurek Date: Tue, 12 Sep 2023 18:13:33 +0200 Subject: [PATCH 3/5] fix lint issue --- .../home/report/ContextMenu/PopoverReportActionContextMenu.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js index b57fc3f8e172..5d680d2309e8 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js @@ -124,6 +124,7 @@ function PopoverReportActionContextMenu(_props, ref) { * @param {String} reportID - Active Report Id * @param {Object} reportActionID - ReportAction for ContextMenu * @param {String} originalReportID - The currrent Report Id of the reportAction + * @param {String} draftMessage - ReportAction Draftmessage * @param {Function} [onShow] - Run a callback when Menu is shown * @param {Function} [onHide] - Run a callback when Menu is hidden * @param {Boolean} isArchivedRoom - Whether the provided report is an archived room From a6f63a2b83d172efb79a55a18a66f6d7a45955ee Mon Sep 17 00:00:00 2001 From: OlimpiaZurek Date: Fri, 22 Sep 2023 12:34:57 +0200 Subject: [PATCH 4/5] fix conflicts --- .../ContextMenu/PopoverReportActionContextMenu.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js index 5d680d2309e8..0207b877f0c2 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js @@ -110,9 +110,13 @@ function PopoverReportActionContextMenu(_props, ref) { * @param {Number|String} actionID * @return {Boolean} */ - const isActiveReportAction = (actionID) => { - return Boolean(actionID) && (reportActionIDRef.current === actionID || reportActionRef.current.reportActionID === actionID); - }; + const isActiveReportAction = (actionID) => Boolean(actionID) && (reportActionIDRef.current === actionID || reportActionRef.current.reportActionID === actionID); + + + const clearActiveReportAction = () => { + reportActionIDRef.current = '0'; + reportActionRef.current = {}; + } /** * Show the ReportActionContextMenu modal popover. @@ -274,6 +278,7 @@ function PopoverReportActionContextMenu(_props, ref) { isActiveReportAction, instanceID, runAndResetOnPopoverHide, + clearActiveReportAction, })); const reportAction = reportActionRef.current; From 594bd6b1eb73a6d3b28147f91825ed7dad13d8ef Mon Sep 17 00:00:00 2001 From: OlimpiaZurek Date: Fri, 22 Sep 2023 12:43:54 +0200 Subject: [PATCH 5/5] prettier fix --- .../home/report/ContextMenu/PopoverReportActionContextMenu.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js index 0207b877f0c2..4f09df7330ff 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js @@ -112,11 +112,10 @@ function PopoverReportActionContextMenu(_props, ref) { */ const isActiveReportAction = (actionID) => Boolean(actionID) && (reportActionIDRef.current === actionID || reportActionRef.current.reportActionID === actionID); - const clearActiveReportAction = () => { reportActionIDRef.current = '0'; reportActionRef.current = {}; - } + }; /** * Show the ReportActionContextMenu modal popover.