From d3a0f6713e4378adac0f21d4081a7fac1863a39a Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 9 Feb 2021 16:28:20 -0500
Subject: added new stack navigator, switch screen based on flag

---
 .../SuggestedPeopleOnboardingStackNavigator.tsx    |  7 ++
 .../SuggestedPeopleOnboardingStackScreen.tsx       | 28 +++++++
 src/routes/suggestedPeopleOnboarding/index.ts      |  2 +
 src/screens/index.ts                               |  1 +
 .../suggestedPeople/SuggestedPeopleScreen.tsx      | 89 +++++++++++-----------
 .../SuggestedPeopleWelcomeScreen.tsx               | 14 ++++
 src/screens/suggestedPeopleOnboarding/index.ts     |  1 +
 7 files changed, 98 insertions(+), 44 deletions(-)
 create mode 100644 src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx
 create mode 100644 src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx
 create mode 100644 src/routes/suggestedPeopleOnboarding/index.ts
 create mode 100644 src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
 create mode 100644 src/screens/suggestedPeopleOnboarding/index.ts

(limited to 'src')

diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx
new file mode 100644
index 00000000..40df8e0f
--- /dev/null
+++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx
@@ -0,0 +1,7 @@
+import {createStackNavigator} from '@react-navigation/stack';
+
+export type SuggestedPeopleOnboardingStackParams = {
+  WelcomeScreen: undefined;
+};
+
+export const SuggestedPeopleOnboardingStack = createStackNavigator<SuggestedPeopleOnboardingStackParams>();
diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx
new file mode 100644
index 00000000..95070ed2
--- /dev/null
+++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx
@@ -0,0 +1,28 @@
+import {StackCardInterpolationProps} from '@react-navigation/stack';
+import React from 'react';
+import {SuggestedPeopleOnboardingStack} from '.';
+import {SuggestedPeopleWelcomeScreen} from '../../screens';
+
+const forFade = ({current}: StackCardInterpolationProps) => ({
+  cardStyle: {
+    opacity: current.progress,
+  },
+});
+
+const SuggestedPeopleOnboardingStackScreen: React.FC = () => {
+  return (
+    <SuggestedPeopleOnboardingStack.Navigator
+      initialRouteName="WelcomeScreen"
+      screenOptions={{headerShown: false}}>
+      <SuggestedPeopleOnboardingStack.Screen
+        name="WelcomeScreen"
+        component={SuggestedPeopleWelcomeScreen}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+    </SuggestedPeopleOnboardingStack.Navigator>
+  );
+};
+
+export default SuggestedPeopleOnboardingStackScreen;
diff --git a/src/routes/suggestedPeopleOnboarding/index.ts b/src/routes/suggestedPeopleOnboarding/index.ts
new file mode 100644
index 00000000..df711493
--- /dev/null
+++ b/src/routes/suggestedPeopleOnboarding/index.ts
@@ -0,0 +1,2 @@
+export * from './SuggestedPeopleOnboardingStackNavigator';
+export * from './SuggestedPeopleOnboardingStackScreen';
diff --git a/src/screens/index.ts b/src/screens/index.ts
index c34cd571..faf3d0b7 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -3,3 +3,4 @@ export * from './onboarding';
 export * from './profile';
 export * from './search';
 export * from './suggestedPeople';
+export * from './suggestedPeopleOnboarding';
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 4d0a9bd5..2df48d7d 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,3 +1,4 @@
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import React, {useCallback} from 'react';
 import {
   StatusBar,
@@ -7,15 +8,13 @@ import {
   View,
 } from 'react-native';
 import {Image} from 'react-native-animatable';
-import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {TabsGradient, TaggsBar} from '../../components';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import {normalize} from '../../utils';
-import Animated from 'react-native-reanimated';
-import {ScreenType} from '../../types';
 import {useSelector} from 'react-redux';
+import {TabsGradient} from '../../components';
+import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen';
 import {RootState} from '../../store/rootReducer';
-import {useFocusEffect, useNavigation} from '@react-navigation/native';
+import {ScreenType} from '../../types';
+import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * Bare bones for suggested people consisting of:
@@ -23,6 +22,12 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native';
  */
 
 const SuggestedPeopleScreen: React.FC = () => {
+  // const {onboarded_sugggested_people} = useSelector(
+  //   (state: RootState) => state.user.profile,
+  // );
+
+  const onboarded_sugggested_people = false;
+
   // Can be removed once firstname, username props are received
   const firstName = 'Sarah';
 
@@ -48,47 +53,43 @@ const SuggestedPeopleScreen: React.FC = () => {
     }, [sp_swipe_tutorial, navigation]),
   );
 
-  return (
-    <>
-      <SafeAreaView>
-        <StatusBar barStyle={'light-content'} />
-        <Image
-          // !!! Displaying Sarah Miller's image
-          source={require('../../assets/images/sarah_miller_full.jpeg')}
-          style={styles.image}
-        />
-        <View style={styles.mainContainer}>
-          <Text style={styles.title}>Suggested People</Text>
-          <View style={styles.body}>
-            {/* First row contaning name, username, add button (w/o functionality) */}
-            <View style={styles.addUserContainer}>
-              <View style={styles.nameInfoContainer}>
-                <Text style={styles.firstName}>{firstName}</Text>
-                <Text style={styles.username}>{username}</Text>
-              </View>
-              <TouchableOpacity
-                activeOpacity={0.5}
-                // TODO: Call function to Add Friend
-                onPress={() => console.log('Call add friend function')}>
-                <View style={styles.addButton}>
-                  <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
-                </View>
-              </TouchableOpacity>
+  const mainContent = () => (
+    <SafeAreaView>
+      <StatusBar barStyle={'light-content'} />
+      <Image
+        // !!! Displaying Sarah Miller's image
+        source={require('../../assets/images/sarah_miller_full.jpeg')}
+        style={styles.image}
+      />
+      <View style={styles.mainContainer}>
+        <Text style={styles.title}>Suggested People</Text>
+        <View style={styles.body}>
+          {/* Added first row contaning name, username, add button (w/o functionality) */}
+          <View style={styles.addUserContainer}>
+            <View style={styles.nameInfoContainer}>
+              <Text style={styles.firstName}>{firstName}</Text>
+              <Text style={styles.username}>{username}</Text>
             </View>
-            {/* Taggs Bar. Displays only linked profiles for user while viewing their own profile. */}
-            <TaggsBar
-              y={Animated.useValue(0)}
-              // :: For testing purposes, to view user's own profile, pass userXId=''
-              userXId={''}
-              profileBodyHeight={0}
-              screenType={screenType}
-            />
-            {/* TODO: Add MutualFriends here */}
+            <TouchableOpacity
+              activeOpacity={0.5}
+              onPress={() => console.log('Call add friend function')}>
+              <View style={styles.addButton}>
+                <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
+              </View>
+            </TouchableOpacity>
           </View>
+          {/* TODO: Add TaggsBar here */}
+          {/* TODO: Add MutualFriends here */}
         </View>
-        <TabsGradient />
-      </SafeAreaView>
-    </>
+      </View>
+      <TabsGradient />
+    </SafeAreaView>
+  );
+
+  return onboarded_sugggested_people ? (
+    mainContent()
+  ) : (
+    <SuggestedPeopleOnboardingStackScreen />
   );
 };
 
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
new file mode 100644
index 00000000..da6adc59
--- /dev/null
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+
+const SuggestedPeopleWelcomeScreen: React.FC = () => {
+  return (
+    <SafeAreaView>
+      <Text>Welcome!</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({});
+export default SuggestedPeopleWelcomeScreen;
diff --git a/src/screens/suggestedPeopleOnboarding/index.ts b/src/screens/suggestedPeopleOnboarding/index.ts
new file mode 100644
index 00000000..6adbb75d
--- /dev/null
+++ b/src/screens/suggestedPeopleOnboarding/index.ts
@@ -0,0 +1 @@
+export {default as SuggestedPeopleWelcomeScreen} from './SuggestedPeopleWelcomeScreen';
-- 
cgit v1.2.3-70-g09d2