mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-22 12:51:42 +03:00
created custom filter enhanced posts
This commit is contained in:
parent
88749046a8
commit
6118934b39
src
components
filterBar/view
posts
profile
constants/options
screens/feed/screen
@ -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: {
|
||||||
|
@ -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()}
|
||||||
|
@ -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>
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
@ -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"
|
||||||
|
@ -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',
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user