Merge pull request #187 from shravyaramesh/tma538-friend-requests

[TMA485] friend request frontend

1 files changed, 63 insertions, 26 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 94937053..e6d16f82 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,12 +1,25 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
+import {Button} from 'react-native-elements';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import {useDispatch, useStore} from 'react-redux';
+import {
+  declineFriendRequest,
+  loadUserNotifications,
+  updateUserXFriends,
+} from '../../store/actions';
+import {acceptFriendRequest} from '../../store/actions';
+import {NotificationType, ProfilePreviewType, ScreenType, MomentType} from '../../types';
+import {
+  fetchUserX,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  userXInStore,
+} from '../../utils';
+import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
 import {loadAvatar, loadMomentThumbnail} from '../../services';
-import {RootState} from '../../store/rootReducer';
-import {MomentType, NotificationType, ScreenType} from '../../types';
-import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils';
+
 
 interface NotificationProps {
   item: NotificationType;
@@ -26,6 +39,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
     screenType,
     moments: loggedInUserMoments,
   } = props;
+
   const navigation = useNavigation();
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
@@ -33,7 +47,6 @@ const Notification: React.FC<NotificationProps> = (props) => {
   const [avatarURI, setAvatarURI] = useState<string | undefined>(undefined);
   const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
   const backgroundColor = unread ? '#DCF1F1' : 'rgba(0,0,0,0)';
-
   useEffect(() => {
     let mounted = true;
     const loadAvatarImage = async (user_id: string) => {
@@ -66,7 +79,8 @@ const Notification: React.FC<NotificationProps> = (props) => {
 
   const onNotificationTap = async () => {
     switch (notification_type) {
-      case 'FRD':
+      case 'FRD_ACPT':
+      case 'FRD_REQ':
         if (!userXInStore(state, screenType, id)) {
           await fetchUserX(
             dispatch,
@@ -103,30 +117,52 @@ const Notification: React.FC<NotificationProps> = (props) => {
     }
   };
 
+  const handleAcceptRequest = async () => {
+    await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
+    await dispatch(updateUserXFriends(id, state));
+    dispatch(loadUserNotifications());
+  };
+
+  const handleDeclineFriendRequest = async () => {
+    await dispatch(declineFriendRequest(id));
+    dispatch(loadUserNotifications());
+  };
+
   return (
-    <TouchableWithoutFeedback
-      style={[styles.container, {backgroundColor}]}
-      onPress={onNotificationTap}>
-      <View style={styles.avatarContainer}>
-        <Image
-          style={styles.avatar}
-          source={
-            avatarURI
-              ? {uri: avatarURI}
-              : 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 === 'CMT' && notification_object && (
+    <>
+      <TouchableWithoutFeedback
+        style={[styles.container, {backgroundColor}]}
+        onPress={onNotificationTap}>
+        <View style={styles.avatarContainer}>
+          <Image
+            style={styles.avatar}
+            source={
+              avatarURI
+                ? {uri: avatarURI, cache: 'only-if-cached'}
+                : 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>
+        )}
+        {notification_type === 'CMT' && notification_object && (
         <Image style={styles.moment} source={{uri: momentURI}} />
       )}
-    </TouchableWithoutFeedback>
+      </TouchableWithoutFeedback>
+    </>
   );
 };
 
@@ -165,6 +201,7 @@ const styles = StyleSheet.create({
     width: 42,
     right: '5%',
   },
+  buttonsContainer: {},
 });
 
 export default Notification;