From 423d8dcdf069cdb90aaa491b4859ef088d3c524d Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Thu, 18 Oct 2018 15:30:01 -0400
Subject: [PATCH] better style search bar with error and loading

---
 embark-ui/src/components/Layout.js    | 29 +++++++++++++++++++--------
 embark-ui/src/components/Loading.js   |  3 ++-
 embark-ui/src/components/SearchBar.js |  5 +++--
 embark-ui/src/components/search.css   | 16 +++++++++++++++
 embark-ui/src/index.css               |  6 +++++-
 embark-ui/src/sagas/searchSaga.js     |  2 +-
 6 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index fd16b21df..f7a204d12 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -66,15 +66,19 @@ class Layout extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {loading: false};
+    this.state = {
+      searchLoading: false,
+      searchError: false
+    };
   }
 
   shouldComponentUpdate(nextProps) {
     if (nextProps.searchResult && Object.keys(nextProps.searchResult).length &&
       nextProps.searchResult !== this.props.searchResult) {
-      this.setState({loading: false});
+      this.setState({searchLoading: false});
 
       if (nextProps.searchResult.error) {
+        this.setState({searchError: true});
         return true;
       }
 
@@ -101,7 +105,11 @@ class Layout extends React.Component {
 
   searchTheExplorer(value) {
     this.props.explorerSearch(value);
-    this.setState({loading: true});
+    this.setState({searchLoading: true});
+  }
+
+  closeSearchError() {
+    this.setState({searchError: false});
   }
 
   renderNav() {
@@ -120,11 +128,10 @@ class Layout extends React.Component {
   }
 
   renderRightNav() {
-    const searchResult = this.props.searchResult;
+    // {searchResult.error && <Alert color="danger">{searchResult.error}</Alert>}
     return (<Nav className="ml-auto" navbar>
-      <SearchBar searchSubmit={searchValue => this.searchTheExplorer(searchValue)}/>
-      {this.state.loading && <p>Searching...</p>}
-      {searchResult.error && <Alert color="danger">{searchResult.error}</Alert>}
+      {<SearchBar hidden={this.state.searchLoading} searchSubmit={searchValue => this.searchTheExplorer(searchValue)}/>}
+      {this.state.searchLoading && <p className="search-loading">Searching... <FontAwesome name="spinner" spin /></p>}
 
       {this.renderSettings()}
     </Nav>);
@@ -169,7 +176,7 @@ class Layout extends React.Component {
   }
 
   render() {
-    const {children} = this.props;
+    const {children, searchResult} = this.props;
 
     return (<div className="app animated fadeIn">
       <AppHeader fixed>
@@ -189,6 +196,12 @@ class Layout extends React.Component {
         {this.renderSideBar()}
 
         <main className="main">
+          {searchResult.error && this.state.searchError && <Alert color="danger">{searchResult.error}
+            <span className="search-error-close" onClick={(e) => this.closeSearchError(e)}>
+              <FontAwesome name="times-circle"/>
+            </span>
+          </Alert>}
+
           <Container fluid className="h-100" style={{marginTop: '24px'}}>
             {children}
           </Container>
diff --git a/embark-ui/src/components/Loading.js b/embark-ui/src/components/Loading.js
index f04ac9726..97cb0301b 100644
--- a/embark-ui/src/components/Loading.js
+++ b/embark-ui/src/components/Loading.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import {Row, Col} from 'reactstrap';
+import FontAwesome from 'react-fontawesome';
 
 import "./Loading.css";
 
 const Loading = () => (
   <Row className="align-items-center mt-5">
     <Col className="text-center">
-      <i className="fa fa-spinner fa-spin fa-3x fa-fw"></i>
+      <FontAwesome name="spinner" spin className="fa-3x fa-fw" />
     </Col>
   </Row>
 );
diff --git a/embark-ui/src/components/SearchBar.js b/embark-ui/src/components/SearchBar.js
index edf7b095d..137e86c14 100644
--- a/embark-ui/src/components/SearchBar.js
+++ b/embark-ui/src/components/SearchBar.js
@@ -33,7 +33,7 @@ class SearchBar extends React.Component {
 
   render() {
     return (
-      <Row>
+      <Row className={this.props.hidden ? 'hidden' : ''}>
         <Col className="col-sm-12">
           <Form inline className="search-bar float-right my-2">
             <FormGroup>
@@ -51,7 +51,8 @@ class SearchBar extends React.Component {
 }
 
 SearchBar.propTypes = {
-  searchSubmit: PropTypes.func.isRequired
+  searchSubmit: PropTypes.func.isRequired,
+  hidden: PropTypes.bool
 };
 
 export default SearchBar;
diff --git a/embark-ui/src/components/search.css b/embark-ui/src/components/search.css
index c216a9157..332ea6f2f 100644
--- a/embark-ui/src/components/search.css
+++ b/embark-ui/src/components/search.css
@@ -17,3 +17,19 @@
   border-bottom-left-radius: 0;
   box-shadow: none;
 }
+
+.search-loading {
+  margin-top: 16px;
+}
+
+.search-loading .fa-spinner {
+  font-size: 2em;
+  vertical-align: middle;
+  margin-left: 10px;
+}
+
+.search-error-close {
+  position: absolute;
+  cursor: pointer;
+  right: 20px;
+}
diff --git a/embark-ui/src/index.css b/embark-ui/src/index.css
index df15d2d81..f9974c63b 100644
--- a/embark-ui/src/index.css
+++ b/embark-ui/src/index.css
@@ -16,4 +16,8 @@
 
 .text-wrap {
   word-wrap: break-word; 
-}
\ No newline at end of file
+}
+
+.hidden {
+  display: none;
+}
diff --git a/embark-ui/src/sagas/searchSaga.js b/embark-ui/src/sagas/searchSaga.js
index e3c1c0dfb..a21baaa5a 100644
--- a/embark-ui/src/sagas/searchSaga.js
+++ b/embark-ui/src/sagas/searchSaga.js
@@ -51,5 +51,5 @@ export function *searchExplorer(entity, payload) {
     return yield put(entity.success(result));
   }
 
-  return yield put(entity.success({error: 'No result found in transactions, accounts or blocks'}));
+  return yield put(entity.success({error: 'No result found in transactions, accounts, contracts, or blocks'}));
 }