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}