Merge pull request #449 from lbryio/improve-suggested-subs

add button to view subscriptions from the suggested subscriptions view

app/src/component/suggestedSubscriptionItem/view.js

@@ -43,7 +43,7 @@ class SuggestedSubscriptionItem extends React.PureComponent {
       return (
         <View style={subscriptionsStyle.suggestedContainer}>
           <FileItem
-            style={subscriptionsStyle.fileItem}
+            style={subscriptionsStyle.compactMainFileItem}
             mediaStyle={subscriptionsStyle.fileItemMedia}
             uri={this.uriForClaim(claims[0])}
             navigation={navigation} />

app/src/page/subscriptions/view.js

@@ -13,6 +13,7 @@ import {
 import { buildURI, parseURI } from 'lbry-redux';
 import { uriFromFileInfo } from 'utils/helper';
 import moment from 'moment';
+import Button from 'component/button';
 import Colors from 'styles/colors';
 import Constants from 'constants';
 import discoverStyle from 'styles/discover';
@@ -24,6 +25,10 @@ import SuggestedSubscriptions from 'component/suggestedSubscriptions';
 import UriBar from 'component/uriBar';
 
 class SubscriptionsPage extends React.PureComponent {
+  state = {
+    showingSuggestedSubs: false
+  };
+
   componentWillMount() {
     const {
       doFetchMySubscriptions,
@@ -62,14 +67,19 @@ class SubscriptionsPage extends React.PureComponent {
       unreadSubscriptions,
       navigation,
     } = this.props;
+
     const numberOfSubscriptions = subscribedChannels ? subscribedChannels.length : 0;
     const hasSubscriptions = numberOfSubscriptions > 0;
 
+    if (!hasSubscriptions && !this.state.showingSuggestedSubs) {
+      this.setState({ showingSuggestedSubs: true });
+    }
+
     return (
       <View style={subscriptionsStyle.container}>
         <UriBar navigation={navigation} />
 
-        {hasSubscriptions && !loading &&
+        {(!this.state.showingSuggestedSubs && hasSubscriptions && !loading) &&
         <View style={subscriptionsStyle.viewModeRow}>
           <Link
             text={'All Subscriptions'}
@@ -85,9 +95,8 @@ class SubscriptionsPage extends React.PureComponent {
           />
         </View>}
 
-        {(hasSubscriptions && !loading) &&
+        {(!this.state.showingSuggestedSubs && hasSubscriptions && !loading) &&
         <View style={subscriptionsStyle.subContainer}>
-          <UriBar navigation={navigation} />
           {(viewMode === Constants.SUBSCRIPTIONS_VIEW_ALL) &&
           <FlatList
             style={subscriptionsStyle.scrollContainer}
@@ -142,11 +151,25 @@ class SubscriptionsPage extends React.PureComponent {
           </View>
         }
 
-        {(!hasSubscriptions && !loading) &&
-          <View style={subscriptionsStyle.subContainer}>
+        {this.state.showingSuggestedSubs &&
+          <View style={subscriptionsStyle.suggestedSubsContainer}>
+            {!hasSubscriptions &&
             <Text style={subscriptionsStyle.infoText}>
               You are not subscribed to any channels at the moment. Here are some channels that we think you might enjoy.
-            </Text>
+            </Text>}
+
+            {hasSubscriptions &&
+            <View>
+              <Text style={subscriptionsStyle.infoText}>
+                You are currently subscribed to {numberOfSubscriptions} channel{(numberOfSubscriptions > 1) ? 's' : ''}.
+              </Text>
+              <Button
+                style={subscriptionsStyle.button}
+                text={"View my subscriptions"}
+                onPress={() => this.setState({ showingSuggestedSubs: false })} />
+            </View>
+            }
+
             {loadingSuggested && <ActivityIndicator size="large" colors={Colors.LbryGreen} style={subscriptionsStyle.loading} />}
             {!loadingSuggested && <SuggestedSubscriptions navigation={navigation} />}
           </View>}

app/src/styles/subscriptions.js

@@ -13,8 +13,19 @@ const subscriptionsStyle = StyleSheet.create({
   },
   subContainer: {
     flex: 1,
+  },
+  suggestedSubsContainer: {
+    flex: 1,
     marginTop: 60
   },
+  button: {
+    alignSelf: 'flex-start',
+    backgroundColor: Colors.LbryGreen,
+    paddingLeft: 16,
+    paddingRight: 16,
+    marginLeft: 16,
+    marginBottom: 16
+  },
   busyContainer: {
     flex: 1,
     justifyContent: 'center',
@@ -52,6 +63,10 @@ const subscriptionsStyle = StyleSheet.create({
     marginRight: 24,
     marginBottom: 24
   },
+  compactMainFileItem: {
+    marginLeft: 24,
+    marginRight: 24
+  },
   compactItems: {
     flex: 1,
     marginTop: 6,
@@ -105,7 +120,7 @@ const subscriptionsStyle = StyleSheet.create({
     flexDirection: 'row',
     marginLeft: 24,
     marginRight: 24,
-    marginTop: 24
+    marginTop: 84
   },
   viewModeLink: {
     marginRight: 24,