Added timestamps on notification

2 files changed, 70 insertions, 4 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index a74480b4..0290f9c7 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -26,6 +26,8 @@ import {
 } from '../../types';
 import {
   fetchUserX,
+  getTimeInShorthand,
+  normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
   userXInStore,
@@ -47,6 +49,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
       notification_type,
       notification_object,
       unread,
+      timestamp,
     },
     screenType,
     loggedInUser,
@@ -231,7 +234,12 @@ const Notification: React.FC<NotificationProps> = (props) => {
       {notification_type === 'SYSTEM_MSG' ? (
         // Only verbage
         <View style={styles.contentContainer}>
-          <Text style={styles.actorName}>{verbage}</Text>
+          <View style={styles.textContainerStyles}>
+            <Text style={styles.actorName}>{verbage}</Text>
+            <Text style={styles.timeStampStyles}>
+              {getTimeInShorthand(timestamp)}
+            </Text>
+          </View>
         </View>
       ) : (
         <>
@@ -242,8 +250,13 @@ const Notification: React.FC<NotificationProps> = (props) => {
                 {first_name} {last_name}
               </Text>
             </TouchableWithoutFeedback>
-            <TouchableWithoutFeedback onPress={onNotificationTap}>
-              <Text>{verbage}</Text>
+            <TouchableWithoutFeedback
+              style={styles.textContainerStyles}
+              onPress={onNotificationTap}>
+              <Text style={styles.verbageStyles}>{verbage}</Text>
+              <Text style={styles.timeStampStyles}>
+                {getTimeInShorthand(timestamp)}
+              </Text>
             </TouchableWithoutFeedback>
           </View>
           {/* Friend request accept/decline button */}
@@ -309,8 +322,9 @@ const styles = StyleSheet.create({
     justifyContent: 'space-around',
   },
   actorName: {
-    fontSize: 15,
+    fontSize: normalize(12),
     fontWeight: '700',
+    lineHeight: normalize(14.32),
   },
   moment: {
     height: 42,
@@ -320,6 +334,20 @@ const styles = StyleSheet.create({
   buttonsContainer: {
     height: '80%',
   },
+  textContainerStyles: {flexDirection: 'row', flexWrap: 'wrap'},
+  verbageStyles: {
+    fontWeight: '500',
+    fontSize: normalize(11),
+    lineHeight: normalize(13.13),
+  },
+  timeStampStyles: {
+    fontWeight: '700',
+    fontSize: normalize(12),
+    lineHeight: normalize(14.32),
+    marginHorizontal: 2,
+    color: '#828282',
+    textAlignVertical: 'center',
+  },
   imageFlex: {
     flex: 1,
   },
diff --git a/src/utils/moments.ts b/src/utils/moments.ts
index 87f062af..12323e7b 100644
--- a/src/utils/moments.ts
+++ b/src/utils/moments.ts
@@ -37,3 +37,41 @@ export const getTimePosted = (date_time: string) => {
   }
   return time;
 };
+
+export const getTimeInShorthand = (date_time: string) => {
+  //TODO: Explore this function to get dates in our range and format
+  // const datePosted = moment(date_time);
+  // return moment(datePosted).fromNow();
+
+  const datePosted = moment(date_time);
+  const now = moment();
+  var time = date_time;
+  var difference = now.diff(datePosted, 's');
+
+  // Creating elapsedTime string to display to user
+  // 0 to less than 1 minute
+  if (difference < 60) {
+    time = difference + 's';
+  }
+  // 1 minute to less than 1 hour
+  else if (difference >= 60 && difference < 60 * 60) {
+    difference = now.diff(datePosted, 'm');
+    time = difference + 'm';
+  }
+  // 1 hour to less than 1 day
+  else if (difference >= 60 * 60 && difference < 24 * 60 * 60) {
+    difference = now.diff(datePosted, 'h');
+    time = difference + 'h';
+  }
+  // Any number of days
+  else if (difference >= 24 * 60 * 60 && difference < 24 * 60 * 60 * 7) {
+    difference = now.diff(datePosted, 'd');
+    time = difference + 'd';
+  }
+  // More than 7 days
+  else if (difference >= 24 * 60 * 60 * 7) {
+    difference = now.diff(datePosted, 'w');
+    time = difference + 'w';
+  }
+  return time;
+};