1 files changed, 60 insertions, 41 deletions
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;