Migrate baseReportActionContextMenu.js to fc component.

Expensify · Jul 31, 2023 · 371f399 · 371f399
1 parent dc32700
commit 371f399
Showing 1 changed file with 77 additions and 86 deletions.
diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
@@ -41,94 +41,85 @@ const defaultProps = {
     isArchivedRoom: false,
     ...GenericReportActionContextMenuDefaultProps,
 };
-class BaseReportActionContextMenu extends React.Component {
-    constructor(props) {
-        super(props);
-        this.wrapperStyle = getReportActionContextMenuStyles(this.props.isMini, this.props.isSmallScreenWidth);
-
-        this.state = {
-            shouldKeepOpen: false,
-        };
-    }
-
-    render() {
-        const shouldShowFilter = (contextAction) =>
-            contextAction.shouldShow(
-                this.props.type,
-                this.props.reportAction,
-                this.props.isArchivedRoom,
-                this.props.betas,
-                this.props.anchor,
-                this.props.isChronosReport,
-                this.props.reportID,
-                this.props.isPinnedChat,
-                this.props.isUnreadChat,
-            );
-
-        /**
-         * Checks if user is anonymous. If true and the action doesn't accept for anonymous user, hides the context menu and
-         * shows the sign in modal. Else, executes the callback.
-         *
-         * @param {Function} callback
-         * @param {Boolean} isAnonymousAction
-         */
-        const interceptAnonymousUser = (callback, isAnonymousAction = false) => {
-            if (Session.isAnonymousUser() && !isAnonymousAction) {
-                hideContextMenu(false);
-
-                InteractionManager.runAfterInteractions(() => {
-                    Session.signOutAndRedirectToSignIn();
-                });
-            } else {
-                callback();
-            }
-        };
-
-        return (
-            (this.props.isVisible || this.state.shouldKeepOpen) && (
-                <View
-                    ref={this.props.contentRef}
-                    style={this.wrapperStyle}
-                >
-                    {_.map(_.filter(ContextMenuActions, shouldShowFilter), (contextAction) => {
-                        const closePopup = !this.props.isMini;
-                        const payload = {
-                            reportAction: this.props.reportAction,
-                            reportID: this.props.reportID,
-                            draftMessage: this.props.draftMessage,
-                            selection: this.props.selection,
-                            close: () => this.setState({shouldKeepOpen: false}),
-                            openContextMenu: () => this.setState({shouldKeepOpen: true}),
-                            interceptAnonymousUser,
-                        };
-
-                        if (contextAction.renderContent) {
-                            // make sure that renderContent isn't mixed with unsupported props
-                            if (__DEV__ && (contextAction.text != null || contextAction.icon != null)) {
-                                throw new Error('Dev error: renderContent() and text/icon cannot be used together.');
-                            }
+function BaseReportActionContextMenu(props) {
+    const [shouldKeepOpen, setShouldKeepOpen] = useState(false);
+    const wrapperStyle = getReportActionContextMenuStyles(props.isMini, props.isSmallScreenWidth);
+    const shouldShowFilter = (contextAction) =>
+        contextAction.shouldShow(
+            props.type,
+            props.reportAction,
+            props.isArchivedRoom,
+            props.betas,
+            props.anchor,
+            props.isChronosReport,
+            props.reportID,
+            props.isPinnedChat,
+            props.isUnreadChat,
+        );
 
-                            return contextAction.renderContent(closePopup, payload);
+    /**
+     * Checks if user is anonymous. If true and the action doesn't accept for anonymous user, hides the context menu and
+     * shows the sign in modal. Else, executes the callback.
+     *
+     * @param {Function} callback
+     * @param {Boolean} isAnonymousAction
+     */
+    const interceptAnonymousUser = (callback, isAnonymousAction = false) => {
+        if (Session.isAnonymousUser() && !isAnonymousAction) {
+            hideContextMenu(false);
+
+            InteractionManager.runAfterInteractions(() => {
+                Session.signOutAndRedirectToSignIn();
+            });
+        } else {
+            callback();
+        }
+    };
+
+    return (
+        (props.isVisible || shouldKeepOpen) && (
+            <View
+                ref={props.contentRef}
+                style={wrapperStyle}
+            >
+                {_.map(_.filter(ContextMenuActions, shouldShowFilter), (contextAction) => {
+                    const closePopup = !props.isMini;
+                    const payload = {
+                        reportAction: props.reportAction,
+                        reportID: props.reportID,
+                        draftMessage: props.draftMessage,
+                        selection: props.selection,
+                        close: () => setShouldKeepOpen(false),
+                        openContextMenu: () => setShouldKeepOpen(true),
+                        interceptAnonymousUser,
+                    };
+
+                    if (contextAction.renderContent) {
+                        // make sure that renderContent isn't mixed with unsupported props
+                        if (__DEV__ && (contextAction.text != null || contextAction.icon != null)) {
+                            throw new Error('Dev error: renderContent() and text/icon cannot be used together.');
                         }
 
-                        return (
-                            <ContextMenuItem
-                                icon={contextAction.icon}
-                                text={this.props.translate(contextAction.textTranslateKey, {action: this.props.reportAction})}
-                                successIcon={contextAction.successIcon}
-                                successText={contextAction.successTextTranslateKey ? this.props.translate(contextAction.successTextTranslateKey) : undefined}
-                                isMini={this.props.isMini}
-                                key={contextAction.textTranslateKey}
-                                onPress={() => interceptAnonymousUser(() => contextAction.onPress(closePopup, payload), contextAction.isAnonymousAction)}
-                                description={contextAction.getDescription(this.props.selection, this.props.isSmallScreenWidth)}
-                                isAnonymousAction={contextAction.isAnonymousAction}
-                            />
-                        );
-                    })}
-                </View>
-            )
-        );
-    }
+                        return contextAction.renderContent(closePopup, payload);
+                    }
+
+                    return (
+                        <ContextMenuItem
+                            icon={contextAction.icon}
+                            text={props.translate(contextAction.textTranslateKey, {action: props.reportAction})}
+                            successIcon={contextAction.successIcon}
+                            successText={contextAction.successTextTranslateKey ? props.translate(contextAction.successTextTranslateKey) : undefined}
+                            isMini={props.isMini}
+                            key={contextAction.textTranslateKey}
+                            onPress={() => interceptAnonymousUser(() => contextAction.onPress(closePopup, payload), contextAction.isAnonymousAction)}
+                            description={contextAction.getDescription(props.selection, props.isSmallScreenWidth)}
+                            isAnonymousAction={contextAction.isAnonymousAction}
+                        />
+                    );
+                })}
+            </View>
+        )
+    );
 }
 
 BaseReportActionContextMenu.propTypes = propTypes;