[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, 118 insertions, 28 deletions

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<TaggProps> = ({style, social, isProfileView}) => {
+const Tagg: React.FC<TaggProps> = ({
+  social,
+  isProfileView,
+  isLinked,
+  isIntegrated,
+  setTaggsNeedUpdate,
+  setSocialDataNeedUpdate,
+}) => {
   const navigation = useNavigation();
+  const [modalVisible, setModalVisible] = useState(false);
+  const youMayPass = isLinked || isProfileView;
 
-  return (
-    <TouchableOpacity
-      onPress={() =>
+  /*
+  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,
-        })
-      }>
-      <LinearGradient
-        colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
-        useAngle={true}
-        angle={154.72}
-        angleCenter={{x: 0.5, y: 0.5}}
-        style={[styles.gradient, style]}>
-        <View style={styles.image} />
-      </LinearGradient>
-    </TouchableOpacity>
+        });
+      } 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 <Ring width={TAGG_ICON_DIM} height={TAGG_ICON_DIM} />;
+      } else {
+        return <PurpleRing width={TAGG_ICON_DIM} height={TAGG_ICON_DIM} />;
+      }
+    } else {
+      if (social === 'Tagg') {
+        return <RingPlus width={TAGG_ICON_DIM} height={TAGG_ICON_DIM} />;
+      } else {
+        return <PurpleRingPlus width={TAGG_ICON_DIM} height={TAGG_ICON_DIM} />;
+      }
+    }
+  };
+
+  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 ? (
+        <Fragment />
+      ) : (
+        <TouchableOpacity onPress={modalOrAuthBrowserOrPass}>
+          <SocialLinkModal
+            modalVisible={modalVisible}
+            setModalVisible={setModalVisible}
+            completionCallback={linkNonIntegratedSocial}
+          />
+          <View style={styles.container}>
+            <SocialIcon style={styles.image} social={social} />
+            {pickTheRightRingHere()}
+          </View>
+        </TouchableOpacity>
+      )}
+    </>
   );
 };
 
 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',
   },
 });