diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 361610266b42..c59b6687a809 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -1,11 +1,10 @@
-import React from 'react';
+import React, {useState, useCallback, useMemo, useEffect} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
import * as Report from '../../libs/actions/Report';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import compose from '../../libs/compose';
+import useLocalize from '../../hooks/useLocalize';
import HeaderWithBackButton from '../../components/HeaderWithBackButton';
import Navigation from '../../libs/Navigation/Navigation';
import ScreenWrapper from '../../components/ScreenWrapper';
@@ -55,8 +54,6 @@ const propTypes = {
/** A collection of objects for all policies which key policy member objects by accountIDs */
allPolicyMembers: PropTypes.objectOf(PropTypes.objectOf(policyMemberPropType)),
-
- ...withLocalizePropTypes,
};
const defaultProps = {
betas: [],
@@ -65,151 +62,145 @@ const defaultProps = {
allPolicyMembers: {},
};
-class WorkspaceNewRoomPage extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- visibilityDescription: this.props.translate('newRoomPage.restrictedDescription'),
- };
-
- this.validate = this.validate.bind(this);
- this.submit = this.submit.bind(this);
- this.updateVisibilityDescription = this.updateVisibilityDescription.bind(this);
- }
+function WorkspaceNewRoomPage(props) {
+ const {translate} = useLocalize();
+ const [visibility, setVisibility] = useState(CONST.REPORT.VISIBILITY.RESTRICTED);
+ const visibilityDescription = useMemo(() => translate(`newRoomPage.${visibility}Description`), [translate, visibility]);
/**
* @param {Object} values - form input values passed by the Form component
*/
- submit(values) {
- const policyMembers = _.map(_.keys(this.props.allPolicyMembers[`${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${values.policyID}`]), (accountID) => Number(accountID));
+ const submit = (values) => {
+ const policyMembers = _.map(_.keys(props.allPolicyMembers[`${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${values.policyID}`]), (accountID) => Number(accountID));
Report.addPolicyReport(values.policyID, values.roomName, values.visibility, policyMembers);
- }
-
- /**
- * @param {String} visibility - form input value passed by the Form component
- */
- updateVisibilityDescription(visibility) {
- const visibilityDescription = this.props.translate(`newRoomPage.${visibility}Description`);
- if (visibilityDescription === this.state.visibilityDescription) {
- return;
- }
- this.setState({visibilityDescription});
- }
+ };
/**
* @param {Object} values - form input values passed by the Form component
* @returns {Boolean}
*/
- validate(values) {
- const errors = {};
-
- if (!values.roomName || values.roomName === CONST.POLICY.ROOM_PREFIX) {
- // We error if the user doesn't enter a room name or left blank
- ErrorUtils.addErrorMessage(errors, 'roomName', 'newRoomPage.pleaseEnterRoomName');
- } else if (values.roomName !== CONST.POLICY.ROOM_PREFIX && !ValidationUtils.isValidRoomName(values.roomName)) {
- // We error if the room name has invalid characters
- ErrorUtils.addErrorMessage(errors, 'roomName', 'newRoomPage.roomNameInvalidError');
- } else if (ValidationUtils.isReservedRoomName(values.roomName)) {
- // Certain names are reserved for default rooms and should not be used for policy rooms.
- ErrorUtils.addErrorMessage(errors, 'roomName', ['newRoomPage.roomNameReservedError', {reservedName: values.roomName}]);
- } else if (ValidationUtils.isExistingRoomName(values.roomName, this.props.reports, values.policyID)) {
- // Certain names are reserved for default rooms and should not be used for policy rooms.
- ErrorUtils.addErrorMessage(errors, 'roomName', 'newRoomPage.roomAlreadyExistsError');
- }
-
- if (!values.policyID) {
- errors.policyID = 'newRoomPage.pleaseSelectWorkspace';
+ const validate = useCallback(
+ (values) => {
+ const errors = {};
+
+ if (!values.roomName || values.roomName === CONST.POLICY.ROOM_PREFIX) {
+ // We error if the user doesn't enter a room name or left blank
+ ErrorUtils.addErrorMessage(errors, 'roomName', 'newRoomPage.pleaseEnterRoomName');
+ } else if (values.roomName !== CONST.POLICY.ROOM_PREFIX && !ValidationUtils.isValidRoomName(values.roomName)) {
+ // We error if the room name has invalid characters
+ ErrorUtils.addErrorMessage(errors, 'roomName', 'newRoomPage.roomNameInvalidError');
+ } else if (ValidationUtils.isReservedRoomName(values.roomName)) {
+ // Certain names are reserved for default rooms and should not be used for policy rooms.
+ ErrorUtils.addErrorMessage(errors, 'roomName', ['newRoomPage.roomNameReservedError', {reservedName: values.roomName}]);
+ } else if (ValidationUtils.isExistingRoomName(values.roomName, props.reports, values.policyID)) {
+ // Certain names are reserved for default rooms and should not be used for policy rooms.
+ ErrorUtils.addErrorMessage(errors, 'roomName', 'newRoomPage.roomAlreadyExistsError');
+ }
+
+ if (!values.policyID) {
+ errors.policyID = 'newRoomPage.pleaseSelectWorkspace';
+ }
+
+ return errors;
+ },
+ [props.reports],
+ );
+
+ // Workspaces are policies with type === 'free'
+ const workspaceOptions = useMemo(
+ () =>
+ _.map(
+ _.filter(props.policies, (policy) => policy && policy.type === CONST.POLICY.TYPE.FREE),
+ (policy) => ({label: policy.name, key: policy.id, value: policy.id}),
+ ),
+ [props.policies],
+ );
+
+ const visibilityOptions = useMemo(
+ () =>
+ _.map(
+ _.filter(_.values(CONST.REPORT.VISIBILITY), (visibilityOption) => visibilityOption !== CONST.REPORT.VISIBILITY.PUBLIC_ANNOUNCE),
+ (visibilityOption) => ({
+ label: translate(`newRoomPage.visibilityOptions.${visibilityOption}`),
+ value: visibilityOption,
+ description: translate(`newRoomPage.${visibilityOption}Description`),
+ }),
+ ),
+ [translate],
+ );
+
+ useEffect(() => {
+ if (Permissions.canUsePolicyRooms(props.betas)) {
+ return;
}
+ Log.info('Not showing create Policy Room page since user is not on policy rooms beta');
+ Navigation.dismissModal();
+ }, [props.betas]);
- return errors;
+ if (!Permissions.canUsePolicyRooms(props.betas)) {
+ return null;
}
- render() {
- if (!Permissions.canUsePolicyRooms(this.props.betas)) {
- Log.info('Not showing create Policy Room page since user is not on policy rooms beta');
- Navigation.dismissModal();
- return null;
- }
-
- // Workspaces are policies with type === 'free'
- const workspaceOptions = _.map(
- _.filter(this.props.policies, (policy) => policy && policy.type === CONST.POLICY.TYPE.FREE),
- (policy) => ({label: policy.name, key: policy.id, value: policy.id}),
- );
-
- const visibilityOptions = _.map(
- _.filter(_.values(CONST.REPORT.VISIBILITY), (visibilityOption) => visibilityOption !== CONST.REPORT.VISIBILITY.PUBLIC_ANNOUNCE),
- (visibilityOption) => ({
- label: this.props.translate(`newRoomPage.visibilityOptions.${visibilityOption}`),
- value: visibilityOption,
- description: this.props.translate(`newRoomPage.${visibilityOption}Description`),
- }),
- );
-
- return (
-
+
+
-
- );
- }
+
+
+
+
+
+
+
+
+
+ {visibilityDescription}
+
+
+ );
}
WorkspaceNewRoomPage.propTypes = propTypes;
WorkspaceNewRoomPage.defaultProps = defaultProps;
-
-export default compose(
- withOnyx({
- betas: {
- key: ONYXKEYS.BETAS,
- },
- policies: {
- key: ONYXKEYS.COLLECTION.POLICY,
- },
- reports: {
- key: ONYXKEYS.COLLECTION.REPORT,
- },
- allPolicyMembers: {
- key: ONYXKEYS.COLLECTION.POLICY_MEMBERS,
- },
- }),
- withLocalize,
-)(WorkspaceNewRoomPage);
+WorkspaceNewRoomPage.displayName = 'WorkspaceNewRoomPage';
+
+export default withOnyx({
+ betas: {
+ key: ONYXKEYS.BETAS,
+ },
+ policies: {
+ key: ONYXKEYS.COLLECTION.POLICY,
+ },
+ reports: {
+ key: ONYXKEYS.COLLECTION.REPORT,
+ },
+ allPolicyMembers: {
+ key: ONYXKEYS.COLLECTION.POLICY_MEMBERS,
+ },
+})(WorkspaceNewRoomPage);