Fix search open and close logic

src/common/blockchain/services/discover-service/discover-service.js

@@ -67,7 +67,7 @@ class DiscoverService extends BlockchainService {
           .call({ from: this.sharedContext.account })
 
         const dappMetadata = dappsCache[dapp.metadata]
-        if (typeof dappMetadata !== 'undefined') {
+        if (dappMetadata) {
           delete dappsCache[dapp.metadata]
           dapp.metadata = dappMetadata.details
           dapp.metadata.status = dappMetadata.status
@@ -79,7 +79,7 @@ class DiscoverService extends BlockchainService {
       Object.keys(dappsCache).forEach(metadataHash => {
         const dappMetadata = dappsCache[metadataHash]
 
-        if (dappMetadata.status == 'NEW') {
+        if (dappMetadata.status == 'APPROVED') {
           dapps.push({
             developer: '',
             id: dappMetadata.compressedMetadata,

src/common/clients/http-client.js

@@ -8,7 +8,7 @@ const DEFAULT_HEADERS = {
 const executeRequest = async function(method, url, reqStruct) {
   return axios({
     method,
-    url: `http://localhost:4000${url}`,
+    url,
     data: {
       ...reqStruct.body,
     },

src/common/components/Search/Search.jsx

@@ -12,12 +12,43 @@ class Search extends React.Component {
       dapps: [],
       isSearching: false,
     }
+    this.nodes = React.createRef()
     this.handleChange = this.handleChange.bind(this)
+    this.applyClass = this.applyClass.bind(this)
+    this.closeSearchBox = this.closeSearchBox.bind(this)
+    this.onClickBody = this.onClickBody.bind(this)
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.onClickBody)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onClickBody)
+  }
+
+  onClickBody(e) {
+    if (this.nodes && this.nodes.current.contains(e.target) === true) return
+
+    this.setState({
+      isSearching: false,
+      dapps: [],
+    })
+  }
+
+  closeSearchBox() {}
+
+  applyClass(e) {
+    e.preventDefault()
+    this.setState({
+      isSearching: true,
+    })
   }
 
   handleChange(e) {
     const { value } = e.target
     const { dappState } = this.props
+    this.setState({ isSearching: true })
     if (value.length > 1) {
       const searchExp = new RegExp(value, 'i')
       const dapps = dappState.dapps.filter(dapp => {
@@ -26,10 +57,9 @@ class Search extends React.Component {
         }
         return null
       })
-      this.setState({ dapps, isSearching: true })
-    } else if (value === '') {
+      this.setState({ dapps })
+    } else {
       this.setState({
-        isSearching: false,
         dapps: [],
       })
     }
@@ -38,21 +68,31 @@ class Search extends React.Component {
   render() {
     const { searchStyle, searchResultStyle } = this.props
     const { dapps, isSearching } = this.state
+    const cssClassVisible = isSearching ? styles.isOpen : ''
     return (
-      <div className={styles.search_container}>
-        <img src={searchIcon} alt="Search Icon" width="16" height="16" />
-        <input
-          type="text"
-          onChange={e => this.handleChange(e)}
-          className={[styles.search, searchStyle].join(' ')}
-          placeholder="Search Dapps"
-        />
-        {isSearching && (
-          <div className={[styles.searchResults, searchResultStyle].join(' ')}>
-            <SearchResultItem showActionButtons={false} dapps={dapps} />
-          </div>
-        )}
-      </div>
+      <>
+        <div className={`${styles.dim}`} />
+        <div
+          ref={this.nodes}
+          className={[styles.search_container, cssClassVisible].join(' ')}
+          onClick={e => this.applyClass(e)}
+        >
+          <img src={searchIcon} alt="Search Icon" width="16" height="16" />
+          <input
+            type="text"
+            onChange={e => this.handleChange(e)}
+            className={[styles.search, searchStyle].join(' ')}
+            placeholder="Search Dapps"
+          />
+          {isSearching && (
+            <div
+              className={[styles.searchResults, searchResultStyle].join(' ')}
+            >
+              <SearchResultItem showActionButtons={false} dapps={dapps} />
+            </div>
+          )}
+        </div>
+      </>
     )
   }
 }

src/common/components/Search/Search.module.scss

@@ -3,7 +3,6 @@
 @media (min-width: $desktop) {
   .search_container {
     height: calculateRem(20);
-    cursor: pointer;
     border-radius: calculateRem(40);
     background: #ffffff;
     padding: calculateRem(10);
@@ -16,25 +15,6 @@
     z-index: 1;
     transform: translateY(-50%);
 
-    &:hover {
-      width: calculateRem(240);
-      .search {
-        width: calculateRem(240);
-        display: block;
-      }
-      .searchResults {
-        z-index: 99;
-        display: block;
-        position: absolute;
-        top: calculateRem(39);
-        background: #ffffff;
-        left: 0;
-        border-bottom-left-radius: calculateRem(5);
-        border-bottom-right-radius: calculateRem(5);
-        box-shadow: 0 0 0 rgba(0, 34, 51, 0.08),
-          0px 2px 4px rgba(0, 34, 51, 0.16);
-      }
-    }
     img {
       align-self: center;
     }
@@ -48,7 +28,7 @@
       outline: none;
       transition: 0.4s;
       line-height: calculateRem(15);
-      width: 0px;
+      width: calculateRem(20);
       &::placeholder {
         color: #939ba1;
       }
@@ -60,6 +40,25 @@
   }
 }
 
+.isOpen {
+  width: calculateRem(240);
+  .search {
+    width: calculateRem(240);
+    display: block;
+  }
+  .searchResults {
+    z-index: 99;
+    display: block;
+    position: absolute;
+    top: 1.6rem;
+    background: #ffffff;
+    left: 0;
+    border-bottom-left-radius: calculateRem(5);
+    border-bottom-right-radius: calculateRem(5);
+    box-shadow: 0 0 0 rgba(0, 34, 51, 0.08), 0px 2px 4px rgba(0, 34, 51, 0.16);
+  }
+}
+
 @media (max-width: $desktop) {
   .search_container {
     display: flex;
@@ -93,4 +92,7 @@
       background-size: cover;
     }
   }
+  .isOpen {
+    width: 90vw;
+  }
 }

src/common/components/Search/SearchResultItem/SearchResultItem.jsx

@@ -28,7 +28,12 @@ const SearchResultItem = props => {
         >
           {description}
         </p>
-        <a className={styles.link} href={url}>
+        <a
+          className={styles.link}
+          target="_blank"
+          rel="noopener noreferrer"
+          href={url}
+        >
           {url}
           &nbsp;&rarr;
         </a>