finished?!

3 files changed, 61 insertions, 22 deletions

diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
index 283ee6c5..fdda104a 100644
--- a/src/components/suggestedPeople/MutualFriends.tsx
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -12,7 +12,10 @@ interface MutualFriendsProps {
   friends: ProfilePreviewType[];
 }
 
-const MutualFriends: React.FC<MutualFriendsProps> = ({user, friends}) => {
+const MutualFriends: React.FC<MutualFriendsProps> = ({
+  user,
+  friends,
+}): JSX.Element => {
   // Getting list of first 4 friends to display on suggested people screen
   const friendsPreview = friends.slice(0, 4);
 
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index d61ba2fe..1199993b 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -12,14 +12,20 @@ import {
 import {Image} from 'react-native-animatable';
 import Animated from 'react-native-reanimated';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import {TabsGradient} from '../../components';
+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 {resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {ScreenType, SuggestedPeopleDataType} from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  ProfilePreviewType,
+  ScreenType,
+  SuggestedPeopleDataType,
+} from '../../types';
+import {fetchUserX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {userXInStore} from './../../utils/';
 
 /**
  * Bare bones for suggested people consisting of:
@@ -35,22 +41,54 @@ const SuggestedPeopleScreen: React.FC = () => {
   const {suggested_people_linked} = useSelector(
     (state: RootState) => state.user.profile,
   ) ?? {suggested_people_linked: -1};
-  const [users, setUsers] = useState<SuggestedPeopleDataType[]>([]);
+  const [people, setPeople] = useState<SuggestedPeopleDataType[]>([]);
   const [page, setPage] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
 
+  // DEBUG
+  useEffect(() => {
+    console.log(
+      'people updated',
+      people.map((ppl) => ppl.user.username),
+    );
+  }, [people]);
+
   // loads data and append it to users based on current page
   useEffect(() => {
+    console.log('current page', page);
+    loadMore(false);
+  }, [page]);
+
+  const loadMore = (resetData: boolean) => {
     const loadNextPage = async () =>
       await getSuggestedPeople(SP_PAGE_SIZE, page * SP_PAGE_SIZE);
     loadNextPage().then((newUsers) => {
-      setUsers(users.concat(newUsers));
+      if (resetData) {
+        setPeople([]);
+        setPage(0);
+      }
+      loadUserDataToStore(newUsers.map((ppl) => ppl.user));
+      setPeople(people.concat(newUsers));
     });
-  }, [page]);
+  };
 
+  const loadUserDataToStore = async (users: ProfilePreviewType[]) => {
+    const loadUserData = async (user: ProfilePreviewType) => {
+      if (!userXInStore(state, screenType, user.id)) {
+        await fetchUserX(
+          dispatch,
+          {userId: user.id, username: user.username},
+          screenType,
+        );
+      }
+    };
+    await Promise.all(users.map((user) => loadUserData(user)));
+    console.log('done loading');
+  };
   const resetPage = () => {
     const reset = async () => {
-      await setPage(0);
+      await dispatch(resetScreenType(screenType));
+      loadMore(true);
     };
     setRefreshing(true);
     reset().then(() => {
@@ -83,10 +121,8 @@ const SuggestedPeopleScreen: React.FC = () => {
     return (
       <>
         <Image
-          // tmp smiller image on s3 for now
           source={{
-            uri:
-              'https://tagg-dev.s3.us-east-2.amazonaws.com/suggestedPeople/sdp-53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d.png',
+            uri: data.suggested_people_url,
           }}
           // source={require('../../assets/images/sarah_miller_full.jpeg')}
           style={styles.image}
@@ -99,7 +135,7 @@ const SuggestedPeopleScreen: React.FC = () => {
                 <Text style={styles.firstName}>{data.user.first_name}</Text>
                 <Text style={styles.username}>{data.user.username}</Text>
               </View>
-              {/* TODO: uncomment me */}
+              {/* TODO: Finish me ?! */}
               {/* <TouchableOpacity
                 activeOpacity={0.5}
                 // TODO: Call function to Add Friend
@@ -109,14 +145,12 @@ const SuggestedPeopleScreen: React.FC = () => {
                 </View>
               </TouchableOpacity> */}
             </View>
-            {/* {loadedStatus[data.user.username] && (
-              <TaggsBar
-                y={y}
-                userXId={undefined}
-                profileBodyHeight={0}
-                screenType={ScreenType.SuggestedPeople}
-              />
-            )} */}
+            <TaggsBar
+              y={y}
+              userXId={data.user.id}
+              profileBodyHeight={0}
+              screenType={ScreenType.SuggestedPeople}
+            />
             <MutualFriends user={data.user} friends={data.mutual_friends} />
           </View>
         </View>
@@ -130,7 +164,7 @@ const SuggestedPeopleScreen: React.FC = () => {
     <>
       <StatusBar barStyle={'light-content'} />
       <FlatList
-        data={users}
+        data={people}
         renderItem={(item) => <SPBody item={item} />}
         keyExtractor={(item, index) => index.toString()}
         showsVerticalScrollIndicator={false}
@@ -151,6 +185,7 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH * 0.9,
     height: SCREEN_HEIGHT,
     paddingVertical: '15%',
+    paddingBottom: '20%',
     justifyContent: 'space-between',
     alignSelf: 'center',
     marginHorizontal: '5%',
@@ -225,7 +260,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'flex-start',
-    marginBottom: '10%',
+    marginBottom: '5%',
   },
   body: {},
 });
diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts
index 10fdad25..408de39e 100644
--- a/src/store/initialStates.ts
+++ b/src/store/initialStates.ts
@@ -128,6 +128,7 @@ export const EMPTY_SCREEN_TO_USERS_LIST: Record<
   [ScreenType.Profile]: EMPTY_USERX_LIST,
   [ScreenType.Search]: EMPTY_USERX_LIST,
   [ScreenType.Notifications]: EMPTY_USERX_LIST,
+  [ScreenType.SuggestedPeople]: EMPTY_USERX_LIST,
 };
 
 export const INITIAL_CATEGORIES_STATE = {