Merge pull request #357 from ankit-thanekar007/tma-771-new-chat-modal

[TMA-771] : Modal for Suggested People

1 files changed, 219 insertions, 202 deletions

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 48c57920..37867151 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationOptions} from '@react-navigation/stack';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {normalize} from 'react-native-elements';
 import BackIcon from '../../assets/icons/back-arrow.svg';
@@ -11,6 +11,8 @@ import {
   BadgeSelection,
   CaptionScreen,
   CategorySelection,
+  ChatListScreen,
+  ChatScreen,
   CreateCustomCategory,
   DiscoverUsers,
   EditProfile,
@@ -19,18 +21,17 @@ import {
   InviteFriendsScreen,
   MomentCommentsScreen,
   MomentUploadPromptScreen,
+  NewChatModal,
   NotificationsScreen,
-  ProfileScreen,
   PrivacyScreen,
+  ProfileScreen,
   RequestContactsAccess,
   SearchScreen,
+  SettingsScreen,
   SocialMediaTaggs,
   SuggestedPeopleScreen,
   SuggestedPeopleUploadPictureScreen,
   SuggestedPeopleWelcomeScreen,
-  SettingsScreen,
-  ChatListScreen,
-  ChatScreen,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
@@ -52,7 +53,6 @@ type MainStackRouteProps = RouteProp<MainStackParams, 'Profile'>;
 interface MainStackProps {
   route: MainStackRouteProps;
 }
-
 const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
   const {screenType} = route.params;
 
@@ -64,6 +64,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     'true',
   );
 
+  useEffect(() => {
+    loadResponseToAccessContacts();
+  }, []);
+
   const loadResponseToAccessContacts = () => {
     AsyncStorage.getItem('respondedToAccessContacts')
       .then((value) => {
@@ -75,8 +79,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       });
   };
 
-  loadResponseToAccessContacts();
-
   const initialRouteName = (() => {
     switch (screenType) {
       case ScreenType.Profile:
@@ -106,213 +108,228 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     }),
   };
 
-  return (
-    <MainStack.Navigator
-      screenOptions={{
-        headerShown: false,
-        gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6},
-      }}
-      mode="card"
-      initialRouteName={initialRouteName}>
-      <MainStack.Screen
-        name="Profile"
-        component={ProfileScreen}
-        initialParams={{screenType}}
-        options={{
-          ...headerBarOptions('white', ''),
+  const newChatModalStyle: StackNavigationOptions = {
+    cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
+    cardOverlayEnabled: true,
+    animationEnabled: false,
+  };
+
+  const mainStackScreen = () => {
+    return (
+      <MainStack.Navigator
+        screenOptions={{
+          headerShown: false,
+          gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6},
         }}
-      />
-      {isSuggestedPeopleTab &&
-        (respondedToAccessContacts && respondedToAccessContacts === 'true' ? (
+        mode="card"
+        initialRouteName={initialRouteName}>
+        <MainStack.Screen
+          name="Profile"
+          component={ProfileScreen}
+          initialParams={{screenType}}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        {isSuggestedPeopleTab &&
+          (respondedToAccessContacts && respondedToAccessContacts === 'true' ? (
+            <MainStack.Screen
+              name="SuggestedPeople"
+              component={SuggestedPeopleScreen}
+              initialParams={{screenType}}
+            />
+          ) : (
+            <MainStack.Screen
+              name="SuggestedPeople"
+              component={RequestContactsAccess}
+              initialParams={{screenType}}
+            />
+          ))}
+        {isNotificationsTab && (
           <MainStack.Screen
-            name="SuggestedPeople"
-            component={SuggestedPeopleScreen}
+            name="Notifications"
+            component={NotificationsScreen}
             initialParams={{screenType}}
           />
-        ) : (
+        )}
+        {isSearchTab && (
           <MainStack.Screen
-            name="SuggestedPeople"
-            component={RequestContactsAccess}
+            name="Search"
+            component={SearchScreen}
             initialParams={{screenType}}
           />
-        ))}
-      {isNotificationsTab && (
+        )}
+        <MainStack.Screen
+          name="DiscoverUsers"
+          component={DiscoverUsers}
+          options={{
+            ...headerBarOptions('white', 'Discover Users'),
+          }}
+        />
+        <MainStack.Screen
+          name="SettingsScreen"
+          component={SettingsScreen}
+          options={{
+            ...headerBarOptions('white', 'Settings and Privacy'),
+          }}
+        />
         <MainStack.Screen
-          name="Notifications"
-          component={NotificationsScreen}
+          name="PrivacyScreen"
+          component={PrivacyScreen}
+          options={{
+            ...headerBarOptions('white', 'Privacy'),
+          }}
+        />
+        <MainStack.Screen
+          name="AccountTypeScreen"
+          component={AccountType}
+          options={{
+            ...headerBarOptions('white', 'Account Type'),
+          }}
+        />
+        <MainStack.Screen
+          name="AnimatedTutorial"
+          component={AnimatedTutorial}
+          options={{
+            ...tutorialModalStyle,
+          }}
           initialParams={{screenType}}
         />
-      )}
-      {isSearchTab && (
         <MainStack.Screen
-          name="Search"
-          component={SearchScreen}
+          name="CaptionScreen"
+          component={CaptionScreen}
+          options={{
+            ...modalStyle,
+            gestureEnabled: false,
+          }}
+        />
+        <MainStack.Screen
+          name="SocialMediaTaggs"
+          component={SocialMediaTaggs}
           initialParams={{screenType}}
+          options={{
+            ...headerBarOptions('white', ''),
+            headerStyle: {height: AvatarHeaderHeight},
+          }}
         />
-      )}
-      <MainStack.Screen
-        name="DiscoverUsers"
-        component={DiscoverUsers}
-        options={{
-          ...headerBarOptions('white', 'Discover Users'),
-        }}
-      />
-      <MainStack.Screen
-        name="SettingsScreen"
-        component={SettingsScreen}
-        options={{
-          ...headerBarOptions('white', 'Settings and Privacy'),
-        }}
-      />
-      <MainStack.Screen
-        name="PrivacyScreen"
-        component={PrivacyScreen}
-        options={{
-          ...headerBarOptions('white', 'Privacy'),
-        }}
-      />
-      <MainStack.Screen
-        name="AccountTypeScreen"
-        component={AccountType}
-        options={{
-          ...headerBarOptions('white', 'Account Type'),
-        }}
-      />
-      <MainStack.Screen
-        name="AnimatedTutorial"
-        component={AnimatedTutorial}
-        options={{
-          ...tutorialModalStyle,
-        }}
-        initialParams={{screenType}}
-      />
-      <MainStack.Screen
-        name="CaptionScreen"
-        component={CaptionScreen}
-        options={{
-          ...modalStyle,
-          gestureEnabled: false,
-        }}
-      />
-      <MainStack.Screen
-        name="SocialMediaTaggs"
-        component={SocialMediaTaggs}
-        initialParams={{screenType}}
-        options={{
-          ...headerBarOptions('white', ''),
-          headerStyle: {height: AvatarHeaderHeight},
-        }}
-      />
-      <MainStack.Screen
-        name="CategorySelection"
-        component={CategorySelection}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <MainStack.Screen
-        name="CreateCustomCategory"
-        component={CreateCustomCategory}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <MainStack.Screen
-        name="IndividualMoment"
-        component={IndividualMoment}
-        initialParams={{screenType}}
-        options={{
-          ...modalStyle,
-          gestureEnabled: false,
-        }}
-      />
-      <MainStack.Screen
-        name="MomentCommentsScreen"
-        component={MomentCommentsScreen}
-        initialParams={{screenType}}
-        options={{
-          ...headerBarOptions('black', 'Comments'),
-        }}
-      />
-      <MainStack.Screen
-        name="MomentUploadPrompt"
-        component={MomentUploadPromptScreen}
-        initialParams={{screenType}}
-        options={{
-          ...modalStyle,
-        }}
-      />
-      <MainStack.Screen
-        name="FriendsListScreen"
-        component={FriendsListScreen}
-        initialParams={{screenType}}
-        options={{
-          ...headerBarOptions('black', 'Friends'),
-        }}
-      />
-      <MainStack.Screen
-        name="InviteFriendsScreen"
-        component={InviteFriendsScreen}
-        initialParams={{screenType}}
-        options={{
-          ...headerBarOptions('black', 'Invites'),
-        }}
-      />
-      <MainStack.Screen
-        name="RequestContactsAccess"
-        component={RequestContactsAccess}
-        initialParams={{screenType}}
-      />
-      <MainStack.Screen
-        name="EditProfile"
-        component={EditProfile}
-        options={{
-          ...headerBarOptions('white', 'Edit Profile'),
-        }}
-      />
-      <MainStack.Screen
-        name="UpdateSPPicture"
-        component={SuggestedPeopleUploadPictureScreen}
-        initialParams={{editing: true}}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <MainStack.Screen
-        name="BadgeSelection"
-        component={BadgeSelection}
-        initialParams={{editing: true}}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <MainStack.Screen
-        name="MutualBadgeHolders"
-        component={MutualBadgeHolders}
-        options={{...modalStyle}}
-      />
-      <MainStack.Screen
-        name="SPWelcomeScreen"
-        component={SuggestedPeopleWelcomeScreen}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <MainStack.Screen
-        name="ChatList"
-        component={ChatListScreen}
-        options={{headerTitle: 'Chats'}}
-      />
-      <MainStack.Screen
-        name="Chat"
-        component={ChatScreen}
-        options={{
-          ...headerBarOptions('black', ''),
-          headerStyle: {height: ChatHeaderHeight},
-        }}
-      />
-    </MainStack.Navigator>
-  );
+        <MainStack.Screen
+          name="CategorySelection"
+          component={CategorySelection}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        <MainStack.Screen
+          name="CreateCustomCategory"
+          component={CreateCustomCategory}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        <MainStack.Screen
+          name="IndividualMoment"
+          component={IndividualMoment}
+          initialParams={{screenType}}
+          options={{
+            ...modalStyle,
+            gestureEnabled: false,
+          }}
+        />
+        <MainStack.Screen
+          name="MomentCommentsScreen"
+          component={MomentCommentsScreen}
+          initialParams={{screenType}}
+          options={{
+            ...headerBarOptions('black', 'Comments'),
+          }}
+        />
+        <MainStack.Screen
+          name="MomentUploadPrompt"
+          component={MomentUploadPromptScreen}
+          initialParams={{screenType}}
+          options={{
+            ...modalStyle,
+          }}
+        />
+        <MainStack.Screen
+          name="FriendsListScreen"
+          component={FriendsListScreen}
+          initialParams={{screenType}}
+          options={{
+            ...headerBarOptions('black', 'Friends'),
+          }}
+        />
+        <MainStack.Screen
+          name="InviteFriendsScreen"
+          component={InviteFriendsScreen}
+          initialParams={{screenType}}
+          options={{
+            ...headerBarOptions('black', 'Invites'),
+          }}
+        />
+        <MainStack.Screen
+          name="RequestContactsAccess"
+          component={RequestContactsAccess}
+          initialParams={{screenType}}
+        />
+        <MainStack.Screen
+          name="EditProfile"
+          component={EditProfile}
+          options={{
+            ...headerBarOptions('white', 'Edit Profile'),
+          }}
+        />
+        <MainStack.Screen
+          name="UpdateSPPicture"
+          component={SuggestedPeopleUploadPictureScreen}
+          initialParams={{editing: true}}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        <MainStack.Screen
+          name="BadgeSelection"
+          component={BadgeSelection}
+          initialParams={{editing: true}}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        <MainStack.Screen
+          name="MutualBadgeHolders"
+          component={MutualBadgeHolders}
+          options={{...modalStyle}}
+        />
+        <MainStack.Screen
+          name="SPWelcomeScreen"
+          component={SuggestedPeopleWelcomeScreen}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        <MainStack.Screen
+          name="ChatList"
+          component={ChatListScreen}
+          options={{headerTitle: 'Chats'}}
+        />
+        <MainStack.Screen
+          name="Chat"
+          component={ChatScreen}
+          options={{
+            ...headerBarOptions('black', ''),
+            headerStyle: {height: ChatHeaderHeight},
+          }}
+        />
+        <MainStack.Screen
+          name="NewChatModal"
+          component={NewChatModal}
+          options={{headerShown: false, ...newChatModalStyle}}
+        />
+      </MainStack.Navigator>
+    );
+  };
+
+  return mainStackScreen();
 };
 
 export const headerBarOptions: (