Skip to content

Migrate BaseReportActionContextMenu.js to fc component. #23934

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcaaron merged 1 commit into from
Aug 2, 2023
+77 −86
Merged

Migrate BaseReportActionContextMenu.js to fc component. #23934

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 77 additions & 86 deletions src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) {

@robertKozik robertKozik Aug 1, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we destructure the props here?
As per this line of STYLE.md:
Always use destructuring to get prop values. Destructuring is necessary to assign default values to props.

@vadymbokatov vadymbokatov Aug 1, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robertKozik I tried to use destructuring to get prop values but I am getting this lint errors. It requires to use default props.

Screenshot 2023-08-01 at 21 58 21

@robertKozik robertKozik Aug 1, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we assign default values to make lint happy?

@vadymbokatov vadymbokatov Aug 1, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think, we can't.

@vadymbokatov vadymbokatov Aug 1, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked other fc components but they don't use destructuring as well.

@robertKozik robertKozik Aug 2, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, got it, thank you

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;
Expand Down