added subscription view options - all and latest first (#425)

* added subscription view options - all and latest first
* persist subscriptions view mode

app/src/constants.js

@@ -4,6 +4,7 @@ const Constants = {
   KEY_EMAIL_VERIFY_PENDING: "emailVerifyPending",
 
   SETTING_ALPHA_UNDERSTANDS_RISKS: "alphaUnderstandRisks",
+  SETTING_SUBSCRIPTIONS_VIEW_MODE: "subscriptionsViewMode",
 
   ACTION_DELETE_COMPLETED_BLOBS: "DELETE_COMPLETED_BLOBS",
   ACTION_FIRST_RUN_PAGE_CHANGED: "FIRST_RUN_PAGE_CHANGED",
@@ -23,7 +24,10 @@ const Constants = {
   DRAWER_ROUTE_REWARDS: "Rewards",
   DRAWER_ROUTE_WALLET: "Wallet",
   DRAWER_ROUTE_SETTINGS: "Settings",
-  DRAWER_ROUTE_ABOUT: "About"
+  DRAWER_ROUTE_ABOUT: "About",
+
+  SUBSCRIPTIONS_VIEW_ALL: 'view_all',
+  SUBSCRIPTIONS_VIEW_LATEST_FIRST: 'view_latest_first'
 };
 
 export default Constants;

app/src/page/subscriptions/index.js

@@ -3,8 +3,6 @@ import {
   doFetchMySubscriptions,
   doSetViewMode,
   doFetchRecommendedSubscriptions,
-  doCompleteFirstRun,
-  doShowSuggestedSubs,
   selectSubscriptionClaims,
   selectSubscriptions,
   selectSubscriptionsBeingFetched,
@@ -15,6 +13,8 @@ import {
   selectShowSuggestedSubs
 } from 'lbryinc';
 import { doPushDrawerStack } from 'redux/actions/drawer';
+import { doSetClientSetting } from 'redux/actions/settings';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 import Constants from 'constants';
 import SubscriptionsPage from './view';
 
@@ -23,6 +23,7 @@ const select = state => ({
     selectIsFetchingSubscriptions(state) ||
     Boolean(Object.keys(selectSubscriptionsBeingFetched(state)).length),
   subscribedChannels: selectSubscriptions(state),
+  subscriptionsViewMode: makeSelectClientSetting(Constants.SETTING_SUBSCRIPTIONS_VIEW_MODE)(state),
   allSubscriptions: selectSubscriptionClaims(state),
   unreadSubscriptions: selectUnreadSubscriptions(state),
   viewMode: selectViewMode(state),
@@ -33,7 +34,9 @@ const select = state => ({
 const perform = dispatch => ({
   doFetchMySubscriptions: () => dispatch(doFetchMySubscriptions()),
   doFetchRecommendedSubscriptions: () => dispatch(doFetchRecommendedSubscriptions()),
-  pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_SUBSCRIPTIONS))
+  doSetViewMode: (viewMode) => dispatch(doSetViewMode(viewMode)),
+  pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_SUBSCRIPTIONS)),
+  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
 });
 
 export default connect(select, perform)(SubscriptionsPage);

app/src/page/subscriptions/view.js

@@ -13,10 +13,12 @@ import { buildURI } from 'lbry-redux';
 import { uriFromFileInfo } from 'utils/helper';
 import moment from 'moment';
 import Colors from 'styles/colors';
+import Constants from 'constants';
 import discoverStyle from 'styles/discover';
 import subscriptionsStyle from 'styles/subscriptions';
 import FloatingWalletBalance from 'component/floatingWalletBalance';
 import FileItem from 'component/fileItem';
+import Link from 'component/link';
 import SuggestedSubscriptions from 'component/suggestedSubscriptions';
 import UriBar from 'component/uriBar';
 
@@ -33,6 +35,17 @@ class SubscriptionsPage extends React.PureComponent {
     doFetchRecommendedSubscriptions();
   }
 
+  componentDidMount() {
+    const { doSetViewMode, subscriptionsViewMode } = this.props;
+    doSetViewMode(subscriptionsViewMode ? subscriptionsViewMode : Constants.SUBSCRIPTIONS_VIEW_ALL);
+  }
+
+  changeViewMode = (viewMode) => {
+    const { setClientSetting, doSetViewMode } = this.props;
+    setClientSetting(Constants.SETTING_SUBSCRIPTIONS_VIEW_MODE, viewMode);
+    doSetViewMode(viewMode);
+  }
+
   render() {
     const {
       subscribedChannels,
@@ -46,7 +59,7 @@ class SubscriptionsPage extends React.PureComponent {
       doShowSuggestedSubs,
       showSuggestedSubs,
       unreadSubscriptions,
-      navigation
+      navigation,
     } = this.props;
     const numberOfSubscriptions = subscribedChannels ? subscribedChannels.length : 0;
     const hasSubscriptions = numberOfSubscriptions > 0;
@@ -55,6 +68,24 @@ class SubscriptionsPage extends React.PureComponent {
       <View style={subscriptionsStyle.container}>
 
       {hasSubscriptions && !loading &&
+      <View style={subscriptionsStyle.viewModeRow}>
+        <Link
+          text={'All Subscriptions'}
+          style={[subscriptionsStyle.viewModeLink,
+                  ((viewMode === Constants.SUBSCRIPTIONS_VIEW_ALL) ? subscriptionsStyle.activeMode : subscriptionsStyle.inactiveMode)]}
+          onPress={() => this.changeViewMode(Constants.SUBSCRIPTIONS_VIEW_ALL)}
+        />
+        <Link
+          text={'Latest First'}
+          style={[subscriptionsStyle.viewModeLink,
+                  ((viewMode === Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST) ? subscriptionsStyle.activeMode : subscriptionsStyle.inactiveMode)]}
+          onPress={() => this.changeViewMode(Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST)}
+        />
+      </View>}
+
+      {(hasSubscriptions && !loading) &&
+      <View style={subscriptionsStyle.container}>
+        {(viewMode === Constants.SUBSCRIPTIONS_VIEW_ALL) &&
         <FlatList
           style={subscriptionsStyle.scrollContainer}
           contentContainerStyle={subscriptionsStyle.scrollPadding}
@@ -64,7 +95,9 @@ class SubscriptionsPage extends React.PureComponent {
               mediaStyle={discoverStyle.fileItemMedia}
               key={item}
               uri={uriFromFileInfo(item)}
-              navigation={navigation} />
+              navigation={navigation}
+              compactView={false}
+              showDetails={true} />
             )
           }
           data={allSubscriptions.sort((a, b) => {
@@ -72,13 +105,41 @@ class SubscriptionsPage extends React.PureComponent {
           })}
           keyExtractor={(item, index) => uriFromFileInfo(item)} />}
 
-      {hasSubscriptions && loading &&
+        {(viewMode === Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST) &&
+        <View style={subscriptionsStyle.container}>
+          {unreadSubscriptions.length ?
+            (<ScrollView
+              style={subscriptionsStyle.scrollContainer}
+              contentContainerStyle={subscriptionsStyle.scrollPadding}>
+              {unreadSubscriptions.map(({ channel, uris }) => {
+                  const { claimName } = parseURI(channel);
+                  return uris.map(uri => (
+                    <FileItem
+                      style={subscriptionsStyle.fileItem}
+                      mediaStyle={discoverStyle.fileItemMedia}
+                      key={uri}
+                      uri={uri}
+                      navigation={navigation}
+                      compactView={false}
+                      showDetails={true} />));
+              })}
+            </ScrollView>) :
+            (<View style={subscriptionsStyle.contentContainer}>
+              <Text style={subscriptionsStyle.contentText}>All caught up! You might like the channels below.</Text>
+              <SuggestedSubscriptions navigation={navigation} />
+            </View>)
+          }
+        </View>}
+
+      </View>}
+
+      {(hasSubscriptions && loading) &&
         <View style={subscriptionsStyle.busyContainer}>
           <ActivityIndicator size="large" color={Colors.LbryGreen} style={subscriptionsStyle.loading} />
         </View>
       }
 
-      {!hasSubscriptions &&
+      {(!hasSubscriptions && !loading) &&
         <View style={subscriptionsStyle.container}>
           <Text style={subscriptionsStyle.infoText}>
             You are not subscribed to any channels at the moment. Here are some channels that we think you might enjoy.

app/src/styles/subscriptions.js

@@ -33,9 +33,21 @@ const subscriptionsStyle = StyleSheet.create({
   suggestedContainer: {
     flex: 1,
   },
+  contentContainer: {
+    flex: 1,
+    marginTop: 16
+  },
+  contentText: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 16,
+    marginLeft: 24,
+    marginRight: 24,
+    marginBottom: 8
+  },
   fileItem: {
     marginLeft: 24,
     marginRight: 24,
+    marginBottom: 24
   },
   compactItems: {
     flex: 1,
@@ -85,6 +97,23 @@ const subscriptionsStyle = StyleSheet.create({
     backgroundColor: Colors.White,
     paddingLeft: 16,
     paddingRight: 16,
+  },
+  viewModeRow: {
+    flexDirection: 'row',
+    marginLeft: 24,
+    marginRight: 24,
+    marginTop: 24
+  },
+  viewModeLink: {
+    marginRight: 24,
+    fontSize: 18,
+    color: Colors.LbryGreen
+  },
+  inactiveMode: {
+    fontFamily: 'Inter-UI-Regular'
+  },
+  activeMode: {
+    fontFamily: 'Inter-UI-SemiBold'
   }
 });