aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/main/NotificationsScreen.tsx4
-rw-r--r--src/screens/profile/InviteFriendsScreen.tsx211
-rw-r--r--src/screens/profile/legacy/UsersFromContacts.tsx106
3 files changed, 201 insertions, 120 deletions
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 7e2f082c..bce48ef2 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -259,9 +259,7 @@ const NotificationsScreen: React.FC = () => {
onPress={async () => {
const permission = await checkPermission();
if (permission === 'authorized') {
- navigation.navigate('InviteFriendsScreen', {
- screenType: ScreenType.Profile,
- });
+ navigation.navigate('InviteFriendsScreen');
} else {
Alert.alert(
'"Tagg" Would Like to Access Your Contacts',
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
index e1f739c5..4f6319f7 100644
--- a/src/screens/profile/InviteFriendsScreen.tsx
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -1,23 +1,31 @@
-import React, {useEffect, useState} from 'react';
+import {useNavigation} 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,
TouchableWithoutFeedback,
- ScrollView,
+ View,
} from 'react-native';
-import {useDispatch, useStore} from 'react-redux';
+import {checkPermission} from 'react-native-contacts';
+import Animated from 'react-native-reanimated';
+import Icon from 'react-native-vector-icons/Feather';
+import {TabsGradient} from '../../components';
+import {InviteFriendTile} from '../../components/friends';
+import {headerBarOptions} from '../../routes';
+import {
+ getRemainingInviteCount,
+ usersFromContactsService,
+} from '../../services/UserFriendsService';
import {ProfilePreviewType} from '../../types';
import {
extractContacts,
- handleAddFriend,
HeaderHeight,
isIPhoneX,
normalize,
@@ -25,15 +33,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,33 +41,41 @@ export type InviteContactType = {
phoneNumber: string;
};
-type SearchResultType = {
- usersFromContacts: ProfilePreviewType[];
+export type SearchResultType = {
nonUsersFromContacts: InviteContactType[];
+ pendingUsers: InviteContactType[];
};
-type InviteFriendsScreenRouteProp = RouteProp<
- MainStackParams,
- 'InviteFriendsScreen'
->;
-
-interface InviteFriendsScreenProps {
- route: InviteFriendsScreenRouteProp;
-}
-
-const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
- const {screenType} = route.params;
- const dispatch = useDispatch();
- const state = useStore().getState();
+const InviteFriendsScreen: React.FC = () => {
+ const navigation = useNavigation();
const [usersFromContacts, setUsersFromContacts] = useState<
ProfilePreviewType[]
>([]);
const [nonUsersFromContacts, setNonUsersFromContacts] = useState<[]>([]);
+ const [pendingUsers] = useState<[]>([]);
const [results, setResults] = useState<SearchResultType>({
- usersFromContacts: usersFromContacts,
nonUsersFromContacts: nonUsersFromContacts,
+ 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 = () => {
@@ -79,8 +86,8 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
await setUsersFromContacts(response.existing_tagg_users);
await setNonUsersFromContacts(response.invite_from_contacts);
setResults({
- usersFromContacts: response.existing_tagg_users,
nonUsersFromContacts: response.invite_from_contacts,
+ pendingUsers: response.pending_users,
});
} else {
Linking.openSettings();
@@ -118,54 +125,58 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
setResults(sanitizedResult);
} else {
setResults({
- usersFromContacts: usersFromContacts,
nonUsersFromContacts: nonUsersFromContacts,
+ pendingUsers: pendingUsers,
});
}
};
search();
}, [query]);
- const UsersFromContacts = () => (
- <>
+ const PendingList = useMemo(
+ () => (
<FlatList
+ contentContainerStyle={styles.nonUsersFlatListContainer}
showsVerticalScrollIndicator={false}
scrollEnabled={false}
- data={results.usersFromContacts}
- keyExtractor={(item) => item.username}
+ data={results.pendingUsers}
+ keyExtractor={(item) => item.phoneNumber}
renderItem={({item}) => (
- <View key={item.id} style={styles.ppContainer}>
- <View style={styles.friend}>
- <ProfilePreview
- {...{profilePreview: item}}
- previewType={'Friend'}
- screenType={screenType}
- />
- </View>
- <TouchableOpacity
- style={styles.addFriendButton}
- onPress={() => {
- handleAddFriend(screenType, item, dispatch, state).then(
- (success) => {
- if (success) {
- let users = usersFromContacts;
- const filteredUsers = users.filter(
- (user) => user.username !== item.username,
- );
- setResults({
- ...results,
- usersFromContacts: filteredUsers,
- });
- }
- },
- );
- }}>
- <Text style={styles.addFriendButtonTitle}>Add Friend</Text>
- </TouchableOpacity>
- </View>
+ <InviteFriendTile
+ item={item}
+ remind={true}
+ invitesLeft={invitesLeft}
+ setInvitesLeft={setInvitesLeft}
+ 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}
+ invitesLeft={invitesLeft}
+ setInvitesLeft={setInvitesLeft}
+ results={results}
+ setResults={setResults}
+ />
)}
/>
- </>
+ ),
+ [results.nonUsersFromContacts],
);
return (
@@ -209,20 +220,21 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
/>
</Animated.View>
</View>
- <View style={styles.subheader}>
- <Text style={styles.subheaderText}>Contacts on Tagg</Text>
- <UsersFromContacts />
+ <View
+ style={[
+ styles.subheader,
+ {
+ height:
+ 72 *
+ (results.pendingUsers ? results.pendingUsers.length : 1),
+ },
+ ]}>
+ <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>
@@ -275,16 +287,6 @@ const styles = StyleSheet.create({
marginBottom: '3%',
marginHorizontal: 10,
},
- ppContainer: {
- alignSelf: 'center',
- flexDirection: 'row',
- justifyContent: 'space-between',
- width: '100%',
- height: normalize(42),
- alignItems: 'center',
- marginBottom: '5%',
- marginHorizontal: 10,
- },
inputContainer: {
flexGrow: 1,
flexDirection: 'row',
@@ -314,31 +316,6 @@ const styles = StyleSheet.create({
color: '#818181',
fontWeight: '500',
},
- friend: {
- alignSelf: 'center',
- height: '100%',
- },
- addFriendButton: {
- alignSelf: 'center',
- justifyContent: 'center',
- alignItems: 'center',
- width: 82,
- height: 25,
- borderColor: TAGG_LIGHT_BLUE,
- borderWidth: 2,
- borderRadius: 2,
- padding: 0,
- backgroundColor: TAGG_LIGHT_BLUE,
- },
- addFriendButtonTitle: {
- color: 'white',
- padding: 0,
- fontSize: normalize(11),
- fontWeight: '700',
- lineHeight: normalize(13.13),
- letterSpacing: normalize(0.6),
- paddingHorizontal: '3.8%',
- },
});
export default InviteFriendsScreen;
diff --git a/src/screens/profile/legacy/UsersFromContacts.tsx b/src/screens/profile/legacy/UsersFromContacts.tsx
new file mode 100644
index 00000000..5499799e
--- /dev/null
+++ b/src/screens/profile/legacy/UsersFromContacts.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import {FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {useDispatch, useStore} from 'react-redux';
+import {ProfilePreview} from '../../../components/profile';
+import {TAGG_LIGHT_BLUE} from '../../../constants/constants';
+import {RootState} from '../../../store/rootReducer';
+import {ScreenType} from '../../../types/types';
+import {normalize} from '../../../utils';
+import {handleAddFriend} from '../../../utils/friends';
+import {SearchResultType} from '../InviteFriendsScreen';
+
+interface UsersFromContactsProps {
+ screenType: ScreenType;
+ results: SearchResultType;
+ setResults: Function;
+}
+
+const UsersFromContacts: React.FC<UsersFromContactsProps> = ({
+ screenType,
+ results,
+ setResults,
+}) => {
+ const dispatch = useDispatch();
+ const state: RootState = useStore().getState();
+ return (
+ <>
+ <FlatList
+ showsVerticalScrollIndicator={false}
+ scrollEnabled={false}
+ data={results.usersFromContacts}
+ keyExtractor={(item) => item.username}
+ renderItem={({item}) => (
+ <View key={item.id} style={styles.ppContainer}>
+ <View style={styles.friend}>
+ <ProfilePreview
+ {...{profilePreview: item}}
+ previewType={'Friend'}
+ screenType={screenType}
+ />
+ </View>
+ <TouchableOpacity
+ style={styles.addFriendButton}
+ onPress={() => {
+ handleAddFriend(screenType, item, dispatch, state).then(
+ (success) => {
+ if (success) {
+ let users = results.usersFromContacts;
+ const filteredUsers = users.filter(
+ (user) => user.username !== item.username,
+ );
+ setResults({
+ ...results,
+ usersFromContacts: filteredUsers,
+ });
+ }
+ },
+ );
+ }}>
+ <Text style={styles.addFriendButtonTitle}>Add Friend</Text>
+ </TouchableOpacity>
+ </View>
+ )}
+ />
+ </>
+ );
+};
+
+export default UsersFromContacts;
+
+const styles = StyleSheet.create({
+ ppContainer: {
+ alignSelf: 'center',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ width: '100%',
+ height: normalize(42),
+ alignItems: 'center',
+ marginBottom: '5%',
+ marginHorizontal: 10,
+ },
+ friend: {
+ alignSelf: 'center',
+ height: '100%',
+ },
+ addFriendButton: {
+ alignSelf: 'center',
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: 82,
+ height: 25,
+ borderColor: TAGG_LIGHT_BLUE,
+ borderWidth: 2,
+ borderRadius: 2,
+ padding: 0,
+ backgroundColor: TAGG_LIGHT_BLUE,
+ },
+ addFriendButtonTitle: {
+ color: 'white',
+ padding: 0,
+ fontSize: normalize(11),
+ fontWeight: '700',
+ lineHeight: normalize(13.13),
+ letterSpacing: normalize(0.6),
+ paddingHorizontal: '3.8%',
+ },
+});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-24 20:48:23 +0000