Merge pull request #303 from esteemapp/enhancment/notification

Enhancment/notification
This commit is contained in:
uğur erdal 2018-12-25 11:22:04 +03:00 committed by GitHub
commit 4398e48dfd
7 changed files with 136 additions and 151 deletions

View File

@ -10,7 +10,7 @@ export default EStyleSheet.create({
},
hasTopBorder: {
borderTopColor: '$borderTopColor',
borderTopWidth: 1,
borderTopWidth: 0.5,
},
title: {
fontFamily: '$primaryFont',

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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