Skip to content
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

Jump to bottom

Migrate/workspacelistpage issue/16310 #22248

Merged
merged 3 commits into from
Jul 18, 2023
Merged

Migrate/workspacelistpage issue/16310 #22248

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6525fe
migrated to function component
code0406 Jul 4, 2023
92e7007
fixed eslint
code0406 Jul 4, 2023
ef8fcb9
useMemo to improve the performance
code0406 Jul 4, 2023
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
123 changes: 56 additions & 67 deletions src/pages/workspace/WorkspacesListPage.js
View file
Open in desktop
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 {ScrollView} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -99,46 +99,13 @@ function dismissWorkspaceError(policyID, pendingAction) {
throw new Error('Not implemented');
}

class WorkspacesListPage extends Component {
constructor(props) {
super(props);

this.getWalletBalance = this.getWalletBalance.bind(this);
this.getWorkspaces = this.getWorkspaces.bind(this);
this.getMenuItem = this.getMenuItem.bind(this);
}

function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, userWallet, betas, network, translate}) {
/**
* @param {Boolean} isPaymentItem whether the item being rendered is the payments menu item
* @returns {Number} the user wallet balance
*/
getWalletBalance(isPaymentItem) {
return isPaymentItem && Permissions.canUseWallet(this.props.betas) ? CurrencyUtils.convertToDisplayString(this.props.userWallet.currentBalance) : undefined;
}

/**
* Add free policies (workspaces) to the list of menu items and returns the list of menu items
* @returns {Array} the menu item list
*/
getWorkspaces() {
const reimbursementAccountBrickRoadIndicator = !_.isEmpty(this.props.reimbursementAccount.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
return _.chain(this.props.policies)
.filter((policy) => PolicyUtils.shouldShowPolicy(policy, this.props.network.isOffline))
.map((policy) => ({
title: policy.name,
icon: policy.avatar ? policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policy.name),
iconType: policy.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON,
action: () => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policy.id)),
iconFill: themeColors.textLight,
fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
brickRoadIndicator: reimbursementAccountBrickRoadIndicator || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, this.props.allPolicyMembers),
pendingAction: policy.pendingAction,
errors: policy.errors,
dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction),
disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
}))
.sortBy((policy) => policy.title.toLowerCase())
.value();
function getWalletBalance(isPaymentItem) {
return isPaymentItem && Permissions.canUseWallet(betas) ? CurrencyUtils.convertToDisplayString(userWallet.currentBalance) : undefined;
hayata-suenaga marked this conversation as resolved.
Show resolved Hide resolved
}

/**
Expand All @@ -148,8 +115,8 @@ class WorkspacesListPage extends Component {
* @param {Number} index
* @returns {JSX}
*/
getMenuItem(item, index) {
const keyTitle = item.translationKey ? this.props.translate(item.translationKey) : item.title;
function getMenuItem(item, index) {
const keyTitle = item.translationKey ? translate(item.translationKey) : item.title;
const isPaymentItem = item.translationKey === 'common.payments';

return (
Expand All @@ -168,7 +135,7 @@ class WorkspacesListPage extends Component {
iconStyles={item.iconStyles}
iconFill={item.iconFill}
shouldShowRightIcon
badgeText={this.getWalletBalance(isPaymentItem)}
badgeText={getWalletBalance(isPaymentItem)}
fallbackIcon={item.fallbackIcon}
brickRoadIndicator={item.brickRoadIndicator}
disabled={item.disabled}
Expand All @@ -177,34 +144,56 @@ class WorkspacesListPage extends Component {
);
}

render() {
const workspaces = this.getWorkspaces();
return (
<ScreenWrapper>
<HeaderWithBackButton
title={this.props.translate('common.workspaces')}
onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
/**
* Add free policies (workspaces) to the list of menu items and returns the list of menu items
* @returns {Array} the menu item list
*/
const workspaces = useMemo(() => {
const reimbursementAccountBrickRoadIndicator = !_.isEmpty(reimbursementAccount.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
return _.chain(policies)
.filter((policy) => PolicyUtils.shouldShowPolicy(policy, network.isOffline))
.map((policy) => ({
title: policy.name,
icon: policy.avatar ? policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policy.name),
iconType: policy.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON,
action: () => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policy.id)),
iconFill: themeColors.textLight,
fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
brickRoadIndicator: reimbursementAccountBrickRoadIndicator || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, allPolicyMembers),
pendingAction: policy.pendingAction,
errors: policy.errors,
dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction),
disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
}))
.sortBy((policy) => policy.title.toLowerCase())
.value();
}, [reimbursementAccount.errors, policies, network.isOffline, allPolicyMembers]);

return (
<ScreenWrapper>
<HeaderWithBackButton
title={translate('common.workspaces')}
onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
Copy link
Contributor

Choose a reason for hiding this comment

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

NAB: There's already useLocalize hook for function component but this is not standardized yet and many function components are still using withLocalize HOC. Maybe one day we need to replace all withLocalize occurrences with useLocalize.

Copy link
Contributor

Choose a reason for hiding this comment

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

I know we haven't officially discussed this in slack but I've been asking everyone to use the hooks going forward.

/>
{_.isEmpty(workspaces) ? (
<BlockingView
icon={Expensicons.Building}
title={translate('workspace.emptyWorkspace.title')}
subtitle={translate('workspace.emptyWorkspace.subtitle')}
/>
{_.isEmpty(workspaces) ? (
<BlockingView
icon={Expensicons.Building}
title={this.props.translate('workspace.emptyWorkspace.title')}
subtitle={this.props.translate('workspace.emptyWorkspace.subtitle')}
/>
) : (
<ScrollView style={styles.flex1}>{_.map(workspaces, (item, index) => this.getMenuItem(item, index))}</ScrollView>
)}
<FixedFooter style={[styles.flexGrow0]}>
<Button
accessibilityLabel={this.props.translate('workspace.new.newWorkspace')}
success
text={this.props.translate('workspace.new.newWorkspace')}
onPress={() => Policy.createWorkspace()}
/>
</FixedFooter>
</ScreenWrapper>
);
}
) : (
<ScrollView style={styles.flex1}>{_.map(workspaces, (item, index) => getMenuItem(item, index))}</ScrollView>
)}
<FixedFooter style={[styles.flexGrow0]}>
<Button
accessibilityLabel={translate('workspace.new.newWorkspace')}
success
text={translate('workspace.new.newWorkspace')}
onPress={() => Policy.createWorkspace()}
/>
</FixedFooter>
</ScreenWrapper>
);
}

WorkspacesListPage.propTypes = propTypes;
Expand Down
Loading