Compare commits
3 commits
master
...
suggested-
Author | SHA1 | Date | |
---|---|---|---|
|
6958cdcfcb | ||
|
5fc6bc50c3 | ||
|
fb5b6598d2 |
7 changed files with 145 additions and 22 deletions
4
src/component/modalSuggestedSubscriptions/index.js
Normal file
4
src/component/modalSuggestedSubscriptions/index.js
Normal file
|
@ -0,0 +1,4 @@
|
|||
import { connect } from 'react-redux';
|
||||
import ModalSuggestedSubscriptions from './view';
|
||||
|
||||
export default connect()(ModalSuggestedSubscriptions);
|
26
src/component/modalSuggestedSubscriptions/view.js
Normal file
26
src/component/modalSuggestedSubscriptions/view.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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 => ({
|
||||
|
|
|
@ -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} />
|
||||
)}
|
||||
|
|
|
@ -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
48
src/styles/modal.js
Normal 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;
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue