1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as querystring from 'querystring'
import * as searchActions from './search.actions'
import * as metadataActions from '../metadata/metadata.actions'
import SearchQuery from './search.query'
import SearchResults from './search.results'
import SearchSafety from './search.safety'
class SearchContainer extends Component {
componentDidMount() {
const qs = querystring.parse(this.props.location.search.substr(1))
if (qs && qs.url) {
this.props.searchActions.search(qs.url)
} else {
this.searchByHash()
}
}
componentDidUpdate(prevProps) {
if (prevProps.match.params !== this.props.match.params && JSON.stringify(this.props.match.params) !== JSON.stringify(prevProps.match.params)) {
this.searchByHash()
}
// const qsOld = querystring.parse(prevProps.location.search.substr(1))
// const qsNew = querystring.parse(this.props.location.search.substr(1))
// if (qsOld && qsNew && qsNew.url && qsNew.url !== qsOld.url) {
// this.props.actions.search(qsNew.url)
// }
}
searchByHash(offset = 0) {
const { verified, hash, frame } = this.props.match.params
if (verified && hash && frame) {
this.props.searchActions.searchByVerifiedFrame(verified, hash, frame, offset)
} else if (hash && frame) {
this.props.searchActions.searchByFrame(hash, frame, offset)
}
if (hash && !offset) {
this.props.metadataActions.fetchMetadata(hash)
}
}
searchByOffset() {
const offset = this.props.query.results.length
const qs = querystring.parse(this.props.location.search.substr(1))
if (qs && qs.url) {
this.props.searchActions.search(qs.url, offset)
}
else {
this.searchByHash(offset)
}
}
render() {
const { query, results, loadingMore } = this.props.query
const options = this.props.options
// console.log('search container', query, results, loadingMore)
let showLoadMore = true
if (!query || query.reset || query.loading || !results || !results.length) {
showLoadMore = false
}
let isWide = (results && results.length > Math.min(options.perPage, 30))
let isMoreLoaded = (results && results.length > options.perPage)
return (
<div className='searchContainer'>
<SearchQuery />
<SearchResults />
{showLoadMore
? !loadingMore
? <button
onClick={() => this.searchByOffset()}
className={isWide ? 'btn loadMore wide' : 'btn loadMore'}
>
Load more
</button>
: <div className='loadingMore'>{'Loading more results...'}</div>
: <div>
</div>
}
{!isMoreLoaded && <SearchSafety />}
</div>
)
}
}
const mapStateToProps = state => ({
query: state.search.query,
options: state.search.options,
metadata: state.metadata,
})
const mapDispatchToProps = dispatch => ({
searchActions: bindActionCreators({ ...searchActions }, dispatch),
metadataActions: bindActionCreators({ ...metadataActions }, dispatch),
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SearchContainer))
|
