diff --git a/app/src/component/AppNavigator.js b/app/src/component/AppNavigator.js index 925b9175..21e41d8e 100644 --- a/app/src/component/AppNavigator.js +++ b/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: 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' } } diff --git a/app/src/page/trending/index.js b/app/src/page/trending/index.js new file mode 100644 index 00000000..614a5ba2 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/app/src/page/trending/view.js b/app/src/page/trending/view.js new file mode 100644 index 00000000..07224be8 --- /dev/null +++ b/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 ( + + {!hasContent && fetchingTrendingUris && ( + + + Fetching content... + + )} + {hasContent && + ( + + ) + } + data={trendingUris.map(uri => uri.url)} + keyExtractor={(item, index) => item} + /> + } + + + ); + } +} + +export default TrendingPage; diff --git a/app/src/styles/discover.js b/app/src/styles/discover.js index 0b9a1f46..2d04307a 100644 --- a/app/src/styles/discover.js +++ b/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,