Merge pull request #263 from IvanIFChen/tma665-sp-taggsbar-flickering

[TMA-665] SP Taggs bar flickering

1 files changed, 33 insertions, 30 deletions

diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 05ee18bb..f952c53f 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -21,6 +21,7 @@ interface TaggsBarProps {
   userXId: string | undefined;
   screenType: ScreenType;
   whiteRing: boolean | undefined;
+  linkedSocials?: string[];
 }
 const TaggsBar: React.FC<TaggsBarProps> = ({
   y,
@@ -28,6 +29,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
   userXId,
   screenType,
   whiteRing,
+  linkedSocials,
 }) => {
   let [taggs, setTaggs] = useState<Object[]>([]);
   let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true);
@@ -57,49 +59,50 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
    */
   useEffect(() => {
     const loadData = async () => {
-      getLinkedSocials(user.userId).then((linkedSocials) => {
-        const unlinkedSocials = SOCIAL_LIST.filter(
-          (s) => linkedSocials.indexOf(s) === -1,
+      const socials: string[] = linkedSocials
+        ? linkedSocials
+        : await getLinkedSocials(user.userId);
+      const unlinkedSocials = SOCIAL_LIST.filter(
+        (s) => socials.indexOf(s) === -1,
+      );
+      let new_taggs = [];
+      let i = 0;
+      for (let social of socials) {
+        new_taggs.push(
+          <Tagg
+            key={i}
+            social={social}
+            userXId={userXId}
+            user={user}
+            isLinked={true}
+            isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
+            setTaggsNeedUpdate={setTaggsNeedUpdate}
+            setSocialDataNeedUpdate={handleSocialUpdate}
+            whiteRing={whiteRing ? whiteRing : undefined}
+          />,
         );
-        let new_taggs = [];
-        let i = 0;
-        for (let social of linkedSocials) {
+        i++;
+      }
+      if (!userXId && !whiteRing) {
+        for (let social of unlinkedSocials) {
           new_taggs.push(
             <Tagg
               key={i}
               social={social}
-              userXId={userXId}
-              user={user}
-              isLinked={true}
+              isLinked={false}
               isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
               setTaggsNeedUpdate={setTaggsNeedUpdate}
               setSocialDataNeedUpdate={handleSocialUpdate}
+              userXId={userXId}
+              user={user}
               whiteRing={whiteRing ? whiteRing : undefined}
             />,
           );
           i++;
         }
-        if (!userXId && !whiteRing) {
-          for (let social of unlinkedSocials) {
-            new_taggs.push(
-              <Tagg
-                key={i}
-                social={social}
-                isLinked={false}
-                isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
-                setTaggsNeedUpdate={setTaggsNeedUpdate}
-                setSocialDataNeedUpdate={handleSocialUpdate}
-                userXId={userXId}
-                user={user}
-                whiteRing={whiteRing ? whiteRing : undefined}
-              />,
-            );
-            i++;
-          }
-        }
-        setTaggs(new_taggs);
-        setTaggsNeedUpdate(false);
-      });
+      }
+      setTaggs(new_taggs);
+      setTaggsNeedUpdate(false);
     };
     if (user.userId) {
       loadData();