Merge branch 'master' into tma698-api-profile

# Conflicts:
#	src/components/search/SearchBar.tsx

5 files changed, 356 insertions, 13 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 01e859ba..998897e2 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -152,10 +152,8 @@ const styles = StyleSheet.create({
     position: 'relative',
     backgroundColor: 'white',
     width: '100%',
-    paddingLeft: '2%',
-    paddingRight: '2%',
-    paddingBottom: '1%',
-    paddingTop: '1%',
+    paddingHorizontal: '2%',
+    paddingVertical: '1%',
     height: 60,
   },
 });
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index 1cfef058..886ab9c4 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,6 +1,12 @@
 import {RouteProp} from '@react-navigation/native';
 import React from 'react';
-import {SafeAreaView, StyleSheet, View} from 'react-native';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  View,
+} from 'react-native';
 import {useSelector} from 'react-redux';
 import {Friends, TabsGradient} from '../../components';
 import {MainStackParams} from '../../routes';
@@ -25,9 +31,10 @@ const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
   return (
     <>
       <SafeAreaView>
-        <View style={styles.body}>
+        <StatusBar barStyle="dark-content" />
+        <ScrollView style={styles.body}>
           <Friends result={friends} screenType={screenType} userId={userXId} />
-        </View>
+        </ScrollView>
       </SafeAreaView>
       <TabsGradient />
     </>
@@ -45,7 +52,7 @@ const styles = StyleSheet.create({
   body: {
     marginTop: HeaderHeight,
     width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT * 0.8,
+    height: SCREEN_HEIGHT - HeaderHeight,
   },
 });
 
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
new file mode 100644
index 00000000..4af52349
--- /dev/null
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -0,0 +1,337 @@
+import React, {useEffect, useState} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  SafeAreaView,
+  StyleSheet,
+  TextInput,
+  FlatList,
+  Keyboard,
+  Linking,
+  StatusBar,
+  TouchableWithoutFeedback,
+  ScrollView,
+} from 'react-native';
+import {useDispatch, useStore} from 'react-redux';
+import {ProfilePreviewType} from '../../types';
+import {
+  extractContacts,
+  handleAddFriend,
+  HeaderHeight,
+  isIPhoneX,
+  normalize,
+  SCREEN_HEIGHT,
+  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);
+
+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 [usersFromContacts, setUsersFromContacts] = useState<
+    ProfilePreviewType[]
+  >([]);
+  const [nonUsersFromContacts, setNonUsersFromContacts] = useState<[]>([]);
+  type SearchResultType = {
+    usersFromContacts: ProfilePreviewType[];
+    nonUsersFromContacts: [];
+  };
+  const [results, setResults] = useState<SearchResultType>({
+    usersFromContacts: usersFromContacts,
+    nonUsersFromContacts: nonUsersFromContacts,
+  });
+  const [query, setQuery] = useState('');
+
+  useEffect(() => {
+    const handleFindFriends = () => {
+      extractContacts().then(async (retrievedContacts) => {
+        const permission = await checkPermission();
+        if (permission === 'authorized') {
+          let response = await usersFromContactsService(retrievedContacts);
+          await setUsersFromContacts(response.existing_tagg_users);
+          await setNonUsersFromContacts(response.invite_from_contacts);
+          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) =>
+            (item.first_name + ' ' + item.last_name)
+              .toLowerCase()
+              .startsWith(query) ||
+            item.username.toLowerCase().startsWith(query) ||
+            item.last_name.toLowerCase().startsWith(query),
+        );
+        const searchResultsNonUsers = nonUsersFromContacts.filter(
+          (item) =>
+            (item.firstName + ' ' + item.lastName)
+              .toLowerCase()
+              .startsWith(query) ||
+            item.lastName.toLowerCase().startsWith(query),
+        );
+        const sanitizedResult = {
+          usersFromContacts: searchResultsUsers,
+          nonUsersFromContacts: searchResultsNonUsers,
+        };
+        setResults(sanitizedResult);
+      } else {
+        setResults({
+          usersFromContacts: usersFromContacts,
+          nonUsersFromContacts: nonUsersFromContacts,
+        });
+      }
+    };
+    search();
+  }, [query]);
+
+  const UsersFromContacts = () => (
+    <>
+      <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 = usersFromContacts;
+                      const filteredUsers = users.filter(
+                        (user) => user.username !== item.username,
+                      );
+                      setResults({
+                        ...results,
+                        usersFromContacts: filteredUsers,
+                      });
+                    }
+                  },
+                );
+              }}>
+              <Text style={styles.addFriendButtonTitle}>Add Friend</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      />
+    </>
+  );
+
+  return (
+    <View style={styles.mainContainer}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <SafeAreaView style={{marginTop: HeaderHeight + StatusBarHeight}}>
+          <StatusBar barStyle="dark-content" />
+          <ScrollView
+            style={styles.body}
+            contentContainerStyle={{paddingBottom: SCREEN_HEIGHT * 0.1}}>
+            <View style={styles.headerContainer}>
+              <Text style={styles.headerText}>
+                Sharing is caring, invite friends, and create moments together!
+              </Text>
+            </View>
+            <View style={styles.container}>
+              <Animated.View style={styles.inputContainer}>
+                <AnimatedIcon
+                  name="search"
+                  color={'#7E7E7E'}
+                  size={16}
+                  style={styles.searchIcon}
+                />
+                <TextInput
+                  style={[styles.input]}
+                  placeholderTextColor={'#828282'}
+                  clearButtonMode="while-editing"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  onChangeText={(text) => {
+                    setQuery(text.toLowerCase());
+                  }}
+                  onBlur={() => {
+                    Keyboard.dismiss();
+                  }}
+                  onEndEditing={() => {
+                    Keyboard.dismiss();
+                  }}
+                  value={query}
+                  placeholder={'Search'}
+                />
+              </Animated.View>
+            </View>
+            <View style={styles.subheader}>
+              <Text style={styles.subheaderText}>Add Friends</Text>
+              <UsersFromContacts />
+            </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} />}
+              />
+            </View>
+          </ScrollView>
+        </SafeAreaView>
+      </TouchableWithoutFeedback>
+      <TabsGradient />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {backgroundColor: 'white', height: SCREEN_HEIGHT},
+  body: {
+    paddingTop: 10,
+    height: SCREEN_HEIGHT,
+    backgroundColor: '#fff',
+  },
+  headerContainer: {
+    width: SCREEN_WIDTH * 0.85,
+    height: isIPhoneX() ? SCREEN_HEIGHT * 0.06 : SCREEN_HEIGHT * 0.08,
+    alignSelf: 'center',
+  },
+  nonUsersFlatListContainer: {paddingBottom: 130},
+  subheader: {
+    alignSelf: 'center',
+    width: SCREEN_WIDTH * 0.85,
+    marginBottom: '5%',
+  },
+  subheaderText: {
+    color: '#828282',
+    fontSize: normalize(12),
+    fontWeight: '600',
+    lineHeight: normalize(14.32),
+    marginBottom: '5%',
+  },
+  headerText: {
+    textAlign: 'center',
+    color: '#828282',
+    fontSize: normalize(12),
+    fontWeight: '600',
+    lineHeight: normalize(14.32),
+    marginBottom: '5%',
+  },
+  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/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index 5edc6277..313e2f2c 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -38,11 +38,11 @@ const ProfileScreen: React.FC<ProfileOnboardingProps> = ({route}) => {
    * This is done to reset the users stored in our store for the Search screen.
    * Read more about useFocusEffect here : https://reactnavigation.org/docs/function-after-focusing-screen/
    */
-  useFocusEffect(() => {
-    if (!userXId) {
-      dispatch(resetScreenType(screenType));
-    }
-  });
+  // useFocusEffect(() => {
+  //   if (!userXId) {
+  //     dispatch(resetScreenType(screenType));
+  //   }
+  // });
 
   return (
     <>
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';