From 5a9c6556bd1337bcb9e417f7ebb6f5ed625659a8 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 14 Jun 2023 11:38:09 +0800
Subject: [PATCH] use local ref for reaction list

---
 .../Reactions/ReportActionItemReactions.js    |  7 ++--
 .../home/report/ReactionList/ReactionList.js  | 33 -------------------
 .../ReactionList/ReactionListRefContext.js    |  4 +++
 src/pages/home/report/ReportActionsView.js    | 27 ++++++++-------
 4 files changed, 23 insertions(+), 48 deletions(-)
 delete mode 100644 src/pages/home/report/ReactionList/ReactionList.js
 create mode 100644 src/pages/home/report/ReactionList/ReactionListRefContext.js

diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js
index b1194daef773..2ef174a104d6 100644
--- a/src/components/Reactions/ReportActionItemReactions.js
+++ b/src/components/Reactions/ReportActionItemReactions.js
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useRef, useContext} from 'react';
 import _ from 'underscore';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -8,10 +8,10 @@ import emojis from '../../../assets/emojis';
 import AddReactionBubble from './AddReactionBubble';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
 import * as Report from '../../libs/actions/Report';
-import * as ReactionList from '../../pages/home/report/ReactionList/ReactionList';
 import Tooltip from '../Tooltip';
 import ReactionTooltipContent from './ReactionTooltipContent';
 import * as EmojiUtils from '../../libs/EmojiUtils';
+import ReactionListRefContext from '../../pages/home/report/ReactionList/ReactionListRefContext';
 
 const propTypes = {
     /**
@@ -47,6 +47,7 @@ const defaultProps = {
 };
 
 function ReportActionItemReactions(props) {
+    const reactionListRef = useContext(ReactionListRefContext);
     const popoverReactionListAnchor = useRef(null);
     const reactionsWithCount = _.filter(props.reactions, (reaction) => reaction.users.length > 0);
 
@@ -67,7 +68,7 @@ function ReportActionItemReactions(props) {
                 };
 
                 const onReactionListOpen = (event) => {
-                    ReactionList.showReactionList(event, popoverReactionListAnchor.current, reaction.emoji, props.reportActionID);
+                    reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction.emoji, props.reportActionID);
                 };
 
                 return (
diff --git a/src/pages/home/report/ReactionList/ReactionList.js b/src/pages/home/report/ReactionList/ReactionList.js
deleted file mode 100644
index c4563fff317f..000000000000
--- a/src/pages/home/report/ReactionList/ReactionList.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-const reactionListRef = React.createRef();
-
-/**
- * Show the ReactionList popover modal popover.
- *
- * @param {Object} [event] - a press event.
- * @param {Element} reactionListPopoverAnchor - popoverAnchor
- * @param {String} emojiName - the emoji codes to display near the bubble.
- * @param {String} reportActionID
- */
-function showReactionList(event, reactionListPopoverAnchor, emojiName, reportActionID) {
-    if (!reactionListRef.current) {
-        return;
-    }
-
-    reactionListRef.current.showReactionList(event, reactionListPopoverAnchor, emojiName, reportActionID);
-}
-
-/**
- * Hide the ReactionList popover.
- * @param {Function} [onHideCallback=() => {}] - Callback to be called after popover is completely hidden
- */
-function hideReactionList(onHideCallback = () => {}) {
-    if (!reactionListRef.current) {
-        return;
-    }
-
-    reactionListRef.current.hideReactionList(onHideCallback);
-}
-
-export {reactionListRef, showReactionList, hideReactionList};
diff --git a/src/pages/home/report/ReactionList/ReactionListRefContext.js b/src/pages/home/report/ReactionList/ReactionListRefContext.js
new file mode 100644
index 000000000000..12417b03bb15
--- /dev/null
+++ b/src/pages/home/report/ReactionList/ReactionListRefContext.js
@@ -0,0 +1,4 @@
+import React from 'react';
+
+const ReactionListRefContext = React.createContext();
+export default ReactionListRefContext;
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index 6c7cf10da781..c71601024b5f 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -21,7 +21,7 @@ import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import reportPropTypes from '../../reportPropTypes';
 import withNavigationFocus from '../../../components/withNavigationFocus';
-import * as ReactionList from './ReactionList/ReactionList';
+import ReactionListRefContext from './ReactionList/ReactionListRefContext';
 import PopoverReactionList from './ReactionList/PopoverReactionList';
 import getIsReportFullyVisible from '../../../libs/getIsReportFullyVisible';
 
@@ -65,6 +65,7 @@ class ReportActionsView extends React.Component {
         this.unsubscribeVisibilityListener = null;
         this.hasCachedActions = _.size(props.reportActions) > 0;
 
+        this.reactionListRef = React.createRef();
         this.state = {
             isFloatingMessageCounterVisible: false,
             newMarkerReportActionID: ReportUtils.getNewMarkerReportActionID(this.props.report, props.reportActions),
@@ -343,18 +344,20 @@ class ReportActionsView extends React.Component {
                     isActive={this.state.isFloatingMessageCounterVisible && !_.isEmpty(this.state.newMarkerReportActionID)}
                     onClick={this.scrollToBottomAndMarkReportAsRead}
                 />
-                <ReportActionsList
-                    report={this.props.report}
-                    onScroll={this.trackScroll}
-                    onLayout={this.recordTimeToMeasureItemLayout}
-                    sortedReportActions={this.props.reportActions}
-                    mostRecentIOUReportActionID={this.mostRecentIOUReportActionID}
-                    isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
-                    loadMoreChats={this.loadMoreChats}
-                    newMarkerReportActionID={this.state.newMarkerReportActionID}
-                />
+                <ReactionListRefContext.Provider value={this.reactionListRef}>
+                    <ReportActionsList
+                        report={this.props.report}
+                        onScroll={this.trackScroll}
+                        onLayout={this.recordTimeToMeasureItemLayout}
+                        sortedReportActions={this.props.reportActions}
+                        mostRecentIOUReportActionID={this.mostRecentIOUReportActionID}
+                        isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
+                        loadMoreChats={this.loadMoreChats}
+                        newMarkerReportActionID={this.state.newMarkerReportActionID}
+                    />
+                </ReactionListRefContext.Provider>
                 <PopoverReactionList
-                    ref={ReactionList.reactionListRef}
+                    ref={this.reactionListRef}
                     reportID={this.props.report.reportID}
                 />
                 <CopySelectionHelper />