ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-18 19:01:38 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1320 from esteemapp/filterbar

Browse Source 
rewamp filterbar
This commit is contained in:
Feruz M 2019-11-28 11:17:01 +02:00 committed by GitHub
commit 666433f08d
18 changed files with 121 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ios/eSteem.xcworkspace/xcuserdata/f.xcuserdatad/UserInterfaceState.xcuserstate generated
View File

Binary file not shown.

3
src/components/basicUIElements/view/tag/tagContainer.js
View File

@ -39,7 +39,7 @@ class TagContainer extends PureComponent {
};
render() {
const { isPin, value, isPostCardTag } = this.props;
const { isPin, value, isPostCardTag, isFilter } = this.props;
return (
<TagView
@ -47,6 +47,7 @@ class TagContainer extends PureComponent {
value={value}
isPostCardTag={isPostCardTag}
onPress={this._handleOnTagPress}
isFilter={isFilter}
/>
);
}

10
src/components/basicUIElements/view/tag/tagStyles.js
View File

@ -21,4 +21,14 @@ export default EStyleSheet.create({
backgroundColor: '$iconColor',
borderRadius: 50,
},
isFilter: {
backgroundColor: 'transparent'
},
isFilterTextUnPin: {
color: '$primaryDarkBlue',
fontSize: 14,
},
isFilterTextPin: {
fontSize: 14,
},
});

6
src/components/basicUIElements/view/tag/tagView.js
View File

@ -2,12 +2,12 @@ import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import styles from './tagStyles';
const Tag = ({ onPress, isPin, value, isPostCardTag }) => (
const Tag = ({ onPress, isPin, value, isPostCardTag, isFilter }) => (
<TouchableOpacity onPress={() => onPress && onPress(value)}>
<View
style={[styles.textWrapper, isPin && styles.isPin, isPostCardTag && styles.isPostCardTag]}
style={[styles.textWrapper, isFilter && styles.isFilter, isPin && styles.isPin, isPostCardTag && styles.isPostCardTag]}
>
<Text style={[styles.text]}>{value}</Text>
<Text style={[styles.text, !isPin && isFilter && styles.isFilterTextUnPin, isPin && isFilter && styles.isFilterTextPin]}>{value}</Text>
</View>
</TouchableOpacity>
);

12
src/components/comments/container/commentsContainer.js
View File

@ -64,7 +64,7 @@ class CommentsContainer extends Component {
const absNegative = a => a.net_rshares < 0;
const sortOrders = {
TRENDING: (a, b) => {
trending: (a, b) => {
if (absNegative(a)) {
return 1;
}
@ -81,7 +81,7 @@ class CommentsContainer extends Component {
return 0;
},
REPUTATION: (a, b) => {
reputation: (a, b) => {
const keyA = get(a, 'author_reputation');
const keyB = get(b, 'author_reputation');
@ -90,7 +90,7 @@ class CommentsContainer extends Component {
return 0;
},
VOTES: (a, b) => {
votes: (a, b) => {
const keyA = a.net_votes;
const keyB = b.net_votes;
@ -99,7 +99,7 @@ class CommentsContainer extends Component {
return 0;
},
AGE: (a, b) => {
age: (a, b) => {
if (absNegative(a)) {
return 1;
}
@ -138,7 +138,7 @@ class CommentsContainer extends Component {
} else if (author && permlink) {
await getComments(author, permlink, name)
.then(comments => {
if (selectedFilter && selectedFilter !== 'TRENDING') {
if (selectedFilter && selectedFilter !== 'trending') {
const sortComments = this._shortComments(selectedFilter, comments);
this.setState({
comments: sortComments,
@ -149,7 +149,7 @@ class CommentsContainer extends Component {
});
}
})
.catch(() => {});
.catch(() => { });
}
};

21
src/components/commentsDisplay/view/commentsDisplayView.js
View File

@ -5,7 +5,7 @@ import { injectIntl } from 'react-intl';
// Components
import { FilterBar } from '../../filterBar';
import { Comments } from '../../comments';
import COMMENT_FILTER from '../../../constants/options/comment';
import COMMENT_FILTER, { VALUE } from '../../../constants/options/comment';
// Styles
import styles from './commentDisplayStyles';
@ -20,14 +20,15 @@ class CommentsDisplayView extends PureComponent {
super(props);
this.state = {
selectedFilter: null,
selectedOptionIndex: 0,
};
}
// Component Life Cycles
// Component Functions
_handleOnDropdownSelect = (index, option) => {
this.setState({ selectedFilter: option });
_handleOnDropdownSelect = (option, index) => {
this.setState({ selectedFilter: option, selectedOptionIndex: index });
};
render() {
@ -40,21 +41,17 @@ class CommentsDisplayView extends PureComponent {
mainAuthor,
handleOnVotersPress,
} = this.props;
const { selectedFilter } = this.state;
const { selectedFilter, selectedOptionIndex } = this.state;
return (
<Fragment>
{commentCount > 0 && (
<Fragment>
<FilterBar
dropdownIconName="arrow-drop-down"
options={COMMENT_FILTER.map(item =>
intl.formatMessage({ id: `comment_filter.${item}` }).toUpperCase(),
)}
defaultText={intl
.formatMessage({ id: `comment_filter.${COMMENT_FILTER[0]}` })
.toUpperCase()}
onDropdownSelect={this._handleOnDropdownSelect}
options={VALUE.map(val => intl.formatMessage({ id: `comment_filter.${val}` }))}
defaultText={intl.formatMessage({ id: `comment_filter.${VALUE[0]}` })}
onDropdownSelect={selectedIndex => this._handleOnDropdownSelect(COMMENT_FILTER[selectedIndex], selectedIndex)}
selectedOptionIndex={selectedOptionIndex}
/>
<View style={styles.commentWrapper}>
<Comments

7
src/components/filterBar/view/filterBarStyles.js
View File

@ -16,6 +16,7 @@ export default EStyleSheet.create({
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
left: 15
},
filterBarWrapper: {
flexDirection: 'row',
@ -29,9 +30,5 @@ export default EStyleSheet.create({
rightIcon: {
color: '$darkIconColor',
textAlign: 'center',
},
customOptionWrapper: {
left: 120,
position: 'absolute',
},
}
});

59
src/components/filterBar/view/filterBarView.js
View File

@ -27,44 +27,31 @@ const FilterBarView = ({
rightIconName,
rightIconType,
selectedOptionIndex,
customOption,
}) => (
<View style={styles.container}>
{!isHide && (
<LineBreak height={38}>
<View style={styles.filterBarWrapper}>
<View style={styles.dropdownWrapper}>
<DropdownButton
iconName={dropdownIconName}
options={options}
defaultText={defaultText}
onSelect={onDropdownSelect}
selectedOptionIndex={selectedOptionIndex}
/>
<View style={styles.customOptionWrapper}>
{customOption && (
<Tag value={customOption} isPin onPress={() => onDropdownSelect(3)} />
)}
<View style={styles.container}>
{!isHide && (
<LineBreak height={38}>
<View style={styles.filterBarWrapper}>
<View style={styles.dropdownWrapper}>
{options.map((item, index) => <Tag value={item} isFilter isPin={index == selectedOptionIndex} onPress={() => onDropdownSelect(index)} />)}
</View>
{rightIconName && (
<TouchableOpacity
onPress={() => onRightIconPress && onRightIconPress()}
style={styles.rightIconWrapper}
>
<Icon
style={styles.rightIcon}
size={iconSize || 28}
iconType={rightIconType}
name={rightIconName}
/>
</TouchableOpacity>
)}
</View>
{rightIconName && (
<TouchableOpacity
onPress={() => onRightIconPress && onRightIconPress()}
style={styles.rightIconWrapper}
>
<Icon
style={styles.rightIcon}
size={iconSize || 28}
iconType={rightIconType}
name={rightIconName}
/>
</TouchableOpacity>
)}
</View>
</LineBreak>
)}
</View>
);
</LineBreak>
)}
</View>
);
export default FilterBarView;

14
src/components/leaderboard/container/leaderboardContainer.js
View File

@ -25,6 +25,7 @@ class LeaderboardContainer extends PureComponent {
this.state = {
users: null,
refreshing: false,
selectedIndex: 0,
};
}
@ -48,13 +49,19 @@ class LeaderboardContainer extends PureComponent {
});
};
_fetchLeaderBoard = async selectedFilter => {
_fetchLeaderBoard = async (selectedFilter, index) => {
const { intl, isConnected } = this.props;
const { selectedIndex } = this.state;
if (index == undefined) {
index = selectedIndex;
}
let users;
console.log(index);
if (!isConnected) return;
this.setState({ refreshing: true });
this.setState({ refreshing: true, selectedIndex: index });
try {
users = await getLeaderboard(selectedFilter);
@ -69,7 +76,7 @@ class LeaderboardContainer extends PureComponent {
};
render() {
const { users, refreshing } = this.state;
const { users, refreshing, selectedIndex } = this.state;
return (
<LeaderboardView
@ -77,6 +84,7 @@ class LeaderboardContainer extends PureComponent {
refreshing={refreshing}
fetchLeaderBoard={this._fetchLeaderBoard}
handleOnUserPress={this._handleOnUserPress}
selectedIndex={selectedIndex}
/>
);
}

7
src/components/leaderboard/view/leaderboardView.js
View File

@ -39,16 +39,15 @@ class LeaderboardView extends PureComponent {
};
render() {
const { users, intl, fetchLeaderBoard, refreshing } = this.props;
const { users, intl, fetchLeaderBoard, refreshing, selectedIndex } = this.props;
return (
<Fragment>
<FilterBar
dropdownIconName="arrow-drop-down"
options={VALUE.map(val => intl.formatMessage({ id: `leaderboard.${val}` }))}
selectedOptionIndex={0}
selectedOptionIndex={selectedIndex}
defaultText={intl.formatMessage({ id: `leaderboard.${VALUE[0]}` })}
onDropdownSelect={selectedIndex => fetchLeaderBoard(FILTER_OPTIONS[selectedIndex])}
onDropdownSelect={selectedIndex => fetchLeaderBoard(FILTER_OPTIONS[selectedIndex], selectedIndex)}
/>
<View style={styles.container}>

15
src/components/notification/view/notificationView.js
View File

@ -28,15 +28,13 @@ class NotificationView extends PureComponent {
this.state = {
// TODO: Remove filters from local state.
filters: [
{ key: 'activities', value: 'ALL ACTIVITIES' },
{ key: 'votes', value: 'VOTES' },
{ key: 'activities', value: 'ALL' },
{ key: 'replies', value: 'REPLIES' },
{ key: 'mentions', value: 'MENTIONS' },
{ key: 'follows', value: 'FOLLOWS' },
{ key: 'reblogs', value: 'REBLOGS' },
{ key: 'transfers', value: 'TRANSFERS' },
],
selectedFilter: null,
selectedIndex: 0,
};
}
@ -48,8 +46,8 @@ class NotificationView extends PureComponent {
const { getActivities, changeSelectedFilter } = this.props;
const { filters } = this.state;
this.setState({ selectedFilter: filters[index].key });
await changeSelectedFilter(filters[index].key);
this.setState({ selectedFilter: filters[index].key, selectedIndex: index });
await changeSelectedFilter(filters[index].key, index);
getActivities(null, filters[index].key, false);
};
@ -151,7 +149,7 @@ class NotificationView extends PureComponent {
render() {
const { readAllNotification, getActivities, isNotificationRefreshing } = this.props;
const { filters, selectedFilter } = this.state;
const { filters, selectedFilter, selectedIndex } = this.state;
const _notifications = this._getNotificationsArrays();
return (
@ -159,10 +157,11 @@ class NotificationView extends PureComponent {
<FilterBar
dropdownIconName="arrow-drop-down"
options={filters.map(item => item.value)}
defaultText="ALL ACTIVITIES"
defaultText="ALL"
onDropdownSelect={this._handleOnDropdownSelect}
rightIconName="check"
rightIconType="MaterialIcons"
selectedOptionIndex={selectedIndex}
onRightIconPress={readAllNotification}
/>
<ThemeContainer>

2
src/components/posts/container/postsContainer.js
View File

@ -25,7 +25,6 @@ const PostsContainer = ({
tag,
nsfw,
filterOptionsValue,
customOption,
}) => {
const dispatch = useDispatch();
@ -60,7 +59,6 @@ const PostsContainer = ({
setFeedPosts={_setFeedPosts}
tag={tag}
filterOptionsValue={filterOptionsValue}
customOption={customOption}
/>
)}
</AccountContainer>

6
src/components/posts/view/postsView.js
View File

@ -39,7 +39,6 @@ const PostsView = ({
changeForceLoadPostState,
forceLoadPost,
filterOptionsValue,
customOption,
}) => {
const [posts, setPosts] = useState(isConnected ? [] : feedPosts);
const [startAuthor, setStartAuthor] = useState('');
@ -141,7 +140,7 @@ const PostsView = ({
setPromotedPosts(_promotedPosts);
}
})
.catch(() => {});
.catch(() => { });
}, [currentAccountUsername]);
const _loadPosts = useCallback(
@ -351,13 +350,12 @@ const PostsView = ({
<FilterBar
dropdownIconName="arrow-drop-down"
options={filterOptions}
selectedOptionIndex={selectedOptionIndex}
selectedOptionIndex={selectedFilterIndex}
defaultText={filterOptions[selectedOptionIndex]}
rightIconName="view-module"
rightIconType="MaterialIcons"
onDropdownSelect={_handleOnDropdownSelect}
onRightIconPress={handleImagesHide}
customOption={customOption}
/>
)}

64
src/config/locales/en-US.json
View File

@ -8,7 +8,34 @@
"transfer_to_vesting": "Transfer To Vesting",
"transfer_from_savings": "Transfer From Savings",
"withdraw_vesting": "Power Down",
"fill_order": "Fill Order",
"fill_order": "Fill Order"
},
"notification": {
"vote": "likes your post",
"unvote": "unvoted your post",
"reply": "replied to your post",
"mention": "mentioned you",
"follow": "followed you",
"unfollow": "unfollowed you",
"ignore": "ignored you",
"reblog": "reblogged your post",
"transfer": "transferred",
"notification": "Notifications",
"leaderboard": "Leaderboard",
"epoint": "Points",
"leaderboard_title": "Top Users",
"recent": "Recent",
"yesterday": "Yesterday",
"this_week": "This Week",
"this_month": "This Month",
"older_then": "Older Than A Month"
},
"leaderboard": {
"daily": "DAILY",
"weekly": "WEEKLY",
"monthly": "MONTHLY"
},
"points": {
"post": "Post",
"comment": "Comment",
"checkin": "Check-in",
@ -80,31 +107,6 @@
"title": "STEEM POWER"
}
},
"notification": {
"vote": "likes your post",
"unvote": "unvoted your post",
"reply": "replied to your post",
"mention": "mentioned you",
"follow": "followed you",
"unfollow": "unfollowed you",
"ignore": "ignored you",
"reblog": "reblogged your post",
"transfer": "transferred",
"notification": "Notifications",
"leaderboard": "Leaderboard",
"epoint": "Points",
"leaderboard_title": "Top Users",
"recent": "Recent",
"yesterday": "Yesterday",
"this_week": "This Week",
"this_month": "This Month",
"older_then": "Older Than A Month"
},
"leaderboard": {
"daily": "Daily",
"weekly": "Weekly",
"monthly": "Monthly"
},
"messages": {
"comingsoon": "Messages feature is coming soon!"
},
@ -332,10 +334,12 @@
"comments": "Comments"
},
"comment_filter": {
"trending": "trending",
"reputation": "reputation",
"votes": "votes",
"age": "age"
"trending": "TOP",
"reputation": "REPUTATION",
"votes": "VOTE",
"age": "AGE",
"top": "TOP",
"time": "TIME"
},
"transfer": {
"from": "From",

2
src/constants/options/comment.js
View File

@ -1 +1,3 @@
export default ['trending', 'reputation', 'votes', 'age'];
export const VALUE = ['top', 'reputation', 'votes', 'time'];

4
src/constants/options/filters.js
View File

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

5
src/screens/feed/screen/feedScreen.js
View File

@ -26,12 +26,11 @@ const FeedScreen = () => {
<Header />
<SafeAreaView style={styles.container}>
<Posts
filterOptions={[...PROFILE_FILTERS, ...POPULAR_FILTERS]}
filterOptionsValue={[...PROFILE_FILTERS_VALUE, ...POPULAR_FILTERS_VALUE]}
filterOptions={[...POPULAR_FILTERS]}
filterOptionsValue={[...POPULAR_FILTERS_VALUE]}
getFor={isLoggedIn ? 'feed' : 'trending'}
selectedOptionIndex={isLoggedIn ? 1 : 2}
tag={get(currentAccount, 'name')}
customOption="HOT"
/>
</SafeAreaView>
</Fragment>

5
src/screens/notification/container/notificationContainer.js
View File

@ -23,6 +23,7 @@ class NotificationContainer extends Component {
isNotificationRefreshing: false,
selectedFilter: 'activities',
endOfNotification: false,
selectedIndex: 0,
};
}
@ -145,8 +146,8 @@ class NotificationContainer extends Component {
navigation.navigate(ROUTES.SCREENS.LOGIN);
};
_changeSelectedFilter = async value => {
await this.setState({ selectedFilter: value, endOfNotification: false });
_changeSelectedFilter = async (value, ind) => {
await this.setState({ selectedFilter: value, endOfNotification: false, selectedIndex: ind });
};
render() {