Merge pull request #6 from lbryio/discovery-updates

final discovery fixes

src/component/claimList/index.js

@@ -23,14 +23,22 @@ const select = (state, props) => {
 
 const perform = dispatch => ({
   claimSearch: options => dispatch(doClaimSearch(Constants.DEFAULT_PAGE_SIZE, options)),
-  searchByTags: (tags, orderBy = Constants.DEFAULT_ORDER_BY, page = 1) =>
+  searchByTags: (tags, orderBy = Constants.DEFAULT_ORDER_BY, page = 1, additionalOptions = {}) =>
     dispatch(
-      doClaimSearchByTags(tags, Constants.DEFAULT_PAGE_SIZE, {
+      doClaimSearchByTags(
+        tags,
+        Constants.DEFAULT_PAGE_SIZE,
+        Object.assign(
+          {},
+          {
             no_totals: true,
             order_by: orderBy,
             page,
             not_tags: MATURE_TAGS,
-      })
+          },
+          additionalOptions
+        )
+      )
     ),
 });
 

src/component/claimList/view.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import NavigationActions from 'react-navigation';
-import { ActivityIndicator, FlatList, Text, View } from 'react-native';
+import { ActivityIndicator, FlatList, Text, TouchableOpacity, View } from 'react-native';
 import { MATURE_TAGS, normalizeURI } from 'lbry-redux';
 import _ from 'lodash';
 import FileItem from 'component/fileItem';
 import FileListItem from 'component/fileListItem';
+import Icon from 'react-native-vector-icons/FontAwesome5';
 import Colors from 'styles/colors';
 import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import claimListStyle from 'styles/claimList';
 import discoverStyle from 'styles/discover';
+import moment from 'moment';
 
 const horizontalLimit = 10;
 const softLimit = 500;
@@ -30,6 +32,7 @@ class ClaimList extends React.PureComponent {
       orderBy = Constants.DEFAULT_ORDER_BY,
       searchByTags,
       tags,
+      time,
     } = this.props;
     if (channelIds || trendingForAll) {
       const options = {
@@ -47,7 +50,11 @@ class ClaimList extends React.PureComponent {
 
       claimSearch(options);
     } else if (tags && tags.length > 0) {
-      searchByTags(tags, orderBy, this.state.currentPgae);
+      const additionalOptions = {};
+      if (orderBy && orderBy[0] === Constants.ORDER_BY_EFFECTIVE_AMOUNT && Constants.TIME_ALL !== time) {
+        additionalOptions.release_time = this.getReleaseTimeOption(time);
+      }
+      searchByTags(tags, orderBy, this.state.currentPage, additionalOptions);
     }
   }
 
@@ -59,12 +66,14 @@ class ClaimList extends React.PureComponent {
       tags: prevTags,
       channelIds: prevChannelIds,
       trendingForAll: prevTrendingForAll,
+      time: prevTime,
     } = this.props;
-    const { orderBy, tags, channelIds, trendingForAll } = nextProps;
+    const { orderBy, tags, channelIds, trendingForAll, time } = nextProps;
     if (
       !_.isEqual(orderBy, prevOrderBy) ||
       !_.isEqual(tags, prevTags) ||
       !_.isEqual(channelIds, prevChannelIds) ||
+      time !== prevTime ||
       trendingForAll !== prevTrendingForAll
     ) {
       // reset to page 1 because the order, tags or channelIds changed
@@ -90,15 +99,27 @@ class ClaimList extends React.PureComponent {
           claimSearch(options);
         } else if (tags && tags.length > 0) {
           this.setState({ subscriptionsView: false, trendingForAllView: false });
-          searchByTags(tags, orderBy, this.state.currentPage);
+          const additionalOptions = {};
+          if (orderBy && orderBy[0] === Constants.ORDER_BY_EFFECTIVE_AMOUNT && Constants.TIME_ALL !== time) {
+            additionalOptions.release_time = this.getReleaseTimeOption(time);
+          }
+          searchByTags(tags, orderBy, this.state.currentPage, additionalOptions);
         }
       });
     }
   }
 
+  getReleaseTimeOption = time => {
+    return `>${Math.floor(
+      moment()
+        .subtract(1, time)
+        .unix()
+    )}`;
+  };
+
   handleVerticalEndReached = () => {
     // fetch more content
-    const { channelIds, claimSearch, claimSearchUris, orderBy, searchByTags, tags, uris } = this.props;
+    const { channelIds, claimSearch, claimSearchUris, orderBy, searchByTags, tags, time, uris } = this.props;
     const { subscriptionsView, trendingForAllView } = this.state;
     if ((claimSearchUris && claimSearchUris.length >= softLimit) || (uris && uris.length >= softLimit)) {
       // don't fetch more than the specified limit to be displayed
@@ -119,17 +140,47 @@ class ClaimList extends React.PureComponent {
 
         claimSearch(options);
       } else {
-        searchByTags(tags, orderBy, this.state.currentPage);
+        const additionalOptions = {};
+        if (orderBy && orderBy[0] === Constants.ORDER_BY_EFFECTIVE_AMOUNT && Constants.TIME_ALL !== time) {
+          additionalOptions.release_time = this.getReleaseTimeOption(time);
+        }
+        searchByTags(tags, orderBy, this.state.currentPage, additionalOptions);
       }
     });
   };
 
+  appendMorePlaceholder = items => {
+    items.push(Constants.MORE_PLACEHOLDER);
+    return items;
+  };
+
+  onMorePressed = () => {
+    const { navigation, tags } = this.props;
+
+    // tags.length > 1 means this is the Trending list
+    if (tags.length === 1) {
+      navigation.navigate({ routeName: Constants.DRAWER_ROUTE_TAG, key: 'tagPage', params: { tag: tags[0] } });
+    } else {
+      navigation.navigate({ routeName: Constants.FULL_ROUTE_NAME_TRENDING });
+    }
+  };
+
+  renderMorePlaceholder = () => {
+    return (
+      <TouchableOpacity style={discoverStyle.fileItemMore} onPress={this.onMorePressed}>
+        <Text style={discoverStyle.moreText}>more</Text>
+        <Icon style={discoverStyle.moreIcon} name={'angle-double-down'} color={Colors.White} size={16} />
+      </TouchableOpacity>
+    );
+  };
+
   render() {
     const {
       ListHeaderComponent,
       loading,
       claimSearchLoading,
       claimSearchUris,
+      morePlaceholder,
       navigation,
       orientation = Constants.ORIENTATION_VERTICAL,
       style,
@@ -184,7 +235,10 @@ class ClaimList extends React.PureComponent {
           initialNumToRender={3}
           maxToRenderPerBatch={3}
           removeClippedSubviews
-          renderItem={({ item }) => (
+          renderItem={({ item }) => {
+            return item === Constants.MORE_PLACEHOLDER ? (
+              this.renderMorePlaceholder()
+            ) : (
               <FileItem
                 style={discoverStyle.fileItem}
                 mediaStyle={discoverStyle.fileItemMedia}
@@ -194,10 +248,11 @@ class ClaimList extends React.PureComponent {
                 showDetails
                 compactView={false}
               />
-          )}
+            );
+          }}
           horizontal
           showsHorizontalScrollIndicator={false}
-          data={uris ? uris.slice(0, horizontalLimit) : []}
+          data={uris ? this.appendMorePlaceholder(uris.slice(0, horizontalLimit)) : []}
           keyExtractor={(item, index) => item}
         />
       );

src/component/modalPicker/view.js

@@ -45,7 +45,7 @@ export default class ModalPicker extends React.PureComponent {
                   style={modalPickerStyle.listItem}
                   onPress={() => onItemSelected(item)}
                 >
-                  <Icon style={modalPickerStyle.itemIcon} name={item.icon} size={16} />
+                  {item.icon && <Icon style={modalPickerStyle.itemIcon} name={item.icon} size={16} />}
                   <Text style={modalPickerStyle.itemLabel}>{item.label}</Text>
                   {selectedItem && selectedItem.name === item.name && (
                     <Icon style={modalPickerStyle.itemSelected} name={'check'} color={Colors.LbryGreen} size={16} />

src/constants.js

@@ -2,6 +2,12 @@ const SORT_BY_NEW = 'new';
 const SORT_BY_HOT = 'hot';
 const SORT_BY_TOP = 'top';
 
+const TIME_DAY = 'day';
+const TIME_WEEK = 'week';
+const TIME_MONTH = 'month';
+const TIME_YEAR = 'year';
+const TIME_ALL = 'all';
+
 const Constants = {
   FIRST_RUN_PAGE_WELCOME: 'welcome',
   FIRST_RUN_PAGE_EMAIL_COLLECT: 'email-collect',
@@ -90,18 +96,36 @@ const Constants = {
   SORT_BY_NEW,
   SORT_BY_TOP,
 
+  TIME_DAY,
+  TIME_WEEK,
+  TIME_MONTH,
+  TIME_YEAR,
+  TIME_ALL,
+
   CLAIM_SEARCH_SORT_BY_ITEMS: [
     { icon: 'fire-alt', name: SORT_BY_HOT, label: 'Hot content' },
     { icon: 'certificate', name: SORT_BY_NEW, label: 'New content' },
     { icon: 'chart-line', name: SORT_BY_TOP, label: 'Top content' },
   ],
 
+  CLAIM_SEARCH_TIME_ITEMS: [
+    { name: TIME_DAY, label: 'Past 24 hours' },
+    { name: TIME_WEEK, label: 'Past week' },
+    { name: TIME_MONTH, label: 'Past month' },
+    { name: TIME_YEAR, label: 'Past year' },
+    { name: TIME_ALL, label: 'All time' },
+  ],
+
   DEFAULT_ORDER_BY: ['trending_global', 'trending_mixed'],
 
+  ORDER_BY_EFFECTIVE_AMOUNT: 'effective_amount',
+
   DEFAULT_PAGE_SIZE: 10,
 
   ALL_PLACEHOLDER: '_all',
 
+  MORE_PLACEHOLDER: '_more',
+
   TRUE_STRING: 'true',
 };
 
@@ -112,6 +136,8 @@ export const DrawerRoutes = [
   Constants.DRAWER_ROUTE_TRENDING,
   Constants.DRAWER_ROUTE_SUBSCRIPTIONS,
   Constants.DRAWER_ROUTE_MY_LBRY,
+  Constants.DRAWER_ROUTE_TAG,
+  Constants.DRAWER_ROUTE_PUBLISH,
   Constants.DRAWER_ROUTE_REWARDS,
   Constants.DRAWER_ROUTE_WALLET,
   Constants.DRAWER_ROUTE_PUBLISH,

src/page/discover/view.js

@@ -267,9 +267,10 @@ class DiscoverPage extends React.PureComponent {
           removeClippedSubviews
           renderItem={({ item, index, section }) => (
             <ClaimList
-              key={item.join(',')}
+              key={item.sort().join(',')}
               orderBy={item.length > 1 ? Constants.DEFAULT_ORDER_BY : orderBy}
               tags={item}
+              morePlaceholder
               navigation={navigation}
               orientation={Constants.ORIENTATION_HORIZONTAL}
             />
@@ -280,7 +281,7 @@ class DiscoverPage extends React.PureComponent {
                 {formatTagTitle(title)}
               </Text>
               <TouchableOpacity onPress={() => this.handleTagPress(title)}>
-                <Icon name={'ellipsis-v'} size={16} />
+                <Icon name={'angle-double-down'} size={16} />
               </TouchableOpacity>
             </View>
           )}

src/page/tag/view.js

@@ -19,8 +19,11 @@ class TagPage extends React.PureComponent {
   state = {
     tag: null,
     showSortPicker: false,
+    showTimePicker: false,
     orderBy: Constants.DEFAULT_ORDER_BY,
+    time: Constants.TIME_WEEK,
     currentSortByItem: Constants.CLAIM_SEARCH_SORT_BY_ITEMS[0],
+    currentTimeItem: Constants.CLAIM_SEARCH_TIME_ITEMS[1],
   };
 
   didFocusListener;
@@ -67,24 +70,34 @@ class TagPage extends React.PureComponent {
         break;
 
       case Constants.SORT_BY_TOP:
-        orderBy = ['effective_amount'];
+        orderBy = [Constants.ORDER_BY_EFFECTIVE_AMOUNT];
         break;
     }
 
     this.setState({ currentSortByItem: item, orderBy, showSortPicker: false });
   };
 
+  handleTimeItemSelected = item => {
+    this.setState({ time: item.name });
+  };
+
   render() {
     const { navigation } = this.props;
-    const { tag, currentSortByItem } = this.state;
+    const { tag, currentSortByItem, currentTimeItem, showSortPicker, showTimePicker } = this.state;
 
     return (
       <View style={discoverStyle.container}>
-        <UriBar navigation={navigation} belowOverlay={this.state.showSortPicker} />
+        <UriBar navigation={navigation} belowOverlay={showSortPicker || showTimePicker} />
         <ClaimList
           ListHeaderComponent={
             <View style={discoverStyle.tagTitleRow}>
               <Text style={discoverStyle.tagPageTitle}>{formatTagTitle(tag)}</Text>
+              {Constants.SORT_BY_TOP === currentSortByItem.name && (
+                <TouchableOpacity style={discoverStyle.tagTime} onPress={() => this.setState({ showTimePicker: true })}>
+                  <Text style={discoverStyle.tagSortText}>{currentTimeItem.label}</Text>
+                  <Icon style={discoverStyle.tagSortIcon} name={'sort-down'} size={14} />
+                </TouchableOpacity>
+              )}
               <TouchableOpacity style={discoverStyle.tagSortBy} onPress={() => this.setState({ showSortPicker: true })}>
                 <Text style={discoverStyle.tagSortText}>{currentSortByItem.label.split(' ')[0]}</Text>
                 <Icon style={discoverStyle.tagSortIcon} name={'sort-down'} size={14} />
@@ -93,12 +106,13 @@ class TagPage extends React.PureComponent {
           }
           style={discoverStyle.tagPageClaimList}
           orderBy={this.state.orderBy}
+          time={this.state.time}
           tags={[tag]}
           navigation={navigation}
           orientation={Constants.ORIENTATION_VERTICAL}
         />
-        {!this.state.showSortPicker && <FloatingWalletBalance navigation={navigation} />}
+        {!showSortPicker && !showTimePicker && <FloatingWalletBalance navigation={navigation} />}
-        {this.state.showSortPicker && (
+        {showSortPicker && (
           <ModalPicker
             title={__('Sort content by')}
             onOverlayPress={() => this.setState({ showSortPicker: false })}
@@ -107,6 +121,15 @@ class TagPage extends React.PureComponent {
             items={Constants.CLAIM_SEARCH_SORT_BY_ITEMS}
           />
         )}
+        {showTimePicker && (
+          <ModalPicker
+            title={__('Content from')}
+            onOverlayPress={() => this.setState({ showTimePicker: false })}
+            onItemSelected={this.handleTimeItemSelected}
+            selectedItem={this.state.currentTimeItem}
+            items={Constants.CLAIM_SEARCH_TIME_ITEMS}
+          />
+        )}
       </View>
     );
   }

src/styles/discover.js

@@ -85,6 +85,25 @@ const discoverStyle = StyleSheet.create({
     width: fileItemWidth,
     marginRight: 12,
   },
+  fileItemMore: {
+    alignSelf: 'flex-start',
+    backgroundColor: Colors.LbryGreen,
+    flexDirection: 'row',
+    width: fileItemWidth,
+    height: fileItemMediaHeight,
+    marginRight: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  moreText: {
+    fontFamily: 'Inter-UI-Regular',
+    color: Colors.White,
+    fontSize: 24,
+  },
+  moreIcon: {
+    marginLeft: 12,
+    marginBottom: -4,
+  },
   fileItemMedia: {
     width: fileItemMediaWidth,
     height: fileItemMediaHeight,
@@ -224,6 +243,10 @@ const discoverStyle = StyleSheet.create({
     alignItems: 'center',
     marginRight: 4,
   },
+  tagTime: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   tagSortText: {
     fontFamily: 'Inter-UI-Regular',
     fontSize: 14,

src/styles/modalPicker.js

@@ -49,9 +49,10 @@ const modalPickerStyle = StyleSheet.create({
   },
   itemIcon: {
     marginLeft: 8,
-    marginRight: 12,
+    marginRight: 4,
   },
   itemLabel: {
+    marginLeft: 8,
     alignSelf: 'flex-start',
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,