[TMA - 398 AND TMA-430] Replace Providers with Redux Store (#125)

* First

* WIP

* Thunk

* Some more comments

* sc

* recent searches and follounfollow

* Edit profile dummy

* Block / unblock and some cleanup

* Replace auth provider

* Sc

* Delete AP  after rebase

* Discover users

* Cleanup

* More cleanup

* Replace profile provider

* Fixed build failure

* Fixed a bug reported

* Prevent app crash when backend server is down

9 files changed, 207 insertions, 148 deletions

diff --git a/src/components/profile/Avatar.tsx b/src/components/profile/Avatar.tsx
index aca3bf4d..903d0d18 100644
--- a/src/components/profile/Avatar.tsx
+++ b/src/components/profile/Avatar.tsx
@@ -1,16 +1,20 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {Image, StyleSheet} from 'react-native';
-import {AuthContext, ProfileContext} from '../../routes/';
+import {useSelector} from 'react-redux';
+import {RootState} from '../../store/rootreducer';
+import {ScreenType} from '../../types';
 
 const PROFILE_DIM = 100;
 interface AvatarProps {
   style: object;
-  isProfileView: boolean;
+  userXId: string;
+  screenType: ScreenType;
 }
-const Avatar: React.FC<AvatarProps> = ({style, isProfileView}) => {
-  const {avatar} = isProfileView
-    ? React.useContext(ProfileContext)
-    : React.useContext(AuthContext);
+const Avatar: React.FC<AvatarProps> = ({style, screenType, userXId}) => {
+  const {avatar} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
+
   return (
     <Image
       style={[styles.image, style]}
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 13db60a5..73f6fad3 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,9 +1,13 @@
-import AsyncStorage from '@react-native-community/async-storage';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState, useContext} from 'react';
 import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
 import Animated from 'react-native-reanimated';
-import {AuthContext, ProfileContext} from '../../routes/';
-import {MomentType} from 'src/types';
+import {
+  MomentType,
+  ProfilePreviewType,
+  ProfileType,
+  ScreenType,
+  UserType,
+} from '../../types';
 import {defaultMoments} from '../../constants';
 import {SCREEN_HEIGHT} from '../../utils';
 import TaggsBar from '../taggs/TaggsBar';
@@ -11,26 +15,49 @@ import {Moment} from '../moments';
 import ProfileBody from './ProfileBody';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
-import {followOrUnfollowUser, blockOrUnblockUser} from '../../services';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {RootState} from '../../store/rootreducer';
+import {
+  followUnfollowUser,
+  blockUnblockUser,
+  loadFollowData,
+  updateUserXFollowersAndFollowing,
+} from '../../store/actions';
+import {
+  NO_USER,
+  NO_PROFILE,
+  EMPTY_PROFILE_PREVIEW_LIST,
+  EMPTY_MOMENTS_LIST,
+} from '../../store/initialStates';
 
 interface ContentProps {
   y: Animated.Value<number>;
-  isProfileView: boolean;
+  userXId: string;
+  screenType: ScreenType;
 }
 
-const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
-  const [profileBodyHeight, setProfileBodyHeight] = useState(0);
-  const {user, moments, followers, following, updateFollowers} = isProfileView
-    ? React.useContext(ProfileContext)
-    : React.useContext(AuthContext);
-
-  const {
-    logout,
-    user: loggedInUser,
-    updateFollowers: updateLoggedInUserFollowers,
-    blockedUsers,
-    updateBlockedUsers,
-  } = React.useContext(AuthContext);
+const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
+  const dispatch = useDispatch();
+
+  const {user = NO_USER, profile = NO_PROFILE} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
+
+  const {followers = EMPTY_PROFILE_PREVIEW_LIST} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.follow);
+
+  const {moments = EMPTY_MOMENTS_LIST} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.moments);
+
+  const {blockedUsers = EMPTY_PROFILE_PREVIEW_LIST} = useSelector(
+    (state: RootState) => state.blocked,
+  );
+  const {user: loggedInUser = NO_USER} = useSelector(
+    (state: RootState) => state.user,
+  );
+  const state = useStore().getState();
 
   /**
    * States
@@ -38,8 +65,9 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
   const [imagesMap, setImagesMap] = useState<Map<string, MomentType[]>>(
     new Map(),
   );
-  const [isFollowed, setIsFollowed] = React.useState<boolean>(false);
-  const [isBlocked, setIsBlocked] = React.useState<boolean>(false);
+  const [isFollowed, setIsFollowed] = useState<boolean>(false);
+  const [isBlocked, setIsBlocked] = useState<boolean>(false);
+  const [profileBodyHeight, setProfileBodyHeight] = useState(0);
 
   /**
    * If own profile is being viewed then do not show the follow button.
@@ -51,8 +79,6 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
     setProfileBodyHeight(height);
   };
 
-  const {userId} = user;
-
   const createImagesMap = useCallback(() => {
     var map = new Map();
     moments.forEach(function (imageObject) {
@@ -68,9 +94,6 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
   }, [moments]);
 
   useEffect(() => {
-    if (!userId) {
-      return;
-    }
     createImagesMap();
   }, [createImagesMap]);
 
@@ -78,9 +101,6 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
    * This hook is called on load of profile and when you update the followers list.
    */
   useEffect(() => {
-    if (!userId) {
-      return;
-    }
     const isActuallyFollowed = followers.some(
       (follower) => follower.username === loggedInUser.username,
     );
@@ -90,62 +110,63 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
   }, [followers]);
 
   useEffect(() => {
-    if (!userId) {
-      return;
-    }
-
     const isActuallyBlocked = blockedUsers.some(
       (cur_user) => user.username === cur_user.username,
     );
     if (isBlocked != isActuallyBlocked) {
       setIsBlocked(isActuallyBlocked);
     }
-  }, [blockedUsers]);
+  }, [blockedUsers, user]);
+
+  /**
+   * The object returned by this method is added to the list of blocked / followed users by the reducer.
+   * Which helps us prevent an extra api call to the backend just to fetch a user.
+   */
+  const getUserAsProfilePreviewType = (
+    passedInUser: UserType,
+    passedInProfile: ProfileType,
+  ): ProfilePreviewType => {
+    const fullName = passedInProfile.name.split(' ');
+    return {
+      id: passedInUser.userId,
+      username: passedInUser.username,
+      first_name: fullName[0],
+      last_name: fullName[1],
+    };
+  };
 
   /**
    * 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.
+   * followUnfollowUser takes care of updating the following list for loggedInUser
+   * updateUserXFollowersAndFollowing updates followers and following list for the followed user.
    */
+
   const handleFollowUnfollow = async () => {
-    const token = await AsyncStorage.getItem('token');
-    if (!token) {
-      logout();
-      return;
-    }
-    const isUpdatedSuccessful = await followOrUnfollowUser(
-      loggedInUser.userId,
-      userId,
-      token,
-      isFollowed,
+    await dispatch(
+      followUnfollowUser(
+        loggedInUser,
+        getUserAsProfilePreviewType(user, profile),
+        isFollowed,
+      ),
     );
-    if (isUpdatedSuccessful) {
-      setIsFollowed(!isFollowed);
-      updateFollowers(true);
-      updateLoggedInUserFollowers(true);
-    }
+    await dispatch(updateUserXFollowersAndFollowing(user.userId, state));
   };
 
   /**
    * Handles a click on the block / unblock button.
+   * loadFollowData updates followers / following list for the logged in user
+   * updateUserXFollowersAndFollowing updates followers and following list for the followed user.
    */
   const handleBlockUnblock = async () => {
-    const token = await AsyncStorage.getItem('token');
-    if (!token) {
-      logout();
-      return;
-    }
-    const isUpdatedSuccessful = await blockOrUnblockUser(
-      loggedInUser.userId,
-      userId,
-      token,
-      isBlocked,
+    await dispatch(
+      blockUnblockUser(
+        loggedInUser,
+        getUserAsProfilePreviewType(user, profile),
+        isBlocked,
+      ),
     );
-    if (isUpdatedSuccessful) {
-      setIsBlocked(!isBlocked);
-      updateBlockedUsers(true);
-      updateFollowers(true);
-      updateLoggedInUserFollowers(true);
-    }
+    await dispatch(loadFollowData(loggedInUser.userId));
+    await dispatch(updateUserXFollowersAndFollowing(user.userId, state));
   };
 
   return (
@@ -155,15 +176,12 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
       showsVerticalScrollIndicator={false}
       scrollEventThrottle={1}>
       <ProfileCutout />
-      <ProfileHeader
-        isProfileView={isProfileView}
-        numFollowing={following.length}
-        numFollowers={followers.length}
-      />
+      <ProfileHeader {...{userXId, screenType}} />
       <ProfileBody
         {...{
           onLayout,
-          isProfileView,
+          userXId,
+          screenType,
           isOwnProfile,
           isFollowed,
           handleFollowUnfollow,
@@ -171,14 +189,15 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
           handleBlockUnblock,
         }}
       />
-      <TaggsBar {...{y, profileBodyHeight, isProfileView}} />
+      <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
       <View style={styles.momentsContainer}>
         {defaultMoments.map((title, index) => (
           <Moment
             key={index}
             title={title}
             images={imagesMap.get(title)}
-            isProfileView={isProfileView}
+            userXId={userXId}
+            screenType={screenType}
           />
         ))}
       </View>
diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx
index 36e41776..3c0f7045 100644
--- a/src/components/profile/Cover.tsx
+++ b/src/components/profile/Cover.tsx
@@ -1,18 +1,23 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {Image, StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {IMAGE_WIDTH, COVER_HEIGHT, IMAGE_HEIGHT} from '../../constants';
-import {AuthContext, ProfileContext} from '../../routes/';
+import {useSelector, useStore} from 'react-redux';
+import {RootState} from '../../store/rootreducer';
+import {ScreenType} from '../../types';
+import {DUMMY_USERID, NO_USER_DATA} from '../../store/initialStates';
 
 const {interpolate, Extrapolate} = Animated;
 interface CoverProps {
   y: Animated.Value<number>;
-  isProfileView: boolean;
+  userXId: string;
+  screenType: ScreenType;
 }
-const Cover: React.FC<CoverProps> = ({y, isProfileView}) => {
-  const {cover} = isProfileView
-    ? React.useContext(ProfileContext)
-    : React.useContext(AuthContext);
+const Cover: React.FC<CoverProps> = ({y, userXId, screenType}) => {
+  const {cover = ''} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
+
   const scale: Animated.Node<number> = interpolate(y, {
     inputRange: [-COVER_HEIGHT, 0],
     outputRange: [1.5, 1.25],
diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx
index 3e270428..a23a3533 100644
--- a/src/components/profile/FollowCount.tsx
+++ b/src/components/profile/FollowCount.tsx
@@ -1,24 +1,33 @@
-import React from 'react';
+import React, {useContext} 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';
+import {RootState} from '../../store/rootReducer';
+import {useSelector} from 'react-redux';
+import {ScreenType} from '../../types';
+import {EMPTY_PROFILE_PREVIEW_LIST} from '../../store/initialStates';
 
 interface FollowCountProps extends ViewProps {
   mode: 'followers' | 'following';
-  count: number;
-  isProfileView: boolean;
+  userXId: string;
+  screenType: ScreenType;
 }
 
 const FollowCount: React.FC<FollowCountProps> = ({
   style,
   mode,
-  count,
-  isProfileView,
+  userXId,
+  screenType,
 }) => {
-  const {followers, following} = isProfileView
-    ? React.useContext(ProfileContext)
-    : React.useContext(AuthContext);
+  const {
+    followers = EMPTY_PROFILE_PREVIEW_LIST,
+    following = EMPTY_PROFILE_PREVIEW_LIST,
+  } = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.follow);
+
+  const isFollowers = mode === 'followers';
+  const count = isFollowers ? followers.length : following.length;
 
   const navigation = useNavigation();
   const displayed: string =
@@ -33,14 +42,15 @@ const FollowCount: React.FC<FollowCountProps> = ({
     <TouchableOpacity
       onPress={() =>
         navigation.push('FollowersListScreen', {
-          isFollowers: mode === 'followers',
-          list: mode === 'followers' ? followers : following,
+          isFollowers,
+          userXId,
+          screenType,
         })
       }>
       <View style={[styles.container, style]}>
         <Text style={styles.count}>{displayed}</Text>
         <Text style={styles.label}>
-          {mode === 'followers' ? 'Followers' : 'Following'}
+          {isFollowers ? 'Followers' : 'Following'}
         </Text>
       </View>
     </TouchableOpacity>
diff --git a/src/components/profile/Followers.tsx b/src/components/profile/Followers.tsx
index e11041d0..c665603d 100644
--- a/src/components/profile/Followers.tsx
+++ b/src/components/profile/Followers.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View, StyleSheet, ViewProps, Text} from 'react-native';
-import {ProfilePreviewType} from '../../types';
+import {ProfilePreviewType, ScreenType} from '../../types';
 import {ProfilePreview} from '..';
 import {useNavigation} from '@react-navigation/native';
 import {Button} from 'react-native-elements';
@@ -8,9 +8,14 @@ import {Button} from 'react-native-elements';
 interface FollowersListProps {
   result: Array<ProfilePreviewType>;
   sectionTitle: string;
+  screenType: ScreenType;
 }
 
-const Followers: React.FC<FollowersListProps> = ({result, sectionTitle}) => {
+const Followers: React.FC<FollowersListProps> = ({
+  result,
+  sectionTitle,
+  screenType,
+}) => {
   const navigation = useNavigation();
   return (
     <>
@@ -31,6 +36,7 @@ const Followers: React.FC<FollowersListProps> = ({result, sectionTitle}) => {
           key={profilePreview.id}
           {...{profilePreview}}
           previewType={'Comment'}
+          screenType={screenType}
         />
       ))}
     </>
diff --git a/src/components/profile/MoreInfoDrawer.tsx b/src/components/profile/MoreInfoDrawer.tsx
index 719c1894..a8908b4d 100644
--- a/src/components/profile/MoreInfoDrawer.tsx
+++ b/src/components/profile/MoreInfoDrawer.tsx
@@ -4,14 +4,14 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {AuthContext} from '../../routes';
 import {BottomDrawer} from '../common';
 import PersonOutline from '../../assets/ionicons/person-outline.svg';
+import {useSelector} from 'react-redux';
+import {RootState} from '../../store/rootreducer';
 
 interface MoreInfoDrawerProps {
   isOpen: boolean;
   setIsOpen: (visible: boolean) => void;
-  isProfileView: boolean;
 }
 
 const MoreInfoDrawer: React.FC<MoreInfoDrawerProps> = (props) => {
@@ -20,7 +20,7 @@ const MoreInfoDrawer: React.FC<MoreInfoDrawerProps> = (props) => {
   const navigation = useNavigation();
   const {
     user: {userId, username},
-  } = useContext(AuthContext);
+  } = useSelector((state: RootState) => state.user);
 
   const goToEditProfile = () => {
     navigation.push('EditProfile', {
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index c0253533..3c05fc26 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,33 +1,38 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {StyleSheet, View, Text, LayoutChangeEvent} from 'react-native';
 import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
-import {AuthContext, ProfileContext} from '../../routes/';
 import ToggleButton from './ToggleButton';
+import {RootState} from '../../store/rootReducer';
+import {useSelector} from 'react-redux';
+import {ScreenType} from '../../types';
+import {NO_PROFILE} from '../../store/initialStates';
 
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
-  isProfileView: boolean;
   isFollowed: boolean;
   isBlocked: boolean;
   isOwnProfile: boolean;
   handleFollowUnfollow: Function;
   handleBlockUnblock: Function;
+  userXId: string;
+  screenType: ScreenType;
 }
 const ProfileBody: React.FC<ProfileBodyProps> = ({
   onLayout,
-  isProfileView,
   isFollowed,
   isBlocked,
   isOwnProfile,
   handleFollowUnfollow,
   handleBlockUnblock,
+  userXId,
+  screenType,
 }) => {
   const {
-    profile,
+    profile = NO_PROFILE,
     user: {username},
-  } = isProfileView
-    ? React.useContext(ProfileContext)
-    : React.useContext(AuthContext);
+  } = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
 
   const {biography, website} = profile;
 
@@ -36,7 +41,7 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
       <Text style={styles.username}>{`@${username}`}</Text>
       <Text style={styles.biography}>{`${biography}`}</Text>
       <Text style={styles.website}>{`${website}`}</Text>
-      {isProfileView && !isOwnProfile ? (
+      {userXId && !isOwnProfile ? (
         <View style={styles.toggleButtonContainer}>
           {!isBlocked && (
             <ToggleButton
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 62949746..621aae9a 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,34 +1,30 @@
-import React, {useState} from 'react';
+import React, {useState, useContext} from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
 import {TAGG_DARK_BLUE} from '../../constants';
-import {AuthContext, ProfileContext} from '../../routes/';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import Avatar from './Avatar';
 import MoreInfoDrawer from './MoreInfoDrawer';
 import FollowCount from './FollowCount';
+import {useSelector} from 'react-redux';
+import {RootState} from '../../store/rootreducer';
+import {ScreenType} from '../../types';
 
 type ProfileHeaderProps = {
-  isProfileView: boolean;
-  numFollowing: number;
-  numFollowers: number;
+  userXId: string;
+  screenType: ScreenType;
 };
 
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({
-  isProfileView,
-  numFollowing,
-  numFollowers,
-}) => {
-  const {
-    profile: {name},
-  } = isProfileView
-    ? React.useContext(ProfileContext)
-    : React.useContext(AuthContext);
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({userXId, screenType}) => {
+  const {profile: {name = ''} = {}} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
+
   const [drawerVisible, setDrawerVisible] = useState(false);
 
   return (
     <View style={styles.container}>
-      {!isProfileView && (
+      {!userXId && (
         <>
           <TouchableOpacity
             style={styles.more}
@@ -37,29 +33,29 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
             }}>
             <MoreIcon height={30} width={30} color={TAGG_DARK_BLUE} />
           </TouchableOpacity>
-          <MoreInfoDrawer
-            isOpen={drawerVisible}
-            setIsOpen={setDrawerVisible}
-            isProfileView={isProfileView}
-          />
+          <MoreInfoDrawer isOpen={drawerVisible} setIsOpen={setDrawerVisible} />
         </>
       )}
       <View style={styles.row}>
-        <Avatar style={styles.avatar} isProfileView={isProfileView} />
+        <Avatar
+          style={styles.avatar}
+          userXId={userXId}
+          screenType={screenType}
+        />
         <View style={styles.header}>
           <Text style={styles.name}>{name}</Text>
           <View style={styles.row}>
             <FollowCount
               style={styles.follows}
               mode="followers"
-              count={numFollowers}
-              isProfileView={isProfileView}
+              screenType={screenType}
+              userXId={userXId}
             />
             <FollowCount
               style={styles.follows}
               mode="following"
-              count={numFollowing}
-              isProfileView={isProfileView}
+              screenType={screenType}
+              userXId={userXId}
             />
           </View>
         </View>
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index af116dd3..5567fa5a 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState, useContext} from 'react';
-import {ProfilePreviewType} from '../../types';
+import {ProfilePreviewType, ScreenType} from '../../types';
 import {
   View,
   Text,
@@ -14,8 +14,11 @@ import RNFetchBlob from 'rn-fetch-blob';
 import AsyncStorage from '@react-native-community/async-storage';
 import {AVATAR_PHOTO_ENDPOINT} from '../../constants';
 import {UserType, PreviewType} from '../../types';
-import {AuthContext} from '../../routes/';
 import {isUserBlocked} from '../../services';
+import {useSelector, useDispatch, useStore} from 'react-redux';
+import {RootState} from '../../store/rootreducer';
+import {loadUserX, logout} from '../../store/actions';
+import {userXInStore} from '../../utils';
 const NO_USER: UserType = {
   userId: '',
   username: '',
@@ -27,22 +30,24 @@ 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 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 {
   profilePreview: ProfilePreviewType;
   previewType: PreviewType;
+  screenType: ScreenType;
 }
 const ProfilePreview: React.FC<ProfilePreviewProps> = ({
   profilePreview: {username, first_name, last_name, id},
   previewType,
+  screenType,
 }) => {
   const navigation = useNavigation();
-  const {user: loggedInUser, logout} = React.useContext(AuthContext);
+  const {user: loggedInUser} = useSelector((state: RootState) => state.user);
   const [avatarURI, setAvatarURI] = useState<string | null>(null);
   const [user, setUser] = useState<UserType>(NO_USER);
+  const dispatch = useDispatch();
   useEffect(() => {
     let mounted = true;
     const loadAvatar = async () => {
@@ -87,12 +92,14 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
   const checkIfUserIsBlocked = async (userId: string) => {
     const token = await AsyncStorage.getItem('token');
     if (!token) {
-      logout();
+      dispatch(logout());
       return false;
     }
     return await isUserBlocked(userId, loggedInUser.userId, token);
   };
 
+  const state: RootState = useStore().getState();
+
   const addToRecentlyStoredAndNavigateToProfile = async () => {
     let user: ProfilePreviewType = {
       id,
@@ -145,12 +152,19 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       }
 
       /**
-       * Navigate to profile of the user selected
+       * Dispatch an event to Fetch the user details
+       * If the user is already present in store, do not fetch again
+       * Finally, Navigate to profile of the user selected
        */
+      if (!userXInStore(state, screenType, user.id)) {
+        dispatch(
+          loadUserX({userId: user.id, username: user.username}, screenType),
+        );
+      }
       navigation.push('Profile', {
-        isProfileView: true,
         username: user.username,
-        userId: user.id,
+        userXId: user.id,
+        screenType: screenType,
       });
     } catch (e) {
       console.log(e);