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

Added notification line click feature

Browse Source
This commit is contained in:
Emre YILMAZ 2018-11-29 01:02:18 +03:00
parent e742ef3d55
commit a9c5de4ac4
4 changed files with 106 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,7 +48,7 @@ class NotificationView extends Component {
};
render() {
const { notifications, intl } = this.props;
const { notifications, intl, navigateToNotificationRoute } = this.props;
const { filters } = this.state;
const today = [];
const yesterday = [];
@ -91,7 +91,12 @@ class NotificationView extends Component {
/>
<FlatList
data={today}
renderItem={({ item }) => <NotificationLine notification={item} />}
renderItem={({ item }) => (
<NotificationLine
notification={item}
handleOnPressNotification={navigateToNotificationRoute}
/>
)}
keyExtractor={item => item.id}
/>
</Fragment>
@ -107,7 +112,12 @@ class NotificationView extends Component {
/>
<FlatList
data={yesterday}
renderItem={({ item }) => <NotificationLine notification={item} />}
renderItem={({ item }) => (
<NotificationLine
notification={item}
handleOnPressNotification={navigateToNotificationRoute}
/>
)}
keyExtractor={item => item.id}
/>
</Fragment>
@ -123,7 +133,12 @@ class NotificationView extends Component {
/>
<FlatList
data={thisWeek}
renderItem={({ item }) => <NotificationLine notification={item} />}
renderItem={({ item }) => (
<NotificationLine
notification={item}
handleOnPressNotification={navigateToNotificationRoute}
/>
)}
keyExtractor={item => item.id}
/>
</Fragment>
@ -139,7 +154,12 @@ class NotificationView extends Component {
/>
<FlatList
data={thisMonth}
renderItem={({ item }) => <NotificationLine notification={item} />}
renderItem={({ item }) => (
<NotificationLine
notification={item}
handleOnPressNotification={navigateToNotificationRoute}
/>
)}
keyExtractor={item => item.id}
/>
</Fragment>
@ -155,7 +175,12 @@ class NotificationView extends Component {
/>
<FlatList
data={olderThenMonth}
renderItem={({ item }) => <NotificationLine notification={item} />}
renderItem={({ item }) => (
<NotificationLine
notification={item}
handleOnPressNotification={navigateToNotificationRoute}
/>
)}
keyExtractor={item => item.id}
/>
</Fragment>

73
src/components/notificationLine/view/notificationLineView.js
View File

@ -1,5 +1,7 @@
import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
import {
View, Text, Image, TouchableHighlight,
} from 'react-native';
import { injectIntl } from 'react-intl';
// Constants
@ -29,45 +31,48 @@ class NotificationLineView extends Component {
const {
notification,
intl: { formatMessage },
handleOnPressNotification,
} = this.props;
return (
<View
key={Math.random()}
style={[styles.notificationWrapper, !notification.read && styles.isNewNotification]}
>
<Image
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}>
<Text style={styles.name}>
{notification.source}
{' '}
</Text>
<Text style={styles.title}>
{formatMessage({
id: `notification.${notification.type}`,
})}
</Text>
<TouchableHighlight onPress={() => handleOnPressNotification(notification)}>
<View
key={Math.random()}
style={[styles.notificationWrapper, !notification.read && styles.isNewNotification]}
>
<Image
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}>
<Text style={styles.name}>
{notification.source}
{' '}
</Text>
<Text style={styles.title}>
{formatMessage({
id: `notification.${notification.type}`,
})}
</Text>
</View>
{notification.description && (
<Text numberOfLines={1} style={styles.description}>
{notification.description}
</Text>
)}
</View>
{notification.description && (
<Text numberOfLines={1} style={styles.description}>
{notification.description}
</Text>
{notification.image && (
<Image
style={styles.image}
source={{ uri: notification.image }}
defaultSource={require('../../../assets/no_image.png')}
/>
)}
</View>
{notification.image && (
<Image
style={styles.image}
source={{ uri: notification.image }}
defaultSource={require('../../../assets/no_image.png')}
/>
)}
</View>
</TouchableHighlight>
);
}
}

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

@ -4,6 +4,9 @@ import { connect } from 'react-redux';
// Actions and Services
import { getActivities } from '../../../providers/esteem/esteem';
// Constants
import ROUTES from '../../../constants/routeNames';
// Components
import { NotificationScreen } from '../index';
@ -27,6 +30,30 @@ class NotificationContainer extends Component {
});
};
_navigateToNotificationRoute = (data) => {
const { navigation } = this.props;
if (data.permlink) {
navigation.navigate({
routeName: ROUTES.SCREENS.POST,
params: {
author: data.author,
permlink: data.permlink,
},
key: data.permlink,
});
} else {
navigation.navigate({
routeName: ROUTES.SCREENS.PROFILE,
params: {
username: data.follower,
},
key: data.follower,
});
}
};
render() {
const { notifications } = this.state;
@ -34,6 +61,7 @@ class NotificationContainer extends Component {
<NotificationScreen
getActivities={this._getAvtivities}
notifications={notifications}
navigateToNotificationRoute={this._navigateToNotificationRoute}
{...this.props}
/>
);

10
src/screens/notification/screen/notificationScreen.js
View File

@ -22,7 +22,9 @@ class NotificationScreen extends PureComponent {
}
render() {
const { notifications, getActivities, intl } = this.props;
const {
notifications, getActivities, intl, navigateToNotificationRoute,
} = this.props;
return (
<View style={globalStyles.container}>
<Header />
@ -38,7 +40,11 @@ class NotificationScreen extends PureComponent {
})}
style={styles.notificationTab}
>
<Notification getActivities={getActivities} notifications={notifications} />
<Notification
getActivities={getActivities}
notifications={notifications}
navigateToNotificationRoute={navigateToNotificationRoute}
/>
</View>
<View
tabLabel={intl.formatMessage({