Removed the search icon from the navigation bar and replaced it with the upload icon (along with the corresponding routing). Small tweaks on navigation and design will be needed. Commented out the code for navigation to search page - should be deleted soon.

5 files changed, 134 insertions, 112 deletions

diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index ef3fc7fd..ed3863b3 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -1,8 +1,8 @@
 /**
  * Note the name userXId here, it refers to the id of the user being visited
  */
-import {createStackNavigator} from '@react-navigation/stack';
-import {Image} from 'react-native-image-crop-picker';
+import { createStackNavigator } from '@react-navigation/stack';
+import { Image } from 'react-native-image-crop-picker';
 import {
   CommentBaseType,
   MomentTagType,
@@ -15,9 +15,13 @@ export type MainStackParams = {
   SuggestedPeople: {
     screenType: ScreenType;
   };
+  /*
   Search: {
     screenType: ScreenType;
-  };
+  }; */
+  Upload: {
+    screenType: ScreenType;
+  }
   RequestContactsAccess: {
     screenType: ScreenType;
   };
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index f6adeab1..e1ad8aa9 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -1,8 +1,8 @@
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationOptions} from '@react-navigation/stack';
+import { RouteProp } from '@react-navigation/native';
+import { StackNavigationOptions } from '@react-navigation/stack';
 import React from 'react';
-import {StyleSheet, Text} from 'react-native';
-import {normalize} from 'react-native-elements';
+import { StyleSheet, Text } from 'react-native';
+import { normalize } from 'react-native-elements';
 import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
   AccountType,
@@ -26,7 +26,7 @@ import {
   PrivacyScreen,
   ProfileScreen,
   RequestContactsAccess,
-  SearchScreen,
+  // SearchScreen,
   SettingsScreen,
   SocialMediaTaggs,
   SuggestedPeopleScreen,
@@ -37,10 +37,10 @@ import {
   CameraScreen,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
-import {ScreenType} from '../../types';
-import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
-import {MainStack, MainStackParams} from './MainStackNavigator';
-import {ZoomInCropper} from '../../components/comments/ZoomInCropper';
+import { ScreenType } from '../../types';
+import { AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH } from '../../utils';
+import { MainStack, MainStackParams } from './MainStackNavigator';
+import { ZoomInCropper } from '../../components/comments/ZoomInCropper';
 
 /**
  * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited.
@@ -57,33 +57,37 @@ type MainStackRouteProps = RouteProp<MainStackParams, 'Profile'>;
 interface MainStackProps {
   route: MainStackRouteProps;
 }
-const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
-  const {screenType} = route.params;
+const MainStackScreen: React.FC<MainStackProps> = ({ route }) => {
+  const { screenType } = route.params;
 
-  const isSearchTab = screenType === ScreenType.Search;
+  // const isSearchTab = screenType === ScreenType.Search;
   const isNotificationsTab = screenType === ScreenType.Notifications;
   const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople;
+  const isUploadTab = screenType === ScreenType.Upload;
 
   const initialRouteName = (() => {
     switch (screenType) {
       case ScreenType.Profile:
         return 'Profile';
+      /*
       case ScreenType.Search:
-        return 'Search';
+        return 'Search'; */
       case ScreenType.Notifications:
         return 'Notifications';
       case ScreenType.SuggestedPeople:
         return 'SuggestedPeople';
       case ScreenType.Chat:
         return 'ChatList';
+      case ScreenType.Upload:
+        return 'Upload';
     }
   })();
 
   const tutorialModalStyle: StackNavigationOptions = {
-    cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
+    cardStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
     gestureDirection: 'vertical',
     cardOverlayEnabled: true,
-    cardStyleInterpolator: ({current: {progress}}) => ({
+    cardStyleInterpolator: ({ current: { progress } }) => ({
       cardStyle: {
         opacity: progress.interpolate({
           inputRange: [0, 0.5, 0.9, 1],
@@ -94,24 +98,37 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
   };
 
   const newChatModalStyle: StackNavigationOptions = {
-    cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
+    cardStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
     cardOverlayEnabled: true,
     animationEnabled: false,
   };
 
+  /*
+  Following was removed to eliminate search screen naviagtion
+
+  {isSearchTab && (
+    <MainStack.Screen
+      name="Search"
+      component={SearchScreen}
+      initialParams={{ screenType }}
+    />
+  )}
+
+  */
+
   const mainStackScreen = () => {
     return (
       <MainStack.Navigator
         screenOptions={{
           headerShown: false,
-          gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6},
+          gestureResponseDistance: { horizontal: SCREEN_WIDTH * 0.6 },
         }}
         mode="card"
         initialRouteName={initialRouteName}>
         <MainStack.Screen
           name="Profile"
           component={ProfileScreen}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...headerBarOptions('white', ''),
           }}
@@ -120,21 +137,21 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           <MainStack.Screen
             name="SuggestedPeople"
             component={SuggestedPeopleScreen}
-            initialParams={{screenType}}
+            initialParams={{ screenType }}
           />
         )}
         {isNotificationsTab && (
           <MainStack.Screen
             name="Notifications"
             component={NotificationsScreen}
-            initialParams={{screenType}}
+            initialParams={{ screenType }}
           />
         )}
-        {isSearchTab && (
+        {isUploadTab && (
           <MainStack.Screen
-            name="Search"
-            component={SearchScreen}
-            initialParams={{screenType}}
+            name="Upload"
+            component={CameraScreen}
+            initialParams={{ screenType }}
           />
         )}
         <MainStack.Screen
@@ -171,7 +188,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           options={{
             ...tutorialModalStyle,
           }}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
         />
         <MainStack.Screen
           name="CaptionScreen"
@@ -184,10 +201,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="SocialMediaTaggs"
           component={SocialMediaTaggs}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...headerBarOptions('white', ''),
-            headerStyle: {height: AvatarHeaderHeight},
+            headerStyle: { height: AvatarHeaderHeight },
           }}
         />
         <MainStack.Screen
@@ -207,7 +224,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="IndividualMoment"
           component={IndividualMoment}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...modalStyle,
             gestureEnabled: false,
@@ -217,7 +234,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="MomentCommentsScreen"
           component={MomentCommentsScreen}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...headerBarOptions('black', 'Comments'),
           }}
@@ -232,7 +249,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="MomentUploadPrompt"
           component={MomentUploadPromptScreen}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...modalStyle,
           }}
@@ -240,7 +257,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="FriendsListScreen"
           component={FriendsListScreen}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...headerBarOptions('black', 'Friends'),
           }}
@@ -255,7 +272,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="RequestContactsAccess"
           component={RequestContactsAccess}
-          initialParams={{screenType}}
+          initialParams={{ screenType }}
           options={{
             ...modalStyle,
             gestureEnabled: false,
@@ -271,7 +288,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="UpdateSPPicture"
           component={SuggestedPeopleUploadPictureScreen}
-          initialParams={{editing: true}}
+          initialParams={{ editing: true }}
           options={{
             ...headerBarOptions('white', ''),
           }}
@@ -279,7 +296,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="BadgeSelection"
           component={BadgeSelection}
-          initialParams={{editing: true}}
+          initialParams={{ editing: true }}
           options={{
             ...headerBarOptions('white', ''),
           }}
@@ -287,7 +304,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="MutualBadgeHolders"
           component={MutualBadgeHolders}
-          options={{...modalStyle}}
+          options={{ ...modalStyle }}
         />
         <MainStack.Screen
           name="SPWelcomeScreen"
@@ -299,20 +316,20 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="ChatList"
           component={ChatListScreen}
-          options={{headerTitle: 'Chats'}}
+          options={{ headerTitle: 'Chats' }}
         />
         <MainStack.Screen
           name="Chat"
           component={ChatScreen}
           options={{
             ...headerBarOptions('black', ''),
-            headerStyle: {height: ChatHeaderHeight},
+            headerStyle: { height: ChatHeaderHeight },
           }}
         />
         <MainStack.Screen
           name="NewChatModal"
           component={NewChatModal}
-          options={{headerShown: false, ...newChatModalStyle}}
+          options={{ headerShown: false, ...newChatModalStyle }}
         />
         <MainStack.Screen
           name="TagSelectionScreen"
@@ -371,8 +388,8 @@ export const headerBarOptions: (
     <Text
       style={[
         styles.headerTitle,
-        {color: color},
-        {fontSize: title.length > 18 ? normalize(14) : normalize(16)},
+        { color: color },
+        { fontSize: title.length > 18 ? normalize(14) : normalize(16) },
       ]}>
       {title}
     </Text>
@@ -380,10 +397,10 @@ export const headerBarOptions: (
 });
 
 export const modalStyle: StackNavigationOptions = {
-  cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
+  cardStyle: { backgroundColor: 'rgba(80,80,80,0.6)' },
   gestureDirection: 'vertical',
   cardOverlayEnabled: true,
-  cardStyleInterpolator: ({current: {progress}}) => ({
+  cardStyleInterpolator: ({ current: { progress } }) => ({
     cardStyle: {
       opacity: progress.interpolate({
         inputRange: [0, 0.5, 0.9, 1],
@@ -401,7 +418,7 @@ const styles = StyleSheet.create({
     shadowColor: 'black',
     shadowRadius: 3,
     shadowOpacity: 0.7,
-    shadowOffset: {width: 0, height: 0},
+    shadowOffset: { width: 0, height: 0 },
   },
   headerTitle: {
     letterSpacing: normalize(1.3),
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index c3a42739..f8b94470 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -1,23 +1,23 @@
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import React, {Fragment, useEffect, useState} from 'react';
-import {useSelector} from 'react-redux';
-import {NavigationIcon} from '../../components';
-import {NO_NOTIFICATIONS} from '../../store/initialStates';
-import {RootState} from '../../store/rootReducer';
-import {setNotificationsReadDate} from '../../services';
-import {ScreenType} from '../../types';
-import {haveUnreadNotifications} from '../../utils';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import React, { Fragment, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { NavigationIcon } from '../../components';
+import { NO_NOTIFICATIONS } from '../../store/initialStates';
+import { RootState } from '../../store/rootReducer';
+import { setNotificationsReadDate } from '../../services';
+import { ScreenType } from '../../types';
+import { haveUnreadNotifications } from '../../utils';
 import MainStackScreen from '../main/MainStackScreen';
-import {NotificationPill} from '../../components/notifications';
+import { NotificationPill } from '../../components/notifications';
 
 const Tabs = createBottomTabNavigator();
 
 const NavigationBar: React.FC = () => {
-  const {isOnboardedUser, newNotificationReceived} = useSelector(
+  const { isOnboardedUser, newNotificationReceived } = useSelector(
     (state: RootState) => state.user,
   );
 
-  const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector(
+  const { notifications: { notifications } = NO_NOTIFICATIONS } = useSelector(
     (state: RootState) => state,
   );
   // Triggered if user clicks on Notifications page to close the pill
@@ -41,13 +41,13 @@ const NavigationBar: React.FC = () => {
     <>
       <NotificationPill showIcon={showIcon} />
       <Tabs.Navigator
-        screenOptions={({route}) => ({
-          tabBarIcon: ({focused}) => {
+        screenOptions={({ route }) => ({
+          tabBarIcon: ({ focused }) => {
             switch (route.name) {
               case 'Home':
                 return <NavigationIcon tab="Home" disabled={!focused} />;
-              case 'Search':
-                return <NavigationIcon tab="Search" disabled={!focused} />;
+              case 'Chat':
+                return <NavigationIcon tab="Chat" disabled={!focused} />;
               case 'Upload':
                 return <NavigationIcon tab="Upload" disabled={!focused} />;
               case 'Notifications':
@@ -60,8 +60,6 @@ const NavigationBar: React.FC = () => {
                     disabled={!focused}
                   />
                 );
-              case 'Chat':
-                return <NavigationIcon tab="Chat" disabled={!focused} />;
               case 'Profile':
                 return <NavigationIcon tab="Profile" disabled={!focused} />;
               case 'SuggestedPeople':
@@ -88,17 +86,22 @@ const NavigationBar: React.FC = () => {
         <Tabs.Screen
           name="SuggestedPeople"
           component={MainStackScreen}
-          initialParams={{screenType: ScreenType.SuggestedPeople}}
+          initialParams={{ screenType: ScreenType.SuggestedPeople }}
+        />
+        <Tabs.Screen
+          name="Chat"
+          component={MainStackScreen}
+          initialParams={{ screenType: ScreenType.Chat }}
         />
         <Tabs.Screen
-          name="Search"
+          name="Upload"
           component={MainStackScreen}
-          initialParams={{screenType: ScreenType.Search}}
+          initialParams={{ screenType: ScreenType.Upload }}
         />
         <Tabs.Screen
           name="Notifications"
           component={MainStackScreen}
-          initialParams={{screenType: ScreenType.Notifications}}
+          initialParams={{ screenType: ScreenType.Notifications }}
           listeners={{
             tabPress: (_) => {
               // Closes the pill once this screen has been opened
@@ -109,14 +112,9 @@ const NavigationBar: React.FC = () => {
           }}
         />
         <Tabs.Screen
-          name="Chat"
-          component={MainStackScreen}
-          initialParams={{screenType: ScreenType.Chat}}
-        />
-        <Tabs.Screen
           name="Profile"
           component={MainStackScreen}
-          initialParams={{screenType: ScreenType.Profile}}
+          initialParams={{ screenType: ScreenType.Profile }}
         />
       </Tabs.Navigator>
     </>
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 75533a9b..e18679dc 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -1,6 +1,6 @@
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import React, {Fragment, useEffect, useState} from 'react';
+import { RouteProp } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import React, { Fragment, useEffect, useState } from 'react';
 import {
   Alert,
   Image,
@@ -13,29 +13,29 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {MentionInputControlled} from '../../components';
-import {Button, normalize} from 'react-native-elements';
-import {useDispatch, useSelector} from 'react-redux';
+import { MentionInputControlled } from '../../components';
+import { Button, normalize } from 'react-native-elements';
+import { useDispatch, useSelector } from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
-import {SearchBackground} from '../../components';
-import {CaptionScreenHeader} from '../../components/';
+import { SearchBackground } from '../../components';
+import { CaptionScreenHeader } from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
-import {TAGG_LIGHT_BLUE_2} from '../../constants';
+import { TAGG_LIGHT_BLUE_2 } from '../../constants';
 import {
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
   ERROR_UPLOAD,
   SUCCESS_PIC_UPLOAD,
 } from '../../constants/strings';
-import {MainStackParams} from '../../routes';
-import {patchMoment, postMoment, postMomentTags} from '../../services';
+import { MainStackParams } from '../../routes';
+import { patchMoment, postMoment, postMomentTags } from '../../services';
 import {
   loadUserMoments,
   updateProfileCompletionStage,
 } from '../../store/actions';
-import {RootState} from '../../store/rootReducer';
-import {MomentTagType} from '../../types';
-import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
-import {mentionPartTypes} from '../../utils/comments';
+import { RootState } from '../../store/rootReducer';
+import { MomentTagType } from '../../types';
+import { SCREEN_WIDTH, StatusBarHeight } from '../../utils';
+import { mentionPartTypes } from '../../utils/comments';
 
 /**
  * Upload Screen to allow users to upload posts to Tagg
@@ -50,10 +50,10 @@ interface CaptionScreenProps {
   navigation: CaptionScreenNavigationProp;
 }
 
-const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
-  const {title, image, screenType, selectedTags, moment} = route.params;
+const CaptionScreen: React.FC<CaptionScreenProps> = ({ route, navigation }) => {
+  const { title, image, screenType, selectedTags, moment } = route.params;
   const {
-    user: {userId},
+    user: { userId },
   } = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const [caption, setCaption] = useState(moment ? moment.caption : '');
@@ -179,7 +179,9 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 title="Cancel"
                 buttonStyle={styles.button}
                 onPress={() =>
-                  moment ? navigation.goBack() : navigateToProfile()
+                  // There is issue here with navigations on the commented code below
+                  // moment ? navigation.goBack() : navigateToProfile()
+                  navigation.goBack()
                 }
               />
               <Button
@@ -191,12 +193,12 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             </View>
             <CaptionScreenHeader
               style={styles.header}
-              {...{title: moment ? moment.moment_category : title}}
+              {...{ title: moment ? moment.moment_category : title }}
             />
             {/* this is the image we want to center our tags' initial location within */}
             <Image
               style={styles.image}
-              source={{uri: moment ? moment.moment_url : image?.path}}
+              source={{ uri: moment ? moment.moment_url : image?.path }}
               resizeMode={'contain'}
             />
             <MentionInputControlled
@@ -213,8 +215,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                   imagePath: moment
                     ? moment.moment_url
                     : image
-                    ? image.path
-                    : '',
+                      ? image.path
+                      : '',
                   selectedTags: tags,
                 })
               }
@@ -296,7 +298,7 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(0.3),
     textAlign: 'right',
   },
-  tagIcon: {width: 20, height: 20},
+  tagIcon: { width: 20, height: 20 },
 });
 
 export default CaptionScreen;
diff --git a/src/types/types.ts b/src/types/types.ts
index 171a9ff3..74c35703 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -1,6 +1,6 @@
-import {ImageSourcePropType} from 'react-native';
+import { ImageSourcePropType } from 'react-native';
 import Animated from 'react-native-reanimated';
-import {Channel as ChannelType, StreamChat} from 'stream-chat';
+import { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 export interface UserType {
   userId: string;
@@ -171,6 +171,7 @@ export enum ScreenType {
   Notifications,
   SuggestedPeople,
   Chat,
+  Upload
 }
 
 /**
@@ -236,10 +237,10 @@ export type NotificationType = {
   verbage: string;
   notification_type: TypeOfNotification;
   notification_object:
-    | CommentNotificationType
-    | ThreadNotificationType
-    | MomentType
-    | undefined;
+  | CommentNotificationType
+  | ThreadNotificationType
+  | MomentType
+  | undefined;
   timestamp: string;
   unread: boolean;
 };
@@ -343,14 +344,14 @@ export type ChatContextType = {
   setChannel: React.Dispatch<
     React.SetStateAction<
       | ChannelType<
-          LocalAttachmentType,
-          LocalChannelType,
-          LocalCommandType,
-          LocalEventType,
-          LocalMessageType,
-          LocalResponseType,
-          LocalUserType
-        >
+        LocalAttachmentType,
+        LocalChannelType,
+        LocalCommandType,
+        LocalEventType,
+        LocalMessageType,
+        LocalResponseType,
+        LocalUserType
+      >
       | undefined
     >
   >;