[TMA 279] Ability to search and view someone's profile (#58)

* Batch one : major changes

* WIP checkpoint

* The one before the final touch

* Probable final touch

* ran yarn lint D:

* linter broke something

* fixed a small bug

* Addressed a small nitpick

* Well abstracted now

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

1 files changed, 17 insertions, 4 deletions

diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx
index 952f08f7..cc960308 100644
--- a/src/components/search/SearchResult.tsx
+++ b/src/components/search/SearchResult.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, useContext} from 'react';
 import {ProfilePreviewType} from '../../types';
 import {
   View,
@@ -8,10 +8,12 @@ import {
   ViewProps,
   TouchableOpacity,
 } from 'react-native';
+import {useNavigation} from '@react-navigation/native';
 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: '',
@@ -24,6 +26,8 @@ const SearchResult: React.FC<SearchResultProps> = ({
   profilePreview: {username, first_name, last_name, id},
   style,
 }) => {
+  const navigation = useNavigation();
+  const {loadProfile} = useContext(ProfileContext);
   const [avatarURI, setAvatarURI] = useState<string | null>(null);
   const [user, setUser] = useState<UserType>(NO_USER);
   useEffect(() => {
@@ -38,7 +42,7 @@ const SearchResult: React.FC<SearchResultProps> = ({
         const response = await RNFetchBlob.config({
           fileCache: true,
           appendExt: 'jpg',
-        }).fetch('GET', AVATAR_PHOTO_ENDPOINT + `${id}`, {
+        }).fetch('GET', AVATAR_PHOTO_ENDPOINT + `${id}/`, {
           Authorization: 'Token ' + token,
         });
         const status = response.info().status;
@@ -66,7 +70,7 @@ const SearchResult: React.FC<SearchResultProps> = ({
    * Cache maintains 10 recently searched users, popping off the oldest one if
    * needed to make space.
    */
-  const addToRecentlyStored = async () => {
+  const addToRecentlyStoredAndNavigateToProfile = async () => {
     let user: ProfilePreviewType = {
       id,
       username,
@@ -95,6 +99,15 @@ const SearchResult: React.FC<SearchResultProps> = ({
       } else {
         recentlySearchedList = [user];
       }
+
+      //Load user profile and navigate to ProfileView
+      //Load user profile makes sure that we actually load profile of the user the logged in user want to view
+      //Not sure if we should make this call before caching the search results ??
+      loadProfile(user.id, user.username);
+      navigation.navigate('Profile', {
+        isProfileView: true,
+      });
+
       try {
         let recentlySearchedListString = JSON.stringify(recentlySearchedList);
         await AsyncStorage.setItem(
@@ -111,7 +124,7 @@ const SearchResult: React.FC<SearchResultProps> = ({
 
   return (
     <TouchableOpacity
-      onPress={addToRecentlyStored}
+      onPress={addToRecentlyStoredAndNavigateToProfile}
       style={[styles.container, style]}>
       <Image
         style={styles.avatar}