Merge pull request #387 from lbryio/channel-page-pagination

add previous and next buttons to navigate channel pages
This commit is contained in:
Akinwale Ariwodola 2019-01-08 03:03:09 +01:00 committed by GitHub
commit c96b4afcc7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 70 additions and 16 deletions

4
app/package-lock.json generated
View file

@ -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",

View file

@ -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",

View file

@ -166,7 +166,7 @@ class FileList extends React.PureComponent<Props, State> {
items.push(uri);
});
return (
<FlatList
style={style}
@ -176,7 +176,7 @@ class FileList extends React.PureComponent<Props, State> {
<FileItem style={discoverStyle.fileItem}
uri={item}
navigation={navigation} />
)} />
)} />
);
}
}

View file

@ -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 => ({

View file

@ -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 (
<View style={channelPageStyle.container}>
<PageHeader title={name} onBackPressed={() => navigation.goBack(navigation.state.key)} />
{contentList}
{(totalPages > 1) &&
<View style={channelPageStyle.pageButtons}>
<View>
{(this.state.page > 1) && <Button
style={channelPageStyle.button}
text={"Previous"}
disabled={!!fetching}
onPress={this.handlePreviousPage} />}
</View>
{(this.state.page < totalPages) && <Button
style={[channelPageStyle.button, channelPageStyle.nextButton]}
text={"Next"}
disabled={!!fetching}
onPress={this.handleNextPage} />}
</View>}
<UriBar value={uri} navigation={navigation} />
</View>
)

View file

@ -12,7 +12,7 @@ const channelPageStyle = StyleSheet.create({
fileList: {
paddingTop: 30,
flex: 1,
marginBottom: 60
marginBottom: 16
},
title: {
color: Colors.LbryGreen,
@ -31,6 +31,21 @@ const channelPageStyle = StyleSheet.create({
fontSize: 20,
textAlign: 'center',
marginLeft: 10
},
pageButtons: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 16,
paddingRight: 16,
marginBottom: 76
},
button: {
backgroundColor: Colors.LbryGreen,
paddingLeft: 16,
paddingRight: 16
},
nextButton: {
alignSelf: 'flex-end'
}
});