1 files changed, 68 insertions, 28 deletions

diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
index e1f739c5..87b00aaf 100644
--- a/src/screens/profile/InviteFriendsScreen.tsx
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -1,19 +1,28 @@
-import React, {useEffect, useState} from 'react';
+import {RouteProp} from '@react-navigation/native';
+import React, {useEffect, useMemo, useState} from 'react';
 import {
-  View,
-  Text,
-  TouchableOpacity,
-  SafeAreaView,
-  StyleSheet,
-  TextInput,
   FlatList,
   Keyboard,
   Linking,
+  SafeAreaView,
+  ScrollView,
   StatusBar,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
   TouchableWithoutFeedback,
-  ScrollView,
+  View,
 } from 'react-native';
+import {checkPermission} from 'react-native-contacts';
+import Animated from 'react-native-reanimated';
+import Icon from 'react-native-vector-icons/Feather';
 import {useDispatch, useStore} from 'react-redux';
+import {ProfilePreview, TabsGradient} from '../../components';
+import {InviteFriendTile} from '../../components/friends';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {MainStackParams} from '../../routes';
+import {usersFromContactsService} from '../../services/UserFriendsService';
 import {ProfilePreviewType} from '../../types';
 import {
   extractContacts,
@@ -25,15 +34,6 @@ import {
   SCREEN_WIDTH,
   StatusBarHeight,
 } from '../../utils';
-import {checkPermission} from 'react-native-contacts';
-import {usersFromContactsService} from '../../services/UserFriendsService';
-import {ProfilePreview, TabsGradient} from '../../components';
-import Animated from 'react-native-reanimated';
-import Icon from 'react-native-vector-icons/Feather';
-import {InviteFriendTile} from '../../components/friends';
-import {TAGG_LIGHT_BLUE} from '../../constants';
-import {MainStackParams} from '../../routes';
-import {RouteProp} from '@react-navigation/native';
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
 export type InviteContactType = {
@@ -42,9 +42,10 @@ export type InviteContactType = {
   phoneNumber: string;
 };
 
-type SearchResultType = {
+export type SearchResultType = {
   usersFromContacts: ProfilePreviewType[];
   nonUsersFromContacts: InviteContactType[];
+  pendingUsers: InviteContactType[];
 };
 
 type InviteFriendsScreenRouteProp = RouteProp<
@@ -64,9 +65,11 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
     ProfilePreviewType[]
   >([]);
   const [nonUsersFromContacts, setNonUsersFromContacts] = useState<[]>([]);
+  const [pendingUsers, setPendingUsers] = useState<[]>([]);
   const [results, setResults] = useState<SearchResultType>({
     usersFromContacts: usersFromContacts,
     nonUsersFromContacts: nonUsersFromContacts,
+    pendingUsers: pendingUsers,
   });
   const [query, setQuery] = useState('');
 
@@ -81,6 +84,7 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
           setResults({
             usersFromContacts: response.existing_tagg_users,
             nonUsersFromContacts: response.invite_from_contacts,
+            pendingUsers: response.pending_users,
           });
         } else {
           Linking.openSettings();
@@ -120,6 +124,7 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
         setResults({
           usersFromContacts: usersFromContacts,
           nonUsersFromContacts: nonUsersFromContacts,
+          pendingUsers: pendingUsers,
         });
       }
     };
@@ -168,6 +173,48 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
     </>
   );
 
+  const PendingList = useMemo(
+    () => (
+      <FlatList
+        contentContainerStyle={styles.nonUsersFlatListContainer}
+        showsVerticalScrollIndicator={false}
+        scrollEnabled={false}
+        data={results.pendingUsers}
+        keyExtractor={(item) => item.phoneNumber}
+        renderItem={({item}) => (
+          <InviteFriendTile
+            item={item}
+            remind={true}
+            results={results}
+            setResults={setResults}
+          />
+        )}
+      />
+    ),
+    [results.pendingUsers],
+  );
+
+  const InviteList = useMemo(
+    () => (
+      <FlatList
+        contentContainerStyle={styles.nonUsersFlatListContainer}
+        showsVerticalScrollIndicator={false}
+        scrollEnabled={false}
+        data={results.nonUsersFromContacts}
+        keyExtractor={(item) => item.phoneNumber}
+        renderItem={({item}) => (
+          <InviteFriendTile
+            item={item}
+            remind={false}
+            results={results}
+            setResults={setResults}
+          />
+        )}
+      />
+    ),
+    [results.nonUsersFromContacts],
+  );
+
   return (
     <View style={styles.mainContainer}>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
@@ -210,19 +257,12 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
               </Animated.View>
             </View>
             <View style={styles.subheader}>
-              <Text style={styles.subheaderText}>Contacts on Tagg</Text>
-              <UsersFromContacts />
+              <Text style={styles.subheaderText}>Pending Users</Text>
+              {PendingList}
             </View>
             <View style={styles.subheader}>
               <Text style={styles.subheaderText}>Invite your friends!</Text>
-              <FlatList
-                contentContainerStyle={styles.nonUsersFlatListContainer}
-                showsVerticalScrollIndicator={false}
-                scrollEnabled={false}
-                data={results.nonUsersFromContacts}
-                keyExtractor={(item) => item.phoneNumber}
-                renderItem={({item}) => <InviteFriendTile item={item} />}
-              />
+              {InviteList}
             </View>
           </ScrollView>
         </SafeAreaView>