Refactor roles into Roles.js

So that the mapping between a numerical power level and a "role" are done in one place. PowerSelector.js has been modified to use the same mapping.

src/Roles.js

@@ -0,0 +1,29 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+export const LEVEL_ROLE_MAP = {
+    undefined: 'Default',
+    0: 'User',
+    50: 'Moderator',
+    100: 'Admin',
+};
+
+export function textualPowerLevel(level, userDefault) {
+    if (LEVEL_ROLE_MAP[level]) {
+        return LEVEL_ROLE_MAP[level] + (level !== undefined ? ` (${level})` : ` (${userDefault})`);
+    } else {
+        return level;
+    }
+}

src/TextForEvent.js

@@ -17,12 +17,7 @@ limitations under the License.
 var MatrixClientPeg = require("./MatrixClientPeg");
 var CallHandler = require("./CallHandler");
 
-const roles = {
+import * as Roles from './Roles';
-    undefined: 'Default',
-    0: 'User',
-    50: 'Moderator',
-    100: 'Admin',
-};
 
 function textForMemberEvent(ev) {
     // XXX: SYJS-16 "sender is sometimes null for join messages"
@@ -189,14 +184,6 @@ function textForEncryptionEvent(event) {
     return senderName + " turned on end-to-end encryption (algorithm " + event.getContent().algorithm + ")";
 }
 
-function formatPowerLevel(level, roles, userDefault) {
-    if (roles[level]) {
-        return roles[level] + (level !== undefined ? ` (${level})` : ` (${userDefault})`);
-    } else {
-        return level;
-    }
-}
-
 // Currently will only display a change if a user's power level is changed
 function textForPowerEvent(event) {
     const senderName = event.sender ? event.sender.name : event.getSender();
@@ -225,8 +212,8 @@ function textForPowerEvent(event) {
         if (to !== from) {
             diff.push(
                 userId +
-                ' from ' + formatPowerLevel(from, roles, userDefault) +
+                ' from ' + Roles.textualPowerLevel(from, userDefault) +
-                ' to ' + formatPowerLevel(to, roles, userDefault)
+                ' to ' + Roles.textualPowerLevel(to, userDefault)
             );
         }
     });

src/components/views/elements/PowerSelector.js

@@ -16,17 +16,12 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+import React from 'react';
-
+import * as Roles from '../../../Roles';
-var roles = {
-    0: 'User',
-    50: 'Moderator',
-    100: 'Admin',
-};
 
 var reverseRoles = {};
-Object.keys(roles).forEach(function(key) {
+Object.keys(Roles.LEVEL_ROLE_MAP).forEach(function(key) {
-    reverseRoles[roles[key]] = key;
+    reverseRoles[Roles.LEVEL_ROLE_MAP[key]] = key;
 });
 
 module.exports = React.createClass({
@@ -49,7 +44,7 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            custom: (roles[this.props.value] === undefined),
+            custom: (Roles.LEVEL_ROLE_MAP[this.props.value] === undefined),
         };
     },
 
@@ -99,22 +94,34 @@ module.exports = React.createClass({
             selectValue = "Custom";
         }
         else {
-            selectValue = roles[this.props.value] || "Custom";
+            selectValue = Roles.LEVEL_ROLE_MAP[this.props.value] || "Custom";
         }
         var select;
         if (this.props.disabled) {
             select = <span>{ selectValue }</span>;
         }
         else {
+            // Each level must have a definition in LEVEL_ROLE_MAP
+            const levels = [0, 50, 100];
+            let options = levels.map((level) => {
+                return {
+                    value: Roles.LEVEL_ROLE_MAP[level],
+                    // Give a userDefault (users_default in the power event) of 0 but
+                    // because level !== undefined, this should never be used.
+                    text: Roles.textualPowerLevel(level, 0),
+                }
+            });
+            options.push({ value: "Custom", text: "Custom level" });
+            options = options.map((op) => {
+                return <option value={op.value}>{op.text}</option>;
+            });
+
             select =
                 <select ref="select"
                         value={ this.props.controlled ? selectValue : undefined }
                         defaultValue={ !this.props.controlled ? selectValue : undefined }
                         onChange={ this.onSelectChange }>
-                    <option value="User">User (0)</option>
+                    { options }
-                    <option value="Moderator">Moderator (50)</option>
-                    <option value="Admin">Admin (100)</option>
-                    <option value="Custom">Custom level</option>
                 </select>;
         }