1 files changed, 35 insertions, 26 deletions

diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index aac68e99..12e4b93a 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -1,35 +1,53 @@
-// @refresh react
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, useContext} from 'react';
 import {StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
+import {useDispatch, useSelector} from 'react-redux';
 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';
+import {RootState} from '../../store/rootReducer';
+import {ScreenType} from '../../types';
+import {loadIndividualSocial} from '../../store/actions';
 
 const {View, ScrollView, interpolate, Extrapolate} = Animated;
 interface TaggsBarProps {
   y: Animated.Value<number>;
   profileBodyHeight: number;
-  isProfileView: boolean;
+  userXId: string;
+  screenType: ScreenType;
 }
 const TaggsBar: React.FC<TaggsBarProps> = ({
   y,
   profileBodyHeight,
-  isProfileView,
+  userXId,
+  screenType,
 }) => {
   let [taggs, setTaggs] = useState<Object[]>([]);
   let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true);
-  const context = isProfileView
-    ? React.useContext(ProfileContext)
-    : React.useContext(AuthContext);
-  const {user, socialsNeedUpdate} = context;
 
+  const {user} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
+
+  const dispatch = useDispatch();
+
+  /**
+   * Updates the individual social that needs update
+   * @param socialType Type of the social that needs update
+   */
+  const handleSocialUpdate = (socialType: string) => {
+    dispatch(loadIndividualSocial(user.userId, socialType));
+  };
+
+  /**
+   * This useEffect should be called evey time the user being viewed is changed OR
+   * And update is triggered manually
+   */
   useEffect(() => {
     const loadData = async () => {
       getLinkedSocials(user.userId).then((linkedSocials) => {
@@ -43,12 +61,12 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
             <Tagg
               key={i}
               social={social}
-              isProfileView={isProfileView}
+              userXId={userXId}
+              screenType={screenType}
               isLinked={true}
               isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
               setTaggsNeedUpdate={setTaggsNeedUpdate}
-              setSocialDataNeedUpdate={socialsNeedUpdate}
-              userId={user.userId}
+              setSocialDataNeedUpdate={handleSocialUpdate}
             />,
           );
           i++;
@@ -58,12 +76,12 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
             <Tagg
               key={i}
               social={social}
-              isProfileView={isProfileView}
+              userXId={userXId}
+              screenType={screenType}
               isLinked={false}
               isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
               setTaggsNeedUpdate={setTaggsNeedUpdate}
-              setSocialDataNeedUpdate={socialsNeedUpdate}
-              userId={user.userId}
+              setSocialDataNeedUpdate={handleSocialUpdate}
             />,
           );
           i++;
@@ -73,17 +91,8 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
       });
     };
 
-    if (taggsNeedUpdate) {
-      /**
-       * Triggering redundant call to the backend for now to make the app work.
-       * TODO : Figure out a better way to get the updates social posts for the profile being visited.
-       * Have an event triggered from ProfileProvider based on which we could make a call to backedn to get updated posts.
-       */
-      //We may need the line below in future ?
-      // socialsNeedUpdate(INTEGRATED_SOCIAL_LIST);
-      loadData();
-    }
-  }, [isProfileView, taggsNeedUpdate, user.userId]);
+    loadData();
+  }, [taggsNeedUpdate, user]);
 
   const shadowOpacity: Animated.Node<number> = interpolate(y, {
     inputRange: [