From 6892c63b899b46fedc9d99b8274a17e9043fe361 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@thetaggid.com>
Date: Tue, 12 Jan 2021 12:38:46 -0500
Subject: [TMA-527/506/523] Custom Moment Categories (#174)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* changed logic to allow ≥ 1 categories

* now using array of strings for moment categories

* updated error strings

* formatting and check for picker cancellation

* initial UI done

* cleaned up logic, added custom icon

* renamed onboarding stack to match main stack

* removed unused import

* deterministic color picker

* custom category defaults to selected instead of added

* removed function in route
---
 src/routes/main/MainStackNavigator.tsx             |   8 +-
 src/routes/main/MainStackScreen.tsx                |  12 ++
 src/routes/onboarding/Onboarding.tsx               | 125 ---------------------
 src/routes/onboarding/OnboardingStack.tsx          |  40 -------
 src/routes/onboarding/OnboardingStackNavigator.tsx |  44 ++++++++
 src/routes/onboarding/OnboardingStackScreen.tsx    | 125 +++++++++++++++++++++
 src/routes/onboarding/index.ts                     |   4 +-
 7 files changed, 186 insertions(+), 172 deletions(-)
 delete mode 100644 src/routes/onboarding/Onboarding.tsx
 delete mode 100644 src/routes/onboarding/OnboardingStack.tsx
 create mode 100644 src/routes/onboarding/OnboardingStackNavigator.tsx
 create mode 100644 src/routes/onboarding/OnboardingStackScreen.tsx

(limited to 'src/routes')

diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 4614168b..950f3ffc 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -2,7 +2,7 @@
  * Note the name userXId here, it refers to the id of the user being visited
  */
 import {createStackNavigator} from '@react-navigation/stack';
-import {CategorySelectionScreenType, MomentType, ScreenType} from '../../types';
+import {MomentType, ScreenType} from '../../types';
 
 export type MainStackParams = {
   Search: {
@@ -40,10 +40,8 @@ export type MainStackParams = {
     userId: string;
     username: string;
   };
-  CategorySelection: {
-    categories: Array<string>;
-    screenType: CategorySelectionScreenType;
-  };
+  CategorySelection: {};
+  CreateCustomCategory: {};
   Notifications: {
     screenType: ScreenType;
   };
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index bf643fd8..4ad5bf40 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -10,6 +10,7 @@ import {
   CategorySelection,
   FriendsListScreen,
   NotificationsScreen,
+  CreateCustomCategory,
 } from '../../screens';
 import {MainStack, MainStackParams} from './MainStackNavigator';
 import {RouteProp} from '@react-navigation/native';
@@ -140,6 +141,17 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           headerTitle: '',
         }}
       />
+      <MainStack.Screen
+        name="CreateCustomCategory"
+        component={CreateCustomCategory}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTintColor: 'white',
+          headerTitle: '',
+        }}
+      />
       <MainStack.Screen
         name="IndividualMoment"
         component={IndividualMoment}
diff --git a/src/routes/onboarding/Onboarding.tsx b/src/routes/onboarding/Onboarding.tsx
deleted file mode 100644
index a3d281f5..00000000
--- a/src/routes/onboarding/Onboarding.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React from 'react';
-import {OnboardingStack} from './OnboardingStack';
-import {
-  Login,
-  InvitationCodeVerification,
-  RegistrationOne,
-  RegistrationTwo,
-  RegistrationThree,
-  Verification,
-  ProfileOnboarding,
-  Checkpoint,
-  SocialMedia,
-  PasswordResetRequest,
-  PasswordReset,
-  WelcomeScreen,
-  CategorySelection,
-} from '../../screens';
-import {StackCardInterpolationProps} from '@react-navigation/stack';
-import TaggPopup from '../../components/common/TaggPopup';
-
-const forFade = ({current}: StackCardInterpolationProps) => ({
-  cardStyle: {
-    opacity: current.progress,
-  },
-});
-
-const Onboarding: React.FC = () => {
-  return (
-    <OnboardingStack.Navigator
-      initialRouteName="Login"
-      screenOptions={{headerShown: false}}>
-      <OnboardingStack.Screen
-        name="Login"
-        component={Login}
-        options={{
-          gestureEnabled: false,
-          cardStyleInterpolator: forFade,
-        }}
-      />
-      <OnboardingStack.Screen
-        name="PasswordResetRequest"
-        component={PasswordResetRequest}
-        options={{
-          gestureEnabled: false,
-        }}
-      />
-      <OnboardingStack.Screen
-        name="WelcomeScreen"
-        component={WelcomeScreen}
-        options={{
-          gestureEnabled: false,
-        }}
-      />
-      <OnboardingStack.Screen
-        name="CategorySelection"
-        component={CategorySelection}
-        options={{
-          gestureEnabled: false,
-        }}
-      />
-      <OnboardingStack.Screen
-        name="TaggPopup"
-        component={TaggPopup}
-        options={{
-          gestureEnabled: false,
-          cardStyle: {
-            backgroundColor: 'transparent',
-          },
-          cardOverlayEnabled: true,
-          cardStyleInterpolator: ({current: {progress}}) => ({
-            cardStyle: {
-              opacity: progress.interpolate({
-                inputRange: [0, 0.5, 0.9, 1],
-                outputRange: [0, 0.25, 0.7, 1],
-              }),
-            },
-            overlayStyle: {
-              backgroundColor: '#505050',
-              opacity: progress.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, 0.9],
-                extrapolate: 'clamp',
-              }),
-            },
-          }),
-        }}
-      />
-      <OnboardingStack.Screen
-        name="PasswordReset"
-        component={PasswordReset}
-        options={{
-          gestureEnabled: false,
-        }}
-      />
-      <OnboardingStack.Screen
-        name="InvitationCodeVerification"
-        component={InvitationCodeVerification}
-      />
-      <OnboardingStack.Screen
-        name="RegistrationOne"
-        component={RegistrationOne}
-      />
-      <OnboardingStack.Screen
-        name="RegistrationTwo"
-        component={RegistrationTwo}
-      />
-      <OnboardingStack.Screen
-        name="RegistrationThree"
-        component={RegistrationThree}
-      />
-      <OnboardingStack.Screen name="Checkpoint" component={Checkpoint} />
-      <OnboardingStack.Screen name="Verification" component={Verification} />
-      <OnboardingStack.Screen
-        name="ProfileOnboarding"
-        component={ProfileOnboarding}
-        options={{
-          gestureEnabled: false,
-        }}
-      />
-      <OnboardingStack.Screen name="SocialMedia" component={SocialMedia} />
-    </OnboardingStack.Navigator>
-  );
-};
-
-export default Onboarding;
diff --git a/src/routes/onboarding/OnboardingStack.tsx b/src/routes/onboarding/OnboardingStack.tsx
deleted file mode 100644
index 7ff00271..00000000
--- a/src/routes/onboarding/OnboardingStack.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import {createStackNavigator} from '@react-navigation/stack';
-import {
-  CategorySelectionScreenType,
-  MomentCategoryType,
-  TaggPopupType,
-  UserType,
-  VerificationScreenType,
-} from '../../types';
-
-export type OnboardingStackParams = {
-  WelcomeScreen: undefined;
-  Login: undefined;
-  PasswordResetRequest: undefined;
-  PasswordReset: {
-    value: string;
-  };
-  InvitationCodeVerification: undefined;
-  RegistrationOne: undefined;
-  RegistrationTwo: {phone: string};
-  RegistrationThree: {
-    firstName: string;
-    lastName: string;
-    phone: string;
-    email: string;
-  };
-  Checkpoint: {username: string; userId: string};
-  Verification: {id: string; screenType: VerificationScreenType};
-  ProfileOnboarding: {username: string; userId: string};
-  SocialMedia: {username: string; userId: string};
-  CategorySelection: {
-    categories: Record<MomentCategoryType, boolean>;
-    screenType: CategorySelectionScreenType;
-    user: UserType;
-  };
-  TaggPopup: {
-    popupProps: TaggPopupType;
-  };
-};
-
-export const OnboardingStack = createStackNavigator<OnboardingStackParams>();
diff --git a/src/routes/onboarding/OnboardingStackNavigator.tsx b/src/routes/onboarding/OnboardingStackNavigator.tsx
new file mode 100644
index 00000000..ea7ce8e8
--- /dev/null
+++ b/src/routes/onboarding/OnboardingStackNavigator.tsx
@@ -0,0 +1,44 @@
+import {createStackNavigator} from '@react-navigation/stack';
+import {
+  CategorySelectionScreenType,
+  TaggPopupType,
+  UserType,
+  VerificationScreenType,
+} from '../../types';
+
+export type OnboardingStackParams = {
+  WelcomeScreen: undefined;
+  Login: undefined;
+  PasswordResetRequest: undefined;
+  PasswordReset: {
+    value: string;
+  };
+  InvitationCodeVerification: undefined;
+  RegistrationOne: undefined;
+  RegistrationTwo: {phone: string};
+  RegistrationThree: {
+    firstName: string;
+    lastName: string;
+    phone: string;
+    email: string;
+  };
+  Checkpoint: {username: string; userId: string};
+  Verification: {id: string; screenType: VerificationScreenType};
+  ProfileOnboarding: {username: string; userId: string};
+  SocialMedia: {username: string; userId: string};
+  CategorySelection: {
+    screenType: CategorySelectionScreenType;
+    user: UserType;
+    newCustomCategory: string | undefined;
+  };
+  CreateCustomCategory: {
+    screenType: CategorySelectionScreenType;
+    user: UserType;
+    existingCategories: string[];
+  };
+  TaggPopup: {
+    popupProps: TaggPopupType;
+  };
+};
+
+export const OnboardingStack = createStackNavigator<OnboardingStackParams>();
diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
new file mode 100644
index 00000000..54614b32
--- /dev/null
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import {OnboardingStack} from './OnboardingStackNavigator';
+import {
+  Login,
+  InvitationCodeVerification,
+  RegistrationOne,
+  RegistrationTwo,
+  RegistrationThree,
+  Verification,
+  ProfileOnboarding,
+  Checkpoint,
+  SocialMedia,
+  PasswordResetRequest,
+  PasswordReset,
+  WelcomeScreen,
+  CategorySelection,
+} from '../../screens';
+import {StackCardInterpolationProps} from '@react-navigation/stack';
+import TaggPopup from '../../components/common/TaggPopup';
+
+const forFade = ({current}: StackCardInterpolationProps) => ({
+  cardStyle: {
+    opacity: current.progress,
+  },
+});
+
+const Onboarding: React.FC = () => {
+  return (
+    <OnboardingStack.Navigator
+      initialRouteName="Login"
+      screenOptions={{headerShown: false}}>
+      <OnboardingStack.Screen
+        name="Login"
+        component={Login}
+        options={{
+          gestureEnabled: false,
+          cardStyleInterpolator: forFade,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="PasswordResetRequest"
+        component={PasswordResetRequest}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="WelcomeScreen"
+        component={WelcomeScreen}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="CategorySelection"
+        component={CategorySelection}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="TaggPopup"
+        component={TaggPopup}
+        options={{
+          gestureEnabled: false,
+          cardStyle: {
+            backgroundColor: 'transparent',
+          },
+          cardOverlayEnabled: true,
+          cardStyleInterpolator: ({current: {progress}}) => ({
+            cardStyle: {
+              opacity: progress.interpolate({
+                inputRange: [0, 0.5, 0.9, 1],
+                outputRange: [0, 0.25, 0.7, 1],
+              }),
+            },
+            overlayStyle: {
+              backgroundColor: '#505050',
+              opacity: progress.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, 0.9],
+                extrapolate: 'clamp',
+              }),
+            },
+          }),
+        }}
+      />
+      <OnboardingStack.Screen
+        name="PasswordReset"
+        component={PasswordReset}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="InvitationCodeVerification"
+        component={InvitationCodeVerification}
+      />
+      <OnboardingStack.Screen
+        name="RegistrationOne"
+        component={RegistrationOne}
+      />
+      <OnboardingStack.Screen
+        name="RegistrationTwo"
+        component={RegistrationTwo}
+      />
+      <OnboardingStack.Screen
+        name="RegistrationThree"
+        component={RegistrationThree}
+      />
+      <OnboardingStack.Screen name="Checkpoint" component={Checkpoint} />
+      <OnboardingStack.Screen name="Verification" component={Verification} />
+      <OnboardingStack.Screen
+        name="ProfileOnboarding"
+        component={ProfileOnboarding}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen name="SocialMedia" component={SocialMedia} />
+    </OnboardingStack.Navigator>
+  );
+};
+
+export default Onboarding;
diff --git a/src/routes/onboarding/index.ts b/src/routes/onboarding/index.ts
index 66b0f3f4..ce9ac046 100644
--- a/src/routes/onboarding/index.ts
+++ b/src/routes/onboarding/index.ts
@@ -1,2 +1,2 @@
-export * from './OnboardingStack';
-export {default} from './Onboarding';
+export * from './OnboardingStackNavigator';
+export {default} from './OnboardingStackScreen';
-- 
cgit v1.2.3-70-g09d2