2 files changed, 53 insertions, 49 deletions

diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 9f8fafd1..086b3c87 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {Fragment, useContext, useState} from 'react';
+import React, {Fragment, useContext, useEffect, 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';
@@ -17,36 +17,35 @@ import {
   registerNonIntegratedSocialLink,
 } from '../../services';
 import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
-import {AuthContext, ProfileContext} from '../../routes';
+import {useSelector} from 'react-redux';
+import {RootState} from '../../store/rootreducer';
+import {ScreenType} from '../../types';
 
 interface TaggProps {
   social: string;
-  isProfileView: boolean;
   isLinked: boolean;
   isIntegrated: boolean;
   setTaggsNeedUpdate: (_: boolean) => void;
-  setSocialDataNeedUpdate: (_: string[]) => void;
-  userId: string;
+  setSocialDataNeedUpdate: (_: string) => void;
+  userXId: string;
+  screenType: ScreenType;
 }
 
 const Tagg: React.FC<TaggProps> = ({
   social,
-  isProfileView,
   isLinked,
   isIntegrated,
   setTaggsNeedUpdate,
   setSocialDataNeedUpdate,
-  userId,
+  userXId,
+  screenType,
 }) => {
   const navigation = useNavigation();
   const [modalVisible, setModalVisible] = useState(false);
-  const youMayPass = isLinked || isProfileView;
-  const {
-    profile: {name},
-    socialAccounts,
-    avatar,
-  } = isProfileView ? useContext(ProfileContext) : useContext(AuthContext);
-
+  const youMayPass = isLinked || userXId;
+  const {user} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
   /*
   case isProfileView:
     case linked:
@@ -62,7 +61,7 @@ const Tagg: React.FC<TaggProps> = ({
           show auth browser
         case !integrated_social:
           show modal
-  Tagg's "Tagg" will use the Ring instead of PurpleRing
+  Tagg's "Tagg" will use the Ring instead of PurpleRing 
   */
 
   const modalOrAuthBrowserOrPass = async () => {
@@ -70,14 +69,10 @@ const Tagg: React.FC<TaggProps> = ({
       if (INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1) {
         navigation.push('SocialMediaTaggs', {
           socialMediaType: social,
-          isProfileView: isProfileView,
-          userId: userId,
-          name: name,
-          accountData: socialAccounts[social],
-          avatar: avatar,
+          userXId,
         });
       } else {
-        getNonIntegratedURL(social, userId).then((socialURL) => {
+        getNonIntegratedURL(social, user.userId).then((socialURL) => {
           if (socialURL) {
             Linking.openURL(socialURL);
           } else {
@@ -89,7 +84,7 @@ const Tagg: React.FC<TaggProps> = ({
       if (isIntegrated) {
         handlePressForAuthBrowser(social).then((success) => {
           setTaggsNeedUpdate(success);
-          setSocialDataNeedUpdate(success ? [social] : []);
+          if (success) setSocialDataNeedUpdate(social);
         });
       } else {
         setModalVisible(true);
@@ -127,7 +122,7 @@ const Tagg: React.FC<TaggProps> = ({
 
   return (
     <>
-      {isProfileView && !isLinked ? (
+      {userXId && !isLinked ? (
         <Fragment />
       ) : (
         <>
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: [