created custom filter enhanced posts

This commit is contained in:
ue 2019-11-07 22:25:49 +03:00
parent 88749046a8
commit 6118934b39
7 changed files with 67 additions and 24 deletions
src
components
constants/options
screens/feed/screen

View File

@ -12,8 +12,14 @@ export default EStyleSheet.create({
}, },
zIndex: 99, zIndex: 99,
}, },
dropdownWrapper: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
filterBarWrapper: { filterBarWrapper: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
}, },
rightIconWrapper: { rightIconWrapper: {

View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import { View, TouchableOpacity } from 'react-native'; import { View, Text, TouchableOpacity } from 'react-native';
import { Icon } from '../../icon'; import { Icon } from '../../icon';
// External Components // External Components
import { DropdownButton } from '../../dropdownButton'; import { DropdownButton } from '../../dropdownButton';
// Components // Components
import { LineBreak } from '../../basicUIElements'; import { LineBreak, Tag } from '../../basicUIElements';
// Styles // Styles
import styles from './filterBarStyles'; import styles from './filterBarStyles';
@ -27,11 +27,13 @@ const FilterBarView = ({
rightIconName, rightIconName,
rightIconType, rightIconType,
selectedOptionIndex, selectedOptionIndex,
customOption,
}) => ( }) => (
<View style={styles.container}> <View style={styles.container}>
{!isHide && ( {!isHide && (
<LineBreak height={38}> <LineBreak height={38}>
<View style={styles.filterBarWrapper}> <View style={styles.filterBarWrapper}>
<View style={styles.dropdownWrapper}>
<DropdownButton <DropdownButton
iconName={dropdownIconName} iconName={dropdownIconName}
options={options} options={options}
@ -39,6 +41,9 @@ const FilterBarView = ({
onSelect={onDropdownSelect} onSelect={onDropdownSelect}
selectedOptionIndex={selectedOptionIndex} selectedOptionIndex={selectedOptionIndex}
/> />
{customOption && <Tag value={customOption} isPin onPress={() => onDropdownSelect(3)} />}
</View>
{rightIconName && ( {rightIconName && (
<TouchableOpacity <TouchableOpacity
onPress={() => onRightIconPress && onRightIconPress()} onPress={() => onRightIconPress && onRightIconPress()}

View File

@ -24,6 +24,8 @@ const PostsContainer = ({
selectedOptionIndex, selectedOptionIndex,
tag, tag,
nsfw, nsfw,
filterOptionsValue,
customOption,
}) => { }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -57,6 +59,8 @@ const PostsContainer = ({
selectedOptionIndex={selectedOptionIndex} selectedOptionIndex={selectedOptionIndex}
setFeedPosts={_setFeedPosts} setFeedPosts={_setFeedPosts}
tag={tag} tag={tag}
filterOptionsValue={filterOptionsValue}
customOption={customOption}
/> />
)} )}
</AccountContainer> </AccountContainer>

View File

@ -38,6 +38,8 @@ const PostsView = ({
navigation, navigation,
changeForceLoadPostState, changeForceLoadPostState,
forceLoadPost, forceLoadPost,
filterOptionsValue,
customOption,
}) => { }) => {
const [posts, setPosts] = useState(isConnected ? [] : feedPosts); const [posts, setPosts] = useState(isConnected ? [] : feedPosts);
const [startAuthor, setStartAuthor] = useState(''); const [startAuthor, setStartAuthor] = useState('');
@ -100,9 +102,16 @@ const PostsView = ({
useEffect(() => { useEffect(() => {
if (!startAuthor && !startPermlink) { if (!startAuthor && !startPermlink) {
_loadPosts(filterOptions[selectedFilterIndex].toLowerCase()); _loadPosts(filterOptionsValue[selectedFilterIndex]);
} }
}, [_loadPosts, filterOptions, selectedFilterIndex, startAuthor, startPermlink]); }, [
_loadPosts,
filterOptions,
filterOptionsValue,
selectedFilterIndex,
startAuthor,
startPermlink,
]);
const _handleOnDropdownSelect = async index => { const _handleOnDropdownSelect = async index => {
setSelectedFilterIndex(index); setSelectedFilterIndex(index);
@ -135,11 +144,15 @@ const PostsView = ({
const _loadPosts = useCallback( const _loadPosts = useCallback(
async type => { async type => {
if (isLoading) {
return;
} else {
setIsLoading(true);
}
const filter = const filter =
type || type ||
(filterOptions && (filterOptions && filterOptions.length > 0 && filterOptionsValue[selectedFilterIndex]);
filterOptions.length > 0 &&
filterOptions[selectedFilterIndex].toLowerCase());
let options; let options;
const limit = 3; const limit = 3;
@ -149,11 +162,6 @@ const PostsView = ({
return null; return null;
} }
// if (isLoading) {
// return null;
// }
setIsLoading(true);
if (filter === 'feed' || filter === 'blog' || getFor === 'blog' || filter === 'reblogs') { if (filter === 'feed' || filter === 'blog' || getFor === 'blog' || filter === 'reblogs') {
options = { options = {
tag, tag,
@ -243,8 +251,10 @@ const PostsView = ({
[ [
currentAccountUsername, currentAccountUsername,
filterOptions, filterOptions,
filterOptionsValue,
getFor, getFor,
isConnected, isConnected,
isLoading,
nsfw, nsfw,
posts, posts,
promotedPosts, promotedPosts,
@ -342,6 +352,7 @@ const PostsView = ({
rightIconType="MaterialIcons" rightIconType="MaterialIcons"
onDropdownSelect={_handleOnDropdownSelect} onDropdownSelect={_handleOnDropdownSelect}
onRightIconPress={handleImagesHide} onRightIconPress={handleImagesHide}
customOption={customOption}
/> />
)} )}

View File

@ -15,7 +15,7 @@ import { TabBar } from '../tabBar';
import { Wallet } from '../wallet'; import { Wallet } from '../wallet';
// Constants // Constants
import { PROFILE_FILTERS } from '../../constants/options/filters'; import { PROFILE_FILTERS, PROFILE_FILTERS_VALUE } from '../../constants/options/filters';
// Utils // Utils
import { getFormatedCreatedDate } from '../../utils/time'; import { getFormatedCreatedDate } from '../../utils/time';
@ -38,13 +38,17 @@ class ProfileView extends PureComponent {
_handleOnScroll = () => { _handleOnScroll = () => {
const { isSummaryOpen } = this.state; const { isSummaryOpen } = this.state;
if (isSummaryOpen) this.setState({ isSummaryOpen: false }); if (isSummaryOpen) {
this.setState({ isSummaryOpen: false });
}
}; };
_handleOnSummaryExpanded = () => { _handleOnSummaryExpanded = () => {
const { isSummaryOpen } = this.state; const { isSummaryOpen } = this.state;
if (!isSummaryOpen) this.setState({ isSummaryOpen: true }); if (!isSummaryOpen) {
this.setState({ isSummaryOpen: true });
}
}; };
_handleUIChange = height => { _handleUIChange = height => {
@ -156,7 +160,9 @@ class ProfileView extends PureComponent {
estimatedWalletValue: 0, estimatedWalletValue: 0,
oldEstimatedWalletValue: estimatedWalletValue, oldEstimatedWalletValue: estimatedWalletValue,
}); });
} else this.setState({ estimatedWalletValue: oldEstimatedWalletValue }); } else {
this.setState({ estimatedWalletValue: oldEstimatedWalletValue });
}
}} }}
> >
<View <View
@ -167,6 +173,7 @@ class ProfileView extends PureComponent {
> >
<Posts <Posts
filterOptions={PROFILE_FILTERS} filterOptions={PROFILE_FILTERS}
filterOptionsValue={PROFILE_FILTERS_VALUE}
selectedOptionIndex={0} selectedOptionIndex={0}
pageType="profiles" pageType="profiles"
getFor="blog" getFor="blog"

View File

@ -1,5 +1,8 @@
export const POPULAR_FILTERS = ['TRENDING', 'HOT', 'NEW', 'PROMOTED']; export const POPULAR_FILTERS = ['TRENDING', 'HOT', 'NEW', 'PROMOTED'];
export const POPULAR_FILTERS_VALUE = ['trending', 'hot', 'created', 'promoted'];
export const PROFILE_FILTERS = ['BLOG', 'FEED']; export const PROFILE_FILTERS = ['BLOG', 'FEED'];
export const PROFILE_FILTERS_VALUE = ['blog', 'feed'];
// 'TRENDING', // 'TRENDING',
// 'HOT', // 'HOT',

View File

@ -11,7 +11,12 @@ import { AccountContainer } from '../../../containers';
// Styles // Styles
import styles from './feedStyles'; import styles from './feedStyles';
import { POPULAR_FILTERS, PROFILE_FILTERS } from '../../../constants/options/filters'; import {
POPULAR_FILTERS,
PROFILE_FILTERS,
PROFILE_FILTERS_VALUE,
POPULAR_FILTERS_VALUE,
} from '../../../constants/options/filters';
const FeedScreen = () => { const FeedScreen = () => {
return ( return (
@ -22,9 +27,11 @@ const FeedScreen = () => {
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<Posts <Posts
filterOptions={[...PROFILE_FILTERS, ...POPULAR_FILTERS]} filterOptions={[...PROFILE_FILTERS, ...POPULAR_FILTERS]}
filterOptionsValue={[...PROFILE_FILTERS_VALUE, ...POPULAR_FILTERS_VALUE]}
getFor={isLoggedIn ? 'feed' : 'trending'} getFor={isLoggedIn ? 'feed' : 'trending'}
selectedOptionIndex={isLoggedIn ? 1 : 2} selectedOptionIndex={isLoggedIn ? 1 : 2}
tag={get(currentAccount, 'name')} tag={get(currentAccount, 'name')}
customOption="HOT"
/> />
</SafeAreaView> </SafeAreaView>
</Fragment> </Fragment>