diff options
Diffstat (limited to 'src/screens/profile/InviteFriendsScreen.tsx')
| -rw-r--r-- | src/screens/profile/InviteFriendsScreen.tsx | 176 |
1 files changed, 68 insertions, 108 deletions
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx index e1f739c5..bf91e8f3 100644 --- a/src/screens/profile/InviteFriendsScreen.tsx +++ b/src/screens/profile/InviteFriendsScreen.tsx @@ -1,23 +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, 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 {MainStackParams} from '../../routes'; +import {usersFromContactsService} from '../../services/UserFriendsService'; import {ProfilePreviewType} from '../../types'; import { extractContacts, - handleAddFriend, HeaderHeight, isIPhoneX, normalize, @@ -25,15 +30,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 +38,9 @@ export type InviteContactType = { phoneNumber: string; }; -type SearchResultType = { - usersFromContacts: ProfilePreviewType[]; +export type SearchResultType = { nonUsersFromContacts: InviteContactType[]; + pendingUsers: InviteContactType[]; }; type InviteFriendsScreenRouteProp = RouteProp< @@ -56,17 +52,15 @@ 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<InviteFriendsScreenProps> = ({}) => { 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(''); @@ -79,8 +73,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 +112,54 @@ 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} + 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 ( @@ -209,20 +203,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 +270,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 +299,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; |