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

Working on notification screen

Browse Source
This commit is contained in:
mistikk 2018-11-15 18:03:16 +01:00
parent 0d093720a0
commit c8cd291d63
10 changed files with 357 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/notification/view/notificationStyles.js
View File

@ -4,59 +4,7 @@ export default EStyleSheet.create({
container: {
backgroundColor: '#fff',
},
notificationWrapper: {
flex: 1,
flexDirection: 'row',
width: '$deviceWidth',
justifyContent: 'space-between',
alignItems: 'center',
height: 64,
},
avatar: {
width: 32,
height: 32,
borderRadius: 32 / 2,
marginLeft: 24,
},
image: {
width: 32,
height: 32,
borderRadius: 32 / 4,
marginRight: 24,
},
body: {
flexDirection: 'column',
flexGrow: 1,
fontSize: 12,
marginRight: 28,
marginLeft: 16,
alignSelf: 'center',
width: '$deviceWidth / 1.76',
},
titleWrapper: {
flexDirection: 'row',
},
name: {
fontWeight: 'bold',
},
title: {
color: '$primaryDarkGray',
},
description: {
color: '$primaryBlack',
fontSize: 12,
fontWeight: '500',
},
scrollView: {
height: '$deviceHeight / 1.35',
},
isNewNotification: {
backgroundColor: '$primaryLightBlue',
borderTopWidth: 0.3,
borderBottomWidth: 0.3,
borderColor: '#e7e7e7',
},
hasNoAvatar: {
backgroundColor: '#d8d8d8',
},
});

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

@ -1,12 +1,13 @@
import React, { Component } from 'react';
import {
View, ScrollView, Text, FlatList, Image,
} from 'react-native';
import { ContainerHeader } from '../../containerHeader';
import { View, ScrollView, FlatList } from 'react-native';
// Constants
// Components
import { ContainerHeader } from '../../containerHeader';
import { FilterBar } from '../../filterBar';
import NotificationLine from '../../notificationLine';
// Styles
import styles from './notificationStyles';
@ -63,41 +64,8 @@ class NotificationView extends Component {
console.log(`selected index is:${index}`);
};
_getRenderItem = item => (
<View
key={Math.random()}
style={[styles.notificationWrapper, item.isNew && styles.isNewNotification]}
>
<Image
style={[styles.avatar, !item.avatar && styles.hasNoAvatar]}
source={{
uri: item.avatar,
}}
/>
<View style={styles.body}>
<View style={styles.titleWrapper}>
<Text style={styles.name}>
{item.name}
{' '}
</Text>
<Text style={styles.title}>{item.title}</Text>
</View>
<Text numberOfLines={1} style={styles.description}>
{item.description}
</Text>
</View>
{item.image && (
<Image
style={styles.image}
source={{ uri: item.image }}
defaultSource={require('../../../assets/no_image.png')}
/>
)}
</View>
);
render() {
const { notification } = this.state;
const { notifications } = this.props;
return (
<View style={styles.container}>
@ -111,8 +79,8 @@ class NotificationView extends Component {
<ScrollView style={styles.scrollView}>
<ContainerHeader hasSeperator isBoldTitle title="Recent" />
<FlatList
data={notification}
renderItem={({ item }) => this._getRenderItem(item)}
data={notifications}
renderItem={({ item }) => <NotificationLine notification={item} />}
keyExtractor={item => item.email}
/>
{/* Will remove follow lines */}

3
src/components/notificationLine/index.js Normal file
View File

@ -0,0 +1,3 @@
import NotificationLineView from './view/notificationLineView';
export default NotificationLineView;

56
src/components/notificationLine/view/notificationLineStyles.js Normal file
View File

@ -0,0 +1,56 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
notificationWrapper: {
flex: 1,
flexDirection: 'row',
width: '$deviceWidth',
justifyContent: 'space-between',
alignItems: 'center',
height: 64,
},
avatar: {
width: 32,
height: 32,
borderRadius: 32 / 2,
marginLeft: 24,
},
image: {
width: 32,
height: 32,
borderRadius: 32 / 4,
marginRight: 24,
},
body: {
flexDirection: 'column',
flexGrow: 1,
fontSize: 12,
marginRight: 28,
marginLeft: 16,
alignSelf: 'center',
width: '$deviceWidth / 1.76',
},
titleWrapper: {
flexDirection: 'row',
},
name: {
fontWeight: 'bold',
},
title: {
color: '$primaryDarkGray',
},
description: {
color: '$primaryBlack',
fontSize: 12,
fontWeight: '500',
},
isNewNotification: {
backgroundColor: '$primaryLightBlue',
borderTopWidth: 0.3,
borderBottomWidth: 0.3,
borderColor: '#e7e7e7',
},
hasNoAvatar: {
backgroundColor: '#d8d8d8',
},
});

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

@ -0,0 +1,73 @@
import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
import { injectIntl } from 'react-intl';
// Constants
// Components
// Styles
// eslint-disable-next-line
import styles from './notificationLineStyles';
class NotificationLineView extends Component {
/* Props
* ------------------------------------------------
* @prop { type } name - Description....
*/
constructor(props) {
super(props);
this.state = {};
}
// Component Life Cycles
// Component Functions
render() {
const {
notification,
intl: { formatMessage },
} = this.props;
return (
<View
key={Math.random()}
style={[styles.notificationWrapper, notification.isNew && 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>
<Text numberOfLines={1} style={styles.description}>
{notification.description}
</Text>
</View>
{notification.image && (
<Image
style={styles.image}
source={{ uri: notification.image }}
defaultSource={require('../../../assets/no_image.png')}
/>
)}
</View>
);
}
}
export default injectIntl(NotificationLineView);

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

@ -8,5 +8,15 @@
"transfer_to_vesting": "Transfer To Vesting",
"withdraw_vesting": "withdraw_vesting",
"fill_order": "Fill Order"
},
"notification": {
"vote": "voted to your post",
"unvote": "unvoted to your post",
"reply": "replied to your post",
"mention": "mentioned to you",
"follow": "followed to you",
"unfollow": "unfollowed to you",
"ignore": "ignored to you",
"reblog": "reblog to your post"
}
}

10
src/config/locales/tr-TR.json
View File

@ -8,5 +8,15 @@
"transfer_to_vesting": "Transfer To Vesting",
"withdraw_vesting": "withdraw_vesting",
"fill_order": "Fill Order"
},
"notification": {
"vote": "voted to your post",
"unvote": "unvoted to your post",
"reply": "replied to your post",
"mention": "mentioned to you",
"follow": "followed to you",
"unfollow": "unfollowed to you",
"ignore": "ignored to you",
"reblog": "reblog to your post"
}
}

178
src/providers/esteem/esteem.js
View File

@ -1,5 +1,182 @@
import api from '../../config/api';
const testData = [
{
id: 'm-32364653',
type: 'mention',
source: 'future24',
author: 'future24',
account: 'mistikk',
permlink: 'my-steemfest-badget-scan-collection-meet-the-steemians-contest-d40b4dc68fd1eest',
post: true,
read: 0,
timestamp: '2018-11-15T12:33:57+00:00',
ts: 1542281637,
gk: '2 hours',
gkf: true,
},
{
id: 'm-32364257',
type: 'mention',
source: 'future24',
author: 'future24',
account: 'mistikk',
permlink: 'my-steemfest-badget-scan-collection-meet-the-steemians-contest-d40b4dc68fd1eest',
post: true,
read: 0,
timestamp: '2018-11-15T12:17:57+00:00',
ts: 1542280677,
gk: '2 hours',
gkf: false,
},
{
id: 'f-165464166',
type: 'follow',
source: 'manncpt',
follower: 'manncpt',
following: 'mistikk',
blog: true,
read: 0,
timestamp: '2018-11-13T23:07:18+00:00',
ts: 1542146838,
gk: '2018-11-13',
gkf: true,
},
{
id: 'f-165459364',
type: 'follow',
source: 'future24',
follower: 'future24',
following: 'mistikk',
blog: true,
read: 0,
timestamp: '2018-11-13T15:37:06+00:00',
ts: 1542119826,
gk: '2018-11-13',
gkf: false,
},
{
id: 'm-32222130',
type: 'mention',
source: 'steemium',
author: 'steemium',
account: 'mistikk',
permlink: 'early-access-to-steemium-for-all-steemfest-participants',
post: true,
read: 0,
timestamp: '2018-11-11T02:56:48+00:00',
ts: 1541901408,
gk: '2018-11-11',
gkf: true,
},
{
id: 'm-32213631',
type: 'mention',
source: 'louis88',
author: 'louis88',
account: 'mistikk',
permlink: 'beersaturday-is-on-great-and-the-esteem-joined-e63f0a592fa2e',
post: true,
read: 0,
timestamp: '2018-11-10T19:58:21+00:00',
ts: 1541876301,
gk: '2018-11-10',
gkf: true,
},
{
id: 'm-31826288',
type: 'mention',
source: 'u-e',
author: 'u-e',
account: 'mistikk',
permlink: 'test-with-user-id-2worq984zaa',
post: true,
read: 0,
timestamp: '2018-10-29T21:46:18+00:00',
ts: 1540845978,
gk: '2018-10-29',
gkf: true,
},
{
id: 'f-164966801',
type: 'follow',
source: 'marcusmalone',
follower: 'marcusmalone',
following: 'mistikk',
blog: true,
read: 0,
timestamp: '2018-10-25T03:45:45+00:00',
ts: 1540431945,
gk: '2018-10-25',
gkf: true,
},
{
id: 'f-164533994',
type: 'follow',
source: 'cahitihac',
follower: 'cahitihac',
following: 'mistikk',
blog: true,
read: 0,
timestamp: '2018-10-14T08:49:36+00:00',
ts: 1539499776,
gk: '2018-10-14',
gkf: true,
},
{
id: 'f-164336256',
type: 'follow',
source: 'horpey',
follower: 'horpey',
following: 'mistikk',
blog: true,
read: 0,
timestamp: '2018-10-08T23:05:30+00:00',
ts: 1539032730,
gk: '2018-10-08',
gkf: true,
},
{
id: 'f-147167566',
type: 'follow',
source: 'okankarol',
follower: 'okankarol',
following: 'mistikk',
blog: true,
read: 0,
timestamp: '2018-09-09T05:27:21+00:00',
ts: 1536463641,
gk: '2018-09-09',
gkf: true,
},
{
id: 'f-147167446',
type: 'follow',
source: 'obaku',
follower: 'obaku',
following: 'mistikk',
blog: true,
read: 0,
timestamp: '2018-09-09T05:26:48+00:00',
ts: 1536463608,
gk: '2018-09-09',
gkf: false,
},
{
id: 'f-147167414',
type: 'follow',
source: 'raise-me-up',
follower: 'raise-me-up',
following: 'mistikk',
blog: true,
read: 0,
timestamp: '2018-09-09T05:26:45+00:00',
ts: 1536463605,
gk: '2018-09-09',
gkf: false,
},
];
export const getDrafts = data => new Promise((resolve, reject) => {
api
.get(`/drafts/${data.user}`)
@ -45,6 +222,7 @@ export const updateDraft = data => new Promise((resolve, reject) => {
});
export const getActivities = data => new Promise((resolve, reject) => {
resolve(testData);
api
.get(`/activities/${data.user}`, {
params: {

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

@ -1,16 +1,30 @@
import React, { Component } from 'react';
// Actions and Services
import { getActivities } from '../../../providers/esteem/esteem';
// Components
import { NotificationScreen } from '../index';
class NotificationContainer extends Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
notifications: [],
};
}
componentWillMount() {
getActivities({ user: 'mistikk' }).then((res) => {
console.log('res :', res);
this.setState({ notifications: res });
});
}
render() {
return <NotificationScreen {...this.props} />;
const { notifications } = this.state;
return <NotificationScreen notifications={notifications} {...this.props} />;
}
}

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

@ -19,6 +19,8 @@ class NotificationScreen extends PureComponent {
}
render() {
const { notifications } = this.props;
console.log('notifications :', notifications);
return (
<Fragment>
<Header />
@ -35,7 +37,7 @@ class NotificationScreen extends PureComponent {
)}
>
<View tabLabel="Notification" style={styles.notificationTab}>
<Notification />
<Notification notifications={notifications} />
</View>
<View tabLabel="Leaderboard" style={styles.leaderboardTab}>
<NoPost