Determine whether power level is custom once Roles have been determined

Instead of potentially inspecting an empty {} before mounting.

This fixes an issue where "Custom of N" would appear on the first mount of MemberInfo - part of https://github.com/vector-im/riot-web/issues/5107#issuecomment-331882294
This commit is contained in:
Luke Barnard 2017-11-13 11:57:34 +00:00
parent 4b206a0117
commit 88010fa26c

View file

@ -20,9 +20,6 @@ import React from 'react';
import * as Roles from '../../../Roles'; import * as Roles from '../../../Roles';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
let LEVEL_ROLE_MAP = {};
const reverseRoles = {};
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'PowerSelector', displayName: 'PowerSelector',
@ -43,15 +40,23 @@ module.exports = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
custom: (LEVEL_ROLE_MAP[this.props.value] === undefined), levelRoleMap: {},
reverseRoles: {},
}; };
}, },
componentWillMount: function() { componentWillMount: function() {
LEVEL_ROLE_MAP = Roles.levelRoleMap(); // This needs to be done now because levelRoleMap has translated strings
Object.keys(LEVEL_ROLE_MAP).forEach(function(key) { const levelRoleMap = Roles.levelRoleMap();
reverseRoles[LEVEL_ROLE_MAP[key]] = key; const reverseRoles = {};
}); Object.keys(levelRoleMap).forEach(function(key) {
reverseRoles[levelRoleMap[key]] = key;
});
this.setState({
levelRoleMap,
reverseRoles,
custom: levelRoleMap[this.props.value] === undefined,
});
}, },
onSelectChange: function(event) { onSelectChange: function(event) {
@ -74,7 +79,7 @@ module.exports = React.createClass({
getValue: function() { getValue: function() {
let value; let value;
if (this.refs.select) { if (this.refs.select) {
value = reverseRoles[this.refs.select.value]; value = this.state.reverseRoles[this.refs.select.value];
if (this.refs.custom) { if (this.refs.custom) {
if (value === undefined) value = parseInt( this.refs.custom.value ); if (value === undefined) value = parseInt( this.refs.custom.value );
} }
@ -98,17 +103,17 @@ module.exports = React.createClass({
if (this.state.custom) { if (this.state.custom) {
selectValue = "Custom"; selectValue = "Custom";
} else { } else {
selectValue = LEVEL_ROLE_MAP[this.props.value] || "Custom"; selectValue = this.state.levelRoleMap[this.props.value] || "Custom";
} }
let select; let select;
if (this.props.disabled) { if (this.props.disabled) {
select = <span>{ selectValue }</span>; select = <span>{ selectValue }</span>;
} else { } else {
// Each level must have a definition in LEVEL_ROLE_MAP // Each level must have a definition in this.state.levelRoleMap
const levels = [0, 50, 100]; const levels = [0, 50, 100];
let options = levels.map((level) => { let options = levels.map((level) => {
return { return {
value: LEVEL_ROLE_MAP[level], value: this.state.levelRoleMap[level],
// Give a userDefault (users_default in the power event) of 0 but // Give a userDefault (users_default in the power event) of 0 but
// because level !== undefined, this should never be used. // because level !== undefined, this should never be used.
text: Roles.textualPowerLevel(level, 0), text: Roles.textualPowerLevel(level, 0),