Working on notification screen

src/components/notification/view/notificationStyles.js

@@ -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',
-  },
 });

src/components/notification/view/notificationView.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
-import {
+import { View, ScrollView, FlatList } from 'react-native';
-  View, ScrollView, Text, FlatList, Image,
+
-} from 'react-native';
-import { ContainerHeader } from '../../containerHeader';
 // 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}
+            data={notifications}
-            renderItem={({ item }) => this._getRenderItem(item)}
+            renderItem={({ item }) => <NotificationLine notification={item} />}
             keyExtractor={item => item.email}
           />
           {/* Will remove follow lines */}

src/components/notificationLine/index.js

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

src/components/notificationLine/view/notificationLineStyles.js

@@ -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',
+  },
+});

src/components/notificationLine/view/notificationLineView.js

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

src/config/locales/en-US.json

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

src/config/locales/tr-TR.json

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

src/providers/esteem/esteem.js

@@ -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: {

src/screens/notification/container/notificationContainer.js

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

src/screens/notification/screen/notificationScreen.js

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