Skip to content

Commit

Permalink
Merge pull request #22927 from alexxxwork/issue-16250
Browse files Browse the repository at this point in the history 
Component refactor: migrate ReportSettingsPage to function component
  • Loading branch information
@deetergp
deetergp authored Jul 24, 2023
2 parents c3fd1ea + c282d1f commit c6dd3d9
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 127 deletions.
2 changes: 1 addition & 1 deletion src/libs/ReportUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2617,7 +2617,7 @@ function shouldDisableSettings(report) {
* @returns {Boolean}
*/
function shouldDisableRename(report, policy) {
if (isDefaultRoom(report) || isArchivedRoom(report)) {
if (isDefaultRoom(report) || isArchivedRoom(report) || isChatThread(report)) {
return true;
}

Expand Down
243 changes: 117 additions & 126 deletions src/pages/settings/Report/ReportSettingsPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React, {useMemo} from 'react';
import PropTypes from 'prop-types';
import {View, ScrollView} from 'react-native';
import {withOnyx} from 'react-native-onyx';
Expand All @@ -13,7 +13,7 @@ import * as Report from '../../../libs/actions/Report';
import * as ReportUtils from '../../../libs/ReportUtils';
import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
import ScreenWrapper from '../../../components/ScreenWrapper';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import useLocalize from '../../../hooks/useLocalize';
import Text from '../../../components/Text';
import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
import reportPropTypes from '../../reportPropTypes';
Expand All @@ -33,8 +33,6 @@ const propTypes = {
}),
}).isRequired,

...withLocalizePropTypes,

/* Onyx Props */

/** The active report */
Expand All @@ -54,154 +52,147 @@ const defaultProps = {
policies: {},
};

class ReportSettingsPage extends Component {
/**
* We only want policy owners and admins to be able to modify the welcome message.
*
* @param {Object|null} linkedWorkspace - the workspace the report is on, null if the user isn't a member of the workspace
* @returns {Boolean}
*/
shouldDisableWelcomeMessage(linkedWorkspace) {
return ReportUtils.isArchivedRoom(this.props.report) || !ReportUtils.isChatRoom(this.props.report) || _.isEmpty(linkedWorkspace) || linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN;
}
function ReportSettingsPage(props) {
const {report, policies} = props;
const {translate} = useLocalize();
// The workspace the report is on, null if the user isn't a member of the workspace
const linkedWorkspace = useMemo(() => _.find(policies, (policy) => policy && policy.id === report.policyID), [policies, report.policyID]);
const shouldDisableRename = useMemo(() => ReportUtils.shouldDisableRename(report, linkedWorkspace), [report, linkedWorkspace]);

// We only want policy owners and admins to be able to modify the welcome message.
const shouldDisableWelcomeMessage =
ReportUtils.isArchivedRoom(report) || !ReportUtils.isChatRoom(report) || _.isEmpty(linkedWorkspace) || linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN;

render() {
const shouldDisableSettings = ReportUtils.shouldDisableSettings(this.props.report);
const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(this.props.report) && !ReportUtils.isChatThread(this.props.report);
const linkedWorkspace = _.find(this.props.policies, (policy) => policy && policy.id === this.props.report.policyID);
const shouldDisableRename = ReportUtils.shouldDisableRename(this.props.report, linkedWorkspace) || ReportUtils.isChatThread(this.props.report);
const notificationPreference = this.props.translate(`notificationPreferencesPage.notificationPreferences.${this.props.report.notificationPreference}`);
const shouldDisableWelcomeMessage = this.shouldDisableWelcomeMessage(linkedWorkspace);
const writeCapability = ReportUtils.isAdminRoom(this.props.report)
? CONST.REPORT.WRITE_CAPABILITIES.ADMINS
: this.props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL;
const shouldDisableSettings = _.isEmpty(report) || ReportUtils.shouldDisableSettings(report);
const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(report) && !ReportUtils.isChatThread(report);
const notificationPreference = translate(`notificationPreferencesPage.notificationPreferences.${report.notificationPreference}`);
const writeCapability = ReportUtils.isAdminRoom(report) ? CONST.REPORT.WRITE_CAPABILITIES.ADMINS : report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL;

const writeCapabilityText = this.props.translate(`writeCapabilityPage.writeCapability.${writeCapability}`);
const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(this.props.report);
const writeCapabilityText = translate(`writeCapabilityPage.writeCapability.${writeCapability}`);
const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(report);

return (
<ScreenWrapper>
<FullPageNotFoundView shouldShow={_.isEmpty(this.props.report) || shouldDisableSettings}>
<HeaderWithBackButton
title={this.props.translate('common.settings')}
onBackButtonPress={() => Navigation.goBack(ROUTES.getReportDetailsRoute(this.props.report.reportID))}
return (
<ScreenWrapper>
<FullPageNotFoundView shouldShow={shouldDisableSettings}>
<HeaderWithBackButton
title={translate('common.settings')}
onBackButtonPress={() => Navigation.goBack(ROUTES.getReportDetailsRoute(report.reportID))}
/>
<ScrollView style={[styles.flex1]}>
<MenuItemWithTopDescription
shouldShowRightIcon
title={notificationPreference}
description={translate('notificationPreferencesPage.label')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsNotificationPreferencesRoute(report.reportID))}
/>
<ScrollView style={[styles.flex1]}>
{shouldShowRoomName && (
<OfflineWithFeedback
pendingAction={lodashGet(report, 'pendingFields.reportName', null)}
errors={lodashGet(report, 'errorFields.reportName', null)}
errorRowStyles={[styles.ph5]}
onClose={() => Report.clearPolicyRoomNameErrors(report.reportID)}
>
{shouldDisableRename ? (
<View style={[styles.ph5, styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{translate('newRoomPage.roomName')}
</Text>
<Text
numberOfLines={1}
style={[styles.optionAlternateText, styles.pre]}
>
{report.reportName}
</Text>
</View>
) : (
<MenuItemWithTopDescription
shouldShowRightIcon
title={report.reportName}
description={translate('newRoomPage.roomName')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsRoomNameRoute(report.reportID))}
/>
)}
</OfflineWithFeedback>
)}
{shouldAllowWriteCapabilityEditing ? (
<MenuItemWithTopDescription
shouldShowRightIcon
title={notificationPreference}
description={this.props.translate('notificationPreferencesPage.label')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsNotificationPreferencesRoute(this.props.report.reportID))}
title={writeCapabilityText}
description={translate('writeCapabilityPage.label')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsWriteCapabilityRoute(report.reportID))}
/>
{shouldShowRoomName && (
<OfflineWithFeedback
pendingAction={lodashGet(this.props.report, 'pendingFields.reportName', null)}
errors={lodashGet(this.props.report, 'errorFields.reportName', null)}
errorRowStyles={[styles.ph5]}
onClose={() => Report.clearPolicyRoomNameErrors(this.props.report.reportID)}
) : (
<View style={[styles.ph5, styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{shouldDisableRename ? (
<View style={[styles.ph5, styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{this.props.translate('newRoomPage.roomName')}
</Text>
<Text
numberOfLines={1}
style={[styles.optionAlternateText, styles.pre]}
>
{this.props.report.reportName}
</Text>
</View>
) : (
<MenuItemWithTopDescription
shouldShowRightIcon
title={this.props.report.reportName}
description={this.props.translate('newRoomPage.roomName')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsRoomNameRoute(this.props.report.reportID))}
/>
)}
</OfflineWithFeedback>
)}
{shouldAllowWriteCapabilityEditing ? (
<MenuItemWithTopDescription
shouldShowRightIcon
title={writeCapabilityText}
description={this.props.translate('writeCapabilityPage.label')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsWriteCapabilityRoute(this.props.report.reportID))}
/>
) : (
<View style={[styles.ph5, styles.pv3]}>
{translate('writeCapabilityPage.label')}
</Text>
<Text
numberOfLines={1}
style={[styles.optionAlternateText, styles.pre]}
>
{writeCapabilityText}
</Text>
</View>
)}
<View style={[styles.ph5]}>
{Boolean(linkedWorkspace) && (
<View style={[styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{this.props.translate('writeCapabilityPage.label')}
{translate('workspace.common.workspace')}
</Text>
<Text
numberOfLines={1}
style={[styles.optionAlternateText, styles.pre]}
>
{writeCapabilityText}
{linkedWorkspace.name}
</Text>
</View>
)}
<View style={[styles.ph5]}>
{Boolean(linkedWorkspace) && (
<View style={[styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{this.props.translate('workspace.common.workspace')}
</Text>
<Text
numberOfLines={1}
style={[styles.optionAlternateText, styles.pre]}
>
{linkedWorkspace.name}
</Text>
</View>
)}
{Boolean(this.props.report.visibility) && (
<View style={[styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{this.props.translate('newRoomPage.visibility')}
</Text>
<Text
numberOfLines={1}
style={[styles.reportSettingsVisibilityText]}
>
{this.props.translate(`newRoomPage.visibilityOptions.${this.props.report.visibility}`)}
</Text>
<Text style={[styles.textLabelSupporting, styles.mt1]}>{this.props.translate(`newRoomPage.${this.props.report.visibility}Description`)}</Text>
</View>
)}
</View>
{!shouldDisableWelcomeMessage && (
<MenuItem
title={this.props.translate('welcomeMessagePage.welcomeMessage')}
icon={Expensicons.ChatBubble}
onPress={() => Navigation.navigate(ROUTES.getReportWelcomeMessageRoute(this.props.report.reportID))}
shouldShowRightIcon
/>
{Boolean(report.visibility) && (
<View style={[styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{translate('newRoomPage.visibility')}
</Text>
<Text
numberOfLines={1}
style={[styles.reportSettingsVisibilityText]}
>
{translate(`newRoomPage.visibilityOptions.${report.visibility}`)}
</Text>
<Text style={[styles.textLabelSupporting, styles.mt1]}>{translate(`newRoomPage.${report.visibility}Description`)}</Text>
</View>
)}
</ScrollView>
</FullPageNotFoundView>
</ScreenWrapper>
);
}
</View>
{!shouldDisableWelcomeMessage && (
<MenuItem
title={translate('welcomeMessagePage.welcomeMessage')}
icon={Expensicons.ChatBubble}
onPress={() => Navigation.navigate(ROUTES.getReportWelcomeMessageRoute(report.reportID))}
shouldShowRightIcon
/>
)}
</ScrollView>
</FullPageNotFoundView>
</ScreenWrapper>
);
}

ReportSettingsPage.propTypes = propTypes;
ReportSettingsPage.defaultProps = defaultProps;
ReportSettingsPage.displayName = 'ReportSettingsPage';
export default compose(
withLocalize,
withReportOrNotFound,
withOnyx({
policies: {
Expand Down

0 comments on commit c6dd3d9

Please sign in to comment.