LBRYCommunity/lbry-android-sdk
1
0
Fork 0
Code Issues 1 Pull requests 5 Projects Releases 26 Packages Wiki Activity

optimise space usage by the page navigation buttons on the channel page

Browse source
This commit is contained in:
Akinwale Ariwodola 2019-02-08 14:01:22 +01:00
parent 654d50cd1b
commit 1731462b41
3 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/src/component/fileList/view.js
View file

@ -2,8 +2,8 @@
import * as React from 'react'; import * as React from 'react';
import { buildURI } from 'lbry-redux'; import { buildURI } from 'lbry-redux';
import { FlatList } from 'react-native'; import { FlatList } from 'react-native';
import FileItem from '../fileItem'; import FileItem from 'component/fileItem';
import discoverStyle from '../../styles/discover'; import discoverStyle from 'styles/discover';
// In the future, all Flow types need to be specified in a common source (lbry-redux, perhaps?) // In the future, all Flow types need to be specified in a common source (lbry-redux, perhaps?)
type FileInfo = { type FileInfo = {
@ -145,7 +145,15 @@ class FileList extends React.PureComponent<Props, State> {
sortFunctions: {}; sortFunctions: {};
render() { render() {
const { fileInfos, hideFilter, checkPending, navigation, style } = this.props; const {
contentContainerStyle,
fileInfos,
hideFilter,
checkPending,
navigation,
onEndReached,
style
} = this.props;
const { sortBy } = this.state; const { sortBy } = this.state;
const items = []; const items = [];
@ -170,7 +178,9 @@ class FileList extends React.PureComponent<Props, State> {
return ( return (
<FlatList <FlatList
style={style} style={style}
contentContainerStyle={contentContainerStyle}
data={items} data={items}
onEndReached={onEndReached}
keyExtractor={(item, index) => item} keyExtractor={(item, index) => item}
renderItem={({item}) => ( renderItem={({item}) => (
<FileItem style={discoverStyle.fileItem} <FileItem style={discoverStyle.fileItem}

13
app/src/page/channel/view.js
View file

@ -11,7 +11,8 @@ import channelPageStyle from 'styles/channelPage';
class ChannelPage extends React.PureComponent { class ChannelPage extends React.PureComponent {
state = { state = {
page: 1 page: 1,
showPageButtons: false
}; };
componentDidMount() { componentDidMount() {
@ -26,7 +27,7 @@ class ChannelPage extends React.PureComponent {
handlePreviousPage = () => { handlePreviousPage = () => {
const { uri, fetchClaims } = this.props; const { uri, fetchClaims } = this.props;
if (this.state.page > 1) { if (this.state.page > 1) {
this.setState({ page: this.state.page - 1 }, () => { this.setState({ page: this.state.page - 1, showPageButtons: false }, () => {
fetchClaims(uri, this.state.page); fetchClaims(uri, this.state.page);
}); });
} }
@ -35,7 +36,7 @@ class ChannelPage extends React.PureComponent {
handleNextPage = () => { handleNextPage = () => {
const { uri, fetchClaims, totalPages } = this.props; const { uri, fetchClaims, totalPages } = this.props;
if (this.state.page < totalPages) { if (this.state.page < totalPages) {
this.setState({ page: this.state.page + 1 }, () => { this.setState({ page: this.state.page + 1, showPageButtons: false }, () => {
fetchClaims(uri, this.state.page); fetchClaims(uri, this.state.page);
}); });
} }
@ -69,7 +70,9 @@ class ChannelPage extends React.PureComponent {
hideFilter hideFilter
fileInfos={claimsInChannel} fileInfos={claimsInChannel}
navigation={navigation} navigation={navigation}
style={channelPageStyle.fileList} /> style={channelPageStyle.fileList}
contentContainerStyle={channelPageStyle.fileListContent}
onEndReached={() => this.setState({ showPageButtons: true })} />
) : ( ) : (
<View style={channelPageStyle.busyContainer}> <View style={channelPageStyle.busyContainer}>
<Text style={channelPageStyle.infoText}>No content found.</Text> <Text style={channelPageStyle.infoText}>No content found.</Text>
@ -81,7 +84,7 @@ class ChannelPage extends React.PureComponent {
<View style={channelPageStyle.container}> <View style={channelPageStyle.container}>
<PageHeader title={name} onBackPressed={() => navigateBack(navigation, drawerStack, popDrawerStack)} /> <PageHeader title={name} onBackPressed={() => navigateBack(navigation, drawerStack, popDrawerStack)} />
{contentList} {contentList}
{(totalPages > 1) && {(totalPages > 1) && this.state.showPageButtons &&
<View style={channelPageStyle.pageButtons}> <View style={channelPageStyle.pageButtons}>
<View> <View>
{(this.state.page > 1) && <Button {(this.state.page > 1) && <Button

13
app/src/styles/channelPage.js
View file

@ -10,9 +10,12 @@ const channelPageStyle = StyleSheet.create({
flex: 1 flex: 1
}, },
fileList: { fileList: {
paddingTop: 30,
flex: 1, flex: 1,
marginBottom: 16 paddingTop: 30,
marginBottom: 60,
},
fileListContent: {
paddingBottom: 16
}, },
title: { title: {
color: Colors.LbryGreen, color: Colors.LbryGreen,
@ -33,11 +36,13 @@ const channelPageStyle = StyleSheet.create({
marginLeft: 10 marginLeft: 10
}, },
pageButtons: { pageButtons: {
width: '100%',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
position: 'absolute',
bottom: 76,
paddingLeft: 16, paddingLeft: 16,
paddingRight: 16, paddingRight: 16
marginBottom: 76
}, },
button: { button: {
backgroundColor: Colors.LbryGreen, backgroundColor: Colors.LbryGreen,