Merge pull request #259 from shravyaramesh/sp-add-friend-button

[TMA-258] Suggested People: Add friend button

1 files changed, 127 insertions, 20 deletions

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index cec76d00..b1650e3d 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,5 +1,5 @@
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import React, {memo, useCallback, useEffect, useState} from 'react';
+import React, {memo, Fragment, useCallback, useEffect, useState} from 'react';
 import {
   FlatList,
   ListRenderItemInfo,
@@ -18,9 +18,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,
@@ -28,6 +30,7 @@ import {
 import {
   fetchUserX,
   getUserAsProfilePreviewType,
+  handleAddFriend,
   normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
@@ -53,10 +56,10 @@ const SuggestedPeopleScreen: React.FC = () => {
   );
   const {suggestedPeopleImage} = useSelector((state: RootState) => state.user);
   const [people, setPeople] = useState<SuggestedPeopleDataType[]>([]);
+  const [displayedUser, setDisplayedUser] = useState<SuggestedPeopleDataType>();
   const [page, setPage] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
   const [shouldResetData, setShouldResetData] = useState(false);
-  const [hideStatusBar, setHideStatusBar] = useState(false);
 
   // loads data and append it to users based on current page
   useEffect(() => {
@@ -142,12 +145,71 @@ const SuggestedPeopleScreen: React.FC = () => {
     }, [navigation, suggested_people_linked]),
   );
 
-  // const onViewableItemsChanged = useCallback(
-  //   ({viewableItems}: {viewableItems: ViewToken[]}) => {
-  //     setHideStatusBar(viewableItems[0].index !== 0);
-  //   },
-  //   [],
-  // );
+  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.requestedButton}
+              onPress={() => onCancelRequest(suggested)}
+              disabled={false}>
+              <Text style={styles.requestedButtonTitle}>{'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 = memo(
     ({item}: {item: ListRenderItemInfo<SuggestedPeopleDataType>}) => {
@@ -155,7 +217,7 @@ const SuggestedPeopleScreen: React.FC = () => {
       const firstItem = item.index === 0;
       return (
         <>
-          <StatusBar barStyle={'light-content'} hidden={hideStatusBar} />
+          <StatusBar barStyle={'light-content'} />
           <Image
             source={{
               uri: data.suggested_people_url,
@@ -178,15 +240,7 @@ 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> */}
+                  {displayButton(data)}
                 </View>
               </View>
               <TaggsBar
@@ -218,7 +272,6 @@ const SuggestedPeopleScreen: React.FC = () => {
         keyExtractor={(item, index) => index.toString()}
         showsVerticalScrollIndicator={false}
         onEndReached={() => setPage(page + 1)}
-        // onViewableItemsChanged={onViewableItemsChanged}
         refreshControl={
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
         }
@@ -312,6 +365,60 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     marginBottom: '5%',
   },
+  requestedButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.3,
+    height: SCREEN_WIDTH * 0.085,
+    padding: 0,
+    borderWidth: 2,
+    borderColor: 'transparent',
+    borderRadius: 1,
+    marginLeft: '1%',
+    marginTop: '4%',
+    shadowColor: 'rgb(0, 0, 0)',
+    shadowRadius: 2,
+    shadowOffset: {width: 2, height: 2},
+    shadowOpacity: 0.5,
+    backgroundColor: '#fff',
+  },
+  requestedButtonTitle: {
+    backgroundColor: 'transparent',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    fontWeight: 'bold',
+    textAlign: 'center',
+    letterSpacing: normalize(1),
+  },
   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;