Rework desktop search experience

2019-09-13 00:51:26 +01:00 · 2019-09-13 00:51:26 +01:00 · 38cc479a54
parent e6e63f3b2a
commit 38cc479a54
10 changed files with 138 additions and 125 deletions
--- a/logs.log
+++ b/logs.log
--- a/src/common/blockchain/services/discover-service/discover-service.js
+++ b/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,
--- a/src/common/clients/http-client.js
+++ b/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
--- a/src/common/components/Search/Search.jsx
+++ b/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.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"
-            onSearch={onSearch(isSearching)}
-          />
-        </div>
-        <div className={[styles.searchResults, searchResultStyle].join(' ')}>
-          <SearchResultItem showActionButtons={false} dapps={dapps} />
-        </div>
-      </>
+      <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>
    )
  }
 }
@ -56,7 +55,6 @@ Search.propTypes = {
  searchStyle: PropTypes.string,
  searchResultStyle: PropTypes.string,
  dappState: PropTypes.instanceOf(DappState).isRequired,
-  onSearch: PropTypes.func.isRequired,
 }

 Search.defaultProps = {
--- a/src/common/components/Search/Search.module.scss
+++ b/src/common/components/Search/Search.module.scss
@ -1,29 +1,96 @@
@import '../../styles/_variables.scss';

-.container {
-  display: flex;
-  flex: 1;
-  border: 1px solid #eef2f5;
-  border-radius: calculateRem(4);
-  overflow: hidden;
-  margin: calculateRem(16);
-  img {
-    padding: calculateRem(5);
-    align-self: center;
+@media (min-width: $desktop) {
+  .search_container {
+    height: calculateRem(20);
+    cursor: pointer;
+    border-radius: calculateRem(40);
+    background: #ffffff;
+    padding: calculateRem(10);
+    position: absolute;
+    box-shadow: 0px 4px 12px rgba(0, 34, 51, 0.08),
+      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 {
-  font-family: 'Inter';
-  font-size: calculateRem(15);
-  flex: 1;
-  border: none;
-  outline: none;
-  &::placeholder {
-    color: #939ba1;
+@media (max-width: $desktop) {
+  .search_container {
+    display: flex;
+    flex: 1;
+    border: 1px solid #eef2f5;
+    border-radius: calculateRem(4);
+    overflow: hidden;
+    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;
-}
--- a/src/common/components/Search/SearchResultItem/SearchResultItem.jsx
+++ b/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>
-          <p
-            className={styles.description}
-            style={{ WebkitBoxOrient: 'vertical' }}
-          >
-            {description}
-          </p>
-          <a className={styles.link} href={{ url }}>
-            {url}
-            &nbsp;&rarr;
-          </a>
-        </>
+        <h2 className={styles.header}>{name}</h2>
+        <p
+          className={styles.description}
+          style={{ WebkitBoxOrient: 'vertical' }}
+        >
+          {description}
+        </p>
+        <a className={styles.link} href={url}>
+          {url}
+          &nbsp;&rarr;
+        </a>
      </div>
    </div>
  )
--- a/src/modules/CategorySelector/CategorySelector.jsx
+++ b/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
-            searchStyle={styles.search}
-            onSearch={this.onSearch}
-            searchResultStyle={styles.searchResult}
-          />
-          <div
-            className={styles.openHeader}
-            style={isSearching ? { display: 'none' } : { display: 'flex' }}
-          >
+          <div className={styles.openHeader}>
            <h2>Categories</h2>
            <ViewAll size="small" />
          </div>
-          <div
-            className={styles.categories}
-            style={isSearching ? { display: 'none' } : { display: 'block' }}
-          >
+          <div className={styles.categories}>
            {categories.map(c => (
              <button
                className={
@ -127,10 +109,7 @@ class CategorySelector extends React.Component {
          </div>

          {showLists && (
-            <div
-              className={styles.categories}
-              style={isSearching ? { display: 'none' } : { display: 'block' }}
-            >
+            <div className={styles.categories}>
              <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"
--- a/src/modules/CategorySelector/CategorySelector.module.scss
+++ b/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;
 }
--- a/src/modules/Home/Home.jsx
+++ b/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 = {
-      isSearching: false,
-    }
-    this.onSearch = this.onSearch.bind(this)
-  }
-
-  onSearch(isSearching) {
-    this.setState({ isSearching })
+    this.state = {}
  }

  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
-                searchStyle={styles.search}
-                searchResultStyle={styles.searchResult}
-                onSearch={this.onSearch}
-              />
-            </div>
+            <Search
+              searchStyle={styles.search}
+              searchResultStyle={styles.searchResult}
+            />
            <FeaturedDapps featured={featured} />
            <Categories />
            <HighestRanked />
--- a/src/modules/Home/Home.module.scss
+++ b/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;
  }