From 3978bd82db12a4606ebb9a60c15352fb14ee0055 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 23 Feb 2021 16:21:40 -0500
Subject: added sp image to store for profile preview, using React.memo to
 prevent UI updates

---
 .../suggestedPeople/SuggestedPeopleScreen.tsx      | 131 ++++++++++-----------
 .../SuggestedPeopleUploadPictureScreen.tsx         |   4 +-
 src/store/actions/user.ts                          |  16 ++-
 src/store/initialStates.ts                         |   1 +
 src/store/reducers/userReducer.ts                  |   5 +
 5 files changed, 78 insertions(+), 79 deletions(-)

(limited to 'src')

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 301e9d97..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,6 +51,7 @@ 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);
@@ -73,31 +73,24 @@ const SuggestedPeopleScreen: React.FC = () => {
     }
   }, [shouldResetData]);
 
-  useFocusEffect(() => {
+  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) {
-        console.log('appending self');
         appendSelf();
       }
     }
-  });
+  }, [suggestedPeopleImage]);
 
   const loadMore = async () => {
     const loadNextPage = async () =>
@@ -156,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')}>
@@ -197,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/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;
-- 
cgit v1.2.3-70-g09d2