From 9da19cdcb6c7596d60afde6d0d559f06a24a0627 Mon Sep 17 00:00:00 2001 From: George Rusu <56009869+grusu6928@users.noreply.github.com> Date: Sun, 25 Oct 2020 15:21:38 -0700 Subject: [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 Co-authored-by: george Co-authored-by: Ivan Chen --- src/components/onboarding/SocialMediaLinker.tsx | 112 ++---------------------- 1 file changed, 7 insertions(+), 105 deletions(-) (limited to 'src/components/onboarding') 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 = ({ 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 = 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 = ({ style={styles.container}> {label} - {state.authenticated && ( + {state.socialLinked && (