2 files changed, 178 insertions, 69 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',
   },
 });
 
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<TaggsBarProps> = ({
   profileBodyHeight,
   isProfileView,
 }) => {
-  const taggs: Array<JSX.Element> = [];
+  let [taggs, setTaggs] = useState<Object[]>([]);
+  let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true);
+  const context = isProfileView
+    ? React.useContext(ProfileContext)
+    : React.useContext(AuthContext);
+  const {user, socialsNeedUpdate} = context;
 
-  taggs.push(
-    <Tagg
-      key={0}
-      style={styles.tagg}
-      social={'Instagram'}
-      isProfileView={isProfileView}
-    />,
-  );
-  taggs.push(
-    <Tagg
-      key={1}
-      style={styles.tagg}
-      social={'Facebook'}
-      isProfileView={isProfileView}
-    />,
-  );
-  taggs.push(
-    <Tagg
-      key={2}
-      style={styles.tagg}
-      social={'Twitter'}
-      isProfileView={isProfileView}
-    />,
-  );
+  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(
+            <Tagg
+              key={i}
+              social={social}
+              isProfileView={isProfileView}
+              isLinked={true}
+              isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
+              setTaggsNeedUpdate={setTaggsNeedUpdate}
+              setSocialDataNeedUpdate={socialsNeedUpdate}
+            />,
+          );
+          i++;
+        }
+        for (let social of unlinkedSocials) {
+          new_taggs.push(
+            <Tagg
+              key={i}
+              social={social}
+              isProfileView={isProfileView}
+              isLinked={false}
+              isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
+              setTaggsNeedUpdate={setTaggsNeedUpdate}
+              setSocialDataNeedUpdate={socialsNeedUpdate}
+            />,
+          );
+          i++;
+        }
+        setTaggs(new_taggs);
+        setTaggsNeedUpdate(false);
+      });
+    };
+
+    if (taggsNeedUpdate) {
+      loadData();
+    }
+  }, [isProfileView, taggsNeedUpdate, user.userId]);
 
-  for (let i = 3; i < 10; i++) {
-    taggs.push(
-      <Tagg
-        key={i}
-        style={styles.tagg}
-        social={'Instagram'}
-        isProfileView={isProfileView}
-      />,
-    );
-  }
   const shadowOpacity: Animated.Node<number> = 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;