diff --git a/app/package-lock.json b/app/package-lock.json index 2c715c8a..b291047e 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -4060,8 +4060,8 @@ } }, "lbry-redux": { - "version": "github:lbryio/lbry-redux#1ed2ea8b2de99bbcba652aa7b00478d02df4a290", - "from": "github:lbryio/lbry-redux", + "version": "github:lbryio/lbry-redux#18fec9f1f0f5ad366ebe12279e5dd0d67a37b2d5", + "from": "github:lbryio/lbry-redux#mobile-channel-pagination", "requires": { "proxy-polyfill": "0.1.6", "reselect": "^3.0.0", diff --git a/app/package.json b/app/package.json index d4a03188..44ca8c69 100644 --- a/app/package.json +++ b/app/package.json @@ -8,7 +8,7 @@ "dependencies": { "base-64": "^0.1.0", "@expo/vector-icons": "^8.1.0", - "lbry-redux": "lbryio/lbry-redux", + "lbry-redux": "lbryio/lbry-redux#mobile-channel-pagination", "lbryinc": "lbryio/lbryinc#subscriptions", "moment": "^2.22.1", "react": "16.2.0", diff --git a/app/src/component/fileList/view.js b/app/src/component/fileList/view.js index aefa98a7..4416f7b0 100644 --- a/app/src/component/fileList/view.js +++ b/app/src/component/fileList/view.js @@ -166,7 +166,7 @@ class FileList extends React.PureComponent { items.push(uri); }); - + return ( { - )} /> + )} /> ); } } diff --git a/app/src/page/channel/index.js b/app/src/page/channel/index.js index 383bb992..54425546 100644 --- a/app/src/page/channel/index.js +++ b/app/src/page/channel/index.js @@ -3,15 +3,17 @@ import { doFetchClaimsByChannel, doFetchClaimCountByChannel, makeSelectClaimForUri, - makeSelectClaimsInChannelForPage, + makeSelectClaimsInChannelForCurrentPageState, makeSelectFetchingChannelClaims, + makeSelectTotalPagesForChannel } from 'lbry-redux'; import ChannelPage from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), - claimsInChannel: makeSelectClaimsInChannelForPage(props.uri, props.page || 1)(state), + claimsInChannel: makeSelectClaimsInChannelForCurrentPageState(props.uri)(state), fetching: makeSelectFetchingChannelClaims(props.uri)(state), + totalPages: makeSelectTotalPagesForChannel(props.uri, 10)(state), // Update to use a default PAGE_SIZE constant }); const perform = dispatch => ({ diff --git a/app/src/page/channel/view.js b/app/src/page/channel/view.js index 22320711..8e54ea3a 100644 --- a/app/src/page/channel/view.js +++ b/app/src/page/channel/view.js @@ -1,24 +1,47 @@ // @flow import React from 'react'; import { ActivityIndicator, Text, View } from 'react-native'; -import Colors from '../../styles/colors'; -import FileList from '../../component/fileList'; -import PageHeader from '../../component/pageHeader'; -import UriBar from '../../component/uriBar'; -import channelPageStyle from '../../styles/channelPage'; +import Colors from 'styles/colors'; +import Button from 'component/button'; +import FileList from 'component/fileList'; +import PageHeader from 'component/pageHeader'; +import UriBar from 'component/uriBar'; +import channelPageStyle from 'styles/channelPage'; class ChannelPage extends React.PureComponent { + state = { + page: 1 + }; + componentDidMount() { const { uri, page, claimsInChannel, fetchClaims, fetchClaimCount } = this.props; if (!claimsInChannel || !claimsInChannel.length) { - fetchClaims(uri, page || 1); + fetchClaims(uri, page || this.state.page); fetchClaimCount(uri); } } + handlePreviousPage = () => { + const { uri, fetchClaims } = this.props; + if (this.state.page > 1) { + this.setState({ page: this.state.page - 1 }, () => { + fetchClaims(uri, this.state.page); + }); + } + } + + handleNextPage = () => { + const { uri, fetchClaims, totalPages } = this.props; + if (this.state.page < totalPages) { + this.setState({ page: this.state.page + 1 }, () => { + fetchClaims(uri, this.state.page); + }); + } + } + render() { - const { fetching, claimsInChannel, claim, navigation, uri } = this.props; + const { fetching, claimsInChannel, claim, navigation, totalPages, uri } = this.props; const { name, permanent_url: permanentUrl } = claim; let contentList; @@ -44,11 +67,25 @@ class ChannelPage extends React.PureComponent { ); } - return ( navigation.goBack(navigation.state.key)} /> {contentList} + {(totalPages > 1) && + + + {(this.state.page > 1) &&