final discovery fixes

2019-07-29 17:29:11 +01:00 · 2019-07-29 17:29:11 +01:00 · 7a7530a970
parent dcd8c97a9c
commit 7a7530a970
8 changed files with 171 additions and 34 deletions
--- a/src/component/claimList/index.js
+++ b/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, {
-        no_totals: true,
-        order_by: orderBy,
-        page,
-        not_tags: MATURE_TAGS,
-      })
+      doClaimSearchByTags(
+        tags,
+        Constants.DEFAULT_PAGE_SIZE,
+        Object.assign(
+          {},
+          {
+            no_totals: true,
+            order_by: orderBy,
+            page,
+            not_tags: MATURE_TAGS,
+          },
+          additionalOptions
+        )
+      )
    ),
 });

--- a/src/component/claimList/view.js
+++ b/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,20 +235,24 @@ class ClaimList extends React.PureComponent {
          initialNumToRender={3}
          maxToRenderPerBatch={3}
          removeClippedSubviews
-          renderItem={({ item }) => (
-            <FileItem
-              style={discoverStyle.fileItem}
-              mediaStyle={discoverStyle.fileItemMedia}
-              key={item}
-              uri={normalizeURI(item)}
-              navigation={navigation}
-              showDetails
-              compactView={false}
-            />
-          )}
+          renderItem={({ item }) => {
+            return item === Constants.MORE_PLACEHOLDER ? (
+              this.renderMorePlaceholder()
+            ) : (
+              <FileItem
+                style={discoverStyle.fileItem}
+                mediaStyle={discoverStyle.fileItemMedia}
+                key={item}
+                uri={normalizeURI(item)}
+                navigation={navigation}
+                showDetails
+                compactView={false}
+              />
+            );
+          }}
          horizontal
          showsHorizontalScrollIndicator={false}
-          data={uris ? uris.slice(0, horizontalLimit) : []}
+          data={uris ? this.appendMorePlaceholder(uris.slice(0, horizontalLimit)) : []}
          keyExtractor={(item, index) => item}
        />
      );
--- a/src/component/modalPicker/view.js
+++ b/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} />
--- a/src/constants.js
+++ b/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',
@ -89,18 +95,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',
 };

@ -111,6 +135,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_SETTINGS,
--- a/src/page/discover/view.js
+++ b/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>
          )}
--- a/src/page/tag/view.js
+++ b/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} />}
-        {this.state.showSortPicker && (
+        {!showSortPicker && !showTimePicker && <FloatingWalletBalance navigation={navigation} />}
+        {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>
    );
  }
--- a/src/styles/discover.js
+++ b/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,
--- a/src/styles/modalPicker.js
+++ b/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,