Fix eslint errors

src/browser/index.jsx

@@ -1,8 +1,8 @@
 'use strict';
 
-window.eval = global.eval = function() {
-  throw new Error("Sorry, Mattermost does not support window.eval() for security reasons.");
-}
+window.eval = global.eval = () => {
+  throw new Error('Sorry, Mattermost does not support window.eval() for security reasons.');
+};
 
 const React = require('react');
 const ReactDOM = require('react-dom');
@@ -13,25 +13,34 @@ const Row = ReactBootstrap.Row;
 const Col = ReactBootstrap.Col;
 const Nav = ReactBootstrap.Nav;
 const NavItem = ReactBootstrap.NavItem;
-const Badge = ReactBootstrap.Badge;
-const ListGroup = ReactBootstrap.ListGroup;
-const ListGroupItem = ReactBootstrap.ListGroupItem;
 
 const LoginModal = require('./components/loginModal.jsx');
 
-const {remote, ipcRenderer, webFrame, shell} = require('electron');
+const {remote, ipcRenderer, shell} = require('electron');
+const electronContextMenu = require('electron-context-menu');
 
 const osLocale = require('os-locale');
 const fs = require('fs');
 const url = require('url');
-const path = require('path');
 
 const settings = require('../common/settings');
+const badge = require('./js/badge');
 
 remote.getCurrentWindow().removeAllListeners('focus');
 
+var config;
+try {
+  var configFile = remote.getGlobal('config-file');
+  config = settings.readFileSync(configFile);
+} catch (e) {
+  window.location = 'settings.html';
+}
+if (config.teams.length === 0) {
+  window.location = 'settings.html';
+}
+
 var MainPage = React.createClass({
-  getInitialState: function() {
+  getInitialState() {
     return {
       key: 0,
       unreadCounts: new Array(this.props.teams.length),
@@ -41,84 +50,85 @@ var MainPage = React.createClass({
       loginQueue: []
     };
   },
-  componentDidMount: function() {
-    var thisObj = this;
-    ipcRenderer.on('login-request', function(event, request, authInfo) {
-      thisObj.setState({
+  componentDidMount() {
+    var self = this;
+    ipcRenderer.on('login-request', (event, request, authInfo) => {
+      self.setState({
         loginRequired: true
       });
-      const loginQueue = thisObj.state.loginQueue;
+      const loginQueue = self.state.loginQueue;
       loginQueue.push({
-        request: request,
-        authInfo: authInfo
+        request,
+        authInfo
       });
-      thisObj.setState({
-        loginQueue: loginQueue
+      self.setState({
+        loginQueue
       });
     });
+
     // can't switch tabs sequencially for some reason...
     ipcRenderer.on('switch-tab', (event, key) => {
       this.handleSelect(key);
     });
-    ipcRenderer.on('select-next-tab', (event) => {
+    ipcRenderer.on('select-next-tab', () => {
       this.handleSelect(this.state.key + 1);
     });
-    ipcRenderer.on('select-previous-tab', (event) => {
+    ipcRenderer.on('select-previous-tab', () => {
       this.handleSelect(this.state.key - 1);
     });
 
     // reload the activated tab
-    ipcRenderer.on('reload-tab', (event) => {
+    ipcRenderer.on('reload-tab', () => {
       this.refs[`mattermostView${this.state.key}`].reload();
     });
-    ipcRenderer.on('clear-cache-and-reload-tab', (event) => {
+    ipcRenderer.on('clear-cache-and-reload-tab', () => {
       this.refs[`mattermostView${this.state.key}`].clearCacheAndReload();
     });
 
     // activate search box in current tab
-    ipcRenderer.on('activate-search-box', (event) => {
-      let webview = document.getElementById('mattermostView' + thisObj.state.key);
+    ipcRenderer.on('activate-search-box', () => {
+      const webview = document.getElementById('mattermostView' + self.state.key);
       webview.send('activate-search-box');
     });
 
     // activate search box in current chunnel
-    ipcRenderer.on('activate-search-box-in-channel', (event) => {
-      let webview = document.getElementById('mattermostView' + thisObj.state.key);
+    ipcRenderer.on('activate-search-box-in-channel', () => {
+      const webview = document.getElementById('mattermostView' + self.state.key);
       webview.send('activate-search-box-in-channel');
     });
 
-    var focusListener = function() {
-      thisObj.handleOnTeamFocused(thisObj.state.key);
-      thisObj.refs[`mattermostView${thisObj.state.key}`].focusOnWebView();
-    };
+    function focusListener() {
+      self.handleOnTeamFocused(self.state.key);
+      self.refs[`mattermostView${self.state.key}`].focusOnWebView();
+    }
 
     var currentWindow = remote.getCurrentWindow();
     currentWindow.on('focus', focusListener);
-    window.addEventListener('beforeunload', function() {
+    window.addEventListener('beforeunload', () => {
       currentWindow.removeListener('focus', focusListener);
     });
 
     //goBack and goForward
     ipcRenderer.on('go-back', () => {
-      const mattermost = thisObj.refs[`mattermostView${thisObj.state.key}`];
+      const mattermost = self.refs[`mattermostView${self.state.key}`];
       if (mattermost.canGoBack()) {
         mattermost.goBack();
       }
     });
 
     ipcRenderer.on('go-forward', () => {
-      const mattermost = thisObj.refs[`mattermostView${thisObj.state.key}`];
+      const mattermost = self.refs[`mattermostView${self.state.key}`];
       if (mattermost.canGoForward()) {
         mattermost.goForward();
       }
     });
   },
-  componentDidUpdate: function(prevProps, prevState) {
+  componentDidUpdate(prevProps, prevState) {
     if (prevState.key !== this.state.key) { // i.e. When tab has been changed
       this.refs[`mattermostView${this.state.key}`].focusOnWebView();
     }
   },
-  handleSelect: function(key) {
+  handleSelect(key) {
     const newKey = (this.props.teams.length + key) % this.props.teams.length;
     this.setState({
       key: newKey
@@ -130,13 +140,14 @@ var MainPage = React.createClass({
       title: webview.getTitle()
     });
   },
-  handleUnreadCountChange: function(index, unreadCount, mentionCount, isUnread, isMentioned) {
+  handleUnreadCountChange(index, unreadCount, mentionCount, isUnread, isMentioned) {
     var unreadCounts = this.state.unreadCounts;
     var mentionCounts = this.state.mentionCounts;
     var unreadAtActive = this.state.unreadAtActive;
     var mentionAtActiveCounts = this.state.mentionAtActiveCounts;
     unreadCounts[index] = unreadCount;
     mentionCounts[index] = mentionCount;
+
     // Never turn on the unreadAtActive flag at current focused tab.
     if (this.state.key !== index || !remote.getCurrentWindow().isFocused()) {
       unreadAtActive[index] = unreadAtActive[index] || isUnread;
@@ -145,49 +156,49 @@ var MainPage = React.createClass({
       }
     }
     this.setState({
-      unreadCounts: unreadCounts,
-      mentionCounts: mentionCounts,
-      unreadAtActive: unreadAtActive,
-      mentionAtActiveCounts: mentionAtActiveCounts
+      unreadCounts,
+      mentionCounts,
+      unreadAtActive,
+      mentionAtActiveCounts
     });
     this.handleUnreadCountTotalChange();
   },
-  markReadAtActive: function(index) {
+  markReadAtActive(index) {
     var unreadAtActive = this.state.unreadAtActive;
     var mentionAtActiveCounts = this.state.mentionAtActiveCounts;
     unreadAtActive[index] = false;
     mentionAtActiveCounts[index] = 0;
     this.setState({
-      unreadAtActive: unreadAtActive,
-      mentionAtActiveCounts: mentionAtActiveCounts
+      unreadAtActive,
+      mentionAtActiveCounts
     });
     this.handleUnreadCountTotalChange();
   },
-  handleUnreadCountTotalChange: function() {
+  handleUnreadCountTotalChange() {
     if (this.props.onUnreadCountChange) {
-      var allUnreadCount = this.state.unreadCounts.reduce(function(prev, curr) {
+      var allUnreadCount = this.state.unreadCounts.reduce((prev, curr) => {
         return prev + curr;
       }, 0);
-      this.state.unreadAtActive.forEach(function(state) {
+      this.state.unreadAtActive.forEach((state) => {
         if (state) {
           allUnreadCount += 1;
         }
       });
-      var allMentionCount = this.state.mentionCounts.reduce(function(prev, curr) {
+      var allMentionCount = this.state.mentionCounts.reduce((prev, curr) => {
         return prev + curr;
       }, 0);
-      this.state.mentionAtActiveCounts.forEach(function(count) {
+      this.state.mentionAtActiveCounts.forEach((count) => {
         allMentionCount += count;
       });
       this.props.onUnreadCountChange(allUnreadCount, allMentionCount);
     }
   },
-  handleOnTeamFocused: function(index) {
+  handleOnTeamFocused(index) {
     // Turn off the flag to indicate whether unread message of active channel contains at current tab.
     this.markReadAtActive(index);
   },
 
-  visibleStyle: function(visible) {
+  visibleStyle(visible) {
     var visibility = visible ? 'visible' : 'hidden';
     return {
       position: 'absolute',
@@ -195,66 +206,91 @@ var MainPage = React.createClass({
       right: 0,
       bottom: 0,
       left: 0,
-      visibility: visibility
+      visibility
     };
   },
 
-  handleLogin: function(request, username, password) {
+  handleLogin(request, username, password) {
     ipcRenderer.send('login-credentials', request, username, password);
     const loginQueue = this.state.loginQueue;
     loginQueue.shift();
     this.setState(loginQueue);
   },
-  handleLoginCancel: function() {
+  handleLoginCancel() {
     const loginQueue = this.state.loginQueue;
     loginQueue.shift();
     this.setState(loginQueue);
   },
-  render: function() {
-    var thisObj = this;
+  render() {
+    var self = this;
 
-    var tabs_row;
+    var tabsRow;
     if (this.props.teams.length > 1) {
-      tabs_row = (
+      tabsRow = (
         <Row>
-          <TabBar id="tabBar" teams={ this.props.teams } unreadCounts={ this.state.unreadCounts } mentionCounts={ this.state.mentionCounts } unreadAtActive={ this.state.unreadAtActive } mentionAtActiveCounts={ this.state.mentionAtActiveCounts }
-            activeKey={ this.state.key } onSelect={ this.handleSelect }></TabBar>
+          <TabBar
+            id='tabBar'
+            teams={this.props.teams}
+            unreadCounts={this.state.unreadCounts}
+            mentionCounts={this.state.mentionCounts}
+            unreadAtActive={this.state.unreadAtActive}
+            mentionAtActiveCounts={this.state.mentionAtActiveCounts}
+            activeKey={this.state.key}
+            onSelect={this.handleSelect}
+          />
         </Row>
       );
     }
 
-    var views = this.props.teams.map(function(team, index) {
-      var handleUnreadCountChange = function(unreadCount, mentionCount, isUnread, isMentioned) {
-        thisObj.handleUnreadCountChange(index, unreadCount, mentionCount, isUnread, isMentioned);
-      };
-      var handleNotificationClick = function() {
-        thisObj.handleSelect(index);
+    var views = this.props.teams.map((team, index) => {
+      function handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned) {
+        self.handleUnreadCountChange(index, unreadCount, mentionCount, isUnread, isMentioned);
+      }
+      function handleNotificationClick() {
+        self.handleSelect(index);
       }
       var id = 'mattermostView' + index;
-      var is_active = thisObj.state.key === index;
-      return (<MattermostView key={ id } id={ id } style={ thisObj.visibleStyle(is_active) } src={ team.url } name={ team.name } onUnreadCountChange={ handleUnreadCountChange }
-                onNotificationClick={ handleNotificationClick } ref={ id } active={ is_active } />)
+      var isActive = self.state.key === index;
+      return (
+        <MattermostView
+          key={id}
+          id={id}
+          style={self.visibleStyle(isActive)}
+          src={team.url}
+          name={team.name}
+          onUnreadCountChange={handleUnreadCountChange}
+          onNotificationClick={handleNotificationClick}
+          ref={id}
+          active={isActive}
+        />);
     });
-    var views_row = (<Row>
-                       { views }
-                     </Row>);
+    var viewsRow = (
+      <Row>
+        {views}
+      </Row>);
 
     var request = null;
     var authServerURL = null;
     var authInfo = null;
     if (this.state.loginQueue.length !== 0) {
       request = this.state.loginQueue[0].request;
-      const tmp_url = url.parse(this.state.loginQueue[0].request.url);
-      authServerURL = `${tmp_url.protocol}//${tmp_url.host}`;
+      const tmpURL = url.parse(this.state.loginQueue[0].request.url);
+      authServerURL = `${tmpURL.protocol}//${tmpURL.host}`;
       authInfo = this.state.loginQueue[0].authInfo;
     }
     return (
       <div>
-        <LoginModal show={ this.state.loginQueue.length !== 0 } request={ request } authInfo={ authInfo } authServerURL={ authServerURL } onLogin={ this.handleLogin }
-          onCancel={ this.handleLoginCancel }></LoginModal>
+        <LoginModal
+          show={this.state.loginQueue.length !== 0}
+          request={request}
+          authInfo={authInfo}
+          authServerURL={authServerURL}
+          onLogin={this.handleLogin}
+          onCancel={this.handleLoginCancel}
+        />
         <Grid fluid>
-          { tabs_row }
-          { views_row }
+          { tabsRow }
+          { viewsRow }
         </Grid>
       </div>
       );
@@ -262,9 +298,9 @@ var MainPage = React.createClass({
 });
 
 var TabBar = React.createClass({
-  render: function() {
-    var thisObj = this;
-    var tabs = this.props.teams.map(function(team, index) {
+  render() {
+    var self = this;
+    var tabs = this.props.teams.map((team, index) => {
       var unreadCount = 0;
       var badgeStyle = {
         background: '#FF1744',
@@ -276,48 +312,64 @@ var TabBar = React.createClass({
         lineHeight: '20px',
         height: '19px',
         marginLeft: '5px',
-        borderRadius: '50%',
+        borderRadius: '50%'
       };
 
-      if (thisObj.props.unreadCounts[index] > 0) {
-        unreadCount = thisObj.props.unreadCounts[index];
+      if (self.props.unreadCounts[index] > 0) {
+        unreadCount = self.props.unreadCounts[index];
       }
-      if (thisObj.props.unreadAtActive[index]) {
+      if (self.props.unreadAtActive[index]) {
         unreadCount += 1;
       }
 
       var mentionCount = 0;
-      if (thisObj.props.mentionCounts[index] > 0) {
-        mentionCount = thisObj.props.mentionCounts[index];
+      if (self.props.mentionCounts[index] > 0) {
+        mentionCount = self.props.mentionCounts[index];
       }
-      if (thisObj.props.mentionAtActiveCounts[index] > 0) {
-        mentionCount += thisObj.props.mentionAtActiveCounts[index];
+      if (self.props.mentionAtActiveCounts[index] > 0) {
+        mentionCount += self.props.mentionAtActiveCounts[index];
       }
 
-      var badge;
-      if (mentionCount != 0) {
-        badge = (<div style={ badgeStyle }>
-                   { mentionCount }
-                 </div>);
+      var badgeDiv;
+      if (mentionCount !== 0) {
+        badgeDiv = (
+          <div style={badgeStyle}>
+            {mentionCount}
+          </div>);
       }
-      if (unreadCount == 0) {
-        var id = 'teamTabItem' + index;
-        return (<NavItem className="teamTabItem" key={ id } id={ id } eventKey={ index }>
-                  { team.name }
-                  { ' ' }
-                  { badge }
-                </NavItem>);
-      } else {
-        var id = 'teamTabItem' + index;
-        return (<NavItem className="teamTabItem" key={ id } id={ id } eventKey={ index }>
-                  <b>{ team.name }</b>
-                  { ' ' }
-                  { badge }
-                </NavItem>);
+      var id = 'teamTabItem' + index;
+      if (unreadCount === 0) {
+        return (
+          <NavItem
+            className='teamTabItem'
+            key={id}
+            id={id}
+            eventKey={index}
+          >
+            { team.name }
+            { ' ' }
+            { badgeDiv }
+          </NavItem>);
       }
+      return (
+        <NavItem
+          className='teamTabItem'
+          key={id}
+          id={id}
+          eventKey={index}
+        >
+          <b>{ team.name }</b>
+          { ' ' }
+          { badgeDiv }
+        </NavItem>);
     });
     return (
-      <Nav id={ this.props.id } bsStyle="tabs" activeKey={ this.props.activeKey } onSelect={ this.props.onSelect }>
+      <Nav
+        id={this.props.id}
+        bsStyle='tabs'
+        activeKey={this.props.activeKey}
+        onSelect={this.props.onSelect}
+      >
         { tabs }
       </Nav>
       );
@@ -325,19 +377,19 @@ var TabBar = React.createClass({
 });
 
 var MattermostView = React.createClass({
-  getInitialState: function() {
+  getInitialState() {
     return {
       errorInfo: null
     };
   },
-  handleUnreadCountChange: function(unreadCount, mentionCount, isUnread, isMentioned) {
+  handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned) {
     if (this.props.onUnreadCountChange) {
       this.props.onUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned);
     }
   },
 
-  componentDidMount: function() {
-    var thisObj = this;
+  componentDidMount() {
+    var self = this;
     var webview = ReactDOM.findDOMNode(this.refs.webview);
 
     // This option disables the same-origin policy and allows js/css/plugins not only content like images.
@@ -346,19 +398,19 @@ var MattermostView = React.createClass({
       webview.setAttribute('disablewebsecurity', true);
     }
 
-    webview.addEventListener('did-fail-load', function(e) {
-      console.log(thisObj.props.name, 'webview did-fail-load', e);
+    webview.addEventListener('did-fail-load', (e) => {
+      console.log(self.props.name, 'webview did-fail-load', e);
       if (e.errorCode === -3) { // An operation was aborted (due to user action).
         return;
       }
 
-      thisObj.setState({
+      self.setState({
         errorInfo: e
       });
-      const reload = () => {
+      function reload() {
         window.removeEventListener('online', reload);
-        thisObj.reload();
-      };
+        self.reload();
+      }
       if (navigator.onLine) {
         setTimeout(reload, 30000);
       } else {
@@ -367,7 +419,7 @@ var MattermostView = React.createClass({
     });
 
     // Open link in browserWindow. for exmaple, attached files.
-    webview.addEventListener('new-window', function(e) {
+    webview.addEventListener('new-window', (e) => {
       var currentURL = url.parse(webview.getURL());
       var destURL = url.parse(e.url);
       if (destURL.protocol !== 'http:' && destURL.protocol !== 'https:') {
@@ -383,22 +435,22 @@ var MattermostView = React.createClass({
       }
     });
 
-    webview.addEventListener("dom-ready", function() {
+    webview.addEventListener('dom-ready', () => {
       // webview.openDevTools();
 
       // Use 'Meiryo UI' and 'MS Gothic' to prevent CJK fonts on Windows(JP).
       if (process.platform === 'win32') {
-        var applyCssFile = function(cssFile) {
-          fs.readFile(cssFile, 'utf8', function(err, data) {
+        function applyCssFile(cssFile) {
+          fs.readFile(cssFile, 'utf8', (err, data) => {
             if (err) {
               console.log(err);
               return;
             }
             webview.insertCSS(data);
           });
-        };
+        }
 
-        osLocale(function(err, locale) {
+        osLocale((err, locale) => {
           if (err) {
             console.log(err);
             return;
@@ -409,29 +461,30 @@ var MattermostView = React.createClass({
         });
       }
 
-      require('electron-context-menu')({
+      electronContextMenu({
         window: webview
       });
     });
 
-    webview.addEventListener('ipc-message', function(event) {
+    webview.addEventListener('ipc-message', (event) => {
       switch (event.channel) {
-        case 'onUnreadCountChange':
-          var unreadCount = event.args[0];
-          var mentionCount = event.args[1];
-          // isUnread and isMentioned is pulse flag.
-          var isUnread = event.args[2];
-          var isMentioned = event.args[3];
-          thisObj.handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned);
-          break;
-        case 'onNotificationClick':
-          thisObj.props.onNotificationClick();
-          break;
+      case 'onUnreadCountChange':
+        var unreadCount = event.args[0];
+        var mentionCount = event.args[1];
+
+        // isUnread and isMentioned is pulse flag.
+        var isUnread = event.args[2];
+        var isMentioned = event.args[3];
+        self.handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned);
+        break;
+      case 'onNotificationClick':
+        self.props.onNotificationClick();
+        break;
       }
     });
 
-    webview.addEventListener('page-title-updated', function(event) {
-      if (thisObj.props.active) {
+    webview.addEventListener('page-title-updated', (event) => {
+      if (self.props.active) {
         ipcRenderer.send('update-title', {
           title: event.title
         });
@@ -441,22 +494,22 @@ var MattermostView = React.createClass({
     webview.addEventListener('console-message', (e) => {
       const message = `[${this.props.name}] ${e.message}`;
       switch (e.level) {
-        case 0:
-          console.log(message);
-          break;
-        case 1:
-          console.warn(message);
-          break;
-        case 2:
-          console.error(message);
-          break;
-        default:
-          console.log(message);
-          break;
+      case 0:
+        console.log(message);
+        break;
+      case 1:
+        console.warn(message);
+        break;
+      case 2:
+        console.error(message);
+        break;
+      default:
+        console.log(message);
+        break;
       }
     });
   },
-  reload: function() {
+  reload() {
     this.setState({
       errorInfo: null
     });
@@ -473,7 +526,7 @@ var MattermostView = React.createClass({
     });
   },
 
-  focusOnWebView: function() {
+  focusOnWebView() {
     const webview = ReactDOM.findDOMNode(this.refs.webview);
     if (!webview.getWebContents().isFocused()) {
       webview.focus();
@@ -501,17 +554,33 @@ var MattermostView = React.createClass({
     webview.getWebContents().goForward();
   },
 
-  render: function() {
-    const errorView = this.state.errorInfo ? (<ErrorView id={ this.props.id + '-fail' } style={ this.props.style } className="errorView" errorInfo={ this.state.errorInfo }></ErrorView>) : null;
+  render() {
+    const errorView = this.state.errorInfo ? (
+      <ErrorView
+        id={this.props.id + '-fail'}
+        style={this.props.style}
+        className='errorView'
+        errorInfo={this.state.errorInfo}
+      />) : null;
+
     // 'disablewebsecurity' is necessary to display external images.
     // However, it allows also CSS/JavaScript.
     // So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
 
     // Need to keep webview mounted when failed to load.
-    return (<div>
-              { errorView }
-              <webview id={ this.props.id } className="mattermostView" style={ this.props.style } preload="webview/mattermost.js" src={ this.props.src } ref="webview" nodeintegration="false"></webview>
-            </div>);
+    return (
+      <div>
+        { errorView }
+        <webview
+          id={this.props.id}
+          className='mattermostView'
+          style={this.props.style}
+          preload='webview/mattermost.js'
+          src={this.props.src}
+          ref='webview'
+          nodeintegration='false'
+        />
+      </div>);
   }
 });
 
@@ -540,41 +609,57 @@ const errorPage = {
   techInfo: {
     fontSize: '12px',
     color: '#aaa'
-  },
+  }
 };
 
 var ErrorView = React.createClass({
-  render: function() {
+  render() {
     return (
-      <Grid id={ this.props.id } style={ this.props.style }>
-        <div style={ errorPage.tableStyle }>
-          <div style={ errorPage.cellStyle }>
+      <Grid
+        id={this.props.id}
+        style={this.props.style}
+      >
+        <div style={errorPage.tableStyle}>
+          <div style={errorPage.cellStyle}>
             <Row>
-              <Col xs={ 0 } sm={ 1 } md={ 1 } lg={ 2 } />
-              <Col xs={ 12 } sm={ 10 } md={ 10 } lg={ 8 }>
-              <h2>Cannot connect to Mattermost</h2>
-              <hr />
-              <p>We're having trouble connecting to Mattermost. If refreshing this page (Ctrl+R or Command+R) does not work please verify that:</p>
-              <br />
-              <ul style={ errorPage.bullets }>
-                <li>Your computer is connected to the internet.</li>
-                <li>The Mattermost URL
-                  { ' ' }
-                  <a href={ this.props.errorInfo.validatedURL }>
-                    { this.props.errorInfo.validatedURL }
-                  </a> is correct.</li>
-                <li>You can reach
-                  { ' ' }
-                  <a href={ this.props.errorInfo.validatedURL }>
-                    { this.props.errorInfo.validatedURL }
-                  </a> from a browser window.</li>
-              </ul>
-              <br />
-              <div style={ errorPage.techInfo }>
-                { this.props.errorInfo.errorDescription } (
-                { this.props.errorInfo.errorCode })</div>
+              <Col
+                xs={0}
+                sm={1}
+                md={1}
+                lg={2}
+              />
+              <Col
+                xs={12}
+                sm={10}
+                md={10}
+                lg={8}
+              >
+                <h2>{'Cannot connect to Mattermost'}</h2>
+                <hr/>
+                <p>{'We\'re having trouble connecting to Mattermost. If refreshing this page (Ctrl+R or Command+R) does not work please verify that:'}</p>
+                <br/>
+                <ul style={errorPage.bullets}>
+                  <li>{'Your computer is connected to the internet.'}</li>
+                  <li>{'The Mattermost URL '}
+                    <a href={this.props.errorInfo.validatedURL}>
+                      {this.props.errorInfo.validatedURL}
+                    </a>{' is correct.'}</li>
+                  <li>{'You can reach '}
+                    <a href={this.props.errorInfo.validatedURL}>
+                      {this.props.errorInfo.validatedURL}
+                    </a>{' from a browser window.'}</li>
+                </ul>
+                <br/>
+                <div style={errorPage.techInfo}>
+                  {this.props.errorInfo.errorDescription}{' ('}
+                  {this.props.errorInfo.errorCode }{')'}</div>
               </Col>
-              <Col xs={ 0 } sm={ 1 } md={ 1 } lg={ 2 } />
+              <Col
+                xs={0}
+                sm={1}
+                md={1}
+                lg={2}
+              />
             </Row>
           </div>
         </div>
@@ -583,29 +668,17 @@ var ErrorView = React.createClass({
   }
 });
 
-var config;
-try {
-  var configFile = remote.getGlobal('config-file');
-  config = settings.readFileSync(configFile);
-} catch (e) {
-  window.location = 'settings.html';
-}
-if (config.teams.length === 0) {
-  window.location = 'settings.html';
-}
-
-var showUnreadBadgeWindows = function(unreadCount, mentionCount) {
-  const badge = require('./js/badge');
-  const sendBadge = function(dataURL, description) {
+function showUnreadBadgeWindows(unreadCount, mentionCount) {
+  function sendBadge(dataURL, description) {
     // window.setOverlayIcon() does't work with NativeImage across remote boundaries.
     // https://github.com/atom/electron/issues/4011
     ipcRenderer.send('update-unread', {
       overlayDataURL: dataURL,
-      description: description,
-      unreadCount: unreadCount,
-      mentionCount: mentionCount
+      description,
+      unreadCount,
+      mentionCount
     });
-  };
+  }
 
   if (mentionCount > 0) {
     const dataURL = badge.createDataURL(mentionCount.toString());
@@ -618,7 +691,7 @@ var showUnreadBadgeWindows = function(unreadCount, mentionCount) {
   }
 }
 
-var showUnreadBadgeOSX = function(unreadCount, mentionCount) {
+function showUnreadBadgeOSX(unreadCount, mentionCount) {
   if (mentionCount > 0) {
     remote.app.dock.setBadge(mentionCount.toString());
   } else if (unreadCount > 0 && config.showUnreadBadge) {
@@ -628,38 +701,41 @@ var showUnreadBadgeOSX = function(unreadCount, mentionCount) {
   }
 
   ipcRenderer.send('update-unread', {
-    unreadCount: unreadCount,
-    mentionCount: mentionCount
+    unreadCount,
+    mentionCount
   });
 }
 
-var showUnreadBadgeLinux = function(unreadCount, mentionCount) {
+function showUnreadBadgeLinux(unreadCount, mentionCount) {
   if (remote.app.isUnityRunning()) {
     remote.app.setBadgeCount(mentionCount);
   }
 
   ipcRenderer.send('update-unread', {
-    unreadCount: unreadCount,
-    mentionCount: mentionCount
+    unreadCount,
+    mentionCount
   });
 }
 
-var showUnreadBadge = function(unreadCount, mentionCount) {
+function showUnreadBadge(unreadCount, mentionCount) {
   switch (process.platform) {
-    case 'win32':
-      showUnreadBadgeWindows(unreadCount, mentionCount);
-      break;
-    case 'darwin':
-      showUnreadBadgeOSX(unreadCount, mentionCount);
-      break;
-    case 'linux':
-      showUnreadBadgeLinux(unreadCount, mentionCount);
-      break;
-    default:
+  case 'win32':
+    showUnreadBadgeWindows(unreadCount, mentionCount);
+    break;
+  case 'darwin':
+    showUnreadBadgeOSX(unreadCount, mentionCount);
+    break;
+  case 'linux':
+    showUnreadBadgeLinux(unreadCount, mentionCount);
+    break;
+  default:
   }
 }
 
 ReactDOM.render(
-  <MainPage teams={ config.teams } onUnreadCountChange={ showUnreadBadge } />,
+  <MainPage
+    teams={config.teams}
+    onUnreadCountChange={showUnreadBadge}
+  />,
   document.getElementById('content')
 );