friend request

1 files changed, 66 insertions, 24 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index f6a04526..5e68c6f3 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,17 +1,27 @@
 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 {loadAvatar} from '../../services';
+import {
+  declineFriendRequest,
+  loadUserNotifications,
+  updateUserXFriends,
+} from '../../store/actions';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {loadAvatar, unfriendUser} from '../../services';
+import {acceptFriendRequest} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {NotificationType, ScreenType} from '../../types';
+import {NotificationType, ProfilePreviewType, ScreenType} from '../../types';
 import {
   fetchUserX,
+  getTokenOrLogout,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
   userXInStore,
 } from '../../utils';
+import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
 
 interface NotificationProps {
   item: NotificationType;
@@ -29,6 +39,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
     },
     screenType,
   } = props;
+
   const navigation = useNavigation();
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
@@ -36,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) => {
@@ -68,7 +78,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,
@@ -86,26 +97,45 @@ const Notification: React.FC<NotificationProps> = (props) => {
     }
   };
 
+  // const handleAcceptRequest = async () => {
+  //   const requester: ProfilePreviewType = {
+  //     id: id,
+  //     username: username,
+  //     first_name: first_name,
+  //     last_name: last_name,
+  //   };
+  //   dispatch(acceptFriendRequest(requester));
+  //   dispatch(updateUserXFriends(id, state));
+  //   console.log('fetching notifications since user accepted request!');
+  //   dispatch(loadUserNotifications());
+  // };
+
+  // const handleDeclineFriendRequest = async () => {
+  //   dispatch(declineFriendRequest(id));
+  // };
+
   return (
-    <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>
+    <>
+      <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>
+      </TouchableWithoutFeedback>
       {/* TODO: Still WIP */}
       {/* {notification_type === 'CMT' && notification_object && (
         <Image
@@ -113,7 +143,14 @@ const Notification: React.FC<NotificationProps> = (props) => {
           source={{uri: momentURI, cache: 'only-if-cached'}}
         />
       )} */}
-    </TouchableWithoutFeedback>
+      {notification_type === 'FRD_REQ' && (
+        <View style={styles.buttonsContainer}>
+          <AcceptDeclineButtons
+            requester={{id, username, first_name, last_name}}
+          />
+        </View>
+      )}
+    </>
   );
 };
 
@@ -123,6 +160,8 @@ const styles = StyleSheet.create({
     height: SCREEN_HEIGHT / 10,
     flex: 1,
     alignItems: 'center',
+    borderColor: 'red',
+    borderWidth: 2,
   },
   avatarContainer: {
     marginLeft: '5%',
@@ -152,6 +191,9 @@ const styles = StyleSheet.create({
     width: 42,
     right: '5%',
   },
+  buttonsContainer: {
+    
+  },
 });
 
 export default Notification;