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

2 files changed, 38 insertions, 8 deletions

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};
 };