pagination mostly working

1 files changed, 103 insertions, 49 deletions

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 3437cd85..d61ba2fe 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,22 +1,25 @@
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import React, {useCallback} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {
+  FlatList,
+  ListRenderItemInfo,
+  RefreshControl,
   StatusBar,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
 } from 'react-native';
 import {Image} from 'react-native-animatable';
 import Animated from 'react-native-reanimated';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import {useSelector} from 'react-redux';
-import {TabsGradient, TaggsBar} from '../../components';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {TabsGradient} 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 {RootState} from '../../store/rootReducer';
-import {ScreenType} from '../../types';
-import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {ScreenType, SuggestedPeopleDataType} from '../../types';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * Bare bones for suggested people consisting of:
@@ -24,17 +27,40 @@ import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
  */
 
 const SuggestedPeopleScreen: React.FC = () => {
+  const y = Animated.useValue(0);
+  const navigation = useNavigation();
+  const state: RootState = useStore().getState();
+  const dispatch = useDispatch();
+  const screenType = ScreenType.SuggestedPeople;
   const {suggested_people_linked} = useSelector(
     (state: RootState) => state.user.profile,
   ) ?? {suggested_people_linked: -1};
-  const y = Animated.useValue(0);
+  const [users, setUsers] = useState<SuggestedPeopleDataType[]>([]);
+  const [page, setPage] = useState(0);
+  const [refreshing, setRefreshing] = useState(false);
 
-  // Can be removed once firstname, username props are received
-  const firstName = 'Sarah';
+  // loads data and append it to users based on current page
+  useEffect(() => {
+    const loadNextPage = async () =>
+      await getSuggestedPeople(SP_PAGE_SIZE, page * SP_PAGE_SIZE);
+    loadNextPage().then((newUsers) => {
+      setUsers(users.concat(newUsers));
+    });
+  }, [page]);
 
-  // Adviced to maintain username as a variable here to append @ symbol for maintainability
-  const username = '@' + 'sarahmiller';
-  const navigation = useNavigation();
+  const resetPage = () => {
+    const reset = async () => {
+      await setPage(0);
+    };
+    setRefreshing(true);
+    reset().then(() => {
+      setRefreshing(false);
+    });
+  };
+
+  const onRefresh = useCallback(() => {
+    resetPage();
+  }, []);
 
   useFocusEffect(
     useCallback(() => {
@@ -48,47 +74,74 @@ const SuggestedPeopleScreen: React.FC = () => {
     }, [navigation, suggested_people_linked]),
   );
 
-  const mainContent = () => (
-    <SafeAreaView>
-      <StatusBar barStyle={'light-content'} />
-      <Image
-        // !!! Displaying Sarah Miller's image
-        source={require('../../assets/images/sarah_miller_full.jpeg')}
-        style={styles.image}
-      />
-      <View style={styles.mainContainer}>
-        <Text style={styles.title}>Suggested People</Text>
-        <View style={styles.body}>
-          <View style={styles.addUserContainer}>
-            <View style={styles.nameInfoContainer}>
-              <Text style={styles.firstName}>{firstName}</Text>
-              <Text style={styles.username}>{username}</Text>
-            </View>
-            <TouchableOpacity
-              activeOpacity={0.5}
-              onPress={() => console.log('Call add friend function')}>
-              <View style={styles.addButton}>
-                <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
+  const SPBody = ({
+    item,
+  }: {
+    item: ListRenderItemInfo<SuggestedPeopleDataType>;
+  }) => {
+    const data = item.item;
+    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',
+          }}
+          // source={require('../../assets/images/sarah_miller_full.jpeg')}
+          style={styles.image}
+        />
+        <View style={styles.mainContainer}>
+          <Text style={styles.title}>Suggested People</Text>
+          <View style={styles.body}>
+            <View style={styles.addUserContainer}>
+              <View style={styles.nameInfoContainer}>
+                <Text style={styles.firstName}>{data.user.first_name}</Text>
+                <Text style={styles.username}>{data.user.username}</Text>
               </View>
-            </TouchableOpacity>
+              {/* TODO: uncomment me */}
+              {/* <TouchableOpacity
+                activeOpacity={0.5}
+                // TODO: Call function to Add Friend
+                onPress={() => console.log('Call add friend function')}>
+                <View style={styles.addButton}>
+                  <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
+                </View>
+              </TouchableOpacity> */}
+            </View>
+            {/* {loadedStatus[data.user.username] && (
+              <TaggsBar
+                y={y}
+                userXId={undefined}
+                profileBodyHeight={0}
+                screenType={ScreenType.SuggestedPeople}
+              />
+            )} */}
+            <MutualFriends user={data.user} friends={data.mutual_friends} />
           </View>
-          <TaggsBar
-            y={y}
-            userXId={undefined}
-            profileBodyHeight={0}
-            screenType={ScreenType.SuggestedPeople}
-          />
-          <MutualFriends />
         </View>
-      </View>
-      <TabsGradient />
-    </SafeAreaView>
-  );
+      </>
+    );
+  };
 
   return suggested_people_linked === 0 ? (
     <SuggestedPeopleOnboardingStackScreen />
   ) : (
-    mainContent()
+    <>
+      <StatusBar barStyle={'light-content'} />
+      <FlatList
+        data={users}
+        renderItem={(item) => <SPBody item={item} />}
+        keyExtractor={(item, index) => index.toString()}
+        showsVerticalScrollIndicator={false}
+        onEndReached={() => setPage(page + 1)}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        pagingEnabled
+      />
+      <TabsGradient />
+    </>
   );
 };
 
@@ -96,7 +149,8 @@ const styles = StyleSheet.create({
   mainContainer: {
     flexDirection: 'column',
     width: SCREEN_WIDTH * 0.9,
-    height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88,
+    height: SCREEN_HEIGHT,
+    paddingVertical: '15%',
     justifyContent: 'space-between',
     alignSelf: 'center',
     marginHorizontal: '5%',
@@ -171,7 +225,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'flex-start',
-    marginBottom: '5%',
+    marginBottom: '10%',
   },
   body: {},
 });