mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-11-24 08:55:14 +03:00
Merge pull request #303 from esteemapp/enhancment/notification
Enhancment/notification
This commit is contained in:
commit
4398e48dfd
@ -10,7 +10,7 @@ export default EStyleSheet.create({
|
||||
},
|
||||
hasTopBorder: {
|
||||
borderTopColor: '$borderTopColor',
|
||||
borderTopWidth: 1,
|
||||
borderTopWidth: 0.5,
|
||||
},
|
||||
title: {
|
||||
fontFamily: '$primaryFont',
|
||||
|
@ -19,12 +19,13 @@ import styles from './notificationStyles';
|
||||
|
||||
class NotificationView extends PureComponent {
|
||||
/* Props
|
||||
* ------------------------------------------------
|
||||
* @prop { type } name - Description....
|
||||
*/
|
||||
* ------------------------------------------------
|
||||
* @prop { type } name - Description....
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
// TODO: Remove filters from local state.
|
||||
filters: [
|
||||
{ key: 'activities', value: 'ALL ACTIVITIES' },
|
||||
{ key: 'votes', value: 'VOTES' },
|
||||
@ -47,31 +48,96 @@ class NotificationView extends PureComponent {
|
||||
getActivities(filters[index].key);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
notifications, intl, navigateToNotificationRoute, readAllNotification,
|
||||
} = this.props;
|
||||
const { filters } = this.state;
|
||||
const today = [];
|
||||
const yesterday = [];
|
||||
const thisWeek = [];
|
||||
const thisMonth = [];
|
||||
const olderThenMonth = [];
|
||||
_renderList = (data) => {
|
||||
const { navigateToNotificationRoute } = this.props;
|
||||
|
||||
notifications.map((item) => {
|
||||
if (isToday(item.timestamp)) {
|
||||
today.push(item);
|
||||
} else if (isYesterday(item.timestamp)) {
|
||||
yesterday.push(item);
|
||||
} else if (isThisWeek(item.timestamp)) {
|
||||
thisWeek.push(item);
|
||||
} else if (isThisMonth(item.timestamp)) {
|
||||
thisMonth.push(item);
|
||||
} else {
|
||||
olderThenMonth.push(item);
|
||||
}
|
||||
return (
|
||||
<FlatList
|
||||
data={data}
|
||||
renderItem={({ item }) => (
|
||||
<NotificationLine
|
||||
notification={item}
|
||||
handleOnPressNotification={navigateToNotificationRoute}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={item => item.id}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
_getNotificationsArrays = () => {
|
||||
const { notifications, intl } = this.props;
|
||||
|
||||
if (!notifications && notifications.length < 1) return null;
|
||||
|
||||
const notificationArray = [
|
||||
{
|
||||
title: intl.formatMessage({
|
||||
id: 'notification.recent',
|
||||
}),
|
||||
notifications: [],
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({
|
||||
id: 'notification.yesterday',
|
||||
}),
|
||||
notifications: [],
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({
|
||||
id: 'notification.this_week',
|
||||
}),
|
||||
notifications: [],
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({
|
||||
id: 'notification.this_month',
|
||||
}),
|
||||
notifications: [],
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({
|
||||
id: 'notification.older_then',
|
||||
}),
|
||||
notifications: [],
|
||||
},
|
||||
];
|
||||
|
||||
notifications.forEach((item) => {
|
||||
const listIndex = this._getTimeListIndex(item.timestamp);
|
||||
|
||||
notificationArray[listIndex].notifications.push(item);
|
||||
});
|
||||
|
||||
return notificationArray;
|
||||
};
|
||||
|
||||
_getTimeListIndex = (timestamp) => {
|
||||
if (isToday(timestamp)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (isYesterday(timestamp)) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (isThisWeek(timestamp)) {
|
||||
return 2;
|
||||
}
|
||||
|
||||
if (isThisMonth(timestamp)) {
|
||||
return 3;
|
||||
}
|
||||
|
||||
return 4;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { readAllNotification } = this.props;
|
||||
const { filters } = this.state;
|
||||
|
||||
const _notifications = this._getNotificationsArrays();
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<FilterBar
|
||||
@ -83,111 +149,15 @@ class NotificationView extends PureComponent {
|
||||
onRightIconPress={readAllNotification}
|
||||
/>
|
||||
<ScrollView style={styles.scrollView}>
|
||||
{today.length > 0 && (
|
||||
<Fragment>
|
||||
<ContainerHeader
|
||||
hasSeperator
|
||||
isBoldTitle
|
||||
title={intl.formatMessage({
|
||||
id: 'notification.recent',
|
||||
})}
|
||||
/>
|
||||
<FlatList
|
||||
data={today}
|
||||
renderItem={({ item }) => (
|
||||
<NotificationLine
|
||||
notification={item}
|
||||
handleOnPressNotification={navigateToNotificationRoute}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={item => item.id}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
{yesterday.length > 0 && (
|
||||
<Fragment>
|
||||
<ContainerHeader
|
||||
hasSeperator
|
||||
isBoldTitle
|
||||
title={intl.formatMessage({
|
||||
id: 'notification.yesterday',
|
||||
})}
|
||||
/>
|
||||
<FlatList
|
||||
data={yesterday}
|
||||
renderItem={({ item }) => (
|
||||
<NotificationLine
|
||||
notification={item}
|
||||
handleOnPressNotification={navigateToNotificationRoute}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={item => item.id}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
{thisWeek.length > 0 && (
|
||||
<Fragment>
|
||||
<ContainerHeader
|
||||
hasSeperator
|
||||
isBoldTitle
|
||||
title={intl.formatMessage({
|
||||
id: 'notification.this_week',
|
||||
})}
|
||||
/>
|
||||
<FlatList
|
||||
data={thisWeek}
|
||||
renderItem={({ item }) => (
|
||||
<NotificationLine
|
||||
notification={item}
|
||||
handleOnPressNotification={navigateToNotificationRoute}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={item => item.id}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
{thisMonth.length > 0 && (
|
||||
<Fragment>
|
||||
<ContainerHeader
|
||||
hasSeperator
|
||||
isBoldTitle
|
||||
title={intl.formatMessage({
|
||||
id: 'notification.this_month',
|
||||
})}
|
||||
/>
|
||||
<FlatList
|
||||
data={thisMonth}
|
||||
renderItem={({ item }) => (
|
||||
<NotificationLine
|
||||
notification={item}
|
||||
handleOnPressNotification={navigateToNotificationRoute}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={item => item.id}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
{olderThenMonth.length > 0 && (
|
||||
<Fragment>
|
||||
<ContainerHeader
|
||||
hasSeperator
|
||||
isBoldTitle
|
||||
title={intl.formatMessage({
|
||||
id: 'notification.older_then',
|
||||
})}
|
||||
/>
|
||||
<FlatList
|
||||
data={olderThenMonth}
|
||||
renderItem={({ item }) => (
|
||||
<NotificationLine
|
||||
notification={item}
|
||||
handleOnPressNotification={navigateToNotificationRoute}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={item => item.id}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
{_notifications
|
||||
&& _notifications.map(
|
||||
item => item.notifications.length > 0 && (
|
||||
<Fragment key={item.title}>
|
||||
<ContainerHeader hasSeperator={ _notifications.indexOf(item) !== 1 } isBoldTitle title={item.title} key={item.title} />
|
||||
{this._renderList(item.notifications)}
|
||||
</Fragment>
|
||||
),
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
|
@ -3,13 +3,12 @@ import {
|
||||
View, Text, Image, TouchableHighlight,
|
||||
} from 'react-native';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import FastImage from 'react-native-fast-image';
|
||||
// Constants
|
||||
|
||||
// Components
|
||||
import { UserAvatar } from '../../userAvatar';
|
||||
|
||||
// Styles
|
||||
// eslint-disable-next-line
|
||||
import styles from './notificationLineStyles';
|
||||
|
||||
class NotificationLineView extends PureComponent {
|
||||
@ -20,31 +19,49 @@ class NotificationLineView extends PureComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
this.state = {
|
||||
isRead: props.notification.read,
|
||||
};
|
||||
}
|
||||
|
||||
// Component Life Cycles
|
||||
|
||||
// Component Functions
|
||||
_handleOnNotificationPress = () => {
|
||||
const { handleOnPressNotification, notification } = this.props;
|
||||
const { isRead } = this.state;
|
||||
|
||||
if (!isRead) this.setState({ isRead: true });
|
||||
|
||||
handleOnPressNotification(notification);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
notification,
|
||||
intl: { formatMessage },
|
||||
handleOnPressNotification,
|
||||
} = this.props;
|
||||
const { isRead } = this.state;
|
||||
|
||||
let _title = formatMessage({
|
||||
id: `notification.${notification.type}`,
|
||||
});
|
||||
|
||||
if (notification.weight) {
|
||||
const _percent = `${(notification.weight / 100).toFixed(0)}% `;
|
||||
|
||||
_title = _percent + _title;
|
||||
}
|
||||
|
||||
return (
|
||||
<TouchableHighlight onPress={() => handleOnPressNotification(notification)}>
|
||||
<TouchableHighlight onPress={() => this._handleOnNotificationPress()}>
|
||||
<View
|
||||
key={Math.random()}
|
||||
style={[styles.notificationWrapper, !notification.read && styles.isNewNotification]}
|
||||
style={[styles.notificationWrapper, !isRead && styles.isNewNotification]}
|
||||
>
|
||||
<FastImage
|
||||
<UserAvatar
|
||||
username={notification.source}
|
||||
style={[styles.avatar, !notification.avatar && styles.hasNoAvatar]}
|
||||
source={{
|
||||
uri: `https://steemitimages.com/u/${notification.source}/avatar/small`,
|
||||
}}
|
||||
/>
|
||||
<View style={styles.body}>
|
||||
<View style={styles.titleWrapper}>
|
||||
@ -52,11 +69,7 @@ class NotificationLineView extends PureComponent {
|
||||
{notification.source}
|
||||
{' '}
|
||||
</Text>
|
||||
<Text style={styles.title}>
|
||||
{formatMessage({
|
||||
id: `notification.${notification.type}`,
|
||||
})}
|
||||
</Text>
|
||||
<Text style={styles.title}>{_title}</Text>
|
||||
</View>
|
||||
{notification.description && (
|
||||
<Text numberOfLines={1} style={styles.description}>
|
||||
|
@ -10,7 +10,7 @@
|
||||
"fill_order": "Fill Order"
|
||||
},
|
||||
"notification": {
|
||||
"vote": "voted to your post",
|
||||
"vote": "likes your post",
|
||||
"unvote": "unvoted your post",
|
||||
"reply": "replied to your post",
|
||||
"mention": "mentioned you",
|
||||
|
@ -10,8 +10,8 @@
|
||||
"fill_order": "Fill Order"
|
||||
},
|
||||
"notification": {
|
||||
"vote": "gönderini oyladı",
|
||||
"unvote": "gonderini yukarı yönde oyladı",
|
||||
"vote": "beğendi",
|
||||
"unvote": "gonderini aşaği yönde oyladı",
|
||||
"reply": "gönderine cevap verdi",
|
||||
"mention": "seni etiketledi",
|
||||
"follow": "seni takip etti",
|
||||
|
@ -246,7 +246,9 @@ export const getPosts = async (by, query, user) => {
|
||||
try {
|
||||
let posts = await client.database.getDiscussions(by, query);
|
||||
|
||||
posts = await parsePosts(posts, user);
|
||||
if (posts) {
|
||||
posts = await parsePosts(posts, user);
|
||||
}
|
||||
return posts;
|
||||
} catch (error) {
|
||||
return error;
|
||||
|
@ -22,7 +22,7 @@ export const parsePost = (post, currentUserName, isSummary = false) => {
|
||||
_post.active_votes.sort((a, b) => b.rshares - a.rshares);
|
||||
|
||||
_post.body = markDown2Html(post.body);
|
||||
if (isSummary) _post.summary = getPostSummary(post.body, 150);
|
||||
_post.summary = getPostSummary(post.body, 150);
|
||||
|
||||
if (currentUserName) {
|
||||
_post.is_voted = isVoted(_post.active_votes, currentUserName);
|
||||
|
Loading…
Reference in New Issue
Block a user