Rework desktop search experience

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 (dappMetadata) {
+        if (typeof dappMetadata !== 'undefined') {
           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 == 'APPROVED') {
+        if (dappMetadata.status == 'NEW') {
           dapps.push({
             developer: '',
             id: dappMetadata.compressedMetadata,

src/common/clients/http-client.js

@@ -1,32 +1,32 @@
-const axios = require('axios');
+const axios = require('axios')
 
 const DEFAULT_HEADERS = {
   Accept: 'application/json',
-  'Content-type': 'application/json'
+  'Content-type': 'application/json',
-};
+}
 
 const executeRequest = async function(method, url, reqStruct) {
   return axios({
     method,
-    url,
+    url: `http://localhost:4000${url}`,
     data: {
-      ...reqStruct.body
+      ...reqStruct.body,
     },
     headers: {
       ...DEFAULT_HEADERS,
-      ...reqStruct.headers
+      ...reqStruct.headers,
-    }
+    },
-  });
+  })
-};
+}
 
 class HTTPClient {
   static async postRequest(url, body, headers = '') {
-    return executeRequest('POST', url, { body, headers });
+    return executeRequest('POST', url, { body, headers })
   }
 
   static async getRequest(url, headers = '') {
-    return executeRequest('GET', url, { headers });
+    return executeRequest('GET', url, { headers })
   }
 }
 
-export default HTTPClient;
+export default HTTPClient

src/common/components/Search/Search.jsx

@@ -30,24 +30,23 @@ class Search extends React.Component {
   }
 
   render() {
-    const { searchStyle, onSearch, searchResultStyle } = this.props
+    const { searchStyle, searchResultStyle } = this.props
     const { dapps, isSearching } = this.state
     return (
-      <>
+      <div className={styles.search_container}>
-        <div className={styles.container}>
+        <img src={searchIcon} alt="Search Icon" width="16" height="16" />
-          <img src={searchIcon} alt="Search Icon" width="16" height="16" />
+        <input
-          <input
+          type="text"
-            type="text"
+          onChange={e => this.handleChange(e)}
-            onChange={e => this.handleChange(e)}
+          className={[styles.search, searchStyle].join(' ')}
-            className={[styles.search, searchStyle].join(' ')}
+          placeholder="Search Dapps"
-            placeholder="Search Dapps"
+        />
-            onSearch={onSearch(isSearching)}
+        {isSearching && (
-          />
+          <div className={[styles.searchResults, searchResultStyle].join(' ')}>
-        </div>
+            <SearchResultItem showActionButtons={false} dapps={dapps} />
-        <div className={[styles.searchResults, searchResultStyle].join(' ')}>
+          </div>
-          <SearchResultItem showActionButtons={false} dapps={dapps} />
+        )}
-        </div>
+      </div>
-      </>
     )
   }
 }
@@ -56,7 +55,6 @@ Search.propTypes = {
   searchStyle: PropTypes.string,
   searchResultStyle: PropTypes.string,
   dappState: PropTypes.instanceOf(DappState).isRequired,
-  onSearch: PropTypes.func.isRequired,
 }
 
 Search.defaultProps = {

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

@@ -1,29 +1,96 @@
 @import '../../styles/_variables.scss';
 
-.container {
+@media (min-width: $desktop) {
-  display: flex;
+  .search_container {
-  flex: 1;
+    height: calculateRem(20);
-  border: 1px solid #eef2f5;
+    cursor: pointer;
-  border-radius: calculateRem(4);
+    border-radius: calculateRem(40);
-  overflow: hidden;
+    background: #ffffff;
-  margin: calculateRem(16);
+    padding: calculateRem(10);
-  img {
+    position: absolute;
-    padding: calculateRem(5);
+    box-shadow: 0px 4px 12px rgba(0, 34, 51, 0.08),
-    align-self: center;
+      0px 2px 4px rgba(0, 34, 51, 0.16);
+    right: calculateRem(20);
+    top: calculateRem(60);
+    display: flex;
+    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;
+    }
+
+    .search {
+      font-family: 'Inter';
+      font-size: calculateRem(15);
+      border: none;
+      background: none;
+      display: none;
+      outline: none;
+      transition: 0.4s;
+      line-height: calculateRem(15);
+      width: 0px;
+      &::placeholder {
+        color: #939ba1;
+      }
+    }
+    .searchResults {
+      display: none;
+      width: 100%;
+    }
   }
 }
 
-.search {
+@media (max-width: $desktop) {
-  font-family: 'Inter';
+  .search_container {
-  font-size: calculateRem(15);
+    display: flex;
-  flex: 1;
+    flex: 1;
-  border: none;
+    border: 1px solid #eef2f5;
-  outline: none;
+    border-radius: calculateRem(4);
-  &::placeholder {
+    overflow: hidden;
-    color: #939ba1;
+    margin: calculateRem(16);
+    img {
+      padding: calculateRem(5);
+      align-self: center;
+    }
+    .search {
+      font-family: 'Inter';
+      font-size: calculateRem(15);
+      flex: 1;
+      border: none;
+      outline: none;
+      &::placeholder {
+        color: #939ba1;
+      }
+    }
+
+    .searchResults {
+      z-index: 99;
+      top: calculateRem(100);
+      width: 92vw;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-attachment: fixed;
+      background-size: cover;
+    }
   }
 }
-
-.searchResults {
-  z-index: 99;
-}

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

@@ -21,19 +21,17 @@ const SearchResultItem = props => {
         />
       </div>
       <div className={styles.column}>
-        <>
+        <h2 className={styles.header}>{name}</h2>
-          <h2 className={styles.header}>{name}</h2>
+        <p
-          <p
+          className={styles.description}
-            className={styles.description}
+          style={{ WebkitBoxOrient: 'vertical' }}
-            style={{ WebkitBoxOrient: 'vertical' }}
+        >
-          >
+          {description}
-            {description}
+        </p>
-          </p>
+        <a className={styles.link} href={url}>
-          <a className={styles.link} href={{ url }}>
+          {url}
-            {url}
+          &nbsp;&rarr;
-            &nbsp;&rarr;
+        </a>
-          </a>
-        </>
       </div>
     </div>
   )

src/modules/CategorySelector/CategorySelector.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import CategoryIcon from '../../common/components/CategoryIcon'
 import ViewAll from '../../common/components/ViewAll'
-import Search from '../../common/components/Search'
 import categories from '../../common/utils/categories'
 import humanise from '../../common/utils/humanise'
 import dropdownArrows from '../../common/assets/images/dropdown-arrows.svg'
@@ -11,14 +10,13 @@ import styles from './CategorySelector.module.scss'
 class CategorySelector extends React.Component {
   constructor(props) {
     super(props)
-    this.state = { open: false, isSearching: false }
+    this.state = { open: false }
     this.toggle = this.toggle.bind(this)
     this.updateCategory = this.updateCategory.bind(this)
     this.container = React.createRef()
     this.onClickSubmit = this.onClickSubmit.bind(this)
     this.onClickHighestRanked = this.onClickHighestRanked.bind(this)
     this.onClickRecentlyAdded = this.onClickRecentlyAdded.bind(this)
-    this.onSearch = this.onSearch.bind(this)
   }
 
   componentDidMount() {
@@ -45,10 +43,6 @@ class CategorySelector extends React.Component {
     this.setState({ open: false })
   }
 
-  onSearch(isSearching) {
-    this.setState({ isSearching })
-  }
-
   onClickHighestRanked(e) {
     const { onClickCloseDesktopMenu } = this.props
     onClickCloseDesktopMenu()
@@ -83,7 +77,6 @@ class CategorySelector extends React.Component {
       showSubmitDApp,
     } = this.props
     let { open } = this.state
-    const { isSearching } = this.state
     if (alwaysOpen === true) open = true
 
     return (
@@ -92,22 +85,11 @@ class CategorySelector extends React.Component {
           style={open ? { visible: 'block' } : { display: 'none' }}
           className={styles.open}
         >
-          <Search
+          <div className={styles.openHeader}>
-            searchStyle={styles.search}
-            onSearch={this.onSearch}
-            searchResultStyle={styles.searchResult}
-          />
-          <div
-            className={styles.openHeader}
-            style={isSearching ? { display: 'none' } : { display: 'flex' }}
-          >
             <h2>Categories</h2>
             <ViewAll size="small" />
           </div>
-          <div
+          <div className={styles.categories}>
-            className={styles.categories}
-            style={isSearching ? { display: 'none' } : { display: 'block' }}
-          >
             {categories.map(c => (
               <button
                 className={
@@ -127,10 +109,7 @@ class CategorySelector extends React.Component {
           </div>
 
           {showLists && (
-            <div
+            <div className={styles.categories}>
-              className={styles.categories}
-              style={isSearching ? { display: 'none' } : { display: 'block' }}
-            >
               <div className={`${styles.openHeader} ${styles.spacing}`}>
                 <h2>Lists</h2>
               </div>
@@ -182,7 +161,6 @@ class CategorySelector extends React.Component {
               className={`${styles.openButton} ${styles.submitDapp}`}
               type="button"
               onClick={this.onClickSubmit}
-              style={isSearching ? { display: 'none' } : { display: 'flex' }}
             >
               <svg
                 width="20"

src/modules/CategorySelector/CategorySelector.module.scss

@@ -1,14 +1,5 @@
 @import '../../common/styles/variables';
 
-.search {
-  width: 85%;
-  margin: calculateRem(9);
-}
-
-.searchResult {
-  position: relative;
-}
-
 .categories {
   opacity: 1;
 }

src/modules/Home/Home.jsx

@@ -14,19 +14,11 @@ import DesktopMenu from '../DesktopMenu/DesktopMenu.container'
 class Home extends React.Component {
   constructor(props) {
     super(props)
-    this.state = {
+    this.state = {}
-      isSearching: false,
-    }
-    this.onSearch = this.onSearch.bind(this)
-  }
-
-  onSearch(isSearching) {
-    this.setState({ isSearching })
   }
 
   render() {
     const { dapps } = this.props
-    const { isSearching } = this.state
     const loaded = dapps.loaded
 
     return (
@@ -37,13 +29,10 @@ class Home extends React.Component {
               <h2 className={styles.headline}>Discover</h2>
             </div>
             <DesktopMenu />
-            <div className={styles.mobileSearch}>
+            <Search
-              <Search
+              searchStyle={styles.search}
-                searchStyle={styles.search}
+              searchResultStyle={styles.searchResult}
-                searchResultStyle={styles.searchResult}
+            />
-                onSearch={this.onSearch}
-              />
-            </div>
             <FeaturedDapps featured={featured} />
             <Categories />
             <HighestRanked />

src/modules/Home/Home.module.scss

@@ -10,10 +10,6 @@
   margin: 0;
 }
 
-.mobileSearch {
-  display: none;
-}
-
 .search {
   display: flex;
   width: 100%;
@@ -22,11 +18,7 @@
 }
 
 @media (max-width: $desktop) {
-  .mobileSearch {
-    display: block;
-  }
   .searchResult {
-    width: 98vw;
     position: absolute;
     background-color: #ffffff;
   }