Fixing blue bar and renders warning when mis-configured.

2015-09-24 15:06:54 -07:00
--- a/web/react/components/error_bar.jsx
+++ b/web/react/components/error_bar.jsx
@@ -3,9 +3,6 @@

 var ErrorStore = require('../stores/error_store.jsx');
 var utils = require('../utils/utils.jsx');
-var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
-var Constants = require('../utils/constants.jsx');
-var ActionTypes = Constants.ActionTypes;

 export default class ErrorBar extends React.Component {
    constructor() {
@@ -13,70 +10,79 @@ export default class ErrorBar extends React.Component {

        this.onErrorChange = this.onErrorChange.bind(this);
        this.handleClose = this.handleClose.bind(this);
+        this.prevTimmer = null;

-        this.state = this.getStateFromStores();
-        if (this.state.message) {
-            setTimeout(this.handleClose, 10000);
+        this.state = ErrorStore.getLastError();
+        if (this.state && this.state.message) {
+            this.prevTimmer = setTimeout(this.handleClose, 10000);
        }
    }
-    getStateFromStores() {
-        var error = ErrorStore.getLastError();
-        if (!error || error.message === 'There appears to be a problem with your internet connection') {
-            return {message: null};
-        }

-        return {message: error.message};
-    }
    componentDidMount() {
        ErrorStore.addChangeListener(this.onErrorChange);
        $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
-        $(window).resize(function onResize() {
-            if (this.state.message) {
+        $(window).resize(() => {
+            if (this.state && this.state.message) {
                $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
            }
-        }.bind(this));
+        });
    }
+
    componentWillUnmount() {
        ErrorStore.removeChangeListener(this.onErrorChange);
    }
-    onErrorChange() {
-        var newState = this.getStateFromStores();
-        if (!utils.areStatesEqual(newState, this.state)) {
-            if (newState.message) {
-                setTimeout(this.handleClose, 10000);
-            }

+    onErrorChange() {
+        var newState = ErrorStore.getLastError();
+
+        if (this.prevTimmer != null) {
+            clearInterval(this.prevTimmer);
+            this.prevTimmer = null;
+        }
+
+        if (newState) {
            this.setState(newState);
+            this.prevTimmer = setTimeout(this.handleClose, 10000);
+        } else {
+            this.setState({message: null});
        }
    }
+
    handleClose(e) {
        if (e) {
            e.preventDefault();
        }

-        AppDispatcher.handleServerAction({
-            type: ActionTypes.RECIEVED_ERROR,
-            err: null
-        });
+        ErrorStore.storeLastError(null);
+        ErrorStore.emitChange();

        $('body').css('padding-top', '0');
    }
+
    render() {
-        if (this.state.message) {
-            return (
-                <div className='error-bar'>
-                    <span>{this.state.message}</span>
-                    <a
-                        href='#'
-                        className='error-bar__close'
-                        onClick={this.handleClose}
-                    >
-                        &times;
-                    </a>
-                </div>
-            );
+        if (!this.state) {
+            return <div/>;
        }

-        return <div/>;
+        if (!this.state.message) {
+            return <div/>;
+        }
+
+        if (this.state.connErrorCount < 7) {
+            return <div/>;
+        }
+
+        return (
+            <div className='error-bar'>
+                <span>{this.state.message}</span>
+                <a
+                    href='#'
+                    className='error-bar__close'
+                    onClick={this.handleClose}
+                >
+                    &times;
+                </a>
+            </div>
+        );
    }
 }
--- a/web/react/components/textbox.jsx
+++ b/web/react/components/textbox.jsx
@@ -5,7 +5,6 @@ const AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 const PostStore = require('../stores/post_store.jsx');
 const CommandList = require('./command_list.jsx');
 const ErrorStore = require('../stores/error_store.jsx');
-const AsyncClient = require('../utils/async_client.jsx');

 const Utils = require('../utils/utils.jsx');
 const Constants = require('../utils/constants.jsx');
@@ -18,7 +17,6 @@ export default class Textbox extends React.Component {
        this.getStateFromStores = this.getStateFromStores.bind(this);
        this.onListenerChange = this.onListenerChange.bind(this);
        this.onRecievedError = this.onRecievedError.bind(this);
-        this.onTimerInterrupt = this.onTimerInterrupt.bind(this);
        this.updateMentionTab = this.updateMentionTab.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleKeyPress = this.handleKeyPress.bind(this);
@@ -35,8 +33,7 @@ export default class Textbox extends React.Component {
        this.state = {
            mentionText: '-1',
            mentions: [],
-            connection: '',
-            timerInterrupt: null
+            connection: ''
        };

        this.caret = -1;
@@ -44,6 +41,7 @@ export default class Textbox extends React.Component {
        this.doProcessMentions = false;
        this.mentions = [];
    }
+
    getStateFromStores() {
        const error = ErrorStore.getLastError();

@@ -53,6 +51,7 @@ export default class Textbox extends React.Component {

        return {message: null};
    }
+
    componentDidMount() {
        PostStore.addAddMentionListener(this.onListenerChange);
        ErrorStore.addChangeListener(this.onRecievedError);
@@ -60,46 +59,28 @@ export default class Textbox extends React.Component {
        this.resize();
        this.updateMentionTab(null);
    }
+
    componentWillUnmount() {
        PostStore.removeAddMentionListener(this.onListenerChange);
        ErrorStore.removeChangeListener(this.onRecievedError);
    }
+
    onListenerChange(id, username) {
        if (id === this.props.id) {
            this.addMention(username);
        }
    }
+
    onRecievedError() {
-        const errorState = this.getStateFromStores();
+        const errorState = ErrorStore.getLastError();

-        if (this.state.timerInterrupt !== null) {
-            window.clearInterval(this.state.timerInterrupt);
-            this.setState({timerInterrupt: null});
-        }
-
-        if (errorState.message === 'There appears to be a problem with your internet connection') {
+        if (errorState && errorState.connErrorCount > 0) {
            this.setState({connection: 'bad-connection'});
-            const timerInterrupt = window.setInterval(this.onTimerInterrupt, 5000);
-            this.setState({timerInterrupt: timerInterrupt});
        } else {
            this.setState({connection: ''});
        }
    }
-    onTimerInterrupt() {
-        // Since these should only happen when you have no connection and slightly briefly after any
-        // performance hit should not matter
-        if (this.state.connection === 'bad-connection') {
-            AppDispatcher.handleServerAction({
-                type: ActionTypes.RECIEVED_ERROR,
-                err: null
-            });

-            AsyncClient.updateLastViewedAt();
-        }
-
-        window.clearInterval(this.state.timerInterrupt);
-        this.setState({timerInterrupt: null});
-    }
    componentDidUpdate() {
        if (this.caret >= 0) {
            Utils.setCaretPosition(React.findDOMNode(this.refs.message), this.caret);
@@ -111,6 +92,7 @@ export default class Textbox extends React.Component {
        }
        this.resize();
    }
+
    componentWillReceiveProps(nextProps) {
        if (!this.addedMention) {
            this.checkForNewMention(nextProps.messageText);
@@ -122,19 +104,22 @@ export default class Textbox extends React.Component {
        this.addedMention = false;
        this.refs.commands.getSuggestedCommands(nextProps.messageText);
    }
+
    updateMentionTab(mentionText) {
        // using setTimeout so dispatch isn't called during an in progress dispatch
-        setTimeout(function updateMentionTabAfterTimeout() {
+        setTimeout(() => {
            AppDispatcher.handleViewAction({
                type: ActionTypes.RECIEVED_MENTION_DATA,
                id: this.props.id,
                mention_text: mentionText
            });
-        }.bind(this), 1);
+        }, 1);
    }
+
    handleChange() {
        this.props.onUserInput(React.findDOMNode(this.refs.message).value);
    }
+
    handleKeyPress(e) {
        const text = React.findDOMNode(this.refs.message).value;

@@ -157,6 +142,7 @@ export default class Textbox extends React.Component {

        this.props.onKeyPress(e);
    }
+
    handleKeyDown(e) {
        if (Utils.getSelectedText(React.findDOMNode(this.refs.message)) !== '') {
            this.doProcessMentions = true;
@@ -166,6 +152,7 @@ export default class Textbox extends React.Component {
            this.handleBackspace(e);
        }
    }
+
    handleBackspace() {
        const text = React.findDOMNode(this.refs.message).value;
        if (text.indexOf('/') === 0) {
@@ -185,6 +172,7 @@ export default class Textbox extends React.Component {
            this.doProcessMentions = true;
        }
    }
+
    checkForNewMention(text) {
        const caret = Utils.getCaretPosition(React.findDOMNode(this.refs.message));

@@ -211,6 +199,7 @@ export default class Textbox extends React.Component {
        const name = preText.substring(atIndex + 1, preText.length).toLowerCase();
        this.updateMentionTab(name);
    }
+
    addMention(name) {
        const caret = Utils.getCaretPosition(React.findDOMNode(this.refs.message));

@@ -233,11 +222,13 @@ export default class Textbox extends React.Component {

        this.props.onUserInput(`${prefix}@${name} ${suffix}`);
    }
+
    addCommand(cmd) {
        const elm = React.findDOMNode(this.refs.message);
        elm.value = cmd;
        this.handleChange();
    }
+
    resize() {
        const e = React.findDOMNode(this.refs.message);
        const w = React.findDOMNode(this.refs.wrapper);
@@ -264,21 +255,25 @@ export default class Textbox extends React.Component {
            this.props.onHeightChange();
        }
    }
+
    handleFocus() {
        const elm = React.findDOMNode(this.refs.message);
        if (elm.title === elm.value) {
            elm.value = '';
        }
    }
+
    handleBlur() {
        const elm = React.findDOMNode(this.refs.message);
        if (elm.value === '') {
            elm.value = elm.title;
        }
    }
+
    handlePaste() {
        this.doProcessMentions = true;
    }
+
    render() {
        return (
            <div