From 1080adb75c18f6da6b91be4264c69a9bf908ff0d Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 18 Mar 2021 02:06:02 -0700 Subject: works --- src/screens/profile/FriendsListScreen.tsx | 3 +- src/screens/profile/InviteFriendsScreen.tsx | 330 ++++++++++++++++++++++++++++ src/screens/profile/index.ts | 1 + 3 files changed, 333 insertions(+), 1 deletion(-) create mode 100644 src/screens/profile/InviteFriendsScreen.tsx (limited to 'src/screens') diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx index 1cfef058..3016c767 100644 --- a/src/screens/profile/FriendsListScreen.tsx +++ b/src/screens/profile/FriendsListScreen.tsx @@ -1,6 +1,6 @@ import {RouteProp} from '@react-navigation/native'; import React from 'react'; -import {SafeAreaView, StyleSheet, View} from 'react-native'; +import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; import {useSelector} from 'react-redux'; import {Friends, TabsGradient} from '../../components'; import {MainStackParams} from '../../routes'; @@ -25,6 +25,7 @@ const FriendsListScreen: React.FC = ({route}) => { return ( <> + diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx new file mode 100644 index 00000000..8fc12a5e --- /dev/null +++ b/src/screens/profile/InviteFriendsScreen.tsx @@ -0,0 +1,330 @@ +import React, {useEffect, useState} from 'react'; +import { + View, + Text, + TouchableOpacity, + SafeAreaView, + StyleSheet, + TextInput, + FlatList, + Keyboard, + Linking, + StatusBar, + TouchableWithoutFeedback, +} from 'react-native'; +import {useDispatch, useStore} from 'react-redux'; +import {ProfilePreviewType, ScreenType} from '../../types'; +import { + handleAddFriend, + HeaderHeight, + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; +import {checkPermission, getAll} 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'; +const AnimatedIcon = Animated.createAnimatedComponent(Icon); + +interface InviteFriendsScreenProps { + screenType: ScreenType; +} + +const InviteFriendsScreen: React.FC = ({ + screenType, +}) => { + const dispatch = useDispatch(); + const state = useStore().getState(); + const [usersFromContacts, setUsersFromContacts] = useState< + ProfilePreviewType[] + >([]); + const [nonUsersFromContacts, setNonUsersFromContacts] = useState<[]>([]); + type SearchResultType = { + usersFromContacts: ProfilePreviewType[]; + nonUsersFromContacts: []; + }; + const [results, setResults] = useState({ + usersFromContacts: usersFromContacts, + nonUsersFromContacts: nonUsersFromContacts, + }); + const [query, setQuery] = useState(''); + + const extractPhoneNumbers = async () => { + let phoneNumbers: Array = []; + await getAll().then((contacts) => { + contacts.map((contact) => { + contact.phoneNumbers.map(async (phoneNumber) => { + phoneNumbers.push(await phoneNumber.number); + }); + }); + }); + return phoneNumbers; + }; + + useEffect(() => { + const handleFindFriends = () => { + extractPhoneNumbers().then(async (phoneNumbers) => { + const permission = await checkPermission(); + if (permission === 'authorized') { + let response = await usersFromContactsService(phoneNumbers); + await setUsersFromContacts(response.existing_tagg_users); + await setNonUsersFromContacts(response.invite_from_contacts); + usersFromContacts.map((user) => console.log('user: ', user.username)); + setResults({ + usersFromContacts: response.existing_tagg_users, + nonUsersFromContacts: response.invite_from_contacts, + }); + } else { + Linking.openSettings(); + } + }); + }; + handleFindFriends(); + }, []); + + /* + * Main handler for changes in query. + */ + useEffect(() => { + const search = async () => { + if (query.length > 0) { + const searchResultsUsers = usersFromContacts.filter( + (item: ProfilePreviewType) => { + if ( + item.first_name.includes(query) || + item.last_name.includes(query) || + item.username.includes(query) + ) { + return item; + } + }, + ); + const searchResultsNonUsers = nonUsersFromContacts.filter((item) => { + if (item.firstName.includes(query) || item.lastName.includes(query)) { + return item; + } + }); + const sanitizedResult = { + usersFromContacts: searchResultsUsers, + nonUsersFromContacts: searchResultsNonUsers, + }; + setResults(sanitizedResult); + } else { + setResults({ + usersFromContacts: usersFromContacts, + nonUsersFromContacts: nonUsersFromContacts, + }); + } + }; + search(); + }, [query]); + + const UsersFromContacts = () => ( + <> + item.username} + renderItem={({item}) => ( + + + + + { + handleAddFriend(screenType, item, dispatch, state).then( + (success) => { + if (success) { + let users = usersFromContacts; + const filteredUsers = users.filter( + (user) => user.username !== item.username, + ); + console.log('filteredUsers: ', filteredUsers); + setResults({ + ...results, + usersFromContacts: filteredUsers, + }); + } + }, + ); + }}> + Add Friend + + + )} + /> + + ); + + const NonUsersFromContacts = () => ( + <> + item.phoneNumber} + renderItem={({item}) => } + /> + + ); + + return ( + + + + + + + + Sharing is caring, invite friends, and create moments together! + + + + + + { + setQuery(text); + }} + onBlur={() => { + Keyboard.dismiss(); + }} + onEndEditing={() => { + Keyboard.dismiss(); + }} + value={query} + placeholder={'Search'} + /> + + + + + Add Friends + + + + + Invite your friends! + + + + + + + + ); +}; + +const styles = StyleSheet.create({ + body: { + paddingTop: HeaderHeight * 1.3, + height: SCREEN_HEIGHT * 0.8, + backgroundColor: '#fff', + }, + subheader: { + alignSelf: 'center', + width: SCREEN_WIDTH * 0.85, + marginBottom: '5%', + }, + subheaderText: { + color: '#828282', + fontSize: normalize(12), + fontWeight: '600', + lineHeight: normalize(14.32), + }, + container: { + alignSelf: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + width: '100%', + height: normalize(42), + alignItems: 'center', + 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', + alignItems: 'center', + paddingHorizontal: 8, + marginHorizontal: '3%', + borderRadius: 20, + backgroundColor: '#F0F0F0', + height: 34, + }, + searchIcon: { + marginRight: '5%', + }, + input: { + flex: 1, + fontSize: normalize(16), + color: '#000', + letterSpacing: normalize(0.5), + }, + cancelButton: { + height: '100%', + position: 'absolute', + justifyContent: 'center', + paddingHorizontal: 8, + }, + cancelText: { + 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/index.ts b/src/screens/profile/index.ts index 9d651729..f74946a6 100644 --- a/src/screens/profile/index.ts +++ b/src/screens/profile/index.ts @@ -6,3 +6,4 @@ export {default as MomentCommentsScreen} from './MomentCommentsScreen'; export {default as FriendsListScreen} from './FriendsListScreen'; export {default as EditProfile} from './EditProfile'; export {default as MomentUploadPromptScreen} from './MomentUploadPromptScreen'; +export {default as InviteFriendsScreen} from './InviteFriendsScreen'; -- cgit v1.2.3-70-g09d2