add trending page
This commit is contained in:
parent
8c3ca2161d
commit
929a057e1e
4 changed files with 90 additions and 1 deletions
|
@ -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' } }
|
||||||
|
|
14
app/src/page/trending/index.js
Normal file
14
app/src/page/trending/index.js
Normal 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);
|
57
app/src/page/trending/view.js
Normal file
57
app/src/page/trending/view.js
Normal 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;
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in a new issue