4 files changed, 91 insertions, 37 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index e0ae231e..951a5bf6 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -2,7 +2,9 @@ import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {Alert, Image, StyleSheet, Text, View} from 'react-native';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
 import {useDispatch, useStore} from 'react-redux';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 import {ERROR_DELETED_OBJECT} from '../../constants/strings';
 import {
   loadImageFromURL,
@@ -51,7 +53,6 @@ const Notification: React.FC<NotificationProps> = (props) => {
 
   const [avatar, setAvatar] = useState<string | undefined>(undefined);
   const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
-  const backgroundColor = unread ? '#DCF1F1' : 'rgba(0,0,0,0)';
   const [onTapLoadProfile, setOnTapLoadProfile] = useState<boolean>(false);
 
   useEffect(() => {
@@ -59,6 +60,8 @@ const Notification: React.FC<NotificationProps> = (props) => {
       const response = await loadImageFromURL(thumbnail_url);
       if (response) {
         setAvatar(response);
+      } else {
+        setAvatar(undefined);
       }
     })();
   }, []);
@@ -79,9 +82,17 @@ const Notification: React.FC<NotificationProps> = (props) => {
       const response = await loadMomentThumbnail(moment_id);
       if (mounted && response) {
         setMomentURI(response);
+      } else {
+        // if not set to empty, it will re-use the previous notification's state
+        setMomentURI(undefined);
       }
     };
-    if (notification_type === 'CMT' && notification_object) {
+    if (
+      (notification_type === 'CMT' ||
+        notification_type === 'MOM_3+' ||
+        notification_type === 'MOM_FRIEND') &&
+      notification_object
+    ) {
       loadMomentImage(
         notification_object.moment_id
           ? notification_object.moment_id
@@ -166,6 +177,20 @@ const Notification: React.FC<NotificationProps> = (props) => {
           }, 500);
         }
         break;
+      case 'MOM_3+':
+      case 'MOM_FRIEND':
+        const object = notification_object as MomentType;
+        await fetchUserX(
+          dispatch,
+          {userId: id, username: username},
+          screenType,
+        );
+        navigation.push('IndividualMoment', {
+          moment: object,
+          userXId: id,
+          screenType,
+        });
+        break;
       default:
         break;
     }
@@ -184,48 +209,57 @@ const Notification: React.FC<NotificationProps> = (props) => {
     dispatch(loadUserNotifications());
   };
 
-  return (
-    <>
-      <TouchableWithoutFeedback
-        style={[styles.container, {backgroundColor}]}
-        onPress={onNotificationTap}>
-        <View style={styles.avatarContainer}>
-          <Image
-            style={styles.avatar}
-            source={
-              avatar
-                ? {uri: avatar}
-                : require('../../assets/images/avatar-placeholder.png')
-            }
+  const renderContent = () => (
+    <TouchableWithoutFeedback
+      style={styles.container}
+      onPress={onNotificationTap}>
+      <View style={styles.avatarContainer}>
+        <Image
+          style={styles.avatar}
+          source={
+            avatar
+              ? {uri: avatar}
+              : require('../../assets/images/avatar-placeholder.png')
+          }
+        />
+      </View>
+      <View style={styles.contentContainer}>
+        <Text style={styles.actorName}>
+          {first_name} {last_name}
+        </Text>
+        <Text>{verbage}</Text>
+      </View>
+      {notification_type === 'FRD_REQ' && (
+        <View style={styles.buttonsContainer}>
+          <AcceptDeclineButtons
+            requester={{id, username, first_name, last_name}}
+            onAccept={handleAcceptRequest}
+            onReject={handleDeclineFriendRequest}
           />
         </View>
-        <View style={styles.contentContainer}>
-          <Text style={styles.actorName}>
-            {first_name} {last_name}
-          </Text>
-          <Text>{verbage}</Text>
-        </View>
-        {notification_type === 'FRD_REQ' && (
-          <View style={styles.buttonsContainer}>
-            <AcceptDeclineButtons
-              requester={{id, username, first_name, last_name}}
-              onAccept={handleAcceptRequest}
-              onReject={handleDeclineFriendRequest}
-            />
-          </View>
-        )}
-        {notification_type === 'CMT' && notification_object && (
+      )}
+      {(notification_type === 'CMT' ||
+        notification_type === 'MOM_3+' ||
+        notification_type === 'MOM_FRIEND') &&
+        notification_object && (
           <Image style={styles.moment} source={{uri: momentURI}} />
         )}
-      </TouchableWithoutFeedback>
-    </>
+    </TouchableWithoutFeedback>
+  );
+
+  return unread ? (
+    <LinearGradient colors={BACKGROUND_GRADIENT_MAP[2]} useAngle angle={90}>
+      {renderContent()}
+    </LinearGradient>
+  ) : (
+    renderContent()
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    height: SCREEN_HEIGHT / 10,
+    height: Math.round(SCREEN_HEIGHT / 10),
     flex: 1,
     alignItems: 'center',
   },
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index ad43c337..7fcc457f 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -130,6 +130,10 @@ export const BACKGROUND_GRADIENT_MAP: Record<
 > = {
   [BackgroundGradientType.Light]: ['#9F00FF', '#27EAE9'],
   [BackgroundGradientType.Dark]: ['#421566', '#385D5E'],
+  [BackgroundGradientType.Notification]: [
+    'rgba(143, 1, 255, 0.5)',
+    'rgba(110, 231, 231, 0.5)',
+  ],
 };
 
 export const CLASS_YEAR_LIST: Array<string> = [
diff --git a/src/services/CommonService.ts b/src/services/CommonService.ts
index 4f9fb47a..dfbbf70e 100644
--- a/src/services/CommonService.ts
+++ b/src/services/CommonService.ts
@@ -6,7 +6,7 @@ export const loadImageFromURL = async (url: string) => {
       return undefined;
     }
     const response = await RNFetchBlob.config({
-      fileCache: true,
+      fileCache: false,
       appendExt: 'jpg',
     }).fetch('GET', url);
     const status = response.info().status;
diff --git a/src/types/types.ts b/src/types/types.ts
index 1775cd5f..f1ba12f4 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -165,6 +165,7 @@ export enum CategorySelectionScreenType {
 export enum BackgroundGradientType {
   Light,
   Dark,
+  Notification
 }
 
 /**
@@ -179,10 +180,25 @@ export type TaggPopupType = {
 export type NotificationType = {
   actor: ProfilePreviewType;
   verbage: string;
-  notification_type: 'DFT' | 'FRD_REQ' | 'FRD_ACPT' | 'FRD_DEC' | 'CMT';
-  notification_object: CommentType | CommentThreadType | undefined;
+  notification_type: TypeOfNotification;
+  notification_object: CommentType | CommentThreadType | MomentType | undefined;
   timestamp: string;
   unread: boolean;
 };
 
 export type TypeOfComment = 'Comment' | 'Thread';
+export type TypeOfNotification =
+  // notification_object is undefined
+  | 'DFT'
+  // notification_object is undefined
+  | 'FRD_REQ'
+  // notification_object is undefined
+  | 'FRD_ACPT'
+  // notification_object is undefined
+  | 'FRD_DEC'
+  // notification_object is CommentType || CommentThreadType
+  | 'CMT'
+  // notification_object is MomentType
+  | 'MOM_3+'
+  // notification_object is MomentType
+  | 'MOM_FRIEND';