From c32197f793005a81a0a06c6d755ed374078624c3 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Mon, 8 Feb 2021 14:43:20 -0800
Subject: navigation bar to go to suggested people

---
 src/routes/main/MainStackScreen.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'src/routes/main/MainStackScreen.tsx')

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index c0cef3ea..15950729 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -16,6 +16,7 @@ import {
   RequestContactsAccess,
   SearchScreen,
   SocialMediaTaggs,
+  SuggestedPeopleScreen,
 } from '../../screens';
 import {ScreenType} from '../../types';
 import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils';
@@ -43,6 +44,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
   // const isProfileTab = screenType === ScreenType.Profile;
   const isSearchTab = screenType === ScreenType.Search;
   const isNotificationsTab = screenType === ScreenType.Notifications;
+  const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople;
 
   AsyncStorage.getItem('respondedToAccessContacts').then((value) =>
     setRespondedToAccessContacts(value ? value : 'false'),
@@ -60,6 +62,8 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         return 'Search';
       case ScreenType.Notifications:
         return 'Notifications';
+      case ScreenType.SuggestedPeople:
+        return 'SuggestedPeople';
     }
   })();
 
@@ -77,6 +81,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     }),
   };
 
+  console.log('screenType: ', screenType);
   return (
     <MainStack.Navigator
       screenOptions={{
@@ -121,6 +126,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           initialParams={{screenType}}
         />
       )}
+      {isSuggestedPeopleTab && console.log('triggered') && (
+        <MainStack.Screen
+          name="SuggestedPeople"
+          component={SuggestedPeopleScreen}
+          initialParams={{screenType}}
+        />
+      )}
       <MainStack.Screen
         name="CaptionScreen"
         component={CaptionScreen}
-- 
cgit v1.2.3-70-g09d2


From c9a8f87a29e12bfb78939fa9a94b6f8919b04836 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 4 Feb 2021 16:58:40 -0500
Subject: refactored header styles

# Conflicts:
#	src/components/common/FriendsButton.tsx
#	src/screens/profile/FriendsListScreen.tsx
#	src/screens/profile/MomentCommentsScreen.tsx
---
 src/assets/icons/back-arrow.svg              |  2 +-
 src/components/common/FriendsButton.tsx      |  1 -
 src/routes/main/MainStackScreen.tsx          | 59 +++++++++++++++++++++++++---
 src/screens/profile/FriendsListScreen.tsx    | 36 +++++------------
 src/screens/profile/MomentCommentsScreen.tsx | 27 +++++++------
 5 files changed, 79 insertions(+), 46 deletions(-)

(limited to 'src/routes/main/MainStackScreen.tsx')

diff --git a/src/assets/icons/back-arrow.svg b/src/assets/icons/back-arrow.svg
index aa203dea..16beae5a 100644
--- a/src/assets/icons/back-arrow.svg
+++ b/src/assets/icons/back-arrow.svg
@@ -1 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.86 696.76"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:77.17px;}</style></defs><polyline class="cls-1" points="347.28 38.58 38.58 351.69 347.28 658.17"/></svg>
\ No newline at end of file
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.86 696.76"><defs><style>.cls-1{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:77.17px;}</style></defs><polyline class="cls-1" points="347.28 38.58 38.58 351.69 347.28 658.17" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
index c7f56e2d..243a551d 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -78,7 +78,6 @@ const styles = StyleSheet.create({
     borderRadius: 3,
     marginRight: '2%',
     marginLeft: '1%',
-    padding: 0,
     backgroundColor: 'transparent',
   },
   requestedButtonTitle: {
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index c0cef3ea..0141a418 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -20,6 +20,10 @@ import {
 import {ScreenType} from '../../types';
 import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils';
 import {MainStack, MainStackParams} from './MainStackNavigator';
+import BackIcon from '../../assets/icons/back-arrow.svg';
+import {StyleSheet, Text} from 'react-native';
+import {normalize} from 'react-native-elements';
+import {StackHeaderOptions} from '@react-navigation/stack/lib/typescript/src/types';
 
 /**
  * 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.
@@ -185,6 +189,9 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         name="MomentCommentsScreen"
         component={MomentCommentsScreen}
         initialParams={{screenType}}
+        options={{
+          ...headerBarOptions('black', 'Comments'),
+        }}
       />
       <MainStack.Screen
         name="MomentUploadPrompt"
@@ -198,20 +205,62 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         name="FriendsListScreen"
         component={FriendsListScreen}
         initialParams={{screenType}}
+        options={{
+          ...headerBarOptions('black', 'Friends'),
+        }}
       />
       <MainStack.Screen
         name="EditProfile"
         component={EditProfile}
         options={{
-          headerShown: true,
-          headerTitle: 'Edit Profile',
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTintColor: 'white',
+          ...headerBarOptions('white', 'Edit Profile'),
         }}
       />
     </MainStack.Navigator>
   );
 };
 
+export const headerBarOptions: (
+  color: 'white' | 'black',
+  title: string,
+) => StackNavigationOptions = (color, title) => ({
+  headerShown: true,
+  headerTransparent: true,
+  headerBackTitleVisible: false,
+  headerBackImage: () => (
+    <BackIcon
+      height={normalize(18)}
+      width={normalize(18)}
+      color={color}
+      style={styles.backButton}
+    />
+  ),
+  headerTitle: () => (
+    <Text style={[styles.headerTitle, {color: color}]}>{title}</Text>
+  ),
+});
+
+const styles = StyleSheet.create({
+  backButton: {
+    marginLeft: 30,
+  },
+  headerTitle: {
+    fontSize: normalize(16),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+  },
+  whiteHeaderTitle: {
+    fontSize: normalize(16),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+    color: 'white',
+  },
+  blackHeaderTitle: {
+    fontSize: normalize(16),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+    color: 'black',
+  },
+});
+
 export default MainStackScreen;
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index b2123f44..7abe289f 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,7 +1,12 @@
-import React from 'react';
+import React, {Fragment, useEffect} from 'react';
 import {RouteProp, useNavigation} from '@react-navigation/native';
 import {TabsGradient, Friends} from '../../components';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  HeaderHeight,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 import {
   SafeAreaView,
   StyleSheet,
@@ -24,7 +29,6 @@ interface FriendsListScreenProps {
 
 const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
   const {userXId, screenType} = route.params;
-  const navigation = useNavigation();
 
   const {friends} = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
@@ -55,31 +59,11 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     height: '100%',
   },
-  header: {
-    flexDirection: 'column',
-    justifyContent: 'center',
-    height: SCREEN_HEIGHT * 0.05,
-    padding: '3%',
-    paddingBottom: 0,
-    marginTop: '1%',
-  },
-  headerText: {
-    position: 'absolute',
-    alignSelf: 'center',
-    fontSize: normalize(18),
-    fontWeight: '700',
-    lineHeight: normalize(21.48),
-    letterSpacing: normalize(1.3),
-  },
-  headerButton: {
-    width: '5%',
-    aspectRatio: 1,
-    padding: 0,
-    marginLeft: '5%',
-    alignSelf: 'flex-start',
-    marginBottom: '1%',
+  backButton: {
+    marginLeft: 10,
   },
   body: {
+    marginTop: HeaderHeight,
     width: SCREEN_WIDTH,
     height: SCREEN_HEIGHT * 0.8,
   },
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index ec193db5..4a902e9e 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,5 +1,5 @@
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import BackIcon from '../../assets/icons/back-arrow.svg';
@@ -7,9 +7,14 @@ import {TabsGradient} from '../../components';
 import {AddComment} from '../../components/';
 import CommentsContainer from '../../components/comments/CommentsContainer';
 import {ADD_COMMENT_TEXT} from '../../constants/strings';
-import {MainStackParams} from '../../routes/main';
+import {headerBarOptions, MainStackParams} from '../../routes/main';
 import {CommentType} from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  HeaderHeight,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 
 /**
  * Comments Screen for an image uploaded
@@ -39,19 +44,15 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
     CommentType | undefined
   >(undefined);
 
+  useEffect(() => {
+    navigation.setOptions({
+      ...headerBarOptions('black', `${commentsLength} Comments`),
+    });
+  }, [commentsLength, navigation]);
+
   return (
     <View style={styles.background}>
       <SafeAreaView>
-        <View style={styles.header}>
-          <TouchableOpacity
-            style={styles.headerButton}
-            onPress={() => {
-              navigation.pop();
-            }}>
-            <BackIcon height={'100%'} width={'100%'} color={'white'} />
-          </TouchableOpacity>
-          <Text style={styles.headerText}>{commentsLength + ' Comments'}</Text>
-        </View>
         <View style={styles.body}>
           <CommentsContainer
             objectId={moment_id}
-- 
cgit v1.2.3-70-g09d2


From 1fbaa98a8de84fe7c9969a980abc3050d2a4f2ca Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 9 Feb 2021 14:41:58 -0500
Subject: refactored styles in main stack

---
 src/routes/main/MainStackScreen.tsx | 81 +++++++++++++------------------------
 1 file changed, 27 insertions(+), 54 deletions(-)

(limited to 'src/routes/main/MainStackScreen.tsx')

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 0141a418..b8b471c2 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -67,20 +67,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     }
   })();
 
-  const modalStyle: StackNavigationOptions = {
-    cardStyle: {backgroundColor: 'rgba(80,80,80,0.9)'},
-    gestureDirection: 'vertical',
-    cardOverlayEnabled: true,
-    cardStyleInterpolator: ({current: {progress}}) => ({
-      cardStyle: {
-        opacity: progress.interpolate({
-          inputRange: [0, 0.5, 0.9, 1],
-          outputRange: [0, 0.25, 0.7, 1],
-        }),
-      },
-    }),
-  };
-
   return (
     <MainStack.Navigator
       screenOptions={{
@@ -92,16 +78,9 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       <MainStack.Screen
         name="Profile"
         component={ProfileScreen}
+        initialParams={{screenType}}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTitle: '',
-          headerTintColor: 'white',
-          headerStyle: {height: AvatarHeaderHeight},
-        }}
-        initialParams={{
-          screenType,
+          ...headerBarOptions('white', ''),
         }}
       />
       {isSearchTab &&
@@ -128,62 +107,42 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       <MainStack.Screen
         name="CaptionScreen"
         component={CaptionScreen}
-        options={{...modalStyle, gestureEnabled: false}}
+        options={{
+          ...modalStyle,
+          gestureEnabled: false,
+        }}
       />
       <MainStack.Screen
         name="SocialMediaTaggs"
         component={SocialMediaTaggs}
+        initialParams={{screenType}}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTitle: '',
-          headerTintColor: 'white',
+          ...headerBarOptions('white', ''),
           headerStyle: {height: AvatarHeaderHeight},
         }}
-        initialParams={{screenType}}
       />
       <MainStack.Screen
         name="CategorySelection"
         component={CategorySelection}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTintColor: 'white',
-          headerTitle: '',
+          ...headerBarOptions('white', ''),
         }}
       />
       <MainStack.Screen
         name="CreateCustomCategory"
         component={CreateCustomCategory}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTintColor: 'white',
-          headerTitle: '',
+          ...headerBarOptions('white', ''),
         }}
       />
       <MainStack.Screen
         name="IndividualMoment"
         component={IndividualMoment}
+        initialParams={{screenType}}
         options={{
+          ...modalStyle,
           gestureEnabled: false,
-          cardStyle: {
-            backgroundColor: 'rgba(0, 0, 0, 0.6)',
-          },
-          cardOverlayEnabled: true,
-          cardStyleInterpolator: ({current: {progress}}) => ({
-            cardStyle: {
-              opacity: progress.interpolate({
-                inputRange: [0, 0.5, 0.9, 1],
-                outputRange: [0, 0.25, 0.7, 1],
-              }),
-            },
-          }),
         }}
-        initialParams={{screenType}}
       />
       <MainStack.Screen
         name="MomentCommentsScreen"
@@ -196,10 +155,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       <MainStack.Screen
         name="MomentUploadPrompt"
         component={MomentUploadPromptScreen}
+        initialParams={{screenType}}
         options={{
           ...modalStyle,
         }}
-        initialParams={{screenType}}
       />
       <MainStack.Screen
         name="FriendsListScreen"
@@ -240,6 +199,20 @@ export const headerBarOptions: (
   ),
 });
 
+const modalStyle: StackNavigationOptions = {
+  cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
+  gestureDirection: 'vertical',
+  cardOverlayEnabled: true,
+  cardStyleInterpolator: ({current: {progress}}) => ({
+    cardStyle: {
+      opacity: progress.interpolate({
+        inputRange: [0, 0.5, 0.9, 1],
+        outputRange: [0, 0.25, 0.7, 1],
+      }),
+    },
+  }),
+};
+
 const styles = StyleSheet.create({
   backButton: {
     marginLeft: 30,
-- 
cgit v1.2.3-70-g09d2


From c5e4bfbba73090b9fa3d422ddf31aaa915d032df Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 9 Feb 2021 14:43:11 -0500
Subject: fixed header styles in several screens

---
 src/routes/main/MainStackScreen.tsx          |  7 +++--
 src/screens/profile/FriendsListScreen.tsx    | 38 +++++++---------------------
 src/screens/profile/MomentCommentsScreen.tsx |  4 +--
 3 files changed, 14 insertions(+), 35 deletions(-)

(limited to 'src/routes/main/MainStackScreen.tsx')

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index b8b471c2..f8f93eb0 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -2,6 +2,9 @@ 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 {StyleSheet, Text} from 'react-native';
+import {normalize} from 'react-native-elements';
+import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
   CaptionScreen,
   CategorySelection,
@@ -20,10 +23,6 @@ import {
 import {ScreenType} from '../../types';
 import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils';
 import {MainStack, MainStackParams} from './MainStackNavigator';
-import BackIcon from '../../assets/icons/back-arrow.svg';
-import {StyleSheet, Text} from 'react-native';
-import {normalize} from 'react-native-elements';
-import {StackHeaderOptions} from '@react-navigation/stack/lib/typescript/src/types';
 
 /**
  * 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.
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index 7abe289f..1cfef058 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,26 +1,14 @@
-import React, {Fragment, useEffect} from 'react';
-import {RouteProp, useNavigation} from '@react-navigation/native';
-import {TabsGradient, Friends} from '../../components';
-import {
-  HeaderHeight,
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-} from '../../utils';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {ProfileStackParams} from '../../routes';
+import {RouteProp} from '@react-navigation/native';
+import React from 'react';
+import {SafeAreaView, StyleSheet, View} from 'react-native';
 import {useSelector} from 'react-redux';
+import {Friends, TabsGradient} from '../../components';
+import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootReducer';
-import BackIcon from '../../assets/icons/back-arrow.svg';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 type FriendsListScreenRouteProp = RouteProp<
-  ProfileStackParams,
+  MainStackParams,
   'FriendsListScreen'
 >;
 interface FriendsListScreenProps {
@@ -37,17 +25,9 @@ const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
   return (
     <>
       <SafeAreaView>
-        <View style={styles.header}>
-          <TouchableOpacity
-            style={styles.headerButton}
-            onPress={() => {
-              navigation.pop();
-            }}>
-            <BackIcon height={'100%'} width={'100%'} color={'white'} />
-          </TouchableOpacity>
-          <Text style={styles.headerText}>Friends</Text>
+        <View style={styles.body}>
+          <Friends result={friends} screenType={screenType} userId={userXId} />
         </View>
-        <Friends result={friends} screenType={screenType} userId={userXId} />
       </SafeAreaView>
       <TabsGradient />
     </>
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 4a902e9e..b0208f6f 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,8 +1,7 @@
 import {RouteProp, useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import BackIcon from '../../assets/icons/back-arrow.svg';
 import {TabsGradient} from '../../components';
 import {AddComment} from '../../components/';
 import CommentsContainer from '../../components/comments/CommentsContainer';
@@ -111,6 +110,7 @@ const styles = StyleSheet.create({
     fontWeight: '400',
   },
   body: {
+    marginTop: HeaderHeight,
     width: SCREEN_WIDTH * 0.9,
     height: SCREEN_HEIGHT * 0.8,
     paddingTop: '3%',
-- 
cgit v1.2.3-70-g09d2

