From 9b7828eae3039213306ed787f306866ea46c15b6 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Fri, 26 Feb 2021 16:17:32 -0800 Subject: Refactored changes --- src/screens/suggestedPeople/SPBody.tsx | 302 +++++++++++++++++++++ .../suggestedPeople/SuggestedPeopleScreen.tsx | 140 ++-------- 2 files changed, 329 insertions(+), 113 deletions(-) create mode 100644 src/screens/suggestedPeople/SPBody.tsx (limited to 'src') diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx new file mode 100644 index 00000000..04463e89 --- /dev/null +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -0,0 +1,302 @@ +import {useFocusEffect, useNavigation} from '@react-navigation/native'; +import React, { + memo, + Fragment, + useCallback, + useEffect, + useState, + useMemo, +} from 'react'; +import { + FlatList, + ListRenderItemInfo, + RefreshControl, + StatusBar, + StyleSheet, + Text, + View, + ViewToken, +} from 'react-native'; +import {Image} from 'react-native-animatable'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import Animated from 'react-native-reanimated'; +import {useDispatch, useSelector, useStore} from 'react-redux'; +import {TabsGradient, TaggsBar} from '../../components'; +import {MutualFriends} from '../../components/suggestedPeople'; +import {SP_PAGE_SIZE} from '../../constants'; +import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen'; +import {getSuggestedPeople} from '../../services/SuggestedPeopleService'; +import {cancelFriendRequest, resetScreenType} from '../../store/actions'; +import {RootState} from '../../store/rootReducer'; +import RequestedButton from '../../assets/ionicons/requested-button.svg'; +import { + FriendshipStatusType, + FriendshipType, + ProfilePreviewType, + ScreenType, + SuggestedPeopleDataType, +} from '../../types'; +import { + fetchUserX, + getUserAsProfilePreviewType, + handleAddFriend, + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; +import {userXInStore} from './../../utils/'; + +/** + * Bare bones for suggested people consisting of: + * * Image, title, name, username, add friend button [w/o functionality] + */ + +const SPBody: React.FC = ({ + item: { + user, + mutual_friends, + badges, + social_links, + suggested_people_url, + friendship, + }, + index, + onCancelRequest, + onAddFriend, + loggedInUserId, +}) => { + const firstItem = index === 0; + const screenType = ScreenType.SuggestedPeople; + + const displayButton = () => { + // setDisplayedUser(suggested); + + switch (friendship.status) { + case 'friends': + return ; + case 'requested': + if (friendship.requester_id === loggedInUserId) { + return ( + onCancelRequest(user)} + disabled={false}> + + + ); + } else { + return ( + + {'Pending'} + + ); + } + case 'no_record': + return ( + onAddFriend(user)} + disabled={false}> + {'Add Friend'} + + ); + default: + return ; + } + }; + + const backgroundImage = useMemo( + () => ( + + ), + [suggested_people_url], + ); + const navigation = useNavigation(); + + return ( + + {backgroundImage} + + {firstItem && 'Suggested People'} + + + + { + navigation.push('Profile', { + userXId: user.id, + screenType, + }); + }} + style={styles.nameInfoContainer}> + {user.first_name} + @{user.username} + + {displayButton()} + + + + + + + + + + ); +}; + +const styles = StyleSheet.create({ + mainContainer: { + flexDirection: 'column', + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + paddingVertical: '15%', + paddingBottom: '20%', + justifyContent: 'space-between', + alignSelf: 'center', + }, + marginManager: {marginHorizontal: '5%'}, + image: { + position: 'absolute', + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + zIndex: 0, + }, + title: { + zIndex: 1, + paddingTop: '3%', + alignSelf: 'center', + fontSize: normalize(22), + lineHeight: normalize(26), + fontWeight: '800', + letterSpacing: normalize(3), + color: '#FFFEFE', + textShadowColor: 'rgba(0, 0, 0, 0.4)', + textShadowOffset: {width: normalize(2), height: normalize(2)}, + textShadowRadius: normalize(2), + }, + firstName: { + color: '#fff', + fontWeight: '800', + fontSize: normalize(24), + lineHeight: normalize(29), + textShadowColor: 'rgba(0, 0, 0, 0.3)', + textShadowOffset: {width: normalize(2), height: normalize(2)}, + textShadowRadius: normalize(2), + letterSpacing: normalize(2.5), + alignSelf: 'baseline', + }, + username: { + color: '#fff', + fontWeight: '600', + fontSize: normalize(15), + lineHeight: normalize(18), + textShadowColor: 'rgba(0, 0, 0, 0.3)', + textShadowOffset: {width: normalize(2), height: normalize(2)}, + textShadowRadius: normalize(2), + letterSpacing: normalize(2), + }, + nameInfoContainer: {}, + addButton: { + justifyContent: 'center', + alignItems: 'center', + width: SCREEN_WIDTH * 0.3, + height: SCREEN_WIDTH * 0.085, + padding: 0, + borderWidth: 2, + borderColor: '#fff', + borderRadius: 1, + marginLeft: '1%', + marginTop: '4%', + shadowColor: 'rgb(0, 0, 0)', + shadowRadius: 2, + shadowOffset: {width: 2, height: 2}, + shadowOpacity: 0.5, + }, + addButtonTitle: { + color: 'white', + padding: 0, + fontSize: normalize(15), + lineHeight: normalize(18), + fontWeight: 'bold', + textAlign: 'center', + letterSpacing: normalize(1), + }, + addUserContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + 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, + }, + 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 SPBody; diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index c2aab1b5..99af0716 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -45,7 +45,7 @@ import { SCREEN_WIDTH, } from '../../utils'; import {userXInStore} from './../../utils/'; - +import SPBody from './SPBody'; /** * Bare bones for suggested people consisting of: * * Image, title, name, username, add friend button [w/o functionality] @@ -156,7 +156,7 @@ const SuggestedPeopleScreen: React.FC = () => { ); const updateDisplayedUser = async ( - suggested: SuggestedPeopleDataType, + user: ProfilePreviewType, status: FriendshipStatusType, requester_id: string, ) => { @@ -166,62 +166,25 @@ const SuggestedPeopleScreen: React.FC = () => { }; 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); + setPeople( + people.map((item) => { + if (item.user.id === user.id) { + item.friendship.status = status; + item.friendship.requester_id = requester_id; + } + return item; + }), + ); }; - const onCancelRequest = (suggested: SuggestedPeopleDataType) => { - dispatch(cancelFriendRequest(suggested.user.id)); - updateDisplayedUser(suggested, 'no_record', ''); + const onAddFriend = async (user: ProfilePreviewType) => { + handleAddFriend(screenType, user, dispatch, state); + updateDisplayedUser(user, 'requested', loggedInUserId); }; - 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}> - - - ); - } else { - return ( - - {'Pending'} - - ); - } - case 'no_record': - return ( - onAddFriend(suggested)} - disabled={false}> - {'Add Friend'} - - ); - default: - return ; - } + const onCancelRequest = (user: ProfilePreviewType) => { + dispatch(cancelFriendRequest(user.id)); + updateDisplayedUser(user, 'no_record', ''); }; const onViewableItemsChanged = useCallback( @@ -231,71 +194,22 @@ const SuggestedPeopleScreen: React.FC = () => { [], ); - const SPBody = memo( - ({item}: {item: ListRenderItemInfo}) => { - const data = item.item; - const firstItem = item.index === 0; - const backgroundImage = useMemo( - () => ( - - ), - [data.suggested_people_url], - ); - return ( - <> -