1  import React from 'react'
 2  import PropTypes from 'prop-types'
 3  import CategorySelector from '../CategorySelector'
 4  import DappList from '../../common/components/DappList'
 5  import styles from './Filtered.module.scss'
 6  
 7  const getScrollY =
 8    window.scrollY !== undefined
 9      ? () => {
10          return window.scrollY
11        }
12      : () => {
13          return document.documentElement.scrollTop
14        }
15  
16  class Filtered extends React.Component {
17    constructor(props) {
18      super(props)
19      this.onScroll = this.onScroll.bind(this)
20    }
21  
22    componentDidMount() {
23      this.fetchDapps()
24      document.addEventListener('scroll', this.onScroll)
25    }
26  
27    componentDidUpdate() {
28      this.fetchDapps()
29    }
30  
31    onScroll() {
32      this.fetchDapps()
33    }
34  
35    getDappList() {
36      const { dappsCategoryMap, match } = this.props
37      const result =
38        match !== undefined ? dappsCategoryMap.get(match.params.id).items : []
39      return result
40    }
41  
42    fetchDapps() {
43      const { dappsCategoryMap, match, fetchByCategory } = this.props
44      if (match === undefined) return
45  
46      const dappState = dappsCategoryMap.get(match.params.id)
47      if (dappState.canFetch() === false) return
48  
49      const root = document.getElementById('root')
50      const bottom = window.innerHeight + getScrollY()
51      const isNearEnd = bottom + window.innerHeight > root.offsetHeight
52  
53      if (isNearEnd === false && dappState.items.length >= 10) return
54  
55      fetchByCategory(match.params.id)
56    }
57  
58    render() {
59      const { match } = this.props
60      const result = this.getDappList()
61  
62      return (
63        <>
64          <CategorySelector
65            category={match !== undefined ? match.params.id : undefined}
66          />
67          <div className={styles.list}>
68            <DappList dapps={result} />
69          </div>
70        </>
71      )
72    }
73  }
74  
75  Filtered.defaultProps = {
76    match: undefined,
77  }
78  
79  Filtered.propTypes = {
80    dappsCategoryMap: PropTypes.instanceOf(Map).isRequired,
81    fetchByCategory: PropTypes.func.isRequired,
82    match: PropTypes.shape({
83      params: PropTypes.shape({
84        id: PropTypes.node,
85      }).isRequired,
86    }),
87  }
88  
89  export default Filtered