From a2e4e0ad7db1c56d88a477c572eb485f7c027192 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 4 Oct 2017 16:12:25 -0500
Subject: [PATCH] feature(globalerror): clear error

---
 app/components/GlobalError/GlobalError.js   | 19 +++++++++------
 app/components/GlobalError/GlobalError.scss | 26 ++++++++++++++-------
 app/routes/app/components/App.js            |  3 ++-
 app/routes/app/containers/AppContainer.js   |  6 ++++-
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/app/components/GlobalError/GlobalError.js b/app/components/GlobalError/GlobalError.js
index a0e8b2ab..75f09a1e 100644
--- a/app/components/GlobalError/GlobalError.js
+++ b/app/components/GlobalError/GlobalError.js
@@ -1,18 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { MdClose } from 'react-icons/lib/md'
 import styles from './GlobalError.scss'
 
-const GlobalError = ({ error }) => {
-  if (!error) { return null }
-  return (
-    <div className={styles.container}>
+const GlobalError = ({ error, clearError }) => (
+  <div className={`${styles.container} ${!error && styles.closed}`}>
+    <div className={styles.content}>
+      <div className={styles.close} onClick={clearError}>
+        <MdClose />
+      </div>
       <h2>{error}</h2>
     </div>
-  )
-}
+  </div>
+)
+
 
 GlobalError.propTypes = {
-  error: PropTypes.string
+  error: PropTypes.string,
+  clearError: PropTypes.func.isRequired
 }
 
 export default GlobalError
diff --git a/app/components/GlobalError/GlobalError.scss b/app/components/GlobalError/GlobalError.scss
index 4e0dad23..5486c7fc 100644
--- a/app/components/GlobalError/GlobalError.scss
+++ b/app/components/GlobalError/GlobalError.scss
@@ -8,17 +8,27 @@
   width: 100%;
   text-align: center;
   padding: 20px;
-  // height: 0;
   transition: all 0.25s ease;
 
-  &.active {
-    height: 100%;
-    padding: 20px;
+  &.closed {
+    max-height: 0;
+    padding: 0;
   }
 
-  h2 {
-    font-size: 20px;
-    letter-spacing: 1.5px;
-    font-weight: bold;
+  .content {
+    position: relative;
+
+    .close {
+      position: absolute;
+      top: calc(50% - 8px);
+      right: 10%;
+      cursor: pointer;
+    }
+
+    h2 {
+      font-size: 20px;
+      letter-spacing: 1.5px;
+      font-weight: bold;
+    }
   }
 }
\ No newline at end of file
diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js
index 8162dde3..4095cbd9 100644
--- a/app/routes/app/components/App.js
+++ b/app/routes/app/components/App.js
@@ -32,6 +32,7 @@ class App extends Component {
       closeForm,
 
       error: { error },
+      clearError,
 
       children
     } = this.props
@@ -40,7 +41,7 @@ class App extends Component {
 
     return (
       <div>
-        <GlobalError error={error} />
+        <GlobalError error={error} clearError={clearError} />
         <ModalRoot
           modalType={modalType}
           modalProps={modalProps}
diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js
index 0ee81915..395430fb 100644
--- a/app/routes/app/containers/AppContainer.js
+++ b/app/routes/app/containers/AppContainer.js
@@ -14,6 +14,8 @@ import { sendCoins } from 'reducers/transaction'
 import { payInvoice } from 'reducers/payment'
 import { createInvoice, fetchInvoice } from 'reducers/invoice'
 
+import { clearError } from 'reducers/error'
+
 
 import App from '../components/App'
 
@@ -40,7 +42,9 @@ const mapDispatchToProps = {
   sendCoins,
   payInvoice,
   createInvoice,
-  fetchInvoice
+  fetchInvoice,
+
+  clearError
 }
 
 const mapStateToProps = state => ({