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

[HOTFIX] Fixed SP state inconsistencies

7 files changed, 97 insertions, 99 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);
       }
diff --git a/src/services/MomentCategoryService.ts b/src/services/MomentCategoryService.ts
index bb2c5542..edd13ad0 100644
--- a/src/services/MomentCategoryService.ts
+++ b/src/services/MomentCategoryService.ts
@@ -19,7 +19,6 @@ export const loadMomentCategories: (
       const data = await response.json();
       categories = data.categories;
     } else {
-      console.log('Could not load categories!');
       return [];
     }
   } catch (err) {
diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts
index fff35370..bfc4933f 100644
--- a/src/services/UserProfileService.ts
+++ b/src/services/UserProfileService.ts
@@ -145,8 +145,6 @@ export const loadSocialPosts: (
       accountData.handle = body.handle;
       accountData.posts = body.posts;
       accountData.profile_pic = body.profile_pic;
-    } else {
-      throw 'Unable to fetch posts data from ' + socialType;
     }
   } catch (error) {
     console.log(error);
diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index 3511dcf3..a9f9d945 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -13,6 +13,7 @@ import {
   setNewNotificationReceived,
   setNewVersionAvailable,
   setReplyPosted,
+  setSuggestedPeopleImage,
   setSuggestedPeopleLinked,
   socialEdited,
   userDetailsFetched,
@@ -163,13 +164,16 @@ export const logout = (): ThunkAction<
   }
 };
 
-export const uploadedSuggestedPeoplePhoto = (): ThunkAction<
-  Promise<void>,
-  RootState,
-  unknown,
-  Action<string>
-> => async (dispatch) => {
+export const uploadedSuggestedPeoplePhoto = (
+  imageUri: string,
+): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
+  dispatch,
+) => {
   try {
+    await dispatch({
+      type: setSuggestedPeopleImage.type,
+      payload: {suggestedPeopleImage: imageUri},
+    });
     dispatch({
       type: setSuggestedPeopleLinked.type,
       payload: {suggested_people_linked: 1},
diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts
index 408de39e..4b61a2b1 100644
--- a/src/store/initialStates.ts
+++ b/src/store/initialStates.ts
@@ -47,6 +47,7 @@ export const NO_USER_DATA = {
   isOnboardedUser: false,
   newVersionAvailable: false,
   newNotificationReceived: false,
+  suggestedPeopleImage: '',
   replyPosted: <CommentThreadType | undefined>undefined,
 };
 
diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts
index ea9294ec..587aa374 100644
--- a/src/store/reducers/userReducer.ts
+++ b/src/store/reducers/userReducer.ts
@@ -66,6 +66,10 @@ const userDataSlice = createSlice({
     setNewVersionAvailable: (state, action) => {
       state.newVersionAvailable = action.payload.newVersionAvailable;
     },
+
+    setSuggestedPeopleImage: (state, action) => {
+      state.suggestedPeopleImage = action.payload.suggestedPeopleImage;
+    },
   },
 });
 
@@ -79,5 +83,6 @@ export const {
   setNewVersionAvailable,
   setNewNotificationReceived,
   setReplyPosted,
+  setSuggestedPeopleImage,
 } = userDataSlice.actions;
 export const userDataReducer = userDataSlice.reducer;