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

add previous and next buttons to navigate channel pages

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

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

app/src/component/fileList/view.js

@@ -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} />
-        )} />  
+        )} />
     );
   }
 }

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

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 (
       <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>
     )

app/src/styles/channelPage.js

@@ -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'
   }
 });