aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/suggestedPeople/AnimatedTutorial.tsx29
-rw-r--r--src/screens/suggestedPeople/SuggestedPeopleScreen.tsx167
-rw-r--r--src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx4
3 files changed, 93 insertions, 107 deletions
diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx
index bf34ba6e..f7d62cee 100644
--- a/src/screens/suggestedPeople/AnimatedTutorial.tsx
+++ b/src/screens/suggestedPeople/AnimatedTutorial.tsx
@@ -3,8 +3,8 @@ import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Image} from 'react-native-animatable';
import {SafeAreaView} from 'react-native-safe-area-context';
+import GestureRecognizer from 'react-native-swipe-gestures';
import {useDispatch, useSelector} from 'react-redux';
-import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {suggestedPeopleAnimatedTutorialFinished} from '../../store/actions/user';
import {RootState} from '../../store/rootReducer';
import {isIPhoneX, SCREEN_WIDTH} from '../../utils';
@@ -20,22 +20,19 @@ const AnimatedTutorial: React.FC = () => {
};
return (
<SafeAreaView>
- <View style={styles.container}>
- <CloseIcon
- height={'10%'}
- width={'10%'}
- color={'white'}
- style={styles.closeButton}
- onPress={handleCloseAnimationTutorial}
- />
- <View style={styles.textContainer}>
- <Text style={styles.text}>{'Swipe up to discover more people!'}</Text>
+ <GestureRecognizer onSwipeUp={handleCloseAnimationTutorial}>
+ <View style={styles.container}>
+ <View style={styles.textContainer}>
+ <Text style={styles.text}>
+ {'Swipe up to discover more people!'}
+ </Text>
+ </View>
+ <Image
+ source={require('../../assets/gifs/swipe-animation.gif')}
+ style={styles.swipeGif}
+ />
</View>
- <Image
- source={require('../../assets/gifs/swipe-animation.gif')}
- style={styles.swipeGif}
- />
- </View>
+ </GestureRecognizer>
</SafeAreaView>
);
};
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 42ca3247..7f7d9d07 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,6 +1,5 @@
-import AsyncStorage from '@react-native-community/async-storage';
import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import React, {Fragment, useCallback, useEffect, useState} from 'react';
+import React, {memo, Fragment, useCallback, useEffect, useState} from 'react';
import {
FlatList,
ListRenderItemInfo,
@@ -55,60 +54,59 @@ const SuggestedPeopleScreen: React.FC = () => {
const {userId: loggedInUserId} = useSelector(
(state: RootState) => state.user.user,
);
+ 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(() => {
- // console.log('current page', page);
- loadMore(false);
+ loadMore();
}, [page]);
- useFocusEffect(() => {
+ useEffect(() => {
+ if (shouldResetData) {
+ if (page !== 0) {
+ setPage(0);
+ } else {
+ loadMore();
+ }
+ }
+ }, [shouldResetData]);
+
+ useEffect(() => {
const appendSelf = async () => {
- AsyncStorage.getItem('suggested_people_url').then((image) => {
- console.log('image path: ', image);
- const self = {
- user: getUserAsProfilePreviewType(
- state.user.user,
- state.user.profile,
- ),
- mutual_friends: [],
- badges: [],
- social_links: [],
- suggested_people_url: image ? image : '',
- };
- people.unshift(self);
- setPeople(people);
- });
+ const self = {
+ user: getUserAsProfilePreviewType(state.user.user, state.user.profile),
+ mutual_friends: [],
+ badges: [],
+ social_links: [],
+ suggested_people_url: suggestedPeopleImage,
+ };
+ people.unshift(self);
+ setPeople(people);
};
if (suggested_people_linked < 2) {
if (people.length > 1 && people[0].user.id !== loggedInUserId) {
appendSelf();
}
}
- });
+ }, [suggestedPeopleImage]);
- const loadMore = async (resetData: boolean) => {
+ const loadMore = async () => {
const loadNextPage = async () =>
await getSuggestedPeople(
SP_PAGE_SIZE,
- resetData ? 0 : page * SP_PAGE_SIZE,
+ shouldResetData ? 0 : page * SP_PAGE_SIZE,
);
loadNextPage().then((newUsers) => {
loadUserDataToStore(newUsers.map((ppl) => ppl.user));
- let newPeople = [];
- if (resetData) {
- newPeople = newUsers;
- setPage(0);
- } else {
- newPeople = people.concat(newUsers);
- }
- setPeople(newPeople);
+ setPeople(shouldResetData ? newUsers : people.concat(newUsers));
+ setShouldResetData(false);
});
};
@@ -124,10 +122,11 @@ const SuggestedPeopleScreen: React.FC = () => {
};
await Promise.all(users.map((user) => loadUserData(user)));
};
- const resetPage = () => {
+
+ const onRefresh = () => {
const reset = async () => {
await dispatch(resetScreenType(screenType));
- loadMore(true);
+ setShouldResetData(true);
};
setRefreshing(true);
reset().then(() => {
@@ -135,10 +134,6 @@ const SuggestedPeopleScreen: React.FC = () => {
});
};
- const onRefresh = useCallback(() => {
- resetPage();
- }, []);
-
useFocusEffect(
useCallback(() => {
const navigateToAnimatedTutorial = () => {
@@ -224,60 +219,56 @@ const SuggestedPeopleScreen: React.FC = () => {
}
};
- const SPBody = ({
- item,
- }: {
- item: ListRenderItemInfo<SuggestedPeopleDataType>;
- }) => {
- const data = item.item;
- setDisplayedUser(item.item);
- const firstItem = item.index === 0;
- return (
- <>
- <StatusBar barStyle={'light-content'} hidden={hideStatusBar} />
- <Image
- source={{
- uri: data.suggested_people_url,
- }}
- style={styles.image}
- />
- <View style={styles.mainContainer}>
- <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
- <View style={styles.body}>
- <View style={styles.marginManager}>
- <View style={styles.addUserContainer}>
- <TouchableOpacity
- onPress={() => {
- navigation.push('Profile', {
- userXId: data.user.id,
- screenType,
- });
- }}
- style={styles.nameInfoContainer}>
- <Text style={styles.firstName}>{data.user.first_name}</Text>
- <Text style={styles.username}>@{data.user.username}</Text>
- </TouchableOpacity>
- {/* Friendship Button */}
- {displayButton(data)}
+ const SPBody = memo(
+ ({item}: {item: ListRenderItemInfo<SuggestedPeopleDataType>}) => {
+ const data = item.item;
+ const firstItem = item.index === 0;
+ return (
+ <>
+ <StatusBar barStyle={'light-content'} hidden={hideStatusBar} />
+ <Image
+ source={{
+ uri: data.suggested_people_url,
+ }}
+ style={styles.image}
+ />
+ <View style={styles.mainContainer}>
+ <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
+ <View style={styles.body}>
+ <View style={styles.marginManager}>
+ <View style={styles.addUserContainer}>
+ <TouchableOpacity
+ onPress={() => {
+ navigation.push('Profile', {
+ userXId: data.user.id,
+ screenType,
+ });
+ }}
+ style={styles.nameInfoContainer}>
+ <Text style={styles.firstName}>{data.user.first_name}</Text>
+ <Text style={styles.username}>@{data.user.username}</Text>
+ </TouchableOpacity>
+ {displayButton(data)}
+ </View>
+ </View>
+ <TaggsBar
+ y={y}
+ userXId={
+ data.user.id === loggedInUserId ? undefined : data.user.id
+ }
+ profileBodyHeight={0}
+ screenType={screenType}
+ whiteRing={true}
+ />
+ <View style={styles.marginManager}>
+ <MutualFriends user={data.user} friends={data.mutual_friends} />
</View>
- </View>
- <TaggsBar
- y={y}
- userXId={
- data.user.id === loggedInUserId ? undefined : data.user.id
- }
- profileBodyHeight={0}
- screenType={screenType}
- whiteRing={true}
- />
- <View style={styles.marginManager}>
- <MutualFriends user={data.user} friends={data.mutual_friends} />
</View>
</View>
- </View>
- </>
- );
- };
+ </>
+ );
+ },
+ );
return suggested_people_linked === 0 ? (
<SuggestedPeopleOnboardingStackScreen />
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index 5b678969..c587e930 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -1,6 +1,5 @@
import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
-import AsyncStorage from '@react-native-community/async-storage';
import {
Alert,
Image,
@@ -76,8 +75,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
if (image) {
const success = await sendSuggestedPeoplePhoto(image);
if (success) {
- dispatch(uploadedSuggestedPeoplePhoto());
- await AsyncStorage.setItem('suggested_people_url', image);
+ dispatch(uploadedSuggestedPeoplePhoto(image));
} else {
Alert.alert(ERROR_UPLOAD);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-20 22:37:22 +0000