[TMA-527/506/523] Custom Moment Categories (#174)

* 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

7 files changed, 330 insertions, 98 deletions

diff --git a/src/screens/onboarding/CategorySelection.tsx b/src/screens/onboarding/CategorySelection.tsx
index b9677ed4..540b106f 100644
--- a/src/screens/onboarding/CategorySelection.tsx
+++ b/src/screens/onboarding/CategorySelection.tsx
@@ -1,8 +1,8 @@
 import {RouteProp} from '@react-navigation/native';
-import React, {useCallback, useEffect, useState} from 'react';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useEffect, useState} from 'react';
 import {
   Alert,
-  KeyboardAvoidingView,
   Platform,
   StatusBar,
   StyleSheet,
@@ -10,20 +10,17 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {useDispatch} from 'react-redux';
-import {
-  BackgroundGradientType,
-  CategorySelectionScreenType,
-  MomentCategoryType,
-} from '../../types';
+import {ScrollView} from 'react-native-gesture-handler';
+import {useDispatch, useSelector} from 'react-redux';
+import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import {Background, MomentCategory} from '../../components';
 import {MOMENT_CATEGORIES} from '../../constants';
 import {OnboardingStackParams} from '../../routes';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {getTokenOrLogout, userLogin} from '../../utils';
 import {fcmService, postMomentCategories} from '../../services';
 import {updateMomentCategories} from '../../store/actions/momentCategories';
-import {ScrollView} from 'react-native-gesture-handler';
+import {RootState} from '../../store/rootReducer';
+import {BackgroundGradientType, CategorySelectionScreenType} from '../../types';
+import {getTokenOrLogout, SCREEN_WIDTH, userLogin} from '../../utils';
 
 type CategorySelectionRouteProps = RouteProp<
   OnboardingStackParams,
@@ -47,17 +44,47 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
   /**
    * Same component to be used for category selection while onboarding and while on profile
    */
-  const {categories, screenType, user} = route.params;
+  const {screenType, user} = route.params;
   const isOnBoarding: boolean =
     screenType === CategorySelectionScreenType.Onboarding;
   const {userId, username} = user;
 
-  const [selectedCategories, setSelectedCategories] = useState<
-    Array<MomentCategoryType>
+  // During onboarding this will fail and default to []
+  const {momentCategories = []} = useSelector(
+    (state: RootState) => state.momentCategories,
+  );
+
+  // Stores all the categories that will be saved to the store
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+
+  /**
+   * Stores all the custom categories for the UI, allow easier logic for
+   * unchecking a custom category.
+   *
+   * Each uncommited custom category should also have a copy in selectedCategories
+   * since that's the final value that will be stored in the store.
+   */
+  const [uncommitedCustomCategories, setUncommitedCustomCategories] = useState<
+    string[]
   >([]);
 
+  const customCategories = momentCategories.filter(
+    (mc) => !MOMENT_CATEGORIES.includes(mc),
+  );
+
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    const newCustomCategory = route.params.newCustomCategory;
+    if (newCustomCategory) {
+      setUncommitedCustomCategories([
+        ...uncommitedCustomCategories,
+        newCustomCategory,
+      ]);
+      selectedCategories.push(newCustomCategory);
+    }
+  }, [route.params?.newCustomCategory]);
+
   /**
    * Show the tutorial if a new user is OnBoarding
    */
@@ -71,7 +98,7 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
           next: {
             messageHeader: 'Select Categories',
             messageBody:
-              'Select between 2 - 6 categories to begin creating moments!',
+              'Select at least a category to begin creating moments!',
             next: undefined,
           },
         },
@@ -89,11 +116,13 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
    *    Remove from the selected categories
    */
   const onSelect = (
-    category: MomentCategoryType,
+    category: string,
     isSelected: boolean,
     isAdded: boolean,
   ) => {
-    if (isAdded) return;
+    if (isAdded) {
+      return;
+    }
     if (isSelected) {
       setSelectedCategories((prev) => [...prev, category]);
     } else {
@@ -104,30 +133,35 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
   };
 
   /**
-   * if onboarding
-   *    Count of already added categories will always be 0
-   * else
-   *    Calculate number of selected categories by iterating through the user's pre-selected categories
+   * Handle deselection of custom category.
+   *
+   * Custom categories is "added" and "selected" by CreateCustomCategory screen.
+   * User can only "deselect" an uncommited custom category.
+   *
+   * case isAdded || isSelected:
+   *    Return without doing anything
+   * default:
+   *    Remove from selected categories AND uncommitedCustomCategories
    */
-  const addedLength = !isOnBoarding
-    ? Object.keys(categories).filter((key) => {
-        return categories[key as MomentCategoryType] === true;
-      }).length
-    : 0;
+  const onDeselectCustomCategory = (
+    category: string,
+    isSelected: boolean,
+    isAdded: boolean,
+  ) => {
+    if (isAdded || isSelected) {
+      return;
+    }
+    setSelectedCategories(
+      selectedCategories.filter((item) => item !== category),
+    );
+    setUncommitedCustomCategories(
+      uncommitedCustomCategories.filter((item) => item !== category),
+    );
+  };
 
   const handleButtonPress = async () => {
-    /**
-     * Check for lower and upper bound before creating new categories
-     */
-    const totalCategories = addedLength + selectedCategories.length;
-    if (totalCategories < 2) {
-      Alert.alert('Please select atleast 2 categories');
-      return;
-    } else if (totalCategories > 6) {
-      Alert.alert('You may not add more than 6 categories');
-      return;
-    } else if (selectedCategories.length === 0) {
-      Alert.alert('Please select some categories!');
+    if (momentCategories.length + selectedCategories.length === 0) {
+      Alert.alert('Please select at least 1 category');
       return;
     }
     try {
@@ -137,7 +171,9 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
         userLogin(dispatch, {userId: userId, username: username});
         fcmService.sendFcmTokenToServer();
       } else {
-        dispatch(updateMomentCategories(selectedCategories, true, userId));
+        dispatch(
+          updateMomentCategories(momentCategories.concat(selectedCategories)),
+        );
         navigation.goBack();
       }
     } catch (error) {
@@ -155,15 +191,55 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
         style={styles.container}
         gradientType={BackgroundGradientType.Dark}>
         <StatusBar barStyle="light-content" />
-        <Text style={styles.subtext}>Create new categories</Text>
+        <Text style={styles.subtext}>Create Categories</Text>
         <View style={styles.container}>
+          {!isOnBoarding && (
+            <TouchableOpacity
+              style={styles.createCategory}
+              onPress={() => {
+                navigation.push('CreateCustomCategory', {
+                  screenType,
+                  user,
+                  existingCategories: momentCategories.concat(
+                    selectedCategories,
+                  ),
+                });
+              }}>
+              <PlusIcon width={30} height={30} color="white" />
+              <Text style={styles.createCategoryLabel}>
+                Create your own category
+              </Text>
+            </TouchableOpacity>
+          )}
           <View style={styles.linkerContainer}>
+            {/* commited custom categories */}
+            {customCategories.map((category, index) => (
+              <MomentCategory
+                key={index}
+                categoryType={category}
+                isSelected={false}
+                isAdded={true}
+                onSelect={onDeselectCustomCategory}
+              />
+            ))}
+            {/* uncommited custom categroies */}
+            {uncommitedCustomCategories.map((category, index) => (
+              <MomentCategory
+                key={index}
+                categoryType={category}
+                isSelected={selectedCategories.includes(category)}
+                isAdded={false}
+                onSelect={onDeselectCustomCategory}
+              />
+            ))}
+            {customCategories.length + uncommitedCustomCategories.length !==
+              0 && <View style={styles.divider} />}
             {MOMENT_CATEGORIES.map((category, index) => (
               <MomentCategory
                 key={index}
                 categoryType={category}
                 isSelected={selectedCategories.includes(category)}
-                isAdded={categories[category]}
+                isAdded={momentCategories.includes(category)}
                 onSelect={onSelect}
               />
             ))}
@@ -215,11 +291,12 @@ const styles = StyleSheet.create({
   },
   subtext: {
     color: '#fff',
-    fontSize: 16,
+    fontSize: 20,
     fontWeight: '600',
     textAlign: 'center',
     marginVertical: '8%',
     marginHorizontal: '10%',
+    marginTop: '15%',
   },
   finalAction: {
     backgroundColor: 'white',
@@ -237,6 +314,31 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: 'black',
   },
+  createCategory: {
+    backgroundColor: '#53329B',
+    width: SCREEN_WIDTH * 0.9,
+    height: 70,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    flexDirection: 'row',
+    marginBottom: '5%',
+  },
+  createCategoryLabel: {
+    color: 'white',
+    marginLeft: '3%',
+    fontSize: 18,
+    fontWeight: '500',
+  },
+  plusIcon: {
+    color: 'white',
+  },
+  divider: {
+    borderColor: 'white',
+    borderBottomWidth: 1,
+    width: SCREEN_WIDTH * 0.9,
+    marginVertical: '2%',
+  },
 });
 
 export default CategorySelection;
diff --git a/src/screens/onboarding/CreateCustomCategory.tsx b/src/screens/onboarding/CreateCustomCategory.tsx
new file mode 100644
index 00000000..eab72c7d
--- /dev/null
+++ b/src/screens/onboarding/CreateCustomCategory.tsx
@@ -0,0 +1,123 @@
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useState} from 'react';
+import {
+  Alert,
+  KeyboardAvoidingView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+} from 'react-native';
+import {Background} from '../../components';
+import {OnboardingStackParams} from '../../routes';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+type CreateCustomCategoryRouteProps = RouteProp<
+  OnboardingStackParams,
+  'CreateCustomCategory'
+>;
+
+type CreateCustomCategoryNavigationProps = StackNavigationProp<
+  OnboardingStackParams,
+  'CreateCustomCategory'
+>;
+
+interface CreateCustomCategoryProps {
+  route: CreateCustomCategoryRouteProps;
+  navigation: CreateCustomCategoryNavigationProps;
+}
+
+const CreateCustomCategory: React.FC<CreateCustomCategoryProps> = ({
+  route,
+  navigation,
+}) => {
+  /**
+   * Same component to be used for category selection while onboarding and while on profile
+   */
+  const {existingCategories} = route.params;
+  const [newCategory, setNewCategory] = useState('');
+
+  const handleButtonPress = () => {
+    if (existingCategories.includes(newCategory)) {
+      Alert.alert('Looks like you already have that one created!');
+    } else {
+      navigation.navigate('CategorySelection', {
+        screenType: route.params.screenType,
+        user: route.params.user,
+        newCustomCategory: newCategory,
+      });
+    }
+  };
+
+  return (
+    <>
+      <StatusBar barStyle="light-content" />
+      <Background
+        style={styles.container}
+        gradientType={BackgroundGradientType.Dark}>
+        <KeyboardAvoidingView
+          style={styles.innerContainer}
+          behavior={'padding'}>
+          <Text style={styles.title}>Give your category a name</Text>
+          <TextInput
+            style={styles.input}
+            selectionColor={'white'}
+            onChangeText={setNewCategory}
+            autoFocus={true}
+          />
+          <TouchableOpacity
+            onPress={handleButtonPress}
+            style={styles.finalAction}>
+            <Text style={styles.finalActionLabel}>{'Create'}</Text>
+          </TouchableOpacity>
+        </KeyboardAvoidingView>
+      </Background>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    minHeight: SCREEN_HEIGHT,
+  },
+  innerContainer: {
+    height: '40%',
+    top: '20%',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  title: {
+    color: 'white',
+    fontSize: 20,
+    fontWeight: '600',
+  },
+  input: {
+    width: SCREEN_WIDTH * 0.75,
+    fontSize: 30,
+    color: 'white',
+    textAlign: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: 'white',
+  },
+  finalAction: {
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#8F01FF',
+  },
+  finalActionLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: 'black',
+  },
+});
+
+export default CreateCustomCategory;
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 3e59b00e..006b38db 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -17,15 +17,10 @@ import {OnboardingStackParams} from '../../routes/onboarding';
 import {Background, TaggInput, SubmitButton} from '../../components';
 import {usernameRegex, LOGIN_ENDPOINT} from '../../constants';
 import AsyncStorage from '@react-native-community/async-storage';
-import {
-  BackgroundGradientType,
-  CategorySelectionScreenType,
-  UserType,
-} from '../../types';
+import {BackgroundGradientType, UserType} from '../../types';
 import {useDispatch} from 'react-redux';
 import {userLogin} from '../../utils';
 import SplashScreen from 'react-native-splash-screen';
-import {MOMENT_CATEGORIES_MAP} from '../../store/initialStates';
 
 type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
 type VerificationScreenNavigationProp = StackNavigationProp<
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 70550f36..1f8e58da 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -147,43 +147,51 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
 
   const goToGalleryLargePic = () => {
     ImagePicker.openPicker({
-      smartAlbums: ['Favorites', 'RecentlyAdded', 'SelfPortraits', 'Screenshots', 'UserLibrary'],
+      smartAlbums: [
+        'Favorites',
+        'RecentlyAdded',
+        'SelfPortraits',
+        'Screenshots',
+        'UserLibrary',
+      ],
       width: 580,
       height: 580,
       cropping: true,
       cropperToolbarTitle: 'Select Header',
       mediaType: 'photo',
-    })
-      .then((picture) => {
-        if ('path' in picture) {
-          setForm({
-            ...form,
-            largePic: picture.path,
-          });
-        }
-      })
-      .catch(() => {});
+    }).then((picture) => {
+      if ('path' in picture) {
+        setForm({
+          ...form,
+          largePic: picture.path,
+        });
+      }
+    });
   };
 
   const goToGallerySmallPic = () => {
     ImagePicker.openPicker({
-      smartAlbums: ['Favorites', 'RecentlyAdded', 'SelfPortraits', 'Screenshots', 'UserLibrary'],
+      smartAlbums: [
+        'Favorites',
+        'RecentlyAdded',
+        'SelfPortraits',
+        'Screenshots',
+        'UserLibrary',
+      ],
       width: 580,
       height: 580,
       cropping: true,
       cropperToolbarTitle: 'Select Profile Picture',
       mediaType: 'photo',
       cropperCircleOverlay: true,
-    })
-      .then((picture) => {
-        if ('path' in picture) {
-          setForm({
-            ...form,
-            smallPic: picture.path,
-          });
-        }
-      })
-      .catch(() => {});
+    }).then((picture) => {
+      if ('path' in picture) {
+        setForm({
+          ...form,
+          smallPic: picture.path,
+        });
+      }
+    });
   };
 
   /*
diff --git a/src/screens/onboarding/SocialMedia.tsx b/src/screens/onboarding/SocialMedia.tsx
index d2a43e7a..32beb4bc 100644
--- a/src/screens/onboarding/SocialMedia.tsx
+++ b/src/screens/onboarding/SocialMedia.tsx
@@ -2,7 +2,6 @@ import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React from 'react';
 import {
-  Alert,
   KeyboardAvoidingView,
   Platform,
   StatusBar,
@@ -22,9 +21,8 @@ import {
   LinkSocialMedia,
   RegistrationWizard,
 } from '../../components';
-import {SOCIAL_LIST} from '../../constants/';
+import {SOCIAL_LIST, MOMENT_CATEGORIES} from '../../constants/';
 import {OnboardingStackParams} from '../../routes';
-import {MOMENT_CATEGORIES_MAP} from '../../store/initialStates';
 
 /**
  * Social Media Screen for displaying social media linkers
@@ -55,8 +53,6 @@ const SocialMedia: React.FC<SocialMediaProps> = ({route, navigation}) => {
     linkers.push(linker);
   }
 
-  const dispatch = useDispatch();
-
   /**
    * Just commenting this out, in case we need it in the future
    */
@@ -69,7 +65,6 @@ const SocialMedia: React.FC<SocialMediaProps> = ({route, navigation}) => {
 
   const handleNext = () => {
     navigation.navigate('CategorySelection', {
-      categories: MOMENT_CATEGORIES_MAP,
       screenType: CategorySelectionScreenType.Onboarding,
       user: {userId: userId, username: username},
     });
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index ec833929..20a8020d 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -11,3 +11,4 @@ export {default as PasswordResetRequest} from './PasswordResetRequest';
 export {default as PasswordReset} from './PasswordReset';
 export {default as WelcomeScreen} from './WelcomeScreen';
 export {default as CategorySelection} from './CategorySelection';
+export {default as CreateCustomCategory} from './CreateCustomCategory';
diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx
index 55e19a51..d86ae7cb 100644
--- a/src/screens/profile/EditProfile.tsx
+++ b/src/screens/profile/EditProfile.tsx
@@ -131,43 +131,51 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
 
   const goToGalleryLargePic = () => {
     ImagePicker.openPicker({
-      smartAlbums: ['Favorites', 'RecentlyAdded', 'SelfPortraits', 'Screenshots', 'UserLibrary'],
+      smartAlbums: [
+        'Favorites',
+        'RecentlyAdded',
+        'SelfPortraits',
+        'Screenshots',
+        'UserLibrary',
+      ],
       width: 580,
       height: 580,
       cropping: true,
       cropperToolbarTitle: 'Select Header',
       mediaType: 'photo',
-    })
-      .then((picture) => {
-        if ('path' in picture) {
-          setForm({
-            ...form,
-            largePic: picture.path,
-          });
-        }
-      })
-      .catch(() => {});
+    }).then((picture) => {
+      if ('path' in picture) {
+        setForm({
+          ...form,
+          largePic: picture.path,
+        });
+      }
+    });
   };
 
   const goToGallerySmallPic = () => {
     ImagePicker.openPicker({
-      smartAlbums: ['Favorites', 'RecentlyAdded', 'SelfPortraits', 'Screenshots', 'UserLibrary'],
+      smartAlbums: [
+        'Favorites',
+        'RecentlyAdded',
+        'SelfPortraits',
+        'Screenshots',
+        'UserLibrary',
+      ],
       width: 580,
       height: 580,
       cropping: true,
       cropperToolbarTitle: 'Select Profile Picture',
       mediaType: 'photo',
       cropperCircleOverlay: true,
-    })
-      .then((picture) => {
-        if ('path' in picture) {
-          setForm({
-            ...form,
-            smallPic: picture.path,
-          });
-        }
-      })
-      .catch(() => {});
+    }).then((picture) => {
+      if ('path' in picture) {
+        setForm({
+          ...form,
+          smallPic: picture.path,
+        });
+      }
+    });
   };
 
   /*