Added invites to header, organized imports

3 files changed, 46 insertions, 13 deletions

diff --git a/src/components/friends/InviteFriendTile.tsx b/src/components/friends/InviteFriendTile.tsx
index 48f65a94..d384ed27 100644
--- a/src/components/friends/InviteFriendTile.tsx
+++ b/src/components/friends/InviteFriendTile.tsx
@@ -1,3 +1,4 @@
+import {useNavigation} from '@react-navigation/core';
 import React, {useEffect, useState} from 'react';
 import {
   Alert,
@@ -9,11 +10,10 @@ import {
   View,
 } from 'react-native';
 import {useSelector} from 'react-redux';
-import {RootState} from 'src/store/rootReducer';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {
+  ERROR_FAILED_TO_INVITE_CONTACT,
   ERROR_NO_CONTACT_INVITE_LEFT,
-  ERROR_SOMETHING_WENT_WRONG,
   INVITE_USER_SMS_BODY,
   SUCCESS_CONFIRM_INVITE_CONTACT_MESSAGE,
   SUCCESS_CONFIRM_INVITE_CONTACT_TITLE,
@@ -23,7 +23,8 @@ import {
   InviteContactType,
   SearchResultType,
 } from '../../screens/profile/InviteFriendsScreen';
-import {getRemainingInviteCount, inviteFriendService} from '../../services';
+import {inviteFriendService} from '../../services';
+import {RootState} from '../../store/rootReducer';
 import {normalize} from '../../utils';
 
 interface InviteFriendTileProps {
@@ -31,18 +32,22 @@ interface InviteFriendTileProps {
   remind: boolean;
   results: SearchResultType;
   setResults: Function;
+  invitesLeft: number;
+  setInvitesLeft: (updateInvites: number) => void;
 }
 
 const InviteFriendTile: React.FC<InviteFriendTileProps> = ({
   item,
+  invitesLeft,
+  setInvitesLeft,
   remind,
   results,
   setResults,
 }) => {
+  const navigation = useNavigation();
   const [invited, setInvited] = useState<boolean>(remind);
   const {name} = useSelector((state: RootState) => state.user.profile);
   const [formatedPhoneNumber, setFormattedPhoneNumber] = useState<string>('');
-
   const handleInviteFriend = async () => {
     // If user has been invited already, don't show alerts and change invite count
     if (invited) {
@@ -54,6 +59,7 @@ const InviteFriendTile: React.FC<InviteFriendTileProps> = ({
       );
       const inviteCode = response?.invite_code;
       if (inviteCode) {
+        // Open iMessage
         Linking.openURL(
           `sms:${item.phoneNumber}&body=${INVITE_USER_SMS_BODY(
             item.firstName,
@@ -63,12 +69,11 @@ const InviteFriendTile: React.FC<InviteFriendTileProps> = ({
         );
       }
     } else {
-      const invites_left = await getRemainingInviteCount();
-      if (invites_left < 1) {
+      if (invitesLeft < 1) {
         Alert.alert(ERROR_NO_CONTACT_INVITE_LEFT);
       }
       Alert.alert(
-        SUCCESS_CONFIRM_INVITE_CONTACT_TITLE(invites_left),
+        SUCCESS_CONFIRM_INVITE_CONTACT_TITLE(String(invitesLeft)),
         SUCCESS_CONFIRM_INVITE_CONTACT_MESSAGE,
         [
           {text: 'No!', style: 'cancel'},
@@ -83,7 +88,8 @@ const InviteFriendTile: React.FC<InviteFriendTileProps> = ({
               );
               const inviteCode = response?.invite_code;
               if (!inviteCode) {
-                Alert.alert(ERROR_SOMETHING_WENT_WRONG);
+                setInvited(false);
+                Alert.alert(ERROR_FAILED_TO_INVITE_CONTACT);
               }
               // Add user to Pending Users list
               const newPendingUser: InviteContactType = {
@@ -110,6 +116,7 @@ const InviteFriendTile: React.FC<InviteFriendTileProps> = ({
               // Update results after navigating out of the app
               setTimeout(() => {
                 setInvited(true);
+                setInvitesLeft(invitesLeft - 1);
                 setResults({
                   ...results,
                   pendingUsers: [...results.pendingUsers, newPendingUser],
@@ -117,7 +124,7 @@ const InviteFriendTile: React.FC<InviteFriendTileProps> = ({
                 });
               }, 500);
 
-              if (invites_left === 1) {
+              if (invitesLeft === 1) {
                 Alert.alert(SUCCESS_LAST_CONTACT_INVITE);
               }
             },
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 2ce64aed..a1064f49 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -21,6 +21,7 @@ export const ERROR_FAILED_LOGIN_INFO = 'Login failed, please try re-entering you
 export const ERROR_FAILED_TO_COMMENT = 'Unable to post comment, refresh and try again!';
 export const ERROR_FAILED_TO_CREATE_CHANNEL = 'Failed to create a channel, Please try again!';
 export const ERROR_FAILED_TO_DELETE_COMMENT = 'Unable to delete comment, refresh and try again!';
+export const ERROR_FAILED_TO_INVITE_CONTACT = `Unable to invite contact, refresh and try again!`;
 export const ERROR_INVALID_INVITATION_CODE = 'Invitation code invalid, try again or talk to the friend that sent it 😬';
 export const ERROR_INVALID_LOGIN = 'Invalid login, Please login again';
 export const ERROR_INVALID_PWD_CODE = 'Looks like you have entered the wrong code, please try again';
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
index bf91e8f3..24a4c821 100644
--- a/src/screens/profile/InviteFriendsScreen.tsx
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -1,4 +1,4 @@
-import {RouteProp} from '@react-navigation/native';
+import {RouteProp, 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, MainStackParams} from '../../routes';
+import {
+  getRemainingInviteCount,
+  usersFromContactsService,
+} from '../../services/UserFriendsService';
 import {ProfilePreviewType} from '../../types';
 import {
   extractContacts,
@@ -52,7 +55,8 @@ interface InviteFriendsScreenProps {
   route: InviteFriendsScreenRouteProp;
 }
 
-const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
+const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
+  const navigation = useNavigation();
   const [usersFromContacts, setUsersFromContacts] = useState<
     ProfilePreviewType[]
   >([]);
@@ -63,7 +67,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 = () => {
       extractContacts().then(async (retrievedContacts) => {
@@ -132,6 +153,8 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
           <InviteFriendTile
             item={item}
             remind={true}
+            invitesLeft={invitesLeft}
+            setInvitesLeft={setInvitesLeft}
             results={results}
             setResults={setResults}
           />
@@ -153,6 +176,8 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
           <InviteFriendTile
             item={item}
             remind={false}
+            invitesLeft={invitesLeft}
+            setInvitesLeft={setInvitesLeft}
             results={results}
             setResults={setResults}
           />