redux-persist v5. style tweaks.

package.json

@@ -4,6 +4,7 @@
     "private": "true",
     "scripts": {
         "start": "node node_modules/react-native/local-cli/cli.js start",
+        "devtools": "react-devtools",
         "format": "prettier 'src/**/*.{js,json}' --write",
         "precommit": "lint-staged"
     },
@@ -11,7 +12,7 @@
         "base-64": "^0.1.0",
         "@expo/vector-icons": "^8.1.0",
         "gfycat-style-urls": "^1.0.3",
-        "lbry-redux": "lbryio/lbry-redux#cd23c12fb7fd541d28d7cbf3874b1058b036fd13",
+        "lbry-redux": "lbryio/lbry-redux#67a654f60630710cae72419448a73a18d076d18a",
         "lbryinc": "lbryio/lbryinc",
         "lodash": ">=4.17.11",
         "merge": ">=1.2.1",
@@ -36,7 +37,7 @@
         "react-navigation-redux-helpers": "^3.0.2",
         "react-redux": "^5.0.3",
         "redux": "^4.0.4",
-        "redux-persist": "^4.10.2",
+        "redux-persist": "^5.10.0",
         "redux-persist-filesystem-storage": "^1.3.2",
         "redux-persist-transform-compress": "^4.2.0",
         "redux-persist-transform-filter": "0.0.18",
@@ -63,6 +64,7 @@
         "husky": "^0.14.3",
         "lint-staged": "^7.0.4",
         "metro-react-native-babel-preset": "^0.55.0",
-        "prettier": "^1.11.1"
+        "prettier": "^1.11.1",
+        "react-devtools": "^3.6.3"
     }
 }

src/component/claimList/view.js

@@ -199,8 +199,8 @@ class ClaimList extends React.PureComponent {
             ListHeaderComponent={ListHeaderComponent}
             style={claimListStyle.verticalScrollContainer}
             contentContainerStyle={claimListStyle.verticalScrollPadding}
-            initialNumToRender={8}
+            initialNumToRender={10}
-            maxToRenderPerBatch={24}
+            maxToRenderPerBatch={20}
             removeClippedSubviews
             renderItem={({ item }) => (
               <FileListItem key={item} uri={item} style={claimListStyle.verticalListItem} navigation={navigation} />
@@ -208,7 +208,7 @@ class ClaimList extends React.PureComponent {
             data={data}
             keyExtractor={(item, index) => item}
             onEndReached={this.handleVerticalEndReached}
-            onEndReachedThreshold={0.9}
+            onEndReachedThreshold={0.2}
           />
           {(((subscriptionsView || trendingForAllView) && claimSearchLoading) || loading) && (
             <View style={claimListStyle.verticalLoading}>

src/component/customRewardCard/view.js

@@ -57,7 +57,7 @@ class CustomRewardCard extends React.PureComponent<Props> {
     return (
       <View style={[rewardStyle.rewardCard, rewardStyle.row]}>
         <View style={rewardStyle.leftCol}>
-          {rewardIsPending && <ActivityIndicator size="small" color={Colors.LbryGreen} />}
+          {rewardIsPending && <ActivityIndicator size="small" color={Colors.NextLbryGreen} />}
         </View>
         <View style={rewardStyle.midCol}>
           <Text style={rewardStyle.rewardTitle}>Custom Code</Text>

src/component/mediaPlayer/view.js

@@ -468,7 +468,7 @@ class MediaPlayer extends React.PureComponent {
 
         {this.state.buffering && (
           <View style={mediaPlayerStyle.loadingContainer}>
-            <ActivityIndicator color={Colors.LbryGreen} size="large" />
+            <ActivityIndicator color={Colors.NextLbryGreen} size="large" />
           </View>
         )}
 

src/component/relatedContent/view.js

@@ -6,7 +6,7 @@ import FileListItem from 'component/fileListItem';
 import fileListStyle from 'styles/fileList';
 import relatedContentStyle from 'styles/relatedContent';
 
-export default class RelatedContent extends React.PureComponent<Props> {
+export default class RelatedContent extends React.PureComponent {
   constructor() {
     super();
 
@@ -17,7 +17,7 @@ export default class RelatedContent extends React.PureComponent<Props> {
     this.getRecommendedContent();
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps) {
     const { claim, uri } = this.props;
 
     if (uri !== prevProps.uri) {
@@ -38,7 +38,7 @@ export default class RelatedContent extends React.PureComponent<Props> {
     }
   }
 
-  didSearch: ?boolean;
+  didSearch;
 
   render() {
     const { recommendedContent, isSearching, navigation } = this.props;
@@ -60,7 +60,9 @@ export default class RelatedContent extends React.PureComponent<Props> {
               onPress={() => navigateToUri(navigation, recommendedUri, { autoplay: true })}
             />
           ))}
-        {isSearching && <ActivityIndicator size="small" color={Colors.LbryGreen} style={relatedContentStyle.loading} />}
+        {isSearching && (
+          <ActivityIndicator size="small" color={Colors.NextLbryGreen} style={relatedContentStyle.loading} />
+        )}
       </View>
     );
   }

src/component/rewardCard/view.js

@@ -86,7 +86,7 @@ class RewardCard extends React.PureComponent<Props> {
               )}
             </TouchableOpacity>
           )}
-          {isPending && <ActivityIndicator size="small" color={Colors.LbryGreen} />}
+          {isPending && <ActivityIndicator size="small" color={Colors.NextLbryGreen} />}
         </View>
         <View style={rewardStyle.midCol}>
           <Text style={rewardStyle.rewardTitle}>{reward.reward_title}</Text>

src/component/suggestedSubscriptions/view.js

@@ -43,7 +43,7 @@ class SuggestedSubscriptions extends React.PureComponent {
     if (loading) {
       return (
         <View style={subscriptionsStyle.centered}>
-          <ActivityIndicator size="large" color={Colors.LbryGreen} />
+          <ActivityIndicator size="large" color={Colors.NextLbryGreen} />
         </View>
       );
     }

src/index.js

@@ -25,14 +25,14 @@ import {
   syncReducer,
   userReducer,
 } from 'lbryinc';
-import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import AppWithNavigationState, {
   AppNavigator,
   navigatorReducer,
   reactNavigationMiddleware,
 } from 'component/AppNavigator';
-import { autoRehydrate, persistStore } from 'redux-persist';
+import { REHYDRATE, PURGE, persistCombineReducers, persistStore } from 'redux-persist';
-import AsyncStorage from '@react-native-community/async-storage';
+import getStoredStateMigrateV4 from 'redux-persist/lib/integration/getStoredStateMigrateV4';
 import FilesystemStorage from 'redux-persist-filesystem-storage';
 import createCompressor from 'redux-persist-transform-compress';
 import createFilter from 'redux-persist-transform-filter';
@@ -76,7 +76,30 @@ function enableBatching(reducer) {
   };
 }
 
-const reducers = combineReducers({
+const compressor = createCompressor();
+const authFilter = createFilter('auth', ['authToken']);
+const contentFilter = createFilter('content', ['positions']);
+const saveClaimsFilter = createFilter('claims', ['claimsByUri']);
+const subscriptionsFilter = createFilter('subscriptions', ['enabledChannelNotifications', 'subscriptions']);
+const settingsFilter = createFilter('settings', ['clientSettings']);
+const tagsFilter = createFilter('tags', ['followedTags']);
+const walletFilter = createFilter('wallet', ['receiveAddress']);
+
+const v4PersistOptions = {
+  whitelist: ['auth', 'claims', 'content', 'subscriptions', 'settings', 'tags', 'wallet'],
+  // Order is important. Needs to be compressed last or other transforms can't
+  // read the data
+  transforms: [authFilter, saveClaimsFilter, subscriptionsFilter, settingsFilter, walletFilter, compressor],
+  debounce: 10000,
+  storage: FilesystemStorage,
+};
+
+const persistOptions = Object.assign({}, v4PersistOptions, {
+  key: 'primary',
+  getStoredState: getStoredStateMigrateV4(v4PersistOptions),
+});
+
+const reducers = persistCombineReducers(persistOptions, {
   auth: authReducer,
   blacklist: blacklistReducer,
   claims: claimsReducer,
@@ -113,20 +136,28 @@ const store = createStore(
 );
 window.store = store;
 
-const compressor = createCompressor();
+const persistor = persistStore(store, persistOptions, err => {
-const authFilter = createFilter('auth', ['authToken']);
+  if (err) {
-/* const contentFilter = createFilter('content', ['positions']);
+    console.log('Unable to load saved SETTINGS');
-const saveClaimsFilter = createFilter('claims', ['byId', 'claimsByUri']);
+  }
-const subscriptionsFilter = createFilter('subscriptions', ['enabledChannelNotifications', 'subscriptions']);
+});
-const settingsFilter = createFilter('settings', ['clientSettings']);
+window.persistor = persistor;
-const tagsFilter = createFilter('tags', ['followedTags']);
-const walletFilter = createFilter('wallet', ['receiveAddress']); */
 
-const whitelist = ['auth', 'claims', 'content', 'subscriptions', 'settings', 'tags', 'wallet'];
+/*
-/* store.subscribe(() => {
+const persistFilter = {
-  const state = store.getState();
+  'auth': ['authToken'],
-  const filteredState = Object.keys(state).filter(key => whitelist.includes(key)).reduce((o, k) => { o[k] = state[k]; return o; }, {});
+  'claims': ['byId', 'claimsByUri'],
-  NativeModules.StatePersistor.update(filteredState);
+  'content': ['positions'],
+  'subscriptions': ['enabledChannelNotifications', 'subscriptions'],
+  'settings': ['clientSettings'],
+  'tags': ['followedTags'],
+  'wallet': ['receiveAddress']
+};
+
+store.subscribe(() => {
+  const state = (({ auth, claims, content, subscriptions, settings, tags, wallet }) =>
+    ({ auth, claims, content, subscriptions, settings, tags, wallet }))(store.getState());
+  NativeModules.StatePersistor.update(state, persistFilter);
 }); */
 
 // TODO: Find i18n module that is compatible with react-native

src/page/channel/view.js

@@ -4,7 +4,7 @@ import { ActivityIndicator, Dimensions, Image, ScrollView, Text, TouchableOpacit
 import { TabView, SceneMap } from 'react-native-tab-view';
 import { navigateBack } from 'utils/helper';
 import Colors from 'styles/colors';
-import Constants from 'constants';
+import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import Button from 'component/button';
 import Link from 'component/link';
 import FileList from 'component/fileList';
@@ -53,7 +53,7 @@ class ChannelPage extends React.PureComponent {
     if (fetching) {
       contentList = (
         <View style={channelPageStyle.busyContainer}>
-          <ActivityIndicator size="large" color={Colors.LbryGreen} />
+          <ActivityIndicator size="large" color={Colors.NextLbryGreen} />
           <Text style={channelPageStyle.infoText}>Fetching content...</Text>
         </View>
       );
@@ -123,21 +123,21 @@ class ChannelPage extends React.PureComponent {
       );
     }
 
-    const { cover, description, thumbnail, email, website_url, title } = claim.value;
+    const { cover, description, thumbnail, email, website_url: websiteUrl, title } = claim.value;
     return (
       <View style={channelPageStyle.aboutTab}>
-        {!website_url && !email && !description && (
+        {!websiteUrl && !email && !description && (
           <View style={channelPageStyle.busyContainer}>
             <Text style={channelPageStyle.infoText}>Nothing here yet. Please check back later.</Text>
           </View>
         )}
 
-        {(website_url || email || description) && (
+        {(websiteUrl || email || description) && (
           <ScrollView style={channelPageStyle.aboutScroll} contentContainerStyle={channelPageStyle.aboutScrollContent}>
-            {website_url && website_url.trim().length > 0 && (
+            {websiteUrl && websiteUrl.trim().length > 0 && (
               <View style={channelPageStyle.aboutItem}>
                 <Text style={channelPageStyle.aboutTitle}>Website</Text>
-                <Link style={channelPageStyle.aboutText} text={website_url} href={website_url} />
+                <Link style={channelPageStyle.aboutText} text={websiteUrl} href={websiteUrl} />
               </View>
             )}
 

src/page/discover/view.js

@@ -217,7 +217,7 @@ class DiscoverPage extends React.PureComponent {
 
     // each of the followed tags
     const tagCollection = _.shuffle(tags)
-      .slice(0, 4)
+      .slice(0, 6)
       .map(tag => [tag]);
     // everything
     tagCollection.unshift(tags);

src/page/downloads/view.js

@@ -3,7 +3,7 @@ import { Lbry, buildURI } from 'lbry-redux';
 import { ActivityIndicator, Button, FlatList, Text, TextInput, View, ScrollView } from 'react-native';
 import { navigateToUri, uriFromFileInfo } from 'utils/helper';
 import Colors from 'styles/colors';
-import Constants from 'constants';
+import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import PageHeader from 'component/pageHeader';
 import FileListItem from 'component/fileListItem';
 import FloatingWalletBalance from 'component/floatingWalletBalance';
@@ -65,7 +65,7 @@ class DownloadsPage extends React.PureComponent {
         )}
         {fetching && !hasDownloads && (
           <View style={downloadsStyle.busyContainer}>
-            <ActivityIndicator size="large" color={Colors.LbryGreen} style={downloadsStyle.loading} />
+            <ActivityIndicator size="large" color={Colors.NextLbryGreen} style={downloadsStyle.loading} />
           </View>
         )}
         {hasDownloads && (

src/page/file/view.js

@@ -567,7 +567,7 @@ class FilePage extends React.PureComponent {
         <View style={filePageStyle.container}>
           {isResolvingUri && (
             <View style={filePageStyle.busyContainer}>
-              <ActivityIndicator size="large" color={Colors.LbryGreen} />
+              <ActivityIndicator size="large" color={Colors.NextLbryGreen} />
               <Text style={filePageStyle.infoText}>Loading decentralized data...</Text>
             </View>
           )}
@@ -724,7 +724,7 @@ class FilePage extends React.PureComponent {
                   <FileItemMedia style={filePageStyle.thumbnail} title={title} thumbnail={thumbnail} />
                 )}
                 {(!this.state.downloadButtonShown || this.state.downloadPressed) && !this.state.mediaLoaded && (
-                  <ActivityIndicator size="large" color={Colors.LbryGreen} style={filePageStyle.loading} />
+                  <ActivityIndicator size="large" color={Colors.NextLbryGreen} style={filePageStyle.loading} />
                 )}
                 {((isPlayable && !completed && !canLoadMedia) ||
                   canOpen ||

src/page/publish/view.js

@@ -550,7 +550,7 @@ class PublishPage extends React.PureComponent {
           </View>
           {(!videos || !thumbnailPath || !galleryThumbnailsChecked) && (
             <View style={publishStyle.loadingView}>
-              <ActivityIndicator size="large" color={Colors.LbryGreen} />
+              <ActivityIndicator size="large" color={Colors.NextLbryGreen} />
             </View>
           )}
           {thumbnailPath && (!videos || videos.length === 0) && (

src/page/rewards/view.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Lbry } from 'lbry-redux';
 import { ActivityIndicator, NativeModules, ScrollView, Text, View } from 'react-native';
 import Colors from 'styles/colors';
-import Constants from 'constants';
+import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import Link from 'component/link';
 import CustomRewardCard from 'component/customRewardCard';
 import PageHeader from 'component/pageHeader';
@@ -87,7 +87,7 @@ class RewardsPage extends React.PureComponent {
       // claim new_user and new_mobile rewards
       for (let i = 0; i < rewards.length; i++) {
         const { reward_type: type } = rewards[i];
-        if ('new_user' === type || 'new_mobile' === type) {
+        if (type === 'new_user' || type === 'new_mobile') {
           claimReward(rewards[i]);
         }
       }
@@ -127,7 +127,7 @@ class RewardsPage extends React.PureComponent {
     if (fetching) {
       return (
         <View style={rewardStyle.busyContainer}>
-          <ActivityIndicator size="large" color={Colors.LbryGreen} />
+          <ActivityIndicator size="large" color={Colors.NextLbryGreen} />
           <Text style={rewardStyle.infoText}>Fetching rewards...</Text>
         </View>
       );

src/page/search/view.js

@@ -3,7 +3,7 @@ import { Lbry, parseURI, normalizeURI, isURIValid } from 'lbry-redux';
 import { ActivityIndicator, Button, Text, TextInput, View, ScrollView } from 'react-native';
 import { navigateToUri } from 'utils/helper';
 import Colors from 'styles/colors';
-import Constants from 'constants';
+import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import PageHeader from 'component/pageHeader';
 import FileListItem from 'component/fileListItem';
 import FloatingWalletBalance from 'component/floatingWalletBalance';
@@ -91,7 +91,7 @@ class SearchPage extends React.PureComponent {
         <UriBar value={query} navigation={navigation} onSearchSubmitted={this.handleSearchSubmitted} />
         {isSearching && (
           <View style={searchStyle.busyContainer}>
-            <ActivityIndicator size="large" color={Colors.LbryGreen} style={searchStyle.loading} />
+            <ActivityIndicator size="large" color={Colors.NextLbryGreen} style={searchStyle.loading} />
           </View>
         )}
 
@@ -105,7 +105,7 @@ class SearchPage extends React.PureComponent {
               <FileListItem
                 key={this.state.currentUri}
                 uri={this.state.currentUri}
-                featuredResult={true}
+                featuredResult
                 style={searchStyle.featuredResultItem}
                 navigation={navigation}
                 onPress={() => navigateToUri(navigation, this.state.currentUri)}

src/page/subscriptions/index.js

@@ -5,8 +5,8 @@ import {
   doFetchRecommendedSubscriptions,
   selectSubscriptionClaims,
   selectSubscriptions,
-  selectSubscriptionsBeingFetched,
   selectIsFetchingSubscriptions,
+  selectIsFetchingSuggested,
   selectSuggestedChannels,
   selectUnreadSubscriptions,
   selectViewMode,
@@ -22,7 +22,8 @@ import SubscriptionsPage from './view';
 
 const select = state => ({
   currentRoute: selectCurrentRoute(state),
-  loading: selectIsFetchingSubscriptions(state) || Boolean(Object.keys(selectSubscriptionsBeingFetched(state)).length),
+  loading: selectIsFetchingSubscriptions(state),
+  loadingSuggested: selectIsFetchingSuggested(state),
   subscribedChannels: selectSubscriptions(state),
   suggestedChannels: selectSuggestedChannels(state),
   subscriptionsViewMode: makeSelectClientSetting(Constants.SETTING_SUBSCRIPTIONS_VIEW_MODE)(state),

src/page/subscriptions/view.js

@@ -118,9 +118,9 @@ class SubscriptionsPage extends React.PureComponent {
       suggestedChannels,
       subscribedChannels,
       allSubscriptions,
-      loading,
       viewMode,
       doSetViewMode,
+      loading,
       loadingSuggested,
       firstRunCompleted,
       doCompleteFirstRun,
@@ -183,7 +183,7 @@ class SubscriptionsPage extends React.PureComponent {
 
         {hasSubscriptions && loading && (
           <View style={subscriptionsStyle.busyContainer}>
-            <ActivityIndicator size="large" color={Colors.LbryGreen} style={subscriptionsStyle.loading} />
+            <ActivityIndicator size="large" color={Colors.NextLbryGreen} style={subscriptionsStyle.loading} />
           </View>
         )}
 
@@ -208,12 +208,12 @@ class SubscriptionsPage extends React.PureComponent {
               </View>
             )}
 
-            {loadingSuggested && suggestedChannels.length === 0 && (
+            {loadingSuggested && (
               <View style={subscriptionsStyle.centered}>
-                <ActivityIndicator size="large" colors={Colors.LbryGreen} style={subscriptionsStyle.loading} />
+                <ActivityIndicator size="large" colors={Colors.NextLbryGreen} style={subscriptionsStyle.loading} />
               </View>
             )}
-            {suggestedChannels && suggestedChannels.length > 0 && <SuggestedSubscriptions navigation={navigation} />}
+            {!loadingSuggested && <SuggestedSubscriptions navigation={navigation} />}
           </View>
         )}
 

src/page/trending/view.js

@@ -95,6 +95,7 @@ class TrendingPage extends React.PureComponent {
           orderBy={Constants.DEFAULT_ORDER_BY}
           trendingForAll={TRENDING_FOR_ITEMS[0].name === currentTrendingForItem.name}
           tags={followedTags.map(tag => tag.name)}
+          time={null}
           navigation={navigation}
           orientation={Constants.ORIENTATION_VERTICAL}
         />

src/redux/actions/settings.js

@@ -1,11 +1,17 @@
 import { ACTIONS } from 'lbry-redux';
 
 export function doSetClientSetting(key, value) {
-  return {
+  return dispatch => {
+    dispatch({
       type: ACTIONS.CLIENT_SETTING_CHANGED,
       data: {
         key,
         value,
       },
+    });
+
+    if (window.persistor) {
+      window.persistor.flush();
+    }
   };
 }