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/view.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ActivityIndicator, FlatList, SectionList, Text, View } from 'react-native';
+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';
@@ -49,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 (
@@ -61,8 +61,10 @@ class SuggestedSubscriptions extends React.PureComponent {
 
     return (
       <SectionList
-        style={subscriptionsStyle.scrollContainer}
+        style={inModal ? subscriptionsStyle.modalScrollContainer : subscriptionsStyle.scrollContainer}
-        contentContainerStyle={subscriptionsStyle.suggestedScrollPadding}
+        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
+            <View style={subscriptionsStyle.leftPickerRow}>
-              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 && (
               <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;