Suggested subscriptions improvements (#49)

* check nsfw flag when retrieving trending channels
* rename 'Tags you follow' to 'Suggested channels'
* implement suggested subscriptions modal

src/component/modalSuggestedSubscriptions/index.js

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

src/component/modalSuggestedSubscriptions/view.js

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

src/component/suggestedSubscriptions/index.js

@@ -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 => ({

src/component/suggestedSubscriptions/view.js

@@ -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} />
         )}

src/page/subscriptions/view.js

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

src/styles/modal.js

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

src/styles/subscriptions.js

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