From 79edd43bd998e5f9f425b1c8150cd8f3592e47d6 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 25 Feb 2021 14:42:31 -0800 Subject: try blocks, else --- src/routes/main/MainStackScreen.tsx | 18 ++++++++---- src/screens/profile/CaptionScreen.tsx | 2 +- src/screens/search/RequestContactsAccess.tsx | 42 ++++++++++++++++++++-------- 3 files changed, 44 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index aec860f2..5b3f1178 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -50,15 +50,23 @@ const MainStackScreen: React.FC = ({route}) => { const isSearchTab = screenType === ScreenType.Search; const isNotificationsTab = screenType === ScreenType.Notifications; const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople; - - AsyncStorage.getItem('respondedToAccessContacts').then((value) => - setRespondedToAccessContacts(value ? value : 'false'), - ); - const [respondedToAccessContacts, setRespondedToAccessContacts] = useState( 'false', ); + const loadResponseToAccessContacts = () => { + try { + AsyncStorage.getItem('respondedToAccessContacts').then((value) => { + setRespondedToAccessContacts(value ? value : 'false'); + }); + } catch (err) { + console.log( + 'Unable to check and request permission to get access to user contacts', + ); + } + }; + loadResponseToAccessContacts(); + const initialRouteName = (() => { switch (screenType) { case ScreenType.Profile: diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 91aaa617..01e859ba 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -13,7 +13,7 @@ import { } from 'react-native'; import {Button} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; -import {MainStackParams} from 'src/routes'; +import {MainStackParams} from '../../routes'; import {SearchBackground, TaggBigInput} from '../../components'; import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; diff --git a/src/screens/search/RequestContactsAccess.tsx b/src/screens/search/RequestContactsAccess.tsx index de023464..69de1ddf 100644 --- a/src/screens/search/RequestContactsAccess.tsx +++ b/src/screens/search/RequestContactsAccess.tsx @@ -21,21 +21,39 @@ const RequestContactsAccess: React.FC = () => { const navigation = useNavigation(); const handleAllowAccess = async () => { - checkPermission().then((permission) => { - if (permission === 'undefined') { - requestPermission().then((response) => { - if (response === 'authorized' || response === 'denied') { - navigation.navigate('Search'); - } - }); - } - }); - await AsyncStorage.setItem('respondedToAccessContacts', 'true'); + try { + checkPermission().then((permission) => { + if (permission === 'undefined') { + requestPermission().then((response) => { + if (response === 'authorized' || response === 'denied') { + AsyncStorage.setItem( + 'respondedToAccessContacts', + 'true', + ).then(() => navigation.navigate('Search')); + } + }); + } else { + AsyncStorage.setItem('respondedToAccessContacts', 'true').then(() => + navigation.navigate('Search'), + ); + } + }); + } catch (err) { + console.log( + 'Unable to check and request permission to get access to user contacts', + ); + } }; const handleDontAllowAccess = async () => { - await AsyncStorage.setItem('respondedToAccessContacts', 'true'); - navigation.navigate('Search'); + try { + await AsyncStorage.setItem('respondedToAccessContacts', 'true'); + navigation.navigate('Search'); + } catch (err) { + console.log( + 'Unable to check and request permission to get access to user contacts', + ); + } }; return ( -- cgit v1.2.3-70-g09d2 From eed77b91d4d10dece7c53a81eb92b8ac94cc1f77 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Thu, 25 Feb 2021 17:43:13 -0800 Subject: Request-Contacts updated permission request code --- src/constants/strings.ts | 2 +- src/routes/main/MainStackScreen.tsx | 18 +++++++++--------- src/screens/search/RequestContactsAccess.tsx | 22 ++++++---------------- 3 files changed, 16 insertions(+), 26 deletions(-) (limited to 'src') diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 5ae19e9c..353e0d02 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -25,7 +25,7 @@ export const ERROR_INVALID_VERIFICATION_CODE_FORMAT = 'Please enter the 6 digit export const ERROR_INVLAID_CODE = 'The code entered is not valid!'; export const ERROR_LINK = (str: string) => `Unable to link with ${str}, Please check your login and try again`; export const ERROR_LOGIN = 'There was a problem logging you in, please refresh and try again'; -export const ERROR_LOGIN_FAILED = 'Login failed. Check your username and passoword, and try again'; +export const ERROR_LOGIN_FAILED = 'Login failed. Check your username and password, and try again'; export const ERROR_NEXT_PAGE = 'There was a problem while loading the next page πŸ˜“, try again in a couple minutes'; export const ERROR_PROFILE_CREATION_SHORT = 'Profile creation failed πŸ˜“'; export const ERROR_PWD_ACCOUNT = (str: string) => `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${str}`; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 5b3f1178..acf0cd28 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -1,7 +1,7 @@ import AsyncStorage from '@react-native-community/async-storage'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationOptions} from '@react-navigation/stack'; -import React, {useState} from 'react'; +import React, {useEffect, useState} from 'react'; import {StyleSheet, Text} from 'react-native'; import {normalize} from 'react-native-elements'; import BackIcon from '../../assets/icons/back-arrow.svg'; @@ -51,20 +51,20 @@ const MainStackScreen: React.FC = ({route}) => { const isNotificationsTab = screenType === ScreenType.Notifications; const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople; const [respondedToAccessContacts, setRespondedToAccessContacts] = useState( - 'false', + 'true', ); const loadResponseToAccessContacts = () => { - try { - AsyncStorage.getItem('respondedToAccessContacts').then((value) => { + AsyncStorage.getItem('respondedToAccessContacts') + .then((value) => { setRespondedToAccessContacts(value ? value : 'false'); + }) + .catch((error) => { + console.log('Something went wrong', error); + setRespondedToAccessContacts('true'); }); - } catch (err) { - console.log( - 'Unable to check and request permission to get access to user contacts', - ); - } }; + loadResponseToAccessContacts(); const initialRouteName = (() => { diff --git a/src/screens/search/RequestContactsAccess.tsx b/src/screens/search/RequestContactsAccess.tsx index 69de1ddf..08548c69 100644 --- a/src/screens/search/RequestContactsAccess.tsx +++ b/src/screens/search/RequestContactsAccess.tsx @@ -22,22 +22,12 @@ const RequestContactsAccess: React.FC = () => { const handleAllowAccess = async () => { try { - checkPermission().then((permission) => { - if (permission === 'undefined') { - requestPermission().then((response) => { - if (response === 'authorized' || response === 'denied') { - AsyncStorage.setItem( - 'respondedToAccessContacts', - 'true', - ).then(() => navigation.navigate('Search')); - } - }); - } else { - AsyncStorage.setItem('respondedToAccessContacts', 'true').then(() => - navigation.navigate('Search'), - ); - } - }); + let permission = await checkPermission(); + if (permission === 'undefined') { + await requestPermission(); + } + await AsyncStorage.setItem('respondedToAccessContacts', 'true'); + navigation.navigate('Search'); } catch (err) { console.log( 'Unable to check and request permission to get access to user contacts', -- cgit v1.2.3-70-g09d2 From 2bd05493b181015265a5194cf8aa1ff50e9123a3 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Fri, 26 Feb 2021 09:48:22 -0800 Subject: TMA-670-Status bar glitch --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index c2aab1b5..fb9c4ac5 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -152,6 +152,9 @@ const SuggestedPeopleScreen: React.FC = () => { } }; navigateToAnimatedTutorial(); + return () => { + StatusBar.setHidden(false); + }; }, [navigation, suggested_people_linked]), ); -- cgit v1.2.3-70-g09d2 From eca3a0d52697c3c7e2261b28dda397b1a38a2db4 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Fri, 26 Feb 2021 12:26:10 -0800 Subject: TMA-670 PR update --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index fb9c4ac5..7b77e82d 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -6,6 +6,7 @@ import React, { useEffect, useState, useMemo, + useRef, } from 'react'; import { FlatList, @@ -70,7 +71,7 @@ const SuggestedPeopleScreen: React.FC = () => { const [refreshing, setRefreshing] = useState(false); const [shouldResetData, setShouldResetData] = useState(false); const [hideStatusBar, setHideStatusBar] = useState(false); - + const stausBarRef = useRef(hideStatusBar); // loads data and append it to users based on current page useEffect(() => { loadMore(); @@ -152,6 +153,7 @@ const SuggestedPeopleScreen: React.FC = () => { } }; navigateToAnimatedTutorial(); + StatusBar.setHidden(stausBarRef.current); return () => { StatusBar.setHidden(false); }; @@ -230,6 +232,7 @@ const SuggestedPeopleScreen: React.FC = () => { const onViewableItemsChanged = useCallback( ({viewableItems}: {viewableItems: ViewToken[]}) => { setHideStatusBar(viewableItems[0].index !== 0); + stausBarRef.current = viewableItems[0].index !== 0; }, [], ); -- cgit v1.2.3-70-g09d2 From 47222416634dc7037c378463c6958d3dfceb039d Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 26 Feb 2021 13:10:20 -0800 Subject: fixed --- src/components/profile/ProfilePreview.tsx | 6 ++++++ src/components/suggestedPeople/MutualFriends.tsx | 1 + 2 files changed, 7 insertions(+) (limited to 'src') diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 02ab94e7..2f107609 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -37,12 +37,14 @@ interface ProfilePreviewProps extends ViewProps { profilePreview: ProfilePreviewType; previewType: PreviewType; screenType: ScreenType; + setMFDrawer?: Function; } const ProfilePreview: React.FC = ({ profilePreview: {username, first_name, last_name, id, thumbnail_url}, previewType, screenType, + setMFDrawer, }) => { const navigation = useNavigation(); const {user: loggedInUser} = useSelector((state: RootState) => state.user); @@ -139,6 +141,10 @@ const ProfilePreview: React.FC = ({ ); } + if (setMFDrawer) { + setMFDrawer(false); + } + navigation.push('Profile', { userXId, screenType, diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx index fdda104a..f72104d4 100644 --- a/src/components/suggestedPeople/MutualFriends.tsx +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -70,6 +70,7 @@ const MutualFriends: React.FC = ({ previewType={'Suggested People Drawer'} screenType={ScreenType.SuggestedPeople} profilePreview={profilePreview} + setMFDrawer={setDrawerVisible} /> ))} -- cgit v1.2.3-70-g09d2 From 8e48253d51f10fde40af25868a45a4c1a2fa8265 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 26 Feb 2021 13:16:20 -0800 Subject: comment --- src/components/profile/ProfilePreview.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 2f107609..0021b1c6 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -141,6 +141,7 @@ const ProfilePreview: React.FC = ({ ); } + // Close Mutual Friends drawer on suggested people upon navigation if (setMFDrawer) { setMFDrawer(false); } -- cgit v1.2.3-70-g09d2 From d33382603f4122147f6d1c715056446936a39c1b Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Fri, 26 Feb 2021 17:26:43 -0500 Subject: Fix export naming typo --- src/components/common/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 95854ba8..e1543cd8 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -15,7 +15,7 @@ export {default as ComingSoon} from './ComingSoon'; export {default as PostCarousel} from './PostCarousel'; export {default as TaggDatePicker} from './TaggDatePicker'; export {default as BottomDrawer} from './BottomDrawer'; -export {default as TaggLoadingTndicator} from './TaggLoadingIndicator'; +export {default as TaggLoadingIndicator} from './TaggLoadingIndicator'; export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer'; export {default as TaggPopUp} from './TaggPopup'; export {default as TaggPrompt} from './TaggPrompt'; -- cgit v1.2.3-70-g09d2 From 6083aa78b0b2b7c8b5a9a79381f68297bdb2e189 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Fri, 26 Feb 2021 17:58:08 -0500 Subject: Add loading indicator for when SP are loading --- .../suggestedPeople/SuggestedPeopleScreen.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index c2aab1b5..1844f6ee 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -21,7 +21,12 @@ 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 { + TabsGradient, + TaggsBar, + TaggLoadingIndicator, + Background, +} from '../../components'; import {MutualFriends} from '../../components/suggestedPeople'; import {SP_PAGE_SIZE} from '../../constants'; import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen'; @@ -35,6 +40,7 @@ import { ProfilePreviewType, ScreenType, SuggestedPeopleDataType, + BackgroundGradientType, } from '../../types'; import { fetchUserX, @@ -70,6 +76,13 @@ const SuggestedPeopleScreen: React.FC = () => { const [refreshing, setRefreshing] = useState(false); const [shouldResetData, setShouldResetData] = useState(false); const [hideStatusBar, setHideStatusBar] = useState(false); + // boolean for showing/hiding loading indicator + const [loading, setLoading] = useState(true); + + // set loading to false once there are people to display + useEffect(() => { + people.length ? setLoading(false) : setLoading(true); + }, [people]); // loads data and append it to users based on current page useEffect(() => { @@ -291,6 +304,11 @@ const SuggestedPeopleScreen: React.FC = () => { return suggested_people_linked === 0 ? ( + ) : loading ? ( + <> + + + ) : ( <> 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 ( - <> -