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/taggs/Tagg.tsx | 146 ++++++++++++++++++++++++++++++-------- src/components/taggs/TaggsBar.tsx | 101 +++++++++++++++----------- 2 files changed, 178 insertions(+), 69 deletions(-) (limited to 'src/components/taggs') diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 9274e0eb..c64da5ef 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -1,51 +1,141 @@ import {useNavigation} from '@react-navigation/native'; -import React from 'react'; -import {StyleSheet, TouchableOpacity, View} from 'react-native'; -import LinearGradient from 'react-native-linear-gradient'; -import {TAGGS_GRADIENT} from '../../constants'; +import React, {Fragment, useState} from 'react'; +import {Alert, Linking, StyleSheet, TouchableOpacity, View} from 'react-native'; +import PurpleRingPlus from '../../assets/icons/purple_ring+.svg'; +import PurpleRing from '../../assets/icons/purple_ring.svg'; +import RingPlus from '../../assets/icons/ring+.svg'; +import Ring from '../../assets/icons/ring.svg'; +import {INTEGRATED_SOCIAL_LIST, TAGG_ICON_DIM} from '../../constants'; +import { + handlePressForAuthBrowser, + registerNonIntegratedSocialLink, +} from '../../services'; +import {SocialIcon, SocialLinkModal} from '../common'; interface TaggProps { - style: object; social: string; isProfileView: boolean; + isLinked: boolean; + isIntegrated: boolean; + setTaggsNeedUpdate: (_: boolean) => void; + setSocialDataNeedUpdate: (_: string[]) => void; } -const Tagg: React.FC = ({style, social, isProfileView}) => { +const Tagg: React.FC = ({ + social, + isProfileView, + isLinked, + isIntegrated, + setTaggsNeedUpdate, + setSocialDataNeedUpdate, +}) => { const navigation = useNavigation(); + const [modalVisible, setModalVisible] = useState(false); + const youMayPass = isLinked || isProfileView; - return ( - + /* + case isProfileView: + case linked: + show normal ring, navigate to taggs view + case !linked: + don't show tagg + case !isProfileView: + case linked: + show normal ring, navigate to taggs view + case !linked: + show ring+, then... + case integrated_social: + show auth browser + case !integrated_social: + show modal + Tagg's "Tagg" will use the Ring instead of PurpleRing + */ + + const modalOrAuthBrowserOrPass = async () => { + if (youMayPass) { + if (INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1) { navigation.navigate('SocialMediaTaggs', { socialMediaType: social, isProfileView: isProfileView, - }) - }> - - - - + }); + } else { + // TODO: we don't know what the link is...? + Linking.openURL( + `http://google.com/search?q=take+me+to+${social}+profile+page`, + ); + } + } else { + if (isIntegrated) { + handlePressForAuthBrowser(social).then((success) => { + setTaggsNeedUpdate(success); + setSocialDataNeedUpdate(success ? [social] : []); + }); + } else { + setModalVisible(true); + } + } + }; + + const pickTheRightRingHere = () => { + if (youMayPass) { + if (social === 'Tagg') { + return ; + } else { + return ; + } + } else { + if (social === 'Tagg') { + return ; + } else { + return ; + } + } + }; + + const linkNonIntegratedSocial = async (username: string) => { + if (await registerNonIntegratedSocialLink(social, username)) { + Alert.alert(`Successfully linked ${social} 🎉`); + setTaggsNeedUpdate(true); + } else { + // If we display too fast the alert will get dismissed with the modal + setTimeout(() => { + Alert.alert(`Something went wrong, we can't link with ${social} 😔`); + }, 500); + } + }; + + return ( + <> + {isProfileView && !isLinked ? ( + + ) : ( + + + + + {pickTheRightRingHere()} + + + )} + ); }; const styles = StyleSheet.create({ - gradient: { - width: 80, - height: 80, - borderRadius: 40, + container: { justifyContent: 'center', alignItems: 'center', + marginHorizontal: 5, }, image: { - width: 72, - height: 72, - borderRadius: 37.5, - backgroundColor: 'pink', + width: TAGG_ICON_DIM, + height: TAGG_ICON_DIM, + borderRadius: TAGG_ICON_DIM / 2, + position: 'absolute', }, }); diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx index 88f670b5..520cc266 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -1,10 +1,16 @@ // @refresh react -import React from 'react'; +import React, {useEffect, useState} from 'react'; import {StyleSheet} from 'react-native'; import Animated from 'react-native-reanimated'; -import Tagg from './Tagg'; -import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants'; +import { + INTEGRATED_SOCIAL_LIST, + PROFILE_CUTOUT_BOTTOM_Y, + SOCIAL_LIST, +} from '../../constants'; +import {AuthContext, ProfileContext} from '../../routes'; +import {getLinkedSocials} from '../../services'; import {StatusBarHeight} from '../../utils'; +import Tagg from './Tagg'; const {View, ScrollView, interpolate, Extrapolate} = Animated; interface TaggsBarProps { @@ -17,43 +23,59 @@ const TaggsBar: React.FC = ({ profileBodyHeight, isProfileView, }) => { - const taggs: Array = []; + let [taggs, setTaggs] = useState([]); + let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true); + const context = isProfileView + ? React.useContext(ProfileContext) + : React.useContext(AuthContext); + const {user, socialsNeedUpdate} = context; - taggs.push( - , - ); - taggs.push( - , - ); - taggs.push( - , - ); + useEffect(() => { + const loadData = async () => { + getLinkedSocials(user.userId).then((linkedSocials) => { + const unlinkedSocials = SOCIAL_LIST.filter( + (s) => linkedSocials.indexOf(s) === -1, + ); + let new_taggs = []; + let i = 0; + for (let social of linkedSocials) { + new_taggs.push( + , + ); + i++; + } + for (let social of unlinkedSocials) { + new_taggs.push( + , + ); + i++; + } + setTaggs(new_taggs); + setTaggsNeedUpdate(false); + }); + }; + + if (taggsNeedUpdate) { + loadData(); + } + }, [isProfileView, taggsNeedUpdate, user.userId]); - for (let i = 3; i < 10; i++) { - taggs.push( - , - ); - } const shadowOpacity: Animated.Node = interpolate(y, { inputRange: [ PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, @@ -105,9 +127,6 @@ const styles = StyleSheet.create({ alignItems: 'center', paddingHorizontal: 15, }, - tagg: { - marginHorizontal: 14, - }, }); export default TaggsBar; -- cgit v1.2.3-70-g09d2