added frind button

1 files changed, 104 insertions, 11 deletions

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 195604a3..79b9abc8 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,6 +1,6 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useState} from 'react';
 import {
   FlatList,
   ListRenderItemInfo,
@@ -19,9 +19,11 @@ import {MutualFriends} from '../../components/suggestedPeople';
 import {SP_PAGE_SIZE} from '../../constants';
 import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen';
 import {getSuggestedPeople} from '../../services/SuggestedPeopleService';
-import {resetScreenType} from '../../store/actions';
+import {cancelFriendRequest, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {
+  FriendshipStatusType,
+  FriendshipType,
   ProfilePreviewType,
   ScreenType,
   SuggestedPeopleDataType,
@@ -29,6 +31,7 @@ import {
 import {
   fetchUserX,
   getUserAsProfilePreviewType,
+  handleAddFriend,
   normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
@@ -53,6 +56,7 @@ const SuggestedPeopleScreen: React.FC = () => {
     (state: RootState) => state.user.user,
   );
   const [people, setPeople] = useState<SuggestedPeopleDataType[]>([]);
+  const [displayedUser, setDisplayedUser] = useState<SuggestedPeopleDataType>();
   const [page, setPage] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
   const [hideStatusBar, setHideStatusBar] = useState(false);
@@ -154,12 +158,79 @@ const SuggestedPeopleScreen: React.FC = () => {
   //   [],
   // );
 
+  const updateDisplayedUser = async (
+    suggested: SuggestedPeopleDataType,
+    status: FriendshipStatusType,
+    requester_id: string,
+  ) => {
+    const localDisplayedUser: SuggestedPeopleDataType = {
+      ...displayedUser,
+      friendship: {status, requester_id},
+    };
+    setDisplayedUser(localDisplayedUser);
+
+    people.map((item) => {
+      if (item.user.id === suggested.user.id) {
+        item.friendship.status = status;
+        item.friendship.requester_id = requester_id;
+      }
+    });
+  };
+
+  const onAddFriend = async (suggested: SuggestedPeopleDataType) => {
+    handleAddFriend(screenType, suggested.user, dispatch, state);
+    updateDisplayedUser(suggested, 'requested', loggedInUserId);
+  };
+
+  const onCancelRequest = (suggested: SuggestedPeopleDataType) => {
+    dispatch(cancelFriendRequest(suggested.user.id));
+    updateDisplayedUser(suggested, 'no_record', '');
+  };
+
+  const displayButton = (suggested: SuggestedPeopleDataType) => {
+    setDisplayedUser(suggested);
+    const friendship: FriendshipType = suggested.friendship;
+    switch (friendship.status) {
+      case 'friends':
+        return <Fragment />;
+      case 'requested':
+        if (friendship.requester_id === loggedInUserId) {
+          return (
+            <TouchableOpacity
+              style={styles.addButton}
+              onPress={() => onCancelRequest(suggested)}
+              disabled={false}>
+              <Text style={styles.addButtonTitle}>{'Requested'}</Text>
+            </TouchableOpacity>
+          );
+        } else {
+          return (
+            <TouchableOpacity style={styles.addButton} disabled={true}>
+              <Text style={styles.addButtonTitle}>{'Pending'}</Text>
+            </TouchableOpacity>
+          );
+        }
+      case 'no_record':
+        return (
+          <TouchableOpacity
+            style={styles.addButton}
+            onPress={() => onAddFriend(suggested)}
+            disabled={false}>
+            <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
+          </TouchableOpacity>
+        );
+      default:
+        return <Fragment />;
+    }
+  };
+
   const SPBody = ({
     item,
   }: {
     item: ListRenderItemInfo<SuggestedPeopleDataType>;
   }) => {
     const data = item.item;
+    setDisplayedUser(item.item);
     const firstItem = item.index === 0;
     return (
       <>
@@ -186,15 +257,8 @@ const SuggestedPeopleScreen: React.FC = () => {
                   <Text style={styles.firstName}>{data.user.first_name}</Text>
                   <Text style={styles.username}>@{data.user.username}</Text>
                 </TouchableOpacity>
-                {/* TODO: Finish me ?! */}
-                {/* <TouchableOpacity
-                activeOpacity={0.5}
-                // TODO: Call function to Add Friend
-                onPress={() => console.log('Call add friend function')}>
-                <View style={styles.addButton}>
-                  <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
-                </View>
-              </TouchableOpacity> */}
+                {/* Friendship Button */}
+                {displayButton(data)}
               </View>
             </View>
             <TaggsBar
@@ -320,5 +384,34 @@ const styles = StyleSheet.create({
     marginBottom: '5%',
   },
   body: {},
+
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.4,
+    aspectRatio: 154 / 33,
+    borderWidth: 2,
+    borderColor: '#fff',
+    borderRadius: 3,
+    marginRight: '2%',
+    marginLeft: '1%',
+  },
+  transparentBG: {
+    backgroundColor: 'transparent',
+  },
+  lightBlueBG: {
+    backgroundColor: '#fff',
+  },
+  label: {
+    fontSize: normalize(15),
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+  blueLabel: {
+    color: '#fff',
+  },
+  whiteLabel: {
+    color: 'white',
+  },
 });
 export default SuggestedPeopleScreen;