From a5ce9cc4727993f462521bc03120b1021c4e6f9e Mon Sep 17 00:00:00 2001 From: Onuwa Nnachi Isaac Date: Fri, 13 Sep 2019 14:56:11 +0100 Subject: [PATCH] Fix search open and close logic --- .../discover-service/discover-service.js | 4 +- src/common/clients/http-client.js | 2 +- src/common/components/Search/Search.jsx | 74 ++++++++++++++----- .../components/Search/Search.module.scss | 44 +++++------ .../SearchResultItem/SearchResultItem.jsx | 7 +- 5 files changed, 89 insertions(+), 42 deletions(-) diff --git a/src/common/blockchain/services/discover-service/discover-service.js b/src/common/blockchain/services/discover-service/discover-service.js index aabc144..68ce2c1 100644 --- 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 (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, diff --git a/src/common/clients/http-client.js b/src/common/clients/http-client.js index 779a757..46d891a 100644 --- a/src/common/clients/http-client.js +++ b/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, }, diff --git a/src/common/components/Search/Search.jsx b/src/common/components/Search/Search.jsx index a08b144..6009a63 100644 --- a/src/common/components/Search/Search.jsx +++ b/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 ( -
- Search Icon - this.handleChange(e)} - className={[styles.search, searchStyle].join(' ')} - placeholder="Search Dapps" - /> - {isSearching && ( -
- -
- )} -
+ <> +
+
this.applyClass(e)} + > + Search Icon + this.handleChange(e)} + className={[styles.search, searchStyle].join(' ')} + placeholder="Search Dapps" + /> + {isSearching && ( +
+ +
+ )} +
+ ) } } diff --git a/src/common/components/Search/Search.module.scss b/src/common/components/Search/Search.module.scss index fc32515..798b984 100644 --- a/src/common/components/Search/Search.module.scss +++ b/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; + } } diff --git a/src/common/components/Search/SearchResultItem/SearchResultItem.jsx b/src/common/components/Search/SearchResultItem/SearchResultItem.jsx index 3138d62..16ddbc0 100644 --- a/src/common/components/Search/SearchResultItem/SearchResultItem.jsx +++ b/src/common/components/Search/SearchResultItem/SearchResultItem.jsx @@ -28,7 +28,12 @@ const SearchResultItem = props => { > {description}

- + {url}  →