From 4ec594d00b897ac9882a65a60f0523bbe5dbcb0f Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 3 Feb 2021 07:41:39 -0800
Subject: New screen to request permission to contacts

---
 src/screens/search/RequestContactsAccess.tsx | 176 +++++++++++++++++++++++++++
 1 file changed, 176 insertions(+)
 create mode 100644 src/screens/search/RequestContactsAccess.tsx

(limited to 'src/screens/search/RequestContactsAccess.tsx')

diff --git a/src/screens/search/RequestContactsAccess.tsx b/src/screens/search/RequestContactsAccess.tsx
new file mode 100644
index 00000000..af511f23
--- /dev/null
+++ b/src/screens/search/RequestContactsAccess.tsx
@@ -0,0 +1,176 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  StatusBar,
+} from 'react-native';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
+import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {BackgroundGradientType} from '../../types';
+import {useNavigation} from '@react-navigation/native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import Animated from 'react-native-reanimated';
+import LinearGradient from 'react-native-linear-gradient';
+
+const RequestContactsAccess: React.FC = () => {
+  const navigation = useNavigation();
+  return (
+    <LinearGradient
+      colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Light]}
+      useAngle={true}
+      angle={154.72}
+      angleCenter={{x: 0.5, y: 0.5}}
+      style={{flex: 1}}>
+      <SafeAreaView>
+        <View style={{height: SCREEN_HEIGHT}}>
+          <Animated.ScrollView
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            scrollEnabled={isIPhoneX() ? false : true}>
+            <StatusBar barStyle="light-content" translucent={false} />
+            <View style={styles.mainContainer}>
+              <Image
+                source={require('../../assets/icons/findFriends/find-friend-icon.png')}
+                style={styles.image}
+              />
+              <Text style={styles.title}>FIND FRIENDS!</Text>
+              <Text style={styles.subtext}>
+                This is so you can find your friends already on here! Isn’t a
+                party better when your favorite people are there?
+              </Text>
+              <View style={styles.bulletPointView}>
+                <Image
+                  source={require('../../assets/icons/findFriends/lock-icon.png')}
+                  style={styles.icon}
+                />
+                <Text style={styles.bulletPointText}>Always Stays Private</Text>
+              </View>
+              <View style={styles.bulletPointView}>
+                <Image
+                  source={require('../../assets/icons/findFriends/unstored-contact-data-icon.png')}
+                  style={styles.icon}
+                />
+                <Text style={styles.bulletPointText}>
+                  We don’t keep any contact data
+                </Text>
+              </View>
+              <View style={styles.bulletPointView}>
+                <Image
+                  source={require('../../assets/icons/findFriends/phone-cross-icon.png')}
+                  style={styles.icon}
+                />
+                <Text style={styles.bulletPointText}>
+                  We wouldn’t dare send any messages
+                </Text>
+              </View>
+              <TouchableOpacity
+                onPress={() => {
+                  console.log('Show IOS opoup');
+                }}
+                style={styles.allowButton}>
+                <Text style={styles.allowButtonLabel}>Allow Contacts</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                accessibilityLabel="Don't allow button"
+                style={styles.dontAllowButton}
+                onPress={() => navigation.pop()}>
+                <Text style={styles.dontAllowButtonText}>Don’t Allow</Text>
+              </TouchableOpacity>
+            </View>
+          </Animated.ScrollView>
+        </View>
+      </SafeAreaView>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    alignContent: 'center',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    marginBottom: '15%',
+  },
+  image: {
+    marginBottom: '2%',
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH * 0.49,
+  },
+  title: {
+    color: '#fff',
+    alignSelf: 'center',
+    fontSize: normalize(28),
+    lineHeight: normalize(35),
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '2%',
+  },
+  subtext: {
+    color: '#fff',
+    alignSelf: 'center',
+    fontSize: normalize(16),
+    lineHeight: normalize(25),
+    fontWeight: '600',
+    textAlign: 'center',
+    width: '83%',
+    height: '15%',
+  },
+  bulletPointView: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignSelf: 'center',
+    width: SCREEN_WIDTH * 0.55,
+    marginBottom: '7%',
+  },
+  icon: {
+    margin: '1%',
+    width: normalize(38),
+    height: normalize(38),
+    alignSelf: 'flex-start',
+  },
+  bulletPointText: {
+    color: '#fff',
+    fontSize: normalize(15),
+    fontWeight: '500',
+    lineHeight: normalize(20),
+    alignSelf: 'center',
+    width: '75%',
+    textAlign: 'center',
+  },
+  allowButton: {
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+    width: '41.5%',
+    height: '6%',
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#fff',
+    marginTop: '8%',
+    marginBottom: '3%',
+  },
+  allowButtonLabel: {
+    fontSize: normalize(17),
+    fontWeight: '600',
+    lineHeight: normalize(20.29),
+    color: '#3C4461',
+  },
+  dontAllowButton: {
+    alignSelf: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: 'white',
+  },
+  dontAllowButtonText: {
+    fontSize: normalize(15),
+    fontWeight: '500',
+    lineHeight: normalize(20),
+    color: '#fff',
+  },
+});
+export default RequestContactsAccess;
-- 
cgit v1.2.3-70-g09d2


From bbc7d3b3169e145708c6646a6f4003fc2735f1fb Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 3 Feb 2021 10:51:11 -0800
Subject: Enabled button functionality

---
 src/routes/main/MainStackScreen.tsx          | 39 ++++++++++++++++++----------
 src/screens/search/RequestContactsAccess.tsx | 27 ++++++++++++++++---
 2 files changed, 48 insertions(+), 18 deletions(-)

(limited to 'src/screens/search/RequestContactsAccess.tsx')

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 8042d267..15695288 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -1,6 +1,7 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationOptions} from '@react-navigation/stack';
-import React from 'react';
+import React, {useState} from 'react';
 import {
   CaptionScreen,
   CategorySelection,
@@ -43,6 +44,14 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
   const isSearchTab = screenType === ScreenType.Search;
   const isNotificationsTab = screenType === ScreenType.Notifications;
 
+  AsyncStorage.getItem('respondedToAccessContacts').then((value) =>
+    setRespondedToAccessContacts(value ? value : 'false'),
+  );
+
+  const [respondedToAccessContacts, setRespondedToAccessContacts] = useState(
+    'false',
+  );
+
   const initialRouteName = (() => {
     switch (screenType) {
       case ScreenType.Profile:
@@ -55,7 +64,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         // If responded is true, show search screen
         // Else, show RequestContactsAccess
         // If user responds, update store and Async and remove popup
-        return 'RequestContactsAccess';
+        return 'Search';
       case ScreenType.Notifications:
         return 'Notifications';
     }
@@ -98,18 +107,20 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           screenType,
         }}
       />
-      {isSearchTab && (
-        // <MainStack.Screen
-        //   name="Search"
-        //   component={SearchScreen}
-        //   initialParams={{screenType}}
-        // />
-        <MainStack.Screen
-          name="RequestContactsAccess"
-          component={RequestContactsAccess}
-          initialParams={{screenType}}
-        />
-      )}
+      {isSearchTab &&
+        (respondedToAccessContacts && respondedToAccessContacts === 'true' ? (
+          <MainStack.Screen
+            name="Search"
+            component={SearchScreen}
+            initialParams={{screenType}}
+          />
+        ) : (
+          <MainStack.Screen
+            name="Search"
+            component={RequestContactsAccess}
+            initialParams={{screenType}}
+          />
+        ))}
       {isNotificationsTab && (
         <MainStack.Screen
           name="Notifications"
diff --git a/src/screens/search/RequestContactsAccess.tsx b/src/screens/search/RequestContactsAccess.tsx
index af511f23..c869ed1e 100644
--- a/src/screens/search/RequestContactsAccess.tsx
+++ b/src/screens/search/RequestContactsAccess.tsx
@@ -14,9 +14,30 @@ import {useNavigation} from '@react-navigation/native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import Animated from 'react-native-reanimated';
 import LinearGradient from 'react-native-linear-gradient';
+import {checkPermission, requestPermission} from 'react-native-contacts';
+import AsyncStorage from '@react-native-community/async-storage';
 
 const RequestContactsAccess: React.FC = () => {
   const navigation = useNavigation();
+
+  const handleAllowAccess = async () => {
+    checkPermission().then((permission) => {
+      if (permission === 'undefined') {
+        requestPermission().then((response) => {
+          if (response === 'authorized' || response === 'denied') {
+            navigation.navigate('Search');
+          }
+        });
+      }
+    });
+    await AsyncStorage.setItem('respondedToAccessContacts', 'true');
+  };
+
+  const handleDontAllowAccess = async () => {
+    await AsyncStorage.setItem('respondedToAccessContacts', 'true');
+    navigation.navigate('Search');
+  };
+
   return (
     <LinearGradient
       colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Light]}
@@ -67,16 +88,14 @@ const RequestContactsAccess: React.FC = () => {
                 </Text>
               </View>
               <TouchableOpacity
-                onPress={() => {
-                  console.log('Show IOS opoup');
-                }}
+                onPress={handleAllowAccess}
                 style={styles.allowButton}>
                 <Text style={styles.allowButtonLabel}>Allow Contacts</Text>
               </TouchableOpacity>
               <TouchableOpacity
                 accessibilityLabel="Don't allow button"
                 style={styles.dontAllowButton}
-                onPress={() => navigation.pop()}>
+                onPress={handleDontAllowAccess}>
                 <Text style={styles.dontAllowButtonText}>Don’t Allow</Text>
               </TouchableOpacity>
             </View>
-- 
cgit v1.2.3-70-g09d2


From 1d7890a41a2fa01f1fc84e04b1144ab705c5bd58 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 5 Feb 2021 09:53:30 -0800
Subject: removed second point

---
 .../icons/findFriends/unstored-contact-data-icon.png    | Bin 11421 -> 0 bytes
 src/screens/search/RequestContactsAccess.tsx            |   9 ---------
 2 files changed, 9 deletions(-)
 delete mode 100644 src/assets/icons/findFriends/unstored-contact-data-icon.png

(limited to 'src/screens/search/RequestContactsAccess.tsx')

diff --git a/src/assets/icons/findFriends/unstored-contact-data-icon.png b/src/assets/icons/findFriends/unstored-contact-data-icon.png
deleted file mode 100644
index 8974a790..00000000
Binary files a/src/assets/icons/findFriends/unstored-contact-data-icon.png and /dev/null differ
diff --git a/src/screens/search/RequestContactsAccess.tsx b/src/screens/search/RequestContactsAccess.tsx
index c869ed1e..de023464 100644
--- a/src/screens/search/RequestContactsAccess.tsx
+++ b/src/screens/search/RequestContactsAccess.tsx
@@ -69,15 +69,6 @@ const RequestContactsAccess: React.FC = () => {
                 />
                 <Text style={styles.bulletPointText}>Always Stays Private</Text>
               </View>
-              <View style={styles.bulletPointView}>
-                <Image
-                  source={require('../../assets/icons/findFriends/unstored-contact-data-icon.png')}
-                  style={styles.icon}
-                />
-                <Text style={styles.bulletPointText}>
-                  We don’t keep any contact data
-                </Text>
-              </View>
               <View style={styles.bulletPointView}>
                 <Image
                   source={require('../../assets/icons/findFriends/phone-cross-icon.png')}
-- 
cgit v1.2.3-70-g09d2

