Compare commits

...

3 commits

Author SHA1 Message Date
Akinwale Ariwodola
6958cdcfcb implement suggested subscriptions modal 2019-09-30 12:23:00 +01:00
Akinwale Ariwodola
5fc6bc50c3 rename 'Tags you follow' to 'Suggested channels' 2019-09-27 19:18:40 +01:00
Akinwale Ariwodola
fb5b6598d2 check nsfw flag when retrieving trending channels 2019-09-27 18:57:29 +01:00
7 changed files with 145 additions and 22 deletions

View file

@ -0,0 +1,4 @@
import { connect } from 'react-redux';
import ModalSuggestedSubscriptions from './view';
export default connect()(ModalSuggestedSubscriptions);

View file

@ -0,0 +1,26 @@
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import modalStyle from 'styles/modal';
import subscriptionsStyle from 'styles/subscriptions';
import Button from 'component/button';
import Colors from 'styles/colors';
import SuggestedSubscriptions from 'component/suggestedSubscriptions';
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
import Icon from 'react-native-vector-icons/FontAwesome5';
export default class ModalSuggestedSubcriptions extends React.PureComponent {
render() {
const { navigation, onDonePress, onOverlayPress } = this.props;
return (
<TouchableOpacity style={modalStyle.overlay} activeOpacity={1} onPress={onOverlayPress}>
<TouchableOpacity style={[modalStyle.container, subscriptionsStyle.modalContainer]} activeOpacity={1}>
<SuggestedSubscriptions inModal navigation={navigation} />
<View style={modalStyle.buttons}>
<Button style={modalStyle.doneButton} text={'Done'} onPress={onDonePress} />
</View>
</TouchableOpacity>
</TouchableOpacity>
);
}
}

View file

@ -1,6 +1,7 @@
import { connect } from 'react-redux';
import { doClaimSearch, selectFetchingClaimSearch, selectClaimSearchByQuery, selectFollowedTags } from 'lbry-redux';
import { selectSuggestedChannels, selectIsFetchingSuggested } from 'lbryinc';
import { selectShowNsfw } from 'redux/selectors/settings';
import SuggestedSubscriptions from './view';
const select = state => ({
@ -8,6 +9,7 @@ const select = state => ({
suggested: selectSuggestedChannels(state),
loading: selectIsFetchingSuggested(state) || selectFetchingClaimSearch(state),
claimSearchByQuery: selectClaimSearchByQuery(state),
showNsfwContent: selectShowNsfw(state),
});
const perform = dispatch => ({

View file

@ -1,6 +1,6 @@
import React from 'react';
import { ActivityIndicator, FlatList, SectionList, Text, View } from 'react-native';
import { createNormalizedClaimSearchKey, normalizeURI } from 'lbry-redux';
import { ActivityIndicator, SectionList, Text, View } from 'react-native';
import { MATURE_TAGS, createNormalizedClaimSearchKey, normalizeURI } from 'lbry-redux';
import { __, navigateToUri } from 'utils/helper';
import SubscribeButton from 'component/subscribeButton';
import SuggestedSubscriptionItem from 'component/suggestedSubscriptionItem';
@ -16,13 +16,16 @@ class SuggestedSubscriptions extends React.PureComponent {
};
componentDidMount() {
const { claimSearch, followedTags } = this.props;
const { claimSearch, followedTags, showNsfwContent } = this.props;
const options = {
any_tags: _.shuffle(followedTags.map(tag => tag.name)).slice(0, 3),
page: 1,
no_totals: true,
claim_type: 'channel',
};
if (!showNsfwContent) {
options.not_tags = MATURE_TAGS;
}
this.setState({ options });
claimSearch(options);
}
@ -35,7 +38,7 @@ class SuggestedSubscriptions extends React.PureComponent {
const suggestedUris = suggested ? suggested.map(suggested => suggested.uri) : [];
return [
{
title: __('Tags you follow'),
title: __('Suggested channels'),
data: claimSearchUris ? claimSearchUris.filter(uri => !suggestedUris.includes(uri)) : [],
},
{
@ -46,7 +49,7 @@ class SuggestedSubscriptions extends React.PureComponent {
};
render() {
const { suggested, loading, navigation } = this.props;
const { suggested, inModal, loading, navigation } = this.props;
if (loading) {
return (
@ -58,8 +61,10 @@ class SuggestedSubscriptions extends React.PureComponent {
return (
<SectionList
style={subscriptionsStyle.scrollContainer}
contentContainerStyle={subscriptionsStyle.suggestedScrollPadding}
style={inModal ? subscriptionsStyle.modalScrollContainer : subscriptionsStyle.scrollContainer}
contentContainerStyle={
inModal ? subscriptionsStyle.modalSuggestedScrollContent : subscriptionsStyle.suggestedScrollContent
}
renderItem={({ item, index, section }) => (
<SuggestedSubscriptionItem key={item} uri={normalizeURI(item)} navigation={navigation} />
)}

View file

@ -25,6 +25,7 @@ import FileItem from 'component/fileItem';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Link from 'component/link';
import ModalPicker from 'component/modalPicker';
import ModalSuggestedSubscriptions from 'component/modalSuggestedSubscriptions';
import SubscribedChannelList from 'component/subscribedChannelList';
import SuggestedSubscriptions from 'component/suggestedSubscriptions';
import UriBar from 'component/uriBar';
@ -34,6 +35,7 @@ class SubscriptionsPage extends React.PureComponent {
showingSuggestedSubs: false,
showSortPicker: false,
showTimePicker: false,
showModalSuggestedSubs: false,
orderBy: ['release_time'],
filteredChannels: [],
currentSortByItem: Constants.CLAIM_SEARCH_SORT_BY_ITEMS[1], // should always default to sorting subscriptions by new
@ -122,7 +124,7 @@ class SubscriptionsPage extends React.PureComponent {
unreadSubscriptions,
navigation,
} = this.props;
const { currentSortByItem, filteredChannels, showSortPicker, showTimePicker } = this.state;
const { currentSortByItem, filteredChannels, showModalSuggestedSubs, showSortPicker, showTimePicker } = this.state;
const numberOfSubscriptions = subscribedChannels ? subscribedChannels.length : 0;
const hasSubscriptions = numberOfSubscriptions > 0;
@ -151,23 +153,31 @@ class SubscriptionsPage extends React.PureComponent {
</View>
{!this.state.showingSuggestedSubs && hasSubscriptions && (
<View style={subscriptionsStyle.pickerRow}>
<TouchableOpacity
style={subscriptionsStyle.tagSortBy}
onPress={() => this.setState({ showSortPicker: true })}
>
<Text style={subscriptionsStyle.tagSortText}>{currentSortByItem.label.split(' ')[0]}</Text>
<Icon style={subscriptionsStyle.tagSortIcon} name={'sort-down'} size={14} />
</TouchableOpacity>
{Constants.SORT_BY_TOP === currentSortByItem.name && (
<View style={subscriptionsStyle.leftPickerRow}>
<TouchableOpacity
style={subscriptionsStyle.tagSortBy}
onPress={() => this.setState({ showTimePicker: true })}
onPress={() => this.setState({ showSortPicker: true })}
>
<Text style={subscriptionsStyle.tagSortText}>{timeItem.label}</Text>
<Text style={subscriptionsStyle.tagSortText}>{currentSortByItem.label.split(' ')[0]}</Text>
<Icon style={subscriptionsStyle.tagSortIcon} name={'sort-down'} size={14} />
</TouchableOpacity>
)}
{Constants.SORT_BY_TOP === currentSortByItem.name && (
<TouchableOpacity
style={subscriptionsStyle.tagSortBy}
onPress={() => this.setState({ showTimePicker: true })}
>
<Text style={subscriptionsStyle.tagSortText}>{timeItem.label}</Text>
<Icon style={subscriptionsStyle.tagSortIcon} name={'sort-down'} size={14} />
</TouchableOpacity>
)}
</View>
<Link
style={subscriptionsStyle.suggestedLink}
text={'Suggested'}
onPress={() => this.setState({ showModalSuggestedSubs: true })}
/>
</View>
)}
{!this.state.showingSuggestedSubs && hasSubscriptions && !loading && (
@ -223,7 +233,9 @@ class SubscriptionsPage extends React.PureComponent {
</View>
)}
{!showSortPicker && !showTimePicker && <FloatingWalletBalance navigation={navigation} />}
{!showSortPicker && !showTimePicker && !showModalSuggestedSubs && (
<FloatingWalletBalance navigation={navigation} />
)}
{showSortPicker && (
<ModalPicker
title={__('Sort content by')}
@ -242,6 +254,13 @@ class SubscriptionsPage extends React.PureComponent {
items={Constants.CLAIM_SEARCH_TIME_ITEMS}
/>
)}
{showModalSuggestedSubs && (
<ModalSuggestedSubscriptions
navigation={navigation}
onOverlayPress={() => this.setState({ showModalSuggestedSubs: false })}
onDonePress={() => this.setState({ showModalSuggestedSubs: false })}
/>
)}
</View>
);
}

48
src/styles/modal.js Normal file
View file

@ -0,0 +1,48 @@
import { StyleSheet } from 'react-native';
import Colors from './colors';
const modalPickerStyle = StyleSheet.create({
overlay: {
backgroundColor: '#00000055',
flex: 1,
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: 300,
},
overlayTouchArea: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
container: {
position: 'absolute',
left: 8,
right: 8,
bottom: 8,
borderRadius: 8,
backgroundColor: Colors.White,
overflow: 'hidden',
},
paddedContatiner: {
padding: 12,
},
buttons: {
marginTop: 16,
left: 8,
bottom: 8,
position: 'absolute',
},
doneButton: {
alignSelf: 'flex-start',
backgroundColor: Colors.LbryGreen,
paddingLeft: 16,
paddingRight: 16,
},
});
export default modalPickerStyle;

View file

@ -13,7 +13,7 @@ const subscriptionsStyle = StyleSheet.create({
suggestedSubsContainer: {
flex: 1,
},
suggestedScrollPadding: {
suggestedScrollContent: {
paddingTop: 8,
},
button: {
@ -159,6 +159,7 @@ const subscriptionsStyle = StyleSheet.create({
pickerRow: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginLeft: 16,
marginRight: 16,
marginTop: 8,
@ -245,6 +246,24 @@ const subscriptionsStyle = StyleSheet.create({
marginRight: 4,
marginBottom: 4,
},
leftPickerRow: {
flexDirection: 'row',
alignItems: 'center',
},
suggestedLink: {
fontFamily: 'Inter-UI-Regular',
fontSize: 14,
},
modalContainer: {
height: '80%',
backgroundColor: Colors.PageBackground,
},
modalScrollContainer: {
marginBottom: 50,
},
modalSuggestedScrollContent: {
paddingTop: 16,
},
});
export default subscriptionsStyle;