[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>

7 files changed, 156 insertions, 114 deletions

diff --git a/src/routes/authentication/AuthProvider.tsx b/src/routes/authentication/AuthProvider.tsx
index e5956eb2..6f577a73 100644
--- a/src/routes/authentication/AuthProvider.tsx
+++ b/src/routes/authentication/AuthProvider.tsx
@@ -1,20 +1,19 @@
 import React, {useEffect} from 'react';
 import {createContext, useState} from 'react';
-import RNFetchBlob from 'rn-fetch-blob';
-import AsyncStorage from '@react-native-community/async-storage';
 import {
   UserType,
   ProfileType,
   InstagramPostType,
   ProfilePreviewType,
 } from '../../types';
+import AsyncStorage from '@react-native-community/async-storage';
 import {
-  PROFILE_INFO_ENDPOINT,
-  AVATAR_PHOTO_ENDPOINT,
-  COVER_PHOTO_ENDPOINT,
-  GET_IG_POSTS_ENDPOINT,
-} from '../../constants';
-import {Alert} from 'react-native';
+  loadProfileInfo,
+  loadAvatar,
+  loadCover,
+  loadInstaPosts,
+  loadRecentlySearchedUsers,
+} from '../../services';
 
 interface AuthContextProps {
   user: UserType;
@@ -63,96 +62,6 @@ const AuthProvider: React.FC = ({children}) => {
     if (!userId) {
       return;
     }
-    const loadProfileInfo = async (token: string) => {
-      try {
-        const response = await fetch(PROFILE_INFO_ENDPOINT + `${userId}/`, {
-          method: 'GET',
-          headers: {
-            Authorization: 'Token ' + token,
-          },
-        });
-        const status = response.status;
-        if (status === 200) {
-          const info = await response.json();
-          let {name, biography, website} = info;
-          setProfile({name, biography, website});
-        }
-      } catch (error) {
-        Alert.alert(
-          'Something went wrong! 😭',
-          "Would you believe me if I told you that I don't know what happened?",
-        );
-      }
-    };
-    const loadAvatar = async (token: string) => {
-      try {
-        const response = await RNFetchBlob.config({
-          fileCache: true,
-          appendExt: 'jpg',
-        }).fetch('GET', AVATAR_PHOTO_ENDPOINT + `${userId}/`, {
-          Authorization: 'Token ' + token,
-        });
-        const status = response.info().status;
-        if (status === 200) {
-          setAvatar(response.path());
-        } else {
-          setAvatar('');
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    };
-    const loadCover = async (token: string) => {
-      try {
-        let response = await RNFetchBlob.config({
-          fileCache: true,
-          appendExt: 'jpg',
-        }).fetch('GET', COVER_PHOTO_ENDPOINT + `${userId}/`, {
-          Authorization: 'Token ' + token,
-        });
-        const status = response.info().status;
-        if (status === 200) {
-          setCover(response.path());
-        } else {
-          setCover('');
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    };
-    const loadInstaPosts = async (token: string) => {
-      try {
-        const response = await fetch(GET_IG_POSTS_ENDPOINT + `${userId}/`, {
-          method: 'GET',
-          headers: {
-            Authorization: 'Token ' + token,
-          },
-        });
-        const status = response.status;
-        if (status === 200) {
-          let ig_posts = await response.json();
-          setInstaPosts(ig_posts);
-        } else {
-          setInstaPosts([]);
-        }
-      } catch (error) {
-        console.log(error);
-        Alert.alert(
-          'Something went wrong! 😭',
-          "Would you believe me if I told you that I don't know what happened?",
-        );
-      }
-    };
-    const loadRecentlySearchedUsers = async () => {
-      try {
-        const asyncCache = await AsyncStorage.getItem(
-          '@recently_searched_users',
-        );
-        asyncCache != null ? setRecentSearches(JSON.parse(asyncCache)) : null;
-      } catch (e) {
-        console.log(e);
-      }
-    };
 
     const loadData = async () => {
       try {
@@ -161,11 +70,11 @@ const AuthProvider: React.FC = ({children}) => {
           setUser(NO_USER);
           return;
         }
-        loadProfileInfo(token);
-        loadAvatar(token);
-        loadCover(token);
-        loadInstaPosts(token);
-        loadRecentlySearchedUsers();
+        loadProfileInfo(token, userId, setProfile);
+        loadAvatar(token, userId, setAvatar);
+        loadCover(token, userId, setCover);
+        loadInstaPosts(token, userId, setInstaPosts);
+        loadRecentlySearchedUsers(setRecentSearches);
       } catch (err) {
         console.log(err);
       }
diff --git a/src/routes/index.ts b/src/routes/index.ts
index c06845aa..7e8a84ce 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -1,5 +1,7 @@
 export {default as AuthProvider} from './authentication';
+export {default as ProfileProvider} from './viewProfile';
 export * from './authentication';
+export * from './viewProfile';
 export * from './onboarding';
 export * from './profile';
 export {default} from './Routes';
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx
index eaf5f3aa..b39b726e 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/Profile.tsx
@@ -1,14 +1,36 @@
 import React from 'react';
+import {
+  ProfileScreen,
+  CaptionScreen,
+  SocialMediaTaggs,
+  SearchScreen,
+} from '../../screens';
+import {RouteProp} from '@react-navigation/native';
+import {ProfileStack, ProfileStackParams} from './ProfileStack';
 import {AvatarTitle} from '../../components';
-import {ProfileScreen, CaptionScreen, SocialMediaTaggs} from '../../screens';
-import {ProfileStack} from './ProfileStack';
 
-const Profile: React.FC = () => {
+type ProfileScreenRouteProps = RouteProp<ProfileStackParams, 'Profile'>;
+
+interface ProfileScreenProps {
+  route: ProfileScreenRouteProps;
+}
+
+const Profile: React.FC<ProfileScreenProps> = ({route}) => {
+  const {isProfileView} = route.params;
   return (
     <ProfileStack.Navigator
-      initialRouteName="Profile"
+      initialRouteName={!isProfileView ? `Profile` : `Search`}
       screenOptions={{headerShown: false}}>
-      <ProfileStack.Screen name="Profile" component={ProfileScreen} />
+      <ProfileStack.Screen
+        name="Profile"
+        component={ProfileScreen}
+        initialParams={{isProfileView: isProfileView}}
+      />
+      {isProfileView ? (
+        <ProfileStack.Screen name="Search" component={SearchScreen} />
+      ) : (
+        <React.Fragment />
+      )}
       <ProfileStack.Screen
         name="SocialMediaTaggs"
         component={SocialMediaTaggs}
@@ -17,10 +39,14 @@ const Profile: React.FC = () => {
           headerTransparent: true,
           headerBackTitleVisible: false,
           headerTintColor: 'white',
-          headerTitle: () => <AvatarTitle />,
+          headerTitle: () => <AvatarTitle isProfileView={isProfileView} />,
         }}
       />
-      <ProfileStack.Screen name="CaptionScreen" component={CaptionScreen} />
+      {!isProfileView ? (
+        <ProfileStack.Screen name="CaptionScreen" component={CaptionScreen} />
+      ) : (
+        <React.Fragment />
+      )}
     </ProfileStack.Navigator>
   );
 };
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx
index c1da67c1..63ab9a10 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStack.tsx
@@ -1,10 +1,14 @@
 import {createStackNavigator} from '@react-navigation/stack';
 
 export type ProfileStackParams = {
-  Profile: undefined;
+  Search: undefined;
+  Profile: {
+    isProfileView: boolean;
+  };
   SocialMediaTaggs: {
     socialMediaType: string;
     socialMediaHandle: string;
+    isProfileView: boolean;
   };
   CaptionScreen: {title: string; image: object};
 };
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 456e923f..2852b565 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -1,7 +1,7 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import React from 'react';
 import {NavigationIcon} from '../../components';
-import {Home, Notifications, SearchScreen, Upload} from '../../screens';
+import {Home, Notifications, Upload} from '../../screens';
 import Profile from '../profile';
 
 const Tabs = createBottomTabNavigator();
@@ -57,10 +57,18 @@ const NavigationBar: React.FC = () => {
         },
       }}>
       <Tabs.Screen name="Home" component={Home} />
-      <Tabs.Screen name="Search" component={SearchScreen} />
+      <Tabs.Screen
+        name="Search"
+        component={Profile}
+        initialParams={{isProfileView: true}}
+      />
       <Tabs.Screen name="Upload" component={Upload} />
       <Tabs.Screen name="Notifications" component={Notifications} />
-      <Tabs.Screen name="Profile" component={Profile} />
+      <Tabs.Screen
+        name="Profile"
+        component={Profile}
+        initialParams={{isProfileView: false}}
+      />
     </Tabs.Navigator>
   );
 };
diff --git a/src/routes/viewProfile/ProfileProvider.tsx b/src/routes/viewProfile/ProfileProvider.tsx
new file mode 100644
index 00000000..1af7917d
--- /dev/null
+++ b/src/routes/viewProfile/ProfileProvider.tsx
@@ -0,0 +1,91 @@
+import React, {useEffect} from 'react';
+import {createContext, useState} from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
+import {UserType, ProfileType, InstagramPostType} from '../../types';
+
+import {
+  loadProfileInfo,
+  loadAvatar,
+  loadCover,
+  loadInstaPosts,
+  loadRecentlySearchedUsers,
+} from '../../services';
+
+interface ProfileContextProps {
+  user: UserType;
+  profile: ProfileType;
+  loadProfile: (userId: string, username: string) => void;
+  avatar: string | null;
+  cover: string | null;
+  instaPosts: Array<InstagramPostType>;
+}
+const NO_USER: UserType = {
+  userId: '',
+  username: '',
+};
+const NO_PROFILE: ProfileType = {
+  biography: '',
+  website: '',
+  name: '',
+};
+export const ProfileContext = createContext<ProfileContextProps>({
+  user: NO_USER,
+  profile: NO_PROFILE,
+  loadProfile: () => {},
+  avatar: null,
+  cover: null,
+  instaPosts: [],
+});
+
+/**
+ * This is the context provider for user profiles that the logged in user wants to see
+ */
+const ProfileProvider: React.FC = ({children}) => {
+  const [user, setUser] = useState<UserType>(NO_USER);
+  const [profile, setProfile] = useState<ProfileType>(NO_PROFILE);
+  const [avatar, setAvatar] = useState<string | null>(null);
+  const [cover, setCover] = useState<string | null>(null);
+  const [instaPosts, setInstaPosts] = useState<Array<InstagramPostType>>([]);
+
+  const {userId} = user;
+  useEffect(() => {
+    if (!userId) {
+      return;
+    }
+
+    const loadData = async () => {
+      try {
+        const token = await AsyncStorage.getItem('token');
+        if (!token) {
+          setUser(NO_USER);
+          return;
+        }
+        loadProfileInfo(token, userId, setProfile);
+        loadAvatar(token, userId, setAvatar);
+        loadCover(token, userId, setCover);
+        loadInstaPosts(token, userId, setInstaPosts);
+      } catch (err) {
+        console.log(err);
+      }
+    };
+    loadData();
+  }, [userId]);
+
+  return (
+    <ProfileContext.Provider
+      value={{
+        user,
+        profile,
+        avatar,
+        cover,
+        instaPosts,
+        loadProfile: (id, username) => {
+          setUser({...user, userId: id, username});
+        },
+      }}>
+      {children}
+    </ProfileContext.Provider>
+  );
+};
+
+export default ProfileProvider;
diff --git a/src/routes/viewProfile/index.ts b/src/routes/viewProfile/index.ts
new file mode 100644
index 00000000..7035ce4a
--- /dev/null
+++ b/src/routes/viewProfile/index.ts
@@ -0,0 +1,2 @@
+export * from './ProfileProvider';
+export {default} from './ProfileProvider';