Merge pull request #261 from IvanIFChen/hotfix-sp-people-state

[HOTFIX] Fixed SP state inconsistencies

2 files changed, 81 insertions, 90 deletions

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 195604a3..cec76d00 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, {useCallback, useEffect, useState} from 'react';
+import React, {memo, useCallback, useEffect, useState} from 'react';
 import {
   FlatList,
   ListRenderItemInfo,
@@ -52,59 +51,58 @@ 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 [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);
     });
   };
 
@@ -120,10 +118,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(() => {
@@ -131,10 +130,6 @@ const SuggestedPeopleScreen: React.FC = () => {
     });
   };
 
-  const onRefresh = useCallback(() => {
-    resetPage();
-  }, []);
-
   useFocusEffect(
     useCallback(() => {
       const navigateToAnimatedTutorial = () => {
@@ -154,40 +149,37 @@ const SuggestedPeopleScreen: React.FC = () => {
   //   [],
   // );
 
-  const SPBody = ({
-    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>
-                {/* TODO: Finish me ?! */}
-                {/* <TouchableOpacity
+  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>
+                  {/* TODO: Finish me ?! */}
+                  {/* <TouchableOpacity
                 activeOpacity={0.5}
                 // TODO: Call function to Add Friend
                 onPress={() => console.log('Call add friend function')}>
@@ -195,25 +187,26 @@ const SuggestedPeopleScreen: React.FC = () => {
                   <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
                 </View>
               </TouchableOpacity> */}
+                </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);
       }