Merge pull request #303 from esteemapp/enhancment/notification

Enhancment/notification

src/components/containerHeader/view/containerHeaderStyles.js

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

src/components/notification/view/notificationView.js

@@ -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() {
+  _renderList = (data) => {
-    const {
+    const { navigateToNotificationRoute } = this.props;
-      notifications, intl, navigateToNotificationRoute, readAllNotification,
-    } = this.props;
-    const { filters } = this.state;
-    const today = [];
-    const yesterday = [];
-    const thisWeek = [];
-    const thisMonth = [];
-    const olderThenMonth = [];
 
-    notifications.map((item) => {
+    return (
-      if (isToday(item.timestamp)) {
+      <FlatList
-        today.push(item);
+        data={data}
-      } else if (isYesterday(item.timestamp)) {
+        renderItem={({ item }) => (
-        yesterday.push(item);
+          <NotificationLine
-      } else if (isThisWeek(item.timestamp)) {
+            notification={item}
-        thisWeek.push(item);
+            handleOnPressNotification={navigateToNotificationRoute}
-      } else if (isThisMonth(item.timestamp)) {
+          />
-        thisMonth.push(item);
+        )}
-      } else {
+        keyExtractor={item => item.id}
-        olderThenMonth.push(item);
+      />
-      }
+    );
+  };
+
+  _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 && (
+          {_notifications
-            <Fragment>
+            && _notifications.map(
-              <ContainerHeader
+              item => item.notifications.length > 0 && (
-                hasSeperator
+              <Fragment key={item.title}>
-                isBoldTitle
+                <ContainerHeader hasSeperator={ _notifications.indexOf(item) !== 1 } isBoldTitle title={item.title} key={item.title} />
-                title={intl.formatMessage({
+                {this._renderList(item.notifications)}
-                  id: 'notification.recent',
+              </Fragment>
-                })}
+              ),
-              />
+            )}
-              <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>
-          )}
         </ScrollView>
       </View>
     );

src/components/notificationLine/view/notificationLineView.js

@@ -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}>
+              <Text style={styles.title}>{_title}</Text>
-                {formatMessage({
-                  id: `notification.${notification.type}`,
-                })}
-              </Text>
             </View>
             {notification.description && (
               <Text numberOfLines={1} style={styles.description}>

src/config/locales/en-US.json

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

src/config/locales/tr-TR.json

@@ -10,8 +10,8 @@
     "fill_order": "Fill Order"
   },
   "notification": {
-    "vote": "gönderini oyladı",
+    "vote": "beğendi",
-    "unvote": "gonderini yukarı yönde oyladı",
+    "unvote": "gonderini aşaği yönde oyladı",
     "reply": "gönderine cevap verdi",
     "mention": "seni etiketledi",
     "follow": "seni takip etti",

src/providers/steem/dsteem.js

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

src/utils/postParser.js

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