Run eslint --fix

Fixing 1000s of lint issues. Some rules cannot be `--fix`ed but this goes some way to linting the entire codebase.

src/components/views/elements/AccessibleButton.js

@@ -32,7 +32,7 @@ export default function AccessibleButton(props) {
     };
     restProps.tabIndex = restProps.tabIndex || "0";
     restProps.role = "button";
-    restProps.className = (restProps.className ? restProps.className + " " : "") + 
+    restProps.className = (restProps.className ? restProps.className + " " : "") +
                           "mx_AccessibleButton";
     return React.createElement(element, restProps, children);
 }

src/components/views/elements/ActionButton.js

@@ -79,8 +79,8 @@ export default React.createClass({
                 onMouseLeave={this._onMouseLeave}
             >
                 <TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />
-                {tooltip}
+                { tooltip }
             </AccessibleButton>
         );
-    }
+    },
 });

src/components/views/elements/AddressSelector.js

@@ -46,8 +46,8 @@ export default React.createClass({
 
     componentWillReceiveProps: function(props) {
         // Make sure the selected item isn't outside the list bounds
-        var selected = this.state.selected;
-        var maxSelected = this._maxSelected(props.addressList);
+        const selected = this.state.selected;
+        const maxSelected = this._maxSelected(props.addressList);
         if (selected > maxSelected) {
             this.setState({ selected: maxSelected });
         }
@@ -57,7 +57,7 @@ export default React.createClass({
         // As the user scrolls with the arrow keys keep the selected item
         // at the top of the window.
         if (this.scrollElement && this.props.addressList.length > 0 && !this.state.hover) {
-            var elementHeight = this.addressListElement.getBoundingClientRect().height;
+            const elementHeight = this.addressListElement.getBoundingClientRect().height;
             this.scrollElement.scrollTop = (this.state.selected * elementHeight) - elementHeight;
         }
     },
@@ -75,7 +75,7 @@ export default React.createClass({
         if (this.state.selected > 0) {
             this.setState({
                 selected: this.state.selected - 1,
-                hover : false,
+                hover: false,
             });
         }
     },
@@ -84,7 +84,7 @@ export default React.createClass({
         if (this.state.selected < this._maxSelected(this.props.addressList)) {
             this.setState({
                 selected: this.state.selected + 1,
-                hover : false,
+                hover: false,
             });
         }
     },
@@ -105,7 +105,7 @@ export default React.createClass({
     },
 
     onMouseLeave: function() {
-        this.setState({ hover : false });
+        this.setState({ hover: false });
     },
 
     selectAddress: function(index) {
@@ -117,15 +117,15 @@ export default React.createClass({
     },
 
     createAddressListTiles: function() {
-        var self = this;
-        var AddressTile = sdk.getComponent("elements.AddressTile");
-        var maxSelected = this._maxSelected(this.props.addressList);
-        var addressList = [];
+        const self = this;
+        const AddressTile = sdk.getComponent("elements.AddressTile");
+        const maxSelected = this._maxSelected(this.props.addressList);
+        const addressList = [];
 
         // Only create the address elements if there are address
         if (this.props.addressList.length > 0) {
-            for (var i = 0; i <= maxSelected; i++) {
-                var classes = classNames({
+            for (let i = 0; i <= maxSelected; i++) {
+                const classes = classNames({
                     "mx_AddressSelector_addressListElement": true,
                     "mx_AddressSelector_selected": this.state.selected === i,
                 });
@@ -143,7 +143,7 @@ export default React.createClass({
                         ref={(ref) => { this.addressListElement = ref; }}
                     >
                         <AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
-                    </div>
+                    </div>,
                 );
             }
         }
@@ -151,13 +151,13 @@ export default React.createClass({
     },
 
     _maxSelected: function(list) {
-        var listSize = list.length === 0 ? 0 : list.length - 1;
-        var maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize;
+        const listSize = list.length === 0 ? 0 : list.length - 1;
+        const maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize;
         return maxSelected;
     },
 
     render: function() {
-        var classes = classNames({
+        const classes = classNames({
             "mx_AddressSelector": true,
             "mx_AddressSelector_empty": this.props.addressList.length === 0,
         });
@@ -168,5 +168,5 @@ export default React.createClass({
                 { this.createAddressListTiles() }
             </div>
         );
-    }
+    },
 });

src/components/views/elements/AddressTile.js

@@ -107,24 +107,24 @@ export default React.createClass({
 
             let nameNode = null;
             if (address.displayName) {
-                nameNode = <div className={nameClasses}>{ address.displayName }</div>
+                nameNode = <div className={nameClasses}>{ address.displayName }</div>;
             }
 
             info = (
                 <div className="mx_AddressTile_mx">
                     <div className={emailClasses}>{ address.address }</div>
-                    {nameNode}
+                    { nameNode }
                 </div>
             );
         } else {
             error = true;
-            var unknownClasses = classNames({
+            const unknownClasses = classNames({
                 "mx_AddressTile_unknown": true,
                 "mx_AddressTile_justified": this.props.justified,
             });
 
             info = (
-                <div className={unknownClasses}>{_t("Unknown Address")}</div>
+                <div className={unknownClasses}>{ _t("Unknown Address") }</div>
             );
         }
 
@@ -151,5 +151,5 @@ export default React.createClass({
                 { dismiss }
             </div>
         );
-    }
+    },
 });

src/components/views/elements/CreateRoomButton.js

@@ -24,7 +24,7 @@ const CreateRoomButton = function(props) {
     return (
         <ActionButton action="view_create_room"
             mouseOverAction={props.callout ? "callout_create_room" : null}
-            label={ _t("Create new room") }
+            label={_t("Create new room")}
             iconPath="img/icons-create-room.svg"
             size={props.size}
             tooltip={props.tooltip}

src/components/views/elements/DeviceVerifyButtons.js

@@ -30,7 +30,7 @@ export default React.createClass({
 
     getInitialState: function() {
         return {
-            device: this.props.device
+            device: this.props.device,
         };
     },
 
@@ -60,37 +60,37 @@ export default React.createClass({
 
     onUnverifyClick: function() {
         MatrixClientPeg.get().setDeviceVerified(
-            this.props.userId, this.state.device.deviceId, false
+            this.props.userId, this.state.device.deviceId, false,
         );
     },
 
     onBlacklistClick: function() {
         MatrixClientPeg.get().setDeviceBlocked(
-            this.props.userId, this.state.device.deviceId, true
+            this.props.userId, this.state.device.deviceId, true,
         );
     },
 
     onUnblacklistClick: function() {
         MatrixClientPeg.get().setDeviceBlocked(
-            this.props.userId, this.state.device.deviceId, false
+            this.props.userId, this.state.device.deviceId, false,
         );
     },
 
     render: function() {
-        var blacklistButton = null, verifyButton = null;
+        let blacklistButton = null, verifyButton = null;
 
         if (this.state.device.isBlocked()) {
             blacklistButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblacklist"
                   onClick={this.onUnblacklistClick}>
-                    {_t("Unblacklist")}
+                    { _t("Unblacklist") }
                 </button>
             );
         } else {
             blacklistButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_blacklist"
                   onClick={this.onBlacklistClick}>
-                    {_t("Blacklist")}
+                    { _t("Blacklist") }
                 </button>
             );
         }
@@ -99,14 +99,14 @@ export default React.createClass({
             verifyButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unverify"
                   onClick={this.onUnverifyClick}>
-                    {_t("Unverify")}
+                    { _t("Unverify") }
                 </button>
             );
         } else {
             verifyButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
                   onClick={this.onVerifyClick}>
-                    {_t("Verify...")}
+                    { _t("Verify...") }
                 </button>
             );
         }

src/components/views/elements/DirectorySearchBox.js

@@ -95,7 +95,7 @@ export default class DirectorySearchBox extends React.Component {
                     onChange={this._onChange} onKeyUp={this._onKeyUp}
                     placeholder={this.props.placeholder} autoFocus
                 />
-                {join_button}
+                { join_button }
                 <span className="mx_DirectorySearchBox_clear_wrapper">
                     <span className="mx_DirectorySearchBox_clear" onClick={this._onClearClick} />
                 </span>

src/components/views/elements/Dropdown.js

@@ -29,7 +29,7 @@ class MenuOption extends React.Component {
     getDefaultProps() {
         return {
             disabled: false,
-        }
+        };
     }
 
     _onMouseEnter() {
@@ -52,15 +52,15 @@ class MenuOption extends React.Component {
             onClick={this._onClick} onKeyPress={this._onKeyPress}
             onMouseEnter={this._onMouseEnter}
         >
-            {this.props.children}
-        </div>
+            { this.props.children }
+        </div>;
     }
-};
+}
 
 MenuOption.propTypes = {
     children: React.PropTypes.oneOfType([
       React.PropTypes.arrayOf(React.PropTypes.node),
-      React.PropTypes.node
+      React.PropTypes.node,
     ]),
     highlighted: React.PropTypes.bool,
     dropdownKey: React.PropTypes.string,
@@ -258,13 +258,13 @@ export default class Dropdown extends React.Component {
                     onMouseEnter={this._setHighlightedOption}
                     onClick={this._onMenuOptionClick}
                 >
-                    {child}
+                    { child }
                 </MenuOption>
             );
         });
         if (options.length === 0) {
             return [<div key="0" className="mx_Dropdown_option">
-                {_t("No results")}
+                { _t("No results") }
             </div>];
         }
         return options;
@@ -287,7 +287,7 @@ export default class Dropdown extends React.Component {
                 />;
             }
             menu = <div className="mx_Dropdown_menu" style={menuStyle}>
-                {this._getMenuOptions()}
+                { this._getMenuOptions() }
             </div>;
         }
 
@@ -296,8 +296,8 @@ export default class Dropdown extends React.Component {
                 this.props.getShortOption(this.props.value) :
                 this.childrenByKey[this.props.value];
             currentValue = <div className="mx_Dropdown_option">
-                {selectedChild}
-            </div>
+                { selectedChild }
+            </div>;
         }
 
         const dropdownClasses = {
@@ -312,9 +312,9 @@ export default class Dropdown extends React.Component {
         // to the input, but overflows below it. The root contains both.
         return <div className={classnames(dropdownClasses)} ref={this._collectRoot}>
             <AccessibleButton className="mx_Dropdown_input" onClick={this._onInputClick}>
-                {currentValue}
+                { currentValue }
                 <span className="mx_Dropdown_arrow"></span>
-                {menu}
+                { menu }
             </AccessibleButton>
         </div>;
     }
@@ -340,4 +340,4 @@ Dropdown.propTypes = {
     value: React.PropTypes.string,
     // negative for consistency with HTML
     disabled: React.PropTypes.bool,
-}
+};

src/components/views/elements/EditableText.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
 
 const KEY_TAB = 9;
 const KEY_SHIFT = 16;
@@ -95,8 +95,7 @@ module.exports = React.createClass({
             this.refs.editable_div.setAttribute("class", this.props.className + " " + this.props.placeholderClassName);
             this.placeholder = true;
             this.value = '';
-        }
-        else {
+        } else {
             this.refs.editable_div.textContent = this.value;
             this.refs.editable_div.setAttribute("class", this.props.className);
             this.placeholder = false;
@@ -152,8 +151,7 @@ module.exports = React.createClass({
 
         if (!ev.target.textContent) {
             this.showPlaceholder(true);
-        }
-        else if (!this.placeholder) {
+        } else if (!this.placeholder) {
             this.value = ev.target.textContent;
         }
 
@@ -177,21 +175,21 @@ module.exports = React.createClass({
     onFocus: function(ev) {
         //ev.target.setSelectionRange(0, ev.target.textContent.length);
 
-        var node = ev.target.childNodes[0];
+        const node = ev.target.childNodes[0];
         if (node) {
-            var range = document.createRange();
+            const range = document.createRange();
             range.setStart(node, 0);
             range.setEnd(node, node.length);
 
-            var sel = window.getSelection();
+            const sel = window.getSelection();
             sel.removeAllRanges();
             sel.addRange(range);
         }
     },
 
     onFinish: function(ev, shouldSubmit) {
-        var self = this;
-        var submit = (ev.key === "Enter") || shouldSubmit;
+        const self = this;
+        const submit = (ev.key === "Enter") || shouldSubmit;
         this.setState({
             phase: this.Phases.Display,
         }, function() {
@@ -202,19 +200,16 @@ module.exports = React.createClass({
     },
 
     onBlur: function(ev) {
-        var sel = window.getSelection();
+        const sel = window.getSelection();
         sel.removeAllRanges();
 
-        if (this.props.blurToCancel)
-            {this.cancelEdit();}
-        else
-            {this.onFinish(ev, this.props.blurToSubmit);}
+        if (this.props.blurToCancel) {this.cancelEdit();} else {this.onFinish(ev, this.props.blurToSubmit);}
 
         this.showPlaceholder(!this.value);
     },
 
     render: function() {
-        var editable_el;
+        let editable_el;
 
         if (!this.props.editable || (this.state.phase == this.Phases.Display && (this.props.label || this.props.labelClassName) && !this.value)) {
             // show the label
@@ -226,5 +221,5 @@ module.exports = React.createClass({
         }
 
         return editable_el;
-    }
+    },
 });

src/components/views/elements/EditableTextContainer.js

@@ -64,7 +64,7 @@ export default class EditableTextContainer extends React.Component {
                     errorString: error.toString(),
                     busy: false,
                 });
-            }
+            },
         );
     }
 
@@ -96,22 +96,22 @@ export default class EditableTextContainer extends React.Component {
                     errorString: error.toString(),
                     busy: false,
                 });
-            }
+            },
         );
     }
 
     render() {
         if (this.state.busy) {
-            var Loader = sdk.getComponent("elements.Spinner");
+            const Loader = sdk.getComponent("elements.Spinner");
             return (
                 <Loader />
             );
         } else if (this.state.errorString) {
             return (
-                <div className="error">{this.state.errorString}</div>
+                <div className="error">{ this.state.errorString }</div>
             );
         } else {
-            var EditableText = sdk.getComponent('elements.EditableText');
+            const EditableText = sdk.getComponent('elements.EditableText');
             return (
                 <EditableText initialValue={this.state.value}
                     placeholder={this.props.placeholder}

src/components/views/elements/HomeButton.js

@@ -23,7 +23,7 @@ const HomeButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
         <ActionButton action="view_home_page"
-            label={ _t("Home") }
+            label={_t("Home")}
             iconPath="img/icons-home.svg"
             size={props.size}
             tooltip={props.tooltip}

src/components/views/elements/LanguageDropdown.js

@@ -35,12 +35,12 @@ export default class LanguageDropdown extends React.Component {
         this.state = {
             searchQuery: '',
             langs: null,
-        }
+        };
     }
 
     componentWillMount() {
         languageHandler.getAllLanguagesFromJson().then((langs) => {
-            langs.sort(function(a, b){
+            langs.sort(function(a, b) {
                 if(a.label < b.label) return -1;
                 if(a.label > b.label) return 1;
                 return 0;
@@ -89,7 +89,7 @@ export default class LanguageDropdown extends React.Component {
 
         const options = displayedLanguages.map((language) => {
             return <div key={language.value}>
-                {language.label}
+                { language.label }
             </div>;
         });
 
@@ -108,8 +108,8 @@ export default class LanguageDropdown extends React.Component {
             onOptionChange={this.props.onOptionChange} onSearchChange={this._onSearchChange}
             searchEnabled={true} value={value}
         >
-            {options}
-        </Dropdown>
+            { options }
+        </Dropdown>;
     }
 }
 

src/components/views/elements/MemberEventListSummary.js

@@ -96,12 +96,12 @@ module.exports = React.createClass({
             // Transform into consecutive repetitions of the same transition (like 5
             // consecutive 'joined_and_left's)
             const coalescedTransitions = this._coalesceRepeatedTransitions(
-                canonicalTransitions
+                canonicalTransitions,
             );
 
             const descs = coalescedTransitions.map((t) => {
                 return this._getDescriptionForTransition(
-                    t.transitionType, plural, t.repeats
+                    t.transitionType, plural, t.repeats,
                 );
             });
 
@@ -119,7 +119,7 @@ module.exports = React.createClass({
         return (
             <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
                 <EmojiText>
-                    {summaries.join(", ")}
+                    { summaries.join(", ") }
                 </EmojiText>
             </span>
         );
@@ -370,7 +370,7 @@ module.exports = React.createClass({
      */
     _renderCommaSeparatedList(items, itemLimit) {
         const remaining = itemLimit === undefined ? 0 : Math.max(
-            items.length - itemLimit, 0
+            items.length - itemLimit, 0,
         );
         if (items.length === 0) {
             return "";
@@ -394,8 +394,8 @@ module.exports = React.createClass({
             );
         });
         return (
-            <span className="mx_MemberEventListSummary_avatars" onClick={ this._toggleSummary }>
-                {avatars}
+            <span className="mx_MemberEventListSummary_avatars" onClick={this._toggleSummary}>
+                { avatars }
             </span>
         );
     },
@@ -419,19 +419,15 @@ module.exports = React.createClass({
             case 'join':
                 if (e.mxEvent.getPrevContent().membership === 'join') {
                     if (e.mxEvent.getContent().displayname !==
-                        e.mxEvent.getPrevContent().displayname)
-                    {
+                        e.mxEvent.getPrevContent().displayname) {
                         return 'changed_name';
-                    }
-                    else if (e.mxEvent.getContent().avatar_url !==
-                        e.mxEvent.getPrevContent().avatar_url)
-                    {
+                    } else if (e.mxEvent.getContent().avatar_url !==
+                        e.mxEvent.getPrevContent().avatar_url) {
                         return 'changed_avatar';
                     }
                     // console.log("MELS ignoring duplicate membership join event");
                     return null;
-                }
-                else {
+                } else {
                     return 'joined';
                 }
             case 'leave':
@@ -483,7 +479,7 @@ module.exports = React.createClass({
                     firstEvent.index < aggregateIndices[seq]) {
                         aggregateIndices[seq] = firstEvent.index;
                 }
-            }
+            },
         );
 
         return {
@@ -494,7 +490,7 @@ module.exports = React.createClass({
 
     render: function() {
         const eventsToRender = this.props.events;
-        const eventIds = eventsToRender.map(e => e.getId()).join(',');
+        const eventIds = eventsToRender.map((e) => e.getId()).join(',');
         const fewEvents = eventsToRender.length < this.props.threshold;
         const expanded = this.state.expanded || fewEvents;
 
@@ -506,7 +502,7 @@ module.exports = React.createClass({
         if (fewEvents) {
             return (
                 <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
-                    {expandedEvents}
+                    { expandedEvents }
                 </div>
             );
         }
@@ -542,7 +538,7 @@ module.exports = React.createClass({
 
         // Sort types by order of lowest event index within sequence
         const orderedTransitionSequences = Object.keys(aggregate.names).sort(
-            (seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2]
+            (seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2],
         );
 
         let summaryContainer = null;
@@ -550,24 +546,24 @@ module.exports = React.createClass({
             summaryContainer = (
                 <div className="mx_EventTile_line">
                     <div className="mx_EventTile_info">
-                        {this._renderAvatars(avatarMembers)}
-                        {this._renderSummary(aggregate.names, orderedTransitionSequences)}
+                        { this._renderAvatars(avatarMembers) }
+                        { this._renderSummary(aggregate.names, orderedTransitionSequences) }
                     </div>
                 </div>
             );
         }
         const toggleButton = (
             <div className={"mx_MemberEventListSummary_toggle"} onClick={this._toggleSummary}>
-                {expanded ? 'collapse' : 'expand'}
+                { expanded ? 'collapse' : 'expand' }
             </div>
         );
 
         return (
             <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
-                {toggleButton}
-                {summaryContainer}
-                {expanded ? <div className="mx_MemberEventListSummary_line">&nbsp;</div> : null}
-                {expandedEvents}
+                { toggleButton }
+                { summaryContainer }
+                { expanded ? <div className="mx_MemberEventListSummary_line">&nbsp;</div> : null }
+                { expandedEvents }
             </div>
         );
     },

src/components/views/elements/PowerSelector.js

@@ -20,8 +20,8 @@ import React from 'react';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 
-var LEVEL_ROLE_MAP = {};
-var reverseRoles = {};
+let LEVEL_ROLE_MAP = {};
+const reverseRoles = {};
 
 module.exports = React.createClass({
     displayName: 'PowerSelector',
@@ -46,7 +46,7 @@ module.exports = React.createClass({
             custom: (LEVEL_ROLE_MAP[this.props.value] === undefined),
         };
     },
-    
+
     componentWillMount: function() {
     	LEVEL_ROLE_MAP = Roles.levelRoleMap();
     	Object.keys(LEVEL_ROLE_MAP).forEach(function(key) {
@@ -72,7 +72,7 @@ module.exports = React.createClass({
     },
 
     getValue: function() {
-        var value;
+        let value;
         if (this.refs.select) {
             value = reverseRoles[this.refs.select.value];
             if (this.refs.custom) {
@@ -83,30 +83,27 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var customPicker;
+        let customPicker;
         if (this.state.custom) {
-            var input;
+            let input;
             if (this.props.disabled) {
                 input = <span>{ this.props.value }</span>;
-            }
-            else {
-                input = <input ref="custom" type="text" size="3" defaultValue={ this.props.value } onBlur={ this.onCustomBlur } onKeyDown={ this.onCustomKeyDown }/>;
+            } else {
+                input = <input ref="custom" type="text" size="3" defaultValue={this.props.value} onBlur={this.onCustomBlur} onKeyDown={this.onCustomKeyDown} />;
             }
             customPicker = <span> of { input }</span>;
         }
 
-        var selectValue;
+        let selectValue;
         if (this.state.custom) {
             selectValue = "Custom";
-        }
-        else {
+        } else {
             selectValue = LEVEL_ROLE_MAP[this.props.value] || "Custom";
         }
-        var select;
+        let select;
         if (this.props.disabled) {
             select = <span>{ selectValue }</span>;
-        }
-        else {
+        } else {
             // Each level must have a definition in LEVEL_ROLE_MAP
             const levels = [0, 50, 100];
             let options = levels.map((level) => {
@@ -115,18 +112,18 @@ module.exports = React.createClass({
                     // 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: _t("Custom level") });
             options = options.map((op) => {
-                return <option value={op.value} key={op.value}>{op.text}</option>;
+                return <option value={op.value} key={op.value}>{ op.text }</option>;
             });
 
             select =
                 <select ref="select"
-                        value={ this.props.controlled ? selectValue : undefined }
-                        defaultValue={ !this.props.controlled ? selectValue : undefined }
-                        onChange={ this.onSelectChange }>
+                        value={this.props.controlled ? selectValue : undefined}
+                        defaultValue={!this.props.controlled ? selectValue : undefined}
+                        onChange={this.onSelectChange}>
                     { options }
                 </select>;
         }
@@ -137,5 +134,5 @@ module.exports = React.createClass({
                 { customPicker }
             </span>
         );
-    }
+    },
 });

src/components/views/elements/ProgressBar.js

@@ -16,23 +16,23 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
 
 module.exports = React.createClass({
     displayName: 'ProgressBar',
     propTypes: {
         value: React.PropTypes.number,
-        max: React.PropTypes.number
+        max: React.PropTypes.number,
     },
 
     render: function() {
         // Would use an HTML5 progress tag but if that doesn't animate if you
         // use the HTML attributes rather than styles
-        var progressStyle = {
-            width: ((this.props.value / this.props.max) * 100)+"%"
+        const progressStyle = {
+            width: ((this.props.value / this.props.max) * 100)+"%",
         };
         return (
             <div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
         );
-    }
+    },
 });

src/components/views/elements/RoomDirectoryButton.js

@@ -24,7 +24,7 @@ const RoomDirectoryButton = function(props) {
     return (
         <ActionButton action="view_room_directory"
             mouseOverAction={props.callout ? "callout_room_directory" : null}
-            label={ _t("Room directory") }
+            label={_t("Room directory")}
             iconPath="img/icons-directory.svg"
             size={props.size}
             tooltip={props.tooltip}

src/components/views/elements/SettingsButton.js

@@ -23,7 +23,7 @@ const SettingsButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
         <ActionButton action="view_user_settings"
-            label={ _t("Settings") }
+            label={_t("Settings")}
             iconPath="img/icons-settings.svg"
             size={props.size}
             tooltip={props.tooltip}

src/components/views/elements/StartChatButton.js

@@ -24,7 +24,7 @@ const StartChatButton = function(props) {
     return (
         <ActionButton action="view_create_chat"
             mouseOverAction={props.callout ? "callout_start_chat" : null}
-            label={ _t("Start chat") }
+            label={_t("Start chat")}
             iconPath="img/icons-people.svg"
             size={props.size}
             tooltip={props.tooltip}

src/components/views/elements/TintableSvg.js

@@ -16,9 +16,9 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var ReactDOM = require("react-dom");
-var Tinter = require("../../../Tinter");
+const React = require('react');
+const ReactDOM = require("react-dom");
+const Tinter = require("../../../Tinter");
 
 var TintableSvg = React.createClass({
     displayName: 'TintableSvg',
@@ -63,16 +63,16 @@ var TintableSvg = React.createClass({
 
     render: function() {
         return (
-            <object className={ "mx_TintableSvg " + (this.props.className ? this.props.className : "") }
+            <object className={"mx_TintableSvg " + (this.props.className ? this.props.className : "")}
                     type="image/svg+xml"
-                    data={ this.props.src }
-                    width={ this.props.width }
-                    height={ this.props.height }
-                    onLoad={ this.onLoad }
+                    data={this.props.src}
+                    width={this.props.width}
+                    height={this.props.height}
+                    onLoad={this.onLoad}
                     tabIndex="-1"
                 />
         );
-    }
+    },
 });
 
 // Register with the Tinter so that we will be told if the tint changes

src/components/views/elements/UserSelector.js

@@ -52,19 +52,19 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var self = this;
+        const self = this;
         return (
             <div>
                 <ul className="mx_UserSelector_UserIdList" ref="list">
-                    {this.props.selected_users.map(function(user_id, i) {
-                        return <li key={user_id}>{user_id} - <span onClick={function() {self.removeUser(user_id);}}>X</span></li>;
-                    })}
+                    { this.props.selected_users.map(function(user_id, i) {
+                        return <li key={user_id}>{ user_id } - <span onClick={function() {self.removeUser(user_id);}}>X</span></li>;
+                    }) }
                 </ul>
-                <input type="text" ref="user_id_input" defaultValue="" className="mx_UserSelector_userIdInput" placeholder={_t("ex. @bob:example.com")}/>
+                <input type="text" ref="user_id_input" defaultValue="" className="mx_UserSelector_userIdInput" placeholder={_t("ex. @bob:example.com")} />
                 <button onClick={this.onAddUserId} className="mx_UserSelector_AddUserId">
-                    {_t("Add User")}
+                    { _t("Add User") }
                 </button>
             </div>
         );
-    }
+    },
 });