diff --git a/src/component/modalSuggestedSubscriptions/index.js b/src/component/modalSuggestedSubscriptions/index.js
new file mode 100644
index 0000000..6eef7f4
--- /dev/null
+++ b/src/component/modalSuggestedSubscriptions/index.js
@@ -0,0 +1,4 @@
+import { connect } from 'react-redux';
+import ModalSuggestedSubscriptions from './view';
+
+export default connect()(ModalSuggestedSubscriptions);
diff --git a/src/component/modalSuggestedSubscriptions/view.js b/src/component/modalSuggestedSubscriptions/view.js
new file mode 100644
index 0000000..0c8765e
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/component/suggestedSubscriptions/view.js b/src/component/suggestedSubscriptions/view.js
index d59074c..e067988 100644
--- a/src/component/suggestedSubscriptions/view.js
+++ b/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 (
(
)}
diff --git a/src/page/subscriptions/view.js b/src/page/subscriptions/view.js
index 0549924..5a2eacb 100644
--- a/src/page/subscriptions/view.js
+++ b/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 {
{!this.state.showingSuggestedSubs && hasSubscriptions && (
- this.setState({ showSortPicker: true })}
- >
- {currentSortByItem.label.split(' ')[0]}
-
-
-
- {Constants.SORT_BY_TOP === currentSortByItem.name && (
+
this.setState({ showTimePicker: true })}
+ onPress={() => this.setState({ showSortPicker: true })}
>
- {timeItem.label}
+ {currentSortByItem.label.split(' ')[0]}
- )}
+
+ {Constants.SORT_BY_TOP === currentSortByItem.name && (
+ this.setState({ showTimePicker: true })}
+ >
+ {timeItem.label}
+
+
+ )}
+
+
+ this.setState({ showModalSuggestedSubs: true })}
+ />
)}
{!this.state.showingSuggestedSubs && hasSubscriptions && !loading && (
@@ -223,7 +233,9 @@ class SubscriptionsPage extends React.PureComponent {
)}
- {!showSortPicker && !showTimePicker && }
+ {!showSortPicker && !showTimePicker && !showModalSuggestedSubs && (
+
+ )}
{showSortPicker && (
)}
+ {showModalSuggestedSubs && (
+ this.setState({ showModalSuggestedSubs: false })}
+ onDonePress={() => this.setState({ showModalSuggestedSubs: false })}
+ />
+ )}
);
}
diff --git a/src/styles/modal.js b/src/styles/modal.js
new file mode 100644
index 0000000..4183991
--- /dev/null
+++ b/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;
diff --git a/src/styles/subscriptions.js b/src/styles/subscriptions.js
index a419949..bb1ff78 100644
--- a/src/styles/subscriptions.js
+++ b/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;