From fdd4d22cab5f555f981ba922f5fef9731dbe9e9d Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 23 Feb 2021 08:38:20 -0800 Subject: added frind button --- .../suggestedPeople/SuggestedPeopleScreen.tsx | 115 +++++++++++++++++++-- 1 file changed, 104 insertions(+), 11 deletions(-) (limited to 'src/screens') 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([]); + const [displayedUser, setDisplayedUser] = useState(); 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 ; + case 'requested': + if (friendship.requester_id === loggedInUserId) { + return ( + onCancelRequest(suggested)} + disabled={false}> + {'Requested'} + + ); + } else { + return ( + + {'Pending'} + + ); + } + case 'no_record': + return ( + onAddFriend(suggested)} + disabled={false}> + {'Add Friend'} + + ); + default: + return ; + } + }; + const SPBody = ({ item, }: { item: ListRenderItemInfo; }) => { const data = item.item; + setDisplayedUser(item.item); const firstItem = item.index === 0; return ( <> @@ -186,15 +257,8 @@ const SuggestedPeopleScreen: React.FC = () => { {data.user.first_name} @{data.user.username} - {/* TODO: Finish me ?! */} - {/* console.log('Call add friend function')}> - - {'Add Friend'} - - */} + {/* Friendship Button */} + {displayButton(data)} Date: Tue, 23 Feb 2021 10:26:15 -0800 Subject: requested button styled --- .../suggestedPeople/SuggestedPeopleScreen.tsx | 30 ++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 79b9abc8..42ca3247 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -197,10 +197,10 @@ const SuggestedPeopleScreen: React.FC = () => { if (friendship.requester_id === loggedInUserId) { return ( onCancelRequest(suggested)} disabled={false}> - {'Requested'} + {'Requested'} ); } else { @@ -383,6 +383,32 @@ 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', + padding: 0, + fontSize: normalize(15), + lineHeight: normalize(18), + fontWeight: 'bold', + textAlign: 'center', + letterSpacing: normalize(1), + }, body: {}, button: { -- cgit v1.2.3-70-g09d2 From 9bf53a2251f043396fb536800b49e2cf4f811a66 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 23 Feb 2021 18:11:29 -0500 Subject: cleaned up dead code --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 7f7d9d07..b1650e3d 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -60,7 +60,6 @@ const SuggestedPeopleScreen: React.FC = () => { 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(() => { @@ -146,13 +145,6 @@ 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, @@ -225,7 +217,7 @@ const SuggestedPeopleScreen: React.FC = () => { const firstItem = item.index === 0; return ( <> -