diff --git a/app/src/constants.js b/app/src/constants.js index 3949e99..e2ff915 100644 --- a/app/src/constants.js +++ b/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; diff --git a/app/src/page/subscriptions/index.js b/app/src/page/subscriptions/index.js index 9d75052..7de3864 100644 --- a/app/src/page/subscriptions/index.js +++ b/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); diff --git a/app/src/page/subscriptions/view.js b/app/src/page/subscriptions/view.js index bde78c9..875e0d1 100644 --- a/app/src/page/subscriptions/view.js +++ b/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 { {hasSubscriptions && !loading && + + this.changeViewMode(Constants.SUBSCRIPTIONS_VIEW_ALL)} + /> + this.changeViewMode(Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST)} + /> + } + + {(hasSubscriptions && !loading) && + + {(viewMode === Constants.SUBSCRIPTIONS_VIEW_ALL) && + 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) && + + {unreadSubscriptions.length ? + ( + {unreadSubscriptions.map(({ channel, uris }) => { + const { claimName } = parseURI(channel); + return uris.map(uri => ( + )); + })} + ) : + ( + All caught up! You might like the channels below. + + ) + } + } + + } + + {(hasSubscriptions && loading) && } - {!hasSubscriptions && + {(!hasSubscriptions && !loading) && You are not subscribed to any channels at the moment. Here are some channels that we think you might enjoy. diff --git a/app/src/styles/subscriptions.js b/app/src/styles/subscriptions.js index cadd3af..cb7174a 100644 --- a/app/src/styles/subscriptions.js +++ b/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' } });