LBRYCommunity/lbry-react-native
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity

final discovery fixes

Browse source
This commit is contained in:
Akinwale Ariwodola 2019-07-29 17:29:11 +01:00
parent dcd8c97a9c
commit 7a7530a970
8 changed files with 171 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/component/claimList/index.js
View file

@ -23,14 +23,22 @@ const select = (state, props) => {
const perform = dispatch => ({
claimSearch: options => dispatch(doClaimSearch(Constants.DEFAULT_PAGE_SIZE, options)),
searchByTags: (tags, orderBy = Constants.DEFAULT_ORDER_BY, page = 1) =>
searchByTags: (tags, orderBy = Constants.DEFAULT_ORDER_BY, page = 1, additionalOptions = {}) =>
dispatch(
doClaimSearchByTags(tags, Constants.DEFAULT_PAGE_SIZE, {
doClaimSearchByTags(
tags,
Constants.DEFAULT_PAGE_SIZE,
Object.assign(
{},
{
no_totals: true,
order_by: orderBy,
page,
not_tags: MATURE_TAGS,
})
},
additionalOptions
)
)
),
});

73
src/component/claimList/view.js
View file

@ -1,14 +1,16 @@
import React from 'react';
import NavigationActions from 'react-navigation';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';
import { ActivityIndicator, FlatList, Text, TouchableOpacity, View } from 'react-native';
import { MATURE_TAGS, normalizeURI } from 'lbry-redux';
import _ from 'lodash';
import FileItem from 'component/fileItem';
import FileListItem from 'component/fileListItem';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Colors from 'styles/colors';
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
import claimListStyle from 'styles/claimList';
import discoverStyle from 'styles/discover';
import moment from 'moment';
const horizontalLimit = 10;
const softLimit = 500;
@ -30,6 +32,7 @@ class ClaimList extends React.PureComponent {
orderBy = Constants.DEFAULT_ORDER_BY,
searchByTags,
tags,
time,
} = this.props;
if (channelIds || trendingForAll) {
const options = {
@ -47,7 +50,11 @@ class ClaimList extends React.PureComponent {
claimSearch(options);
} else if (tags && tags.length > 0) {
searchByTags(tags, orderBy, this.state.currentPgae);
const additionalOptions = {};
if (orderBy && orderBy[0] === Constants.ORDER_BY_EFFECTIVE_AMOUNT && Constants.TIME_ALL !== time) {
additionalOptions.release_time = this.getReleaseTimeOption(time);
}
searchByTags(tags, orderBy, this.state.currentPage, additionalOptions);
}
}
@ -59,12 +66,14 @@ class ClaimList extends React.PureComponent {
tags: prevTags,
channelIds: prevChannelIds,
trendingForAll: prevTrendingForAll,
time: prevTime,
} = this.props;
const { orderBy, tags, channelIds, trendingForAll } = nextProps;
const { orderBy, tags, channelIds, trendingForAll, time } = nextProps;
if (
!_.isEqual(orderBy, prevOrderBy) ||
!_.isEqual(tags, prevTags) ||
!_.isEqual(channelIds, prevChannelIds) ||
time !== prevTime ||
trendingForAll !== prevTrendingForAll
) {
// reset to page 1 because the order, tags or channelIds changed
@ -90,15 +99,27 @@ class ClaimList extends React.PureComponent {
claimSearch(options);
} else if (tags && tags.length > 0) {
this.setState({ subscriptionsView: false, trendingForAllView: false });
searchByTags(tags, orderBy, this.state.currentPage);
const additionalOptions = {};
if (orderBy && orderBy[0] === Constants.ORDER_BY_EFFECTIVE_AMOUNT && Constants.TIME_ALL !== time) {
additionalOptions.release_time = this.getReleaseTimeOption(time);
}
searchByTags(tags, orderBy, this.state.currentPage, additionalOptions);
}
});
}
}
getReleaseTimeOption = time => {
return `>${Math.floor(
moment()
.subtract(1, time)
.unix()
)}`;
};
handleVerticalEndReached = () => {
// fetch more content
const { channelIds, claimSearch, claimSearchUris, orderBy, searchByTags, tags, uris } = this.props;
const { channelIds, claimSearch, claimSearchUris, orderBy, searchByTags, tags, time, uris } = this.props;
const { subscriptionsView, trendingForAllView } = this.state;
if ((claimSearchUris && claimSearchUris.length >= softLimit) || (uris && uris.length >= softLimit)) {
// don't fetch more than the specified limit to be displayed
@ -119,17 +140,47 @@ class ClaimList extends React.PureComponent {
claimSearch(options);
} else {
searchByTags(tags, orderBy, this.state.currentPage);
const additionalOptions = {};
if (orderBy && orderBy[0] === Constants.ORDER_BY_EFFECTIVE_AMOUNT && Constants.TIME_ALL !== time) {
additionalOptions.release_time = this.getReleaseTimeOption(time);
}
searchByTags(tags, orderBy, this.state.currentPage, additionalOptions);
}
});
};
appendMorePlaceholder = items => {
items.push(Constants.MORE_PLACEHOLDER);
return items;
};
onMorePressed = () => {
const { navigation, tags } = this.props;
// tags.length > 1 means this is the Trending list
if (tags.length === 1) {
navigation.navigate({ routeName: Constants.DRAWER_ROUTE_TAG, key: 'tagPage', params: { tag: tags[0] } });
} else {
navigation.navigate({ routeName: Constants.FULL_ROUTE_NAME_TRENDING });
}
};
renderMorePlaceholder = () => {
return (
<TouchableOpacity style={discoverStyle.fileItemMore} onPress={this.onMorePressed}>
<Text style={discoverStyle.moreText}>more</Text>
<Icon style={discoverStyle.moreIcon} name={'angle-double-down'} color={Colors.White} size={16} />
</TouchableOpacity>
);
};
render() {
const {
ListHeaderComponent,
loading,
claimSearchLoading,
claimSearchUris,
morePlaceholder,
navigation,
orientation = Constants.ORIENTATION_VERTICAL,
style,
@ -184,7 +235,10 @@ class ClaimList extends React.PureComponent {
initialNumToRender={3}
maxToRenderPerBatch={3}
removeClippedSubviews
renderItem={({ item }) => (
renderItem={({ item }) => {
return item === Constants.MORE_PLACEHOLDER ? (
this.renderMorePlaceholder()
) : (
<FileItem
style={discoverStyle.fileItem}
mediaStyle={discoverStyle.fileItemMedia}
@ -194,10 +248,11 @@ class ClaimList extends React.PureComponent {
showDetails
compactView={false}
/>
)}
);
}}
horizontal
showsHorizontalScrollIndicator={false}
data={uris ? uris.slice(0, horizontalLimit) : []}
data={uris ? this.appendMorePlaceholder(uris.slice(0, horizontalLimit)) : []}
keyExtractor={(item, index) => item}
/>
);

2
src/component/modalPicker/view.js
View file

@ -45,7 +45,7 @@ export default class ModalPicker extends React.PureComponent {
style={modalPickerStyle.listItem}
onPress={() => onItemSelected(item)}
>
<Icon style={modalPickerStyle.itemIcon} name={item.icon} size={16} />
{item.icon && <Icon style={modalPickerStyle.itemIcon} name={item.icon} size={16} />}
<Text style={modalPickerStyle.itemLabel}>{item.label}</Text>
{selectedItem && selectedItem.name === item.name && (
<Icon style={modalPickerStyle.itemSelected} name={'check'} color={Colors.LbryGreen} size={16} />

26
src/constants.js
View file

@ -2,6 +2,12 @@ const SORT_BY_NEW = 'new';
const SORT_BY_HOT = 'hot';
const SORT_BY_TOP = 'top';
const TIME_DAY = 'day';
const TIME_WEEK = 'week';
const TIME_MONTH = 'month';
const TIME_YEAR = 'year';
const TIME_ALL = 'all';
const Constants = {
FIRST_RUN_PAGE_WELCOME: 'welcome',
FIRST_RUN_PAGE_EMAIL_COLLECT: 'email-collect',
@ -89,18 +95,36 @@ const Constants = {
SORT_BY_NEW,
SORT_BY_TOP,
TIME_DAY,
TIME_WEEK,
TIME_MONTH,
TIME_YEAR,
TIME_ALL,
CLAIM_SEARCH_SORT_BY_ITEMS: [
{ icon: 'fire-alt', name: SORT_BY_HOT, label: 'Hot content' },
{ icon: 'certificate', name: SORT_BY_NEW, label: 'New content' },
{ icon: 'chart-line', name: SORT_BY_TOP, label: 'Top content' },
],
CLAIM_SEARCH_TIME_ITEMS: [
{ name: TIME_DAY, label: 'Past 24 hours' },
{ name: TIME_WEEK, label: 'Past week' },
{ name: TIME_MONTH, label: 'Past month' },
{ name: TIME_YEAR, label: 'Past year' },
{ name: TIME_ALL, label: 'All time' },
],
DEFAULT_ORDER_BY: ['trending_global', 'trending_mixed'],
ORDER_BY_EFFECTIVE_AMOUNT: 'effective_amount',
DEFAULT_PAGE_SIZE: 10,
ALL_PLACEHOLDER: '_all',
MORE_PLACEHOLDER: '_more',
TRUE_STRING: 'true',
};
@ -111,6 +135,8 @@ export const DrawerRoutes = [
Constants.DRAWER_ROUTE_TRENDING,
Constants.DRAWER_ROUTE_SUBSCRIPTIONS,
Constants.DRAWER_ROUTE_MY_LBRY,
Constants.DRAWER_ROUTE_TAG,
Constants.DRAWER_ROUTE_PUBLISH,
Constants.DRAWER_ROUTE_REWARDS,
Constants.DRAWER_ROUTE_WALLET,
Constants.DRAWER_ROUTE_SETTINGS,

5
src/page/discover/view.js
View file

@ -267,9 +267,10 @@ class DiscoverPage extends React.PureComponent {
removeClippedSubviews
renderItem={({ item, index, section }) => (
<ClaimList
key={item.join(',')}
key={item.sort().join(',')}
orderBy={item.length > 1 ? Constants.DEFAULT_ORDER_BY : orderBy}
tags={item}
morePlaceholder
navigation={navigation}
orientation={Constants.ORIENTATION_HORIZONTAL}
/>
@ -280,7 +281,7 @@ class DiscoverPage extends React.PureComponent {
{formatTagTitle(title)}
</Text>
<TouchableOpacity onPress={() => this.handleTagPress(title)}>
<Icon name={'ellipsis-v'} size={16} />
<Icon name={'angle-double-down'} size={16} />
</TouchableOpacity>
</View>
)}

33
src/page/tag/view.js
View file

@ -19,8 +19,11 @@ class TagPage extends React.PureComponent {
state = {
tag: null,
showSortPicker: false,
showTimePicker: false,
orderBy: Constants.DEFAULT_ORDER_BY,
time: Constants.TIME_WEEK,
currentSortByItem: Constants.CLAIM_SEARCH_SORT_BY_ITEMS[0],
currentTimeItem: Constants.CLAIM_SEARCH_TIME_ITEMS[1],
};
didFocusListener;
@ -67,24 +70,34 @@ class TagPage extends React.PureComponent {
break;
case Constants.SORT_BY_TOP:
orderBy = ['effective_amount'];
orderBy = [Constants.ORDER_BY_EFFECTIVE_AMOUNT];
break;
}
this.setState({ currentSortByItem: item, orderBy, showSortPicker: false });
};
handleTimeItemSelected = item => {
this.setState({ time: item.name });
};
render() {
const { navigation } = this.props;
const { tag, currentSortByItem } = this.state;
const { tag, currentSortByItem, currentTimeItem, showSortPicker, showTimePicker } = this.state;
return (
<View style={discoverStyle.container}>
<UriBar navigation={navigation} belowOverlay={this.state.showSortPicker} />
<UriBar navigation={navigation} belowOverlay={showSortPicker || showTimePicker} />
<ClaimList
ListHeaderComponent={
<View style={discoverStyle.tagTitleRow}>
<Text style={discoverStyle.tagPageTitle}>{formatTagTitle(tag)}</Text>
{Constants.SORT_BY_TOP === currentSortByItem.name && (
<TouchableOpacity style={discoverStyle.tagTime} onPress={() => this.setState({ showTimePicker: true })}>
<Text style={discoverStyle.tagSortText}>{currentTimeItem.label}</Text>
<Icon style={discoverStyle.tagSortIcon} name={'sort-down'} size={14} />
</TouchableOpacity>
)}
<TouchableOpacity style={discoverStyle.tagSortBy} onPress={() => this.setState({ showSortPicker: true })}>
<Text style={discoverStyle.tagSortText}>{currentSortByItem.label.split(' ')[0]}</Text>
<Icon style={discoverStyle.tagSortIcon} name={'sort-down'} size={14} />
@ -93,12 +106,13 @@ class TagPage extends React.PureComponent {
}
style={discoverStyle.tagPageClaimList}
orderBy={this.state.orderBy}
time={this.state.time}
tags={[tag]}
navigation={navigation}
orientation={Constants.ORIENTATION_VERTICAL}
/>
{!this.state.showSortPicker && <FloatingWalletBalance navigation={navigation} />}
{this.state.showSortPicker && (
{!showSortPicker && !showTimePicker && <FloatingWalletBalance navigation={navigation} />}
{showSortPicker && (
<ModalPicker
title={__('Sort content by')}
onOverlayPress={() => this.setState({ showSortPicker: false })}
@ -107,6 +121,15 @@ class TagPage extends React.PureComponent {
items={Constants.CLAIM_SEARCH_SORT_BY_ITEMS}
/>
)}
{showTimePicker && (
<ModalPicker
title={__('Content from')}
onOverlayPress={() => this.setState({ showTimePicker: false })}
onItemSelected={this.handleTimeItemSelected}
selectedItem={this.state.currentTimeItem}
items={Constants.CLAIM_SEARCH_TIME_ITEMS}
/>
)}
</View>
);
}

23
src/styles/discover.js
View file

@ -85,6 +85,25 @@ const discoverStyle = StyleSheet.create({
width: fileItemWidth,
marginRight: 12,
},
fileItemMore: {
alignSelf: 'flex-start',
backgroundColor: Colors.LbryGreen,
flexDirection: 'row',
width: fileItemWidth,
height: fileItemMediaHeight,
marginRight: 12,
alignItems: 'center',
justifyContent: 'center',
},
moreText: {
fontFamily: 'Inter-UI-Regular',
color: Colors.White,
fontSize: 24,
},
moreIcon: {
marginLeft: 12,
marginBottom: -4,
},
fileItemMedia: {
width: fileItemMediaWidth,
height: fileItemMediaHeight,
@ -224,6 +243,10 @@ const discoverStyle = StyleSheet.create({
alignItems: 'center',
marginRight: 4,
},
tagTime: {
flexDirection: 'row',
alignItems: 'center',
},
tagSortText: {
fontFamily: 'Inter-UI-Regular',
fontSize: 14,

3
src/styles/modalPicker.js
View file

@ -49,9 +49,10 @@ const modalPickerStyle = StyleSheet.create({
},
itemIcon: {
marginLeft: 8,
marginRight: 12,
marginRight: 4,
},
itemLabel: {
marginLeft: 8,
alignSelf: 'flex-start',
fontFamily: 'Inter-UI-Regular',
fontSize: 16,