Update client dependencies

client/src/js/components/ChatTitle.js

@@ -20,8 +20,8 @@ export default class ChatTitle extends Component {
 
   render() {
     const { title, tab, channel, toggleSearch, toggleUserList } = this.props;
-    const _topic = channel.get('topic');
-    const topic = _topic ? linkify(_topic) : null;
+    let topic = channel.get('topic');
+    topic = topic ? linkify(topic) : null;
 
     let leaveTitle;
     if (tab.channel) {

client/src/js/components/MessageBox.js

@@ -15,13 +15,13 @@ export default class MessageBox extends Component {
   }
 
   componentWillReceiveProps() {
-    const el = this.refs.list.refs.scrollingContainer;
+    const el = this.list.refs.scrollingContainer;
     this.autoScroll = el.scrollTop + el.offsetHeight === el.scrollHeight;
   }
 
   componentWillUpdate(nextProps) {
     if (nextProps.messages !== this.props.messages) {
-      this.refs.list.recomputeRowHeights();
+      this.list.recomputeRowHeights();
     }
   }
 
@@ -29,7 +29,7 @@ export default class MessageBox extends Component {
     this.updateWidth();
 
     if (this.autoScroll) {
-      const el = this.refs.list.refs.scrollingContainer;
+      const el = this.list.refs.scrollingContainer;
       el.scrollTop = el.scrollHeight;
     }
   }
@@ -50,9 +50,8 @@ export default class MessageBox extends Component {
 
   updateWidth = resize => {
     const { isChannel, setWrapWidth, updateMessageHeight } = this.props;
-    const { list } = this.refs;
-    if (list) {
-      let width = list.refs.scrollingContainer.clientWidth - 30;
+    if (this.list) {
+      let width = this.list.refs.scrollingContainer.clientWidth - 30;
 
       if (isChannel) {
         width += 200;
@@ -78,7 +77,7 @@ export default class MessageBox extends Component {
     const { messages } = this.props;
 
     if (index === 0 || index === messages.size + 1) {
-      return <span style={{ height: '7px' }}></span>;
+      return <span style={{ height: '7px' }} />;
     }
 
     const { select, openPrivateChat } = this.props;
@@ -97,7 +96,7 @@ export default class MessageBox extends Component {
     return (
       <div className="messagebox">
         <VirtualScroll
-          ref="list"
+          ref={el => { this.list = el; }}
           height={this.state.height}
           rowsCount={this.props.messages.size + 2}
           rowHeight={this.getRowHeight}

client/src/js/components/MessageInput.js

@@ -44,7 +44,6 @@ export default class MessageInput extends Component {
     return (
       <div className="message-input-wrap">
         <input
-          ref="input"
           className="message-input"
           type="text"
           value={this.props.history || this.state.value}

client/src/js/components/Navicon.js

@@ -9,7 +9,7 @@ class Navicon extends Component {
 
   render() {
     return (
-      <i className="icon-menu navicon" onClick={this.handleClick}></i>
+      <i className="icon-menu navicon" onClick={this.handleClick} />
     );
   }
 }

client/src/js/components/Search.js

@@ -6,7 +6,7 @@ import SearchResult from './SearchResult';
 export default class Search extends Component {
   componentDidUpdate(prevProps) {
     if (!prevProps.search.show && this.props.search.show) {
-      this.refs.input.focus();
+      this.input.focus();
     }
   }
 
@@ -27,7 +27,7 @@ export default class Search extends Component {
         <div className="search-input-wrap">
           <i className="icon-search" />
           <input
-            ref="input"
+            ref={el => { this.input = el; }}
             className="search-input"
             type="text"
             onChange={this.handleSearch}

client/src/js/components/SearchResult.js

@@ -21,7 +21,7 @@ export default class Search extends Component {
           {' '}
           <span className="message-sender">{result.from}</span>
         </span>
-        <span dangerouslySetInnerHTML={{ __html: ` ${content}` }}></span>
+        <span dangerouslySetInnerHTML={{ __html: ` ${content}` }} />
       </p>
     );
   }

client/src/js/components/TabList.js

@@ -70,8 +70,8 @@ export default class TabList extends Component {
         <button className="button-connect" onClick={this.handleConnectClick}>Connect</button>
         <div className="tab-container">{tabs}</div>
         <div className="side-buttons">
-          <i className="icon-user"></i>
-          <i className="icon-cog" onClick={this.handleSettingsClick}></i>
+          <i className="icon-user" />
+          <i className="icon-cog" onClick={this.handleSettingsClick} />
         </div>
       </div>
     );

client/src/js/components/TabListItem.js

@@ -30,7 +30,7 @@ export default class TabListItem extends Component {
         style.background = '#F6546A';
       }
 
-      indicator = <i className="tab-indicator" style={style}></i>;
+      indicator = <i className="tab-indicator" style={style} />;
     }
 
     return (

client/src/js/components/UserList.js

@@ -15,7 +15,7 @@ export default class UserList extends Component {
 
   componentWillUpdate(nextProps) {
     if (nextProps.users.size === this.props.users.size) {
-      this.refs.list.forceUpdate();
+      this.list.forceUpdate();
     }
   }
 
@@ -37,7 +37,7 @@ export default class UserList extends Component {
     const { users } = this.props;
 
     if (index === 0 || index === users.size + 1) {
-      return <span style={{ height: '10px' }}></span>;
+      return <span style={{ height: '10px' }} />;
     }
 
     const { tab, openPrivateChat, select } = this.props;
@@ -65,7 +65,7 @@ export default class UserList extends Component {
     return (
       <div className={className} style={style}>
         <VirtualScroll
-          ref="list"
+          ref={el => { this.list = el; }}
           height={this.state.height}
           rowsCount={this.props.users.size + 2}
           rowHeight={this.getRowHeight}

client/src/js/containers/Connect.js

@@ -13,7 +13,7 @@ class Connect extends Component {
     passwordTouched: false
   };
 
-  handleSubmit = (e) => {
+  handleSubmit = e => {
     e.preventDefault();
 
     const { dispatch } = this.props;
@@ -59,7 +59,7 @@ class Connect extends Component {
   };
 
   render() {
-    const defaults = window.__ENV__.defaults;
+    const defaults = window.ENV.defaults;
     let optionals = null;
 
     if (this.state.showOptionals) {
@@ -81,7 +81,7 @@ class Connect extends Component {
     return (
       <div className="connect">
         <Navicon />
-        <form ref="form" className="connect-form" onSubmit={this.handleSubmit}>
+        <form className="connect-form" onSubmit={this.handleSubmit}>
           <h1>Connect</h1>
           <input name="name" type="text" placeholder="Name" defaultValue={defaults.name} />
           <input name="address" type="text" placeholder="Address" defaultValue={defaults.address} />
@@ -94,8 +94,8 @@ class Connect extends Component {
           />
           {optionals}
           <p>
-            <label><input name="ssl" type="checkbox" defaultChecked={defaults.ssl} />SSL</label>
-            <i className="icon-ellipsis" onClick={this.handleShowClick}></i>
+            <label htmlFor="ssl"><input name="ssl" type="checkbox" defaultChecked={defaults.ssl} />SSL</label>
+            <i className="icon-ellipsis" onClick={this.handleShowClick} />
           </p>
           <input type="submit" value="Connect" />
         </form>

client/src/js/index.js

@@ -2,15 +2,15 @@ import React from 'react';
 import { render } from 'react-dom';
 import { browserHistory } from 'react-router';
 import { syncHistoryWithStore, replace } from 'react-router-redux';
+import 'react-virtualized/styles.css';
+
 import configureStore from './store';
 import createRoutes from './routes';
 import Socket from './util/Socket';
 import handleSocket from './socket';
 import Root from './containers/Root';
 
-import 'react-virtualized/styles.css';
-
-const host = __DEV__ ? `${window.location.hostname}:1337` : window.location.host;
+const host = DEV ? `${window.location.hostname}:1337` : window.location.host;
 const socket = new Socket(host);
 
 const store = configureStore(socket, browserHistory);
@@ -18,7 +18,7 @@ const store = configureStore(socket, browserHistory);
 const env = JSON.parse(document.getElementById('env').innerHTML);
 
 // TODO: Handle this properly
-window.__ENV__ = {
+window.ENV = {
   defaults: env.defaults
 };
 

client/src/js/middleware/command.js

@@ -5,7 +5,7 @@ export default function createCommandMiddleware(type, handlers) {
       const command = words[0];
       const params = words.slice(1);
 
-      if (handlers.hasOwnProperty(command)) {
+      if (Object.prototype.hasOwnProperty.call(handlers, command)) {
         handlers[command]({
           dispatch: store.dispatch,
           getState: store.getState,

client/src/js/reducers/servers.js

@@ -1,7 +1,7 @@
 import { Map, Record } from 'immutable';
+import forEach from 'lodash/forEach';
 import createReducer from '../util/createReducer';
 import * as actions from '../actions';
-import forEach from 'lodash/forEach';
 
 const Server = Record({
   nick: null,

client/src/js/util/createReducer.js

@@ -1,6 +1,6 @@
 export default function createReducer(initialState, handlers) {
   return function reducer(state = initialState, action) {
-    if (handlers.hasOwnProperty(action.type)) {
+    if (Object.prototype.hasOwnProperty.call(handlers, action.type)) {
       return handlers[action.type](state, action);
     }
     return state;

client/src/js/util/linkify.js

@@ -6,7 +6,7 @@ const autolinker = new Autolinker({
   doJoin: false,
   replaceFn: (linker, match) => {
     if (match.getType() === 'url') {
-      return <a target="_blank" href={match.getAnchorHref()}>{match.getAnchorText()}</a>;
+      return <a target="_blank" rel="noopener noreferrer" href={match.getAnchorHref()}>{match.getAnchorText()}</a>;
     }
 
     return null;

client/src/js/util/messageHeight.js

@@ -8,7 +8,7 @@ export default function messageHeight(message, width, charWidth, indent = 0) {
     width -= 200;
   }
 
-  if (pad + message.message.length * charWidth < width) {
+  if (pad + (message.message.length * charWidth) < width) {
     return height;
   }
 
@@ -21,7 +21,7 @@ export default function messageHeight(message, width, charWidth, indent = 0) {
     if (c === ' ' || c === '-') {
       const end = c === ' ' ? i : i + 1;
 
-      if (pad + (end - prevBreak) * charWidth >= width) {
+      if (pad + ((end - prevBreak) * charWidth) >= width) {
         prevBreak = prevPos;
         pad = indent;
         height += lineHeight;
@@ -29,7 +29,7 @@ export default function messageHeight(message, width, charWidth, indent = 0) {
 
       prevPos = i + 1;
     } else if (i === len - 1) {
-      if (pad + (len - prevBreak) * charWidth >= width) {
+      if (pad + ((len - prevBreak) * charWidth) >= width) {
         height += lineHeight;
       }
     }