LBRYCommunity/lbry-react-native
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity

redux-persist v5. style tweaks.

Browse source
This commit is contained in:
Akinwale Ariwodola 2019-08-09 07:17:44 +01:00
parent 9d7d2c821f
commit 836ff2ae13
20 changed files with 1241 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1144
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

8
package.json
View file

@ -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"
}
}

6
src/component/claimList/view.js
View file

@ -199,8 +199,8 @@ class ClaimList extends React.PureComponent {
ListHeaderComponent={ListHeaderComponent}
style={claimListStyle.verticalScrollContainer}
contentContainerStyle={claimListStyle.verticalScrollPadding}
initialNumToRender={8}
maxToRenderPerBatch={24}
initialNumToRender={10}
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}>

2
src/component/customRewardCard/view.js
View file

@ -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>

2
src/component/mediaPlayer/view.js
View file

@ -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>
)}

10
src/component/relatedContent/view.js
View file

@ -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>
);
}

2
src/component/rewardCard/view.js
View file

@ -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>

2
src/component/suggestedSubscriptions/view.js
View file

@ -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>
);
}

65
src/index.js
View file

@ -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 AsyncStorage from '@react-native-community/async-storage';
import { REHYDRATE, PURGE, persistCombineReducers, persistStore } from 'redux-persist';
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 authFilter = createFilter('auth', ['authToken']);
/* const contentFilter = createFilter('content', ['positions']);
const saveClaimsFilter = createFilter('claims', ['byId', 'claimsByUri']);
const subscriptionsFilter = createFilter('subscriptions', ['enabledChannelNotifications', 'subscriptions']);
const settingsFilter = createFilter('settings', ['clientSettings']);
const tagsFilter = createFilter('tags', ['followedTags']);
const walletFilter = createFilter('wallet', ['receiveAddress']); */
const persistor = persistStore(store, persistOptions, err => {
if (err) {
console.log('Unable to load saved SETTINGS');
}
});
window.persistor = persistor;
const whitelist = ['auth', 'claims', 'content', 'subscriptions', 'settings', 'tags', 'wallet'];
/* store.subscribe(() => {
const state = store.getState();
const filteredState = Object.keys(state).filter(key => whitelist.includes(key)).reduce((o, k) => { o[k] = state[k]; return o; }, {});
NativeModules.StatePersistor.update(filteredState);
/*
const persistFilter = {
'auth': ['authToken'],
'claims': ['byId', 'claimsByUri'],
'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

14
src/page/channel/view.js
View file

@ -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>
)}

2
src/page/discover/view.js
View file

@ -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);

4
src/page/downloads/view.js
View file

@ -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 && (

4
src/page/file/view.js
View file

@ -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 ||

2
src/page/publish/view.js
View file

@ -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) && (

6
src/page/rewards/view.js
View file

@ -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>
);

6
src/page/search/view.js
View file

@ -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)}

5
src/page/subscriptions/index.js
View file

@ -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),

10
src/page/subscriptions/view.js
View file

@ -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>
)}

1
src/page/trending/view.js
View file

@ -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}
/>

8
src/redux/actions/settings.js
View file

@ -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();
}
};
}