Merge pull request #435 from shravyaramesh/tma843-fix-invite-system

[TMA-843] Added invites to header, organized imports

1 files changed, 30 insertions, 13 deletions

diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
index bf91e8f3..4f6319f7 100644
--- a/src/screens/profile/InviteFriendsScreen.tsx
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -1,4 +1,4 @@
-import {RouteProp} from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useMemo, useState} from 'react';
 import {
   FlatList,
@@ -18,8 +18,11 @@ import Animated from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Feather';
 import {TabsGradient} from '../../components';
 import {InviteFriendTile} from '../../components/friends';
-import {MainStackParams} from '../../routes';
-import {usersFromContactsService} from '../../services/UserFriendsService';
+import {headerBarOptions} from '../../routes';
+import {
+  getRemainingInviteCount,
+  usersFromContactsService,
+} from '../../services/UserFriendsService';
 import {ProfilePreviewType} from '../../types';
 import {
   extractContacts,
@@ -43,16 +46,8 @@ export type SearchResultType = {
   pendingUsers: InviteContactType[];
 };
 
-type InviteFriendsScreenRouteProp = RouteProp<
-  MainStackParams,
-  'InviteFriendsScreen'
->;
-
-interface InviteFriendsScreenProps {
-  route: InviteFriendsScreenRouteProp;
-}
-
-const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
+const InviteFriendsScreen: React.FC = () => {
+  const navigation = useNavigation();
   const [usersFromContacts, setUsersFromContacts] = useState<
     ProfilePreviewType[]
   >([]);
@@ -63,6 +58,24 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
     pendingUsers: pendingUsers,
   });
   const [query, setQuery] = useState('');
+  const [invitesLeft, setInvitesLeft] = useState(0);
+
+  useEffect(() => {
+    // Get number of invites from the backend and set the state
+    const getInitialInvitesCount = async () => {
+      const intialInvites = await getRemainingInviteCount();
+      setInvitesLeft(intialInvites);
+    };
+    getInitialInvitesCount();
+  }, []);
+
+  useEffect(
+    () =>
+      navigation.setOptions({
+        ...headerBarOptions('black', `You have ${invitesLeft} Invites`),
+      }),
+    [invitesLeft],
+  );
 
   useEffect(() => {
     const handleFindFriends = () => {
@@ -132,6 +145,8 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
           <InviteFriendTile
             item={item}
             remind={true}
+            invitesLeft={invitesLeft}
+            setInvitesLeft={setInvitesLeft}
             results={results}
             setResults={setResults}
           />
@@ -153,6 +168,8 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
           <InviteFriendTile
             item={item}
             remind={false}
+            invitesLeft={invitesLeft}
+            setInvitesLeft={setInvitesLeft}
             results={results}
             setResults={setResults}
           />