Update options message

2 files changed, 48 insertions, 4 deletions

diff --git a/src/components/options-form/index.js b/src/components/options-form/index.js
index f83bfe3..bc1c72d 100644
--- a/src/components/options-form/index.js
+++ b/src/components/options-form/index.js
@@ -3,13 +3,23 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import './styles.css';
+import Alert from '../alert';
 
 class OptionsForm extends React.Component {
 
   state = {
-    token: this.props.options.token
+    token: this.props.options.token,
+    success: false,
   };
 
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.options.token !== prevProps.options.token) {
+      this.setState({
+        success: true
+      });
+    }
+  }
+
   saveOptions = () => {
     this.props.updateOptions({
       token: this.state.token
@@ -18,10 +28,17 @@ class OptionsForm extends React.Component {
 
   onChange = (e) => {
     this.setState({
-      [e.target.name]: e.target.value
+      [e.target.name]: e.target.value,
+      success: false
     });
   };
 
+  onKeyDown = (e) => {
+    if (e.keyCode === 13) {
+      this.saveOptions();
+    }
+  };
+
   render() {
     return (
       <div className="options-form">
@@ -39,6 +56,7 @@ class OptionsForm extends React.Component {
           <input type="text"
                  name='token'
                  onChange={ this.onChange }
+                 onKeyDown={ this.onKeyDown }
                  className="form-control"
                  value={ this.state.token }/>
         </div>
@@ -47,6 +65,14 @@ class OptionsForm extends React.Component {
           Save Token
         </button>
         <Link className='btn btn-primary shadow btn-block btn-lg' to='/'><i className="fa fa-arrow-left"></i> Go Home</Link>
+
+        {
+          this.state.success && (
+            <div className="mt-4">
+              <Alert type='warning'>Successfully updated</Alert>
+            </div>
+          )
+        }
       </div>
     );
   }
diff --git a/src/containers/feed/index.js b/src/containers/feed/index.js
index b33e192..20a8913 100644
--- a/src/containers/feed/index.js
+++ b/src/containers/feed/index.js
@@ -87,9 +87,27 @@ class FeedContainer extends React.Component {
   }
 
   renderErrors() {
-    return this.props.github.error && (
+    if (!this.props.github.error) {
+      return null;
+    }
+
+    let message = '';
+    switch (this.props.github.error.toLowerCase()) {
+      case 'bad credentials':
+        message = (
+          <span>
+            Token is invalid, try <Link to='/options'>updating the token</Link> on the options page
+          </span>
+        );
+        break;
+      default:
+        message = this.props.github.error;
+        break;
+    }
+
+    return (
       <Alert type='danger'>
-        { this.props.github.error }
+        { message }
       </Alert>
     );
   }