From bdb4e45d8bda83660bdad7f6f093441e2a1194f0 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Thu, 13 Sep 2018 17:02:27 +0100
Subject: [PATCH] Handle error on logout

---
 app/src/frontend/login.js      |  3 ++-
 app/src/frontend/my-account.js | 18 ++++++++++++------
 app/src/frontend/signup.js     |  3 ++-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/src/frontend/login.js b/app/src/frontend/login.js
index 2529e4a0..2f349e64 100644
--- a/app/src/frontend/login.js
+++ b/app/src/frontend/login.js
@@ -29,6 +29,8 @@ class Login extends Component {
 
     handleSubmit(event) {
         event.preventDefault();
+        this.setState({error: undefined})
+
         fetch('/login', {
             method: 'POST',
             body: JSON.stringify(this.state),
@@ -41,7 +43,6 @@ class Login extends Component {
             if (res.error) {
                 this.setState({error: res.error})
             } else {
-                this.setState({error: undefined})
                 fetch('/users/me').then(
                     (res) => res.json()
                 ).then(
diff --git a/app/src/frontend/my-account.js b/app/src/frontend/my-account.js
index 110e0603..adfd7be8 100644
--- a/app/src/frontend/my-account.js
+++ b/app/src/frontend/my-account.js
@@ -1,28 +1,33 @@
 import React, { Component } from 'react';
 import { Redirect } from 'react-router';
 
+import ErrorBox from './error-box';
+
 class MyAccountPage extends Component {
     constructor(props) {
         super(props);
+        this.state = {
+            error: undefined
+        };
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
     handleSubmit(event) {
-        const logout = this.props.logout;
         event.preventDefault();
+        this.setState({error: undefined});
+
         fetch('/logout', {
             method: 'POST'
         }).then(
             res => res.json()
         ).then(function(res){
             if (res.error) {
-                console.error(res.error);  // tell user
+                this.setState({error: res.error})
             } else {
-                logout();
-                console.log(res);  // redirect back
+                this.props.logout();
             }
-        }).catch(
-            err => console.error(err)
+        }.bind(this)).catch(
+            (err) => this.setState({error: err})
         );
     }
 
@@ -32,6 +37,7 @@ class MyAccountPage extends Component {
                 <article>
                     <section className="main-col">
                         <h1 className="h3">Welcome, {this.props.user.username}</h1>
+                        <ErrorBox msg={this.state.error} />
                         <form method="POST" action="/logout" onSubmit={this.handleSubmit}>
                             <input className="btn btn-secondary" type="submit" value="Log out"/>
                         </form>
diff --git a/app/src/frontend/signup.js b/app/src/frontend/signup.js
index 7ff27f39..fd525983 100644
--- a/app/src/frontend/signup.js
+++ b/app/src/frontend/signup.js
@@ -32,6 +32,8 @@ class SignUp extends Component {
 
     handleSubmit(event) {
         event.preventDefault();
+        this.setState({error: undefined})
+
         fetch('/users', {
             method: 'POST',
             body: JSON.stringify(this.state),
@@ -44,7 +46,6 @@ class SignUp extends Component {
             if (res.error) {
                 this.setState({error: res.error})
             } else {
-                this.setState({error: undefined})
                 fetch('/users/me').then(
                     (res) => res.json()
                 ).then(