[TMA-237] Added modal for user registration and redirect (#61)

* move async-storage

* removed lock files

* added lock files to gitignore

* added the wrong file to gitignore

* added modal for user registration and redirect

* api call to get list of linked socials for each user to display appropriate icon

* fixed indentation and linting

* refactored modal and browser sign-in

* now dynamically adding linked and unlinked taggs, added a bunch of TODOs for tomorrow

* added svg icons

* done? finished taggs bar UI and all the navigations including modal

* fixed some bugs and added more TODOs

* fixed some bugs and refactored posts fetching logic

* fixed taggs bar bug

* done, it will update everything correctly

* added comments

* added tiktok

Co-authored-by: hsalhab <husam_salhab@brown.edu>
Co-authored-by: george <grus6928@gmail.com>
Co-authored-by: Ivan Chen <ivan@thetaggid.com>

1 files changed, 7 insertions, 105 deletions

diff --git a/src/components/onboarding/SocialMediaLinker.tsx b/src/components/onboarding/SocialMediaLinker.tsx
index 15afb731..da637f99 100644
--- a/src/components/onboarding/SocialMediaLinker.tsx
+++ b/src/components/onboarding/SocialMediaLinker.tsx
@@ -1,24 +1,14 @@
-import AsyncStorage from '@react-native-community/async-storage';
 import React from 'react';
 import {
-  Alert,
   Image,
   StyleSheet,
   Text,
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import InAppBrowser from 'react-native-inappbrowser-reborn';
 import {LinkerType} from 'src/types';
-import {
-  LINK_FB_ENDPOINT,
-  LINK_FB_OAUTH,
-  LINK_IG_ENDPOINT,
-  LINK_IG_OAUTH,
-  LINK_TWITTER_ENDPOINT,
-  LINK_TWITTER_OAUTH,
-} from '../../constants';
 import {SOCIAL_FONT_COLORS} from '../../constants/constants';
+import {handlePressForAuthBrowser} from '../../services';
 import SocialIcon from '../common/SocialIcon';
 
 interface SocialMediaLinkerProps extends TouchableOpacityProps {
@@ -29,102 +19,14 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
   social: {label},
 }) => {
   const [state, setState] = React.useState({
-    authenticated: false,
+    socialLinked: false,
   });
 
-  const integrated_endpoints: {[label: string]: [string, string]} = {
-    Instagram: [LINK_IG_OAUTH, LINK_IG_ENDPOINT],
-    Facebook: [LINK_FB_OAUTH, LINK_FB_ENDPOINT],
-    Twitter: [LINK_TWITTER_OAUTH, LINK_TWITTER_ENDPOINT],
-  };
-
-  const registerSocialLink: (token: string) => Promise<boolean> = async (
-    callback_url,
-  ) => {
-    if (!(label in integrated_endpoints)) {
-      // This error is already handled earlier, more of a safety check here
-      return false;
-    }
-    const user_token = await AsyncStorage.getItem('token');
-    const response = await fetch(integrated_endpoints[label][1], {
-      method: 'POST',
-      headers: {
-        Authorization: `Token ${user_token}`,
-      },
-      body: JSON.stringify({
-        callback_url: callback_url,
-      }),
-    });
-    if (!(response.status === 201)) {
-      console.log(await response.json());
-    }
-    return response.status === 201;
-  };
-
   const handlePress = async () => {
-    try {
-      const isAvailable = await InAppBrowser.isAvailable();
-      if (!(label in integrated_endpoints)) {
-        // TODO handle non-integrated social links with a modal
-        // TODO remove the alert below
-        Alert.alert('Coming soon!');
-        return;
-      }
-      let url = integrated_endpoints[label][0];
-
-      // We will need to do an extra step for twitter sign-in
-      if (label === 'Twitter') {
-        const user_token = await AsyncStorage.getItem('token');
-        const response = await fetch(url, {
-          method: 'GET',
-          headers: {
-            Authorization: `Token ${user_token}`,
-          },
-        });
-        url = response.url;
-      }
-
-      if (isAvailable) {
-        InAppBrowser.openAuth(url, 'taggid://callback', {
-          ephemeralWebSession: true,
-        })
-          .then(async (response) => {
-            console.log(response);
-            if (response.type === 'success' && response.url) {
-              const success = await registerSocialLink(response.url);
-              if (!success) {
-                throw new Error('Unable to register with backend');
-              }
-              setState({
-                ...state,
-                authenticated: true,
-              });
-              Alert.alert(`Successfully linked ${label} 🎉`);
-            } else {
-              throw new Error(`Unable to link with ${label} API`);
-            }
-          })
-          .catch((error) => {
-            console.log(error);
-            Alert.alert(`Something went wrong, we can't link with ${label} 😔`);
-          });
-      } else {
-        // Okay... to open an external browser and have it link back to
-        // the app is a bit tricky, we will need to have navigation routes
-        // setup for this screen and have it hooked up.
-        // See https://github.com/proyecto26/react-native-inappbrowser#authentication-flow-using-deep-linking
-        // Though this isn't the end of the world, from the documentation,
-        // the in-app browser should be supported from iOS 11, which
-        // is about 98.5% of all iOS devices in the world.
-        // See https://support.apple.com/en-gb/HT209574
-        Alert.alert(
-          'Sorry! Your device was unable to open a browser to let you sign-in! 😔',
-        );
-      }
-    } catch (error) {
-      console.log(error);
-      Alert.alert(`Something went wrong, we can't link with ${label} 😔`);
-    }
+    setState({
+      ...state,
+      socialLinked: await handlePressForAuthBrowser(label),
+    });
   };
 
   switch (label) {
@@ -166,7 +68,7 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
       style={styles.container}>
       <SocialIcon social={label} style={styles.icon} />
       <Text style={[styles.label, {color: font_color}]}>{label}</Text>
-      {state.authenticated && (
+      {state.socialLinked && (
         <Image
           source={require('../../assets/images/link-tick.png')}
           style={styles.tick}