TMA-663-Changes for empty view

1 files changed, 73 insertions, 14 deletions

diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx
index 084c6afe..705fb5c9 100644
--- a/src/components/search/SearchResultCell.tsx
+++ b/src/components/search/SearchResultCell.tsx
@@ -1,12 +1,24 @@
+import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Image, StyleSheet, Text, View} from 'react-native';
+import {Alert, Image, StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useDispatch, useStore} from 'react-redux';
+import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
 import {loadImageFromURL} from '../../services';
-import {ProfilePreviewType} from '../../types';
+import {RootState} from '../../store/rootReducer';
+import {ProfilePreviewType, ScreenType, UserType} from '../../types';
 import {normalize, SCREEN_WIDTH} from '../../utils';
-import {defaultUserProfile} from '../../utils/users';
+import {
+  addUserToRecentlyViewed,
+  checkIfUserIsBlocked,
+  defaultUserProfile,
+  fetchUserX,
+  userXInStore,
+} from '../../utils/users';
 
 interface SearchResults {
   profileData: ProfilePreviewType;
+  loggedInUser: UserType;
 }
 
 const SearchResultsCell: React.FC<SearchResults> = ({
@@ -19,8 +31,9 @@ const SearchResultsCell: React.FC<SearchResults> = ({
     thumbnail_url,
     category,
   },
+  loggedInUser,
 }) => {
-  const [avatar, setAvatar] = useState('');
+  const [avatar, setAvatar] = useState<string | undefined>(undefined);
   useEffect(() => {
     (async () => {
       if (thumbnail_url !== undefined) {
@@ -37,9 +50,60 @@ const SearchResultsCell: React.FC<SearchResults> = ({
     })();
   }, [thumbnail_url]);
 
+  const dispatch = useDispatch();
+  const state: RootState = useStore().getState();
+  const navigation = useNavigation();
+  const addToRecentlyStoredAndNavigateToProfile = async () => {
+    try {
+      //If the logged in user is blocked by the user being viewed, do not proceed.
+      const isUserBlocked = await checkIfUserIsBlocked(
+        id,
+        dispatch,
+        loggedInUser,
+      );
+      if (isUserBlocked) {
+        Alert.alert(ERROR_UNABLE_TO_VIEW_PROFILE);
+        return;
+      }
+
+      await addUserToRecentlyViewed({
+        id,
+        first_name,
+        last_name,
+        thumbnail_url,
+        username,
+      });
+
+      const userXId = loggedInUser.username === username ? undefined : id;
+
+      /**
+       * Dispatch an event to Fetch the user details only if we're navigating to
+       * a userX's profile.
+       * If the user is already present in store, do not fetch again.
+       * Finally, Navigate to profile of the user selected.
+       */
+      if (userXId && !userXInStore(state, ScreenType.Search, id)) {
+        await fetchUserX(
+          dispatch,
+          {userId: id, username: username},
+          ScreenType.Search,
+        );
+      }
+
+      navigation.navigate('Profile', {
+        userXId,
+        screenType: ScreenType.Search,
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   const userCell = () => {
     return (
-      <View style={styles.cellContainer}>
+      <TouchableOpacity
+        onPress={addToRecentlyStoredAndNavigateToProfile}
+        style={styles.cellContainer}>
         <Image
           defaultSource={defaultUserProfile()}
           source={{uri: avatar}}
@@ -51,7 +115,7 @@ const SearchResultsCell: React.FC<SearchResults> = ({
             {first_name + ' ' + last_name}
           </Text>
         </View>
-      </View>
+      </TouchableOpacity>
     );
   };
 
@@ -65,7 +129,7 @@ const SearchResultsCell: React.FC<SearchResults> = ({
 
   const categoryCell = () => {
     return (
-      <View style={styles.cellContainer}>
+      <TouchableOpacity style={styles.cellContainer}>
         <View style={[styles.imageContainer, styles.categoryBackground]}>
           <Image
             resizeMode="contain"
@@ -76,16 +140,11 @@ const SearchResultsCell: React.FC<SearchResults> = ({
         <View style={styles.initialTextContainer}>
           <Text style={styles.initialTextStyle}>{name}</Text>
         </View>
-      </View>
+      </TouchableOpacity>
     );
   };
 
-  return (
-    <>
-      {name !== undefined && categoryCell()}
-      {name === undefined && userCell()}
-    </>
-  );
+  return name === undefined ? userCell() : categoryCell();
 };
 
 const styles = StyleSheet.create({