feature(globalerror): clear error

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 }) => {
+const GlobalError = ({ error, clearError }) => (
-  if (!error) { return null }
+  <div className={`${styles.container} ${!error && styles.closed}`}>
-  return (
+    <div className={styles.content}>
-    <div className={styles.container}>
+      <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

app/components/GlobalError/GlobalError.scss

@@ -8,17 +8,27 @@
   width: 100%;
   text-align: center;
   padding: 20px;
-  // height: 0;
   transition: all 0.25s ease;
 
-  &.active {
+  &.closed {
-    height: 100%;
+    max-height: 0;
-    padding: 20px;
+    padding: 0;
   }
 
-  h2 {
+  .content {
-    font-size: 20px;
+    position: relative;
-    letter-spacing: 1.5px;
+
-    font-weight: bold;
+    .close {
+      position: absolute;
+      top: calc(50% - 8px);
+      right: 10%;
+      cursor: pointer;
+    }
+
+    h2 {
+      font-size: 20px;
+      letter-spacing: 1.5px;
+      font-weight: bold;
+    }
   }
 }

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}

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 => ({