diff options
Diffstat (limited to 'src/screens')
| -rw-r--r-- | src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 139 |
1 files changed, 128 insertions, 11 deletions
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index cec76d00..7f7d9d07 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,6 +56,7 @@ 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); @@ -149,6 +153,72 @@ 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.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>}) => { const data = item.item; @@ -178,15 +248,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 @@ -312,6 +374,61 @@ 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: { + 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; |