[FOR MASS REVIEW] Multiple contexts(Searched user gets replaced) (#97)

* First commit towards clean code

* Tested things

* Some final touch

* View updates posts

* Cleaned up followers / following

* You won't believe but it works

* Pass avatar uri via props

* Small change

* Small change

* Removed unnecessary jargon

Co-authored-by: Ivan Chen <ivan@thetaggid.com>

7 files changed, 36 insertions, 32 deletions

diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
index f3105f70..65ae7486 100644
--- a/src/components/common/AvatarTitle.tsx
+++ b/src/components/common/AvatarTitle.tsx
@@ -3,15 +3,13 @@ import {Image, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {TAGGS_GRADIENT} from '../../constants';
 import {AuthContext, ProfileContext} from '../../routes/';
+import {loadAvatar} from '../../services';
+import AsyncStorage from '@react-native-community/async-storage';
 
 type AvatarTitleProps = {
-  isProfileView: boolean;
+  avatar: string;
 };
-
-const AvatarTitle: React.FC<AvatarTitleProps> = ({isProfileView}) => {
-  const {avatar} = isProfileView
-    ? React.useContext(ProfileContext)
-    : React.useContext(AuthContext);
+const AvatarTitle: React.FC<AvatarTitleProps> = ({avatar}) => {
   return (
     <View style={[styles.container]}>
       <LinearGradient
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index f86d8331..7afc3fbc 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -23,6 +23,7 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
   const {user, moments, followers, following, updateFollowers} = isProfileView
     ? React.useContext(ProfileContext)
     : React.useContext(AuthContext);
+
   const {logout} = React.useContext(AuthContext);
   const {
     user: loggedInUser,
@@ -71,7 +72,7 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
   }, [createImagesMap]);
 
   /**
-   * This hook is called load of profile and when you push update the followers list.
+   * This hook is called on load of profile and when you update the followers list.
    */
   useEffect(() => {
     if (!userId) {
@@ -87,6 +88,7 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
 
   /**
    * Handles a click on the follow / unfollow button.
+   * updateFollowers and updateLoggedInUerFollowers to make sure that we update followers list / count for both the users in context.
    */
   const handleFollowUnfollow = async () => {
     const token = await AsyncStorage.getItem('token');
diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx
index 80d56de4..3e270428 100644
--- a/src/components/profile/FollowCount.tsx
+++ b/src/components/profile/FollowCount.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {View, Text, StyleSheet, ViewProps} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useNavigation} from '@react-navigation/native';
+import {AuthContext, ProfileContext} from '../../routes';
 
 interface FollowCountProps extends ViewProps {
   mode: 'followers' | 'following';
@@ -15,6 +16,10 @@ const FollowCount: React.FC<FollowCountProps> = ({
   count,
   isProfileView,
 }) => {
+  const {followers, following} = isProfileView
+    ? React.useContext(ProfileContext)
+    : React.useContext(AuthContext);
+
   const navigation = useNavigation();
   const displayed: string =
     count < 5e3
@@ -28,8 +33,8 @@ const FollowCount: React.FC<FollowCountProps> = ({
     <TouchableOpacity
       onPress={() =>
         navigation.push('FollowersListScreen', {
-          isProfileView: isProfileView,
           isFollowers: mode === 'followers',
+          list: mode === 'followers' ? followers : following,
         })
       }>
       <View style={[styles.container, style]}>
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 0b56a787..6f11e806 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -5,7 +5,6 @@ import FollowCount from './FollowCount';
 import {View, Text, StyleSheet} from 'react-native';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {AuthContext, ProfileContext} from '../../routes/';
-import {ProfilePreviewType} from 'src/types';
 
 type ProfileHeaderProps = {
   isProfileView: boolean;
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 7bbc3fb6..9c953e7d 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -13,7 +13,6 @@ import RNFetchBlob from 'rn-fetch-blob';
 import AsyncStorage from '@react-native-community/async-storage';
 import {AVATAR_PHOTO_ENDPOINT} from '../../constants';
 import {UserType} from '../../types';
-import {ProfileContext} from '../../routes/viewProfile';
 const NO_USER: UserType = {
   userId: '',
   username: '',
@@ -25,8 +24,8 @@ const NO_USER: UserType = {
  * If isComment is true then it means that we are not displaying this tile as a part of search results.
  * And hence we do not cache the search results.
  * On the other hand, if isComment is false, then we should update the search cache. (This cache needs to be revamped to clear outdated results.)
- * In either case, we load the ProfileContext with data and set the getNewMoments flag to true (Which ensures that everything that needs to be displayed on a user's profile is set).
- * Finally, We navigate to Profile if we are on the Search Stack. Else we navigate to ProfileView.
+ * In either case, we update the userBeingVisited in our AuthContext (Which can be used to make api calls later on to fetch user specific data).
+ * Finally, We navigate to Profile.
  */
 
 interface ProfilePreviewProps extends ViewProps {
@@ -39,9 +38,6 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
   style,
 }) => {
   const navigation = useNavigation();
-  const {loadProfile, updateMoments, updateFollowers} = useContext(
-    ProfileContext,
-  );
   const [avatarURI, setAvatarURI] = useState<string | null>(null);
   const [user, setUser] = useState<UserType>(NO_USER);
   useEffect(() => {
@@ -128,21 +124,14 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
         }
       }
 
-      //Load user profile and set new moments to true, navigate to Profile
-      //Load user profile makes sure that we actually load profile of the user the logged in user want to view
-      //Set new moments to true makes sure that we download the moment for the user being viewed again.
-      loadProfile(user.id, user.username);
-      updateMoments(true);
-      updateFollowers(true);
-      if (!isComment) {
-        navigation.push('Profile', {
-          isProfileView: true,
-        });
-      } else {
-        navigation.push('ProfileView', {
-          isProfileView: true,
-        });
-      }
+      /**
+       * Navigate to profile of the user selected
+       */
+      navigation.push('Profile', {
+        isProfileView: true,
+        username: user.username,
+        userId: user.id,
+      });
     } catch (e) {
       console.log(e);
     }
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 9418405d..d9c35b27 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, useState} from 'react';
+import React, {Fragment, useContext, 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';
@@ -16,6 +16,7 @@ import {
   registerNonIntegratedSocialLink,
 } from '../../services';
 import {SocialIcon, SocialLinkModal} from '../common';
+import {AuthContext, ProfileContext} from '../../routes';
 
 interface TaggProps {
   social: string;
@@ -39,6 +40,11 @@ const Tagg: React.FC<TaggProps> = ({
   const navigation = useNavigation();
   const [modalVisible, setModalVisible] = useState(false);
   const youMayPass = isLinked || isProfileView;
+  const {
+    profile: {name},
+    socialAccounts,
+    avatar,
+  } = isProfileView ? useContext(ProfileContext) : useContext(AuthContext);
 
   /*
   case isProfileView:
@@ -64,6 +70,10 @@ const Tagg: React.FC<TaggProps> = ({
         navigation.push('SocialMediaTaggs', {
           socialMediaType: social,
           isProfileView: isProfileView,
+          userId: userId,
+          name: name,
+          accountData: socialAccounts[social],
+          avatar: avatar,
         });
       } else {
         getNonIntegratedURL(social, userId).then((socialURL) => {
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index f2622011..aac68e99 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -79,7 +79,8 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
        * 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.
        */
-      socialsNeedUpdate(INTEGRATED_SOCIAL_LIST);
+      //We may need the line below in future ?
+      // socialsNeedUpdate(INTEGRATED_SOCIAL_LIST);
       loadData();
     }
   }, [isProfileView, taggsNeedUpdate, user.userId]);