diff --git a/src/renderer/component/categoryList/index.js b/src/renderer/component/categoryList/index.js new file mode 100644 index 000000000..7e728b9f4 --- /dev/null +++ b/src/renderer/component/categoryList/index.js @@ -0,0 +1,18 @@ +import { connect } from 'react-redux'; +import { doFetchClaimsByChannel } from 'redux/actions/content'; +import { + makeSelectClaimsInChannelForCurrentPage, + makeSelectFetchingChannelClaims, +} from 'lbry-redux'; +import CategoryList from './view'; + +const select = (state, props) => ({ + channelClaims: makeSelectClaimsInChannelForCurrentPage(props.categoryLink)(state), + fetching: makeSelectFetchingChannelClaims(props.categoryLink)(state), +}); + +const perform = dispatch => ({ + fetchChannel: channel => dispatch(doFetchClaimsByChannel(channel)), +}); + +export default connect(select, perform)(CategoryList); diff --git a/src/renderer/component/common/category-list.jsx b/src/renderer/component/categoryList/view.jsx similarity index 91% rename from src/renderer/component/common/category-list.jsx rename to src/renderer/component/categoryList/view.jsx index 4b1589cee..0afa57940 100644 --- a/src/renderer/component/common/category-list.jsx +++ b/src/renderer/component/categoryList/view.jsx @@ -5,11 +5,15 @@ import ToolTip from 'component/common/tooltip'; import FileCard from 'component/fileCard'; import Button from 'component/button'; import * as icons from 'constants/icons'; +import Claim from 'types/claim'; type Props = { category: string, names: Array, - categoryLink?: string, + categoryLink: ?string, + fetching: boolean, + channelClaims: Array, + fetchChannel: string => void, }; type State = { @@ -18,6 +22,11 @@ type State = { }; class CategoryList extends React.PureComponent { + static defaultProps = { + names: [], + categoryLink: '', + }; + constructor() { super(); @@ -32,6 +41,11 @@ class CategoryList extends React.PureComponent { } componentDidMount() { + const { fetching, categoryLink, fetchChannel } = this.props; + if (!fetching) { + fetchChannel(categoryLink); + } + const cardRow = this.rowItems; if (cardRow) { const cards = cardRow.getElementsByTagName('section'); @@ -109,6 +123,9 @@ class CategoryList extends React.PureComponent { // check if a card is fully visible horizontally isCardVisible = (section: HTMLElement) => { + if (!section) { + return false; + } const rect = section.getBoundingClientRect(); const isVisible = rect.left >= 0 && rect.right <= window.innerWidth; return isVisible; @@ -189,7 +206,7 @@ class CategoryList extends React.PureComponent { } render() { - const { category, names, categoryLink } = this.props; + const { category, categoryLink, names, channelClaims } = this.props; const { canScrollNext, canScrollPrevious } = this.state; // The lint was throwing an error saying we should use