add trending page

This commit is contained in:
Akinwale Ariwodola 2018-06-05 19:52:10 +01:00
parent 8c3ca2161d
commit 929a057e1e
4 changed files with 90 additions and 1 deletions

View file

@ -3,6 +3,7 @@ import AboutPage from '../page/about';
import DiscoverPage from '../page/discover'; import DiscoverPage from '../page/discover';
import FilePage from '../page/file'; import FilePage from '../page/file';
import SearchPage from '../page/search'; import SearchPage from '../page/search';
import TrendingPage from '../page/trending';
import SettingsPage from '../page/settings'; import SettingsPage from '../page/settings';
import SplashScreen from '../page/splash'; import SplashScreen from '../page/splash';
import TransactionHistoryPage from '../page/transactionHistory'; import TransactionHistoryPage from '../page/transactionHistory';
@ -57,6 +58,16 @@ const discoverStack = StackNavigator({
headerMode: 'screen', 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({ const walletStack = StackNavigator({
Wallet: { Wallet: {
screen: WalletPage, screen: WalletPage,
@ -78,6 +89,7 @@ const walletStack = StackNavigator({
const drawer = DrawerNavigator({ const drawer = DrawerNavigator({
DiscoverStack: { screen: discoverStack }, DiscoverStack: { screen: discoverStack },
TrendingStack: { screen: trendingStack },
WalletStack: { screen: walletStack }, WalletStack: { screen: walletStack },
Settings: { screen: SettingsPage, navigationOptions: { drawerLockMode: 'locked-closed' } }, Settings: { screen: SettingsPage, navigationOptions: { drawerLockMode: 'locked-closed' } },
About: { screen: AboutPage, navigationOptions: { drawerLockMode: 'locked-closed' } } About: { screen: AboutPage, navigationOptions: { drawerLockMode: 'locked-closed' } }

View file

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

View file

@ -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;

View file

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