Merge pull request #162 from lbryio/trending-page

add trending page

app/src/component/AppNavigator.js

@@ -3,6 +3,7 @@ import AboutPage from '../page/about';
 import DiscoverPage from '../page/discover';
 import FilePage from '../page/file';
 import SearchPage from '../page/search';
+import TrendingPage from '../page/trending';
 import SettingsPage from '../page/settings';
 import SplashScreen from '../page/splash';
 import TransactionHistoryPage from '../page/transactionHistory';
@@ -57,6 +58,16 @@ const discoverStack = StackNavigator({
   headerMode: 'screen',
 });
 
+const trendingStack = StackNavigator({
+  Trending: {
+    screen: TrendingPage,
+    navigationOptions: ({ navigation }) => ({
+      title: 'Trending',
+      headerLeft: <Feather name="menu" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />,
+    })
+  }
+});
+
 const walletStack = StackNavigator({
   Wallet: {
     screen: WalletPage,
@@ -78,6 +89,7 @@ const walletStack = StackNavigator({
 
 const drawer = DrawerNavigator({
   DiscoverStack: { screen: discoverStack },
+  TrendingStack: { screen: trendingStack },
   WalletStack: { screen: walletStack },
   Settings: { screen: SettingsPage, navigationOptions: { drawerLockMode: 'locked-closed' } },
   About: { screen: AboutPage, navigationOptions: { drawerLockMode: 'locked-closed' } }

app/src/page/trending/index.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { doFetchTrendingUris, selectTrendingUris, selectFetchingTrendingUris } from 'lbry-redux';
+import TrendingPage from './view';
+
+const select = state => ({
+  trendingUris: selectTrendingUris(state),
+  fetchingTrendingUris: selectFetchingTrendingUris(state),
+});
+
+const perform = dispatch => ({
+  fetchTrendingUris: () => dispatch(doFetchTrendingUris()),
+});
+
+export default connect(select, perform)(TrendingPage);

app/src/page/trending/view.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import NavigationActions from 'react-navigation';
+import {
+  ActivityIndicator,
+  AsyncStorage,
+  NativeModules,
+  FlatList,
+  Text,
+  View
+} from 'react-native';
+import { normalizeURI } from 'lbry-redux';
+import moment from 'moment';
+import FileItem from '../../component/fileItem';
+import discoverStyle from '../../styles/discover';
+import Colors from '../../styles/colors';
+import UriBar from '../../component/uriBar';
+import Feather from 'react-native-vector-icons/Feather';
+
+class TrendingPage extends React.PureComponent {
+  componentDidMount() {
+    this.props.fetchTrendingUris();
+  }
+
+  render() {
+    const { trendingUris, fetchingTrendingUris, navigation } = this.props;
+    const hasContent = typeof trendingUris === 'object' && trendingUris.length,
+      failedToLoad = !fetchingTrendingUris && !hasContent;
+
+    return (
+      <View style={discoverStyle.container}>
+        {!hasContent && fetchingTrendingUris && (
+          <View style={discoverStyle.busyContainer}>
+            <ActivityIndicator size="large" color={Colors.LbryGreen} />
+            <Text style={discoverStyle.title}>Fetching content...</Text>
+          </View>
+        )}
+        {hasContent &&
+          <FlatList style={discoverStyle.trendingContainer}
+            renderItem={ ({item}) => (
+                <FileItem
+                  style={discoverStyle.fileItem}
+                  key={item}
+                  uri={normalizeURI(item)}
+                  navigation={navigation} />
+              )
+            }
+            data={trendingUris.map(uri => uri.url)}
+            keyExtractor={(item, index) => item}
+          />
+        }
+        <UriBar navigation={navigation} />
+      </View>
+    );
+  }
+}
+
+export default TrendingPage;

app/src/styles/discover.js

@@ -6,7 +6,13 @@ const discoverStyle = StyleSheet.create({
   },
   scrollContainer: {
     flex: 1,
-    marginBottom: 60
+    marginBottom: 60,
+    paddingTop: 12
+  },
+  trendingContainer: {
+    flex: 1,
+    marginBottom: 60,
+    paddingTop: 30
   },
   busyContainer: {
     flex: 1,