[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

3 files changed, 53 insertions, 49 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 0d2c2b62..be6f78a8 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -11,14 +11,14 @@ import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
 import ImagePicker from 'react-native-image-crop-picker';
 import MomentTile from './MomentTile';
-import {MomentCategoryType, MomentType, ScreenType} from 'src/types';
+import {MomentType, ScreenType} from 'src/types';
 
 interface MomentProps {
-  title: MomentCategoryType;
+  title: string;
   images: MomentType[] | undefined;
   userXId: string | undefined;
   screenType: ScreenType;
-  handleMomentCategoryDelete: (_: MomentCategoryType) => void;
+  handleMomentCategoryDelete: (_: string) => void;
   shouldAllowDeletion: boolean;
 }
 
@@ -57,7 +57,9 @@ const Moment: React.FC<MomentProps> = ({
         }
       })
       .catch((err) => {
-        Alert.alert('Unable to upload moment!');
+        if (err.code && err.code !== 'E_PICKER_CANCELLED') {
+          Alert.alert('Unable to upload moment!');
+        }
       });
   };
   return (
@@ -70,6 +72,7 @@ const Moment: React.FC<MomentProps> = ({
               width={21}
               height={21}
               onPress={() => navigateToImagePicker()}
+              color={TAGG_TEXT_LIGHT_BLUE}
               style={{marginRight: 10}}
             />
             {shouldAllowDeletion && (
diff --git a/src/components/onboarding/MomentCategory.tsx b/src/components/onboarding/MomentCategory.tsx
index 827ab207..97099b9e 100644
--- a/src/components/onboarding/MomentCategory.tsx
+++ b/src/components/onboarding/MomentCategory.tsx
@@ -1,19 +1,17 @@
-import * as React from 'react';
+import React from 'react';
 import {StyleSheet} from 'react-native';
 import {Image, Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
-import {BACKGROUND_GRADIENT_MAP} from '../../constants';
-import {MomentCategoryType} from '../../types';
+import {
+  BACKGROUND_GRADIENT_MAP,
+  MOMENT_CATEGORY_BG_COLORS,
+} from '../../constants';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 type MomentCategoryProps = {
-  categoryType: MomentCategoryType;
-  onSelect: (
-    category: MomentCategoryType,
-    isSelected: boolean,
-    isAdded: boolean,
-  ) => void;
+  categoryType: string;
+  onSelect: (category: string, isSelected: boolean, isAdded: boolean) => void;
   isSelected: boolean;
   isAdded: boolean;
 };
@@ -32,63 +30,75 @@ const MomentCategory: React.FC<MomentCategoryProps> = ({
   switch (categoryType) {
     case 'Friends':
       icon = require('../../assets/moment-categories/friends-icon.png');
-      bgColor = '#5E4AE4';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[0];
       break;
     case 'Adventure':
       icon = require('../../assets/moment-categories/adventure-icon.png');
-      bgColor = '#5044A6';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[1];
       break;
     case 'Photo Dump':
       icon = require('../../assets/moment-categories/photo-dump-icon.png');
-      bgColor = '#4755A1';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[2];
       break;
     case 'Food':
       icon = require('../../assets/moment-categories/food-icon.png');
-      bgColor = '#444BA8';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[3];
       break;
     case 'Music':
       icon = require('../../assets/moment-categories/music-icon.png');
-      bgColor = '#374898';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[4];
       break;
     case 'Art':
       icon = require('../../assets/moment-categories/art-icon.png');
-      bgColor = '#3F5C97';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[5];
       break;
     case 'Sports':
       icon = require('../../assets/moment-categories/sports-icon.png');
-      bgColor = '#3A649F';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[6];
       break;
     case 'Fashion':
       icon = require('../../assets/moment-categories/fashion-icon.png');
-      bgColor = '#386A95';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[7];
       break;
     case 'Travel':
       icon = require('../../assets/moment-categories/travel-icon.png');
-      bgColor = '#366D84';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[8];
       break;
     case 'Pets':
       icon = require('../../assets/moment-categories/pets-icon.png');
-      bgColor = '#335E76';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[9];
       break;
     case 'Fitness':
       icon = require('../../assets/moment-categories/fitness-icon.png');
-      bgColor = '#2E5471';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[10];
       break;
     case 'DIY':
       icon = require('../../assets/moment-categories/diy-icon.png');
-      bgColor = '#274765';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[11];
       break;
     case 'Nature':
       icon = require('../../assets/moment-categories/nature-icon.png');
-      bgColor = '#225363';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[12];
       break;
     case 'Early Life':
       icon = require('../../assets/moment-categories/early-life-icon.png');
-      bgColor = '#365F6A';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[13];
       break;
     case 'Beauty':
       icon = require('../../assets/moment-categories/beauty-icon.png');
-      bgColor = '#4E7175';
+      bgColor = MOMENT_CATEGORY_BG_COLORS[14];
+      break;
+    default:
+      // All custom categories
+      icon = require('../../assets/moment-categories/custom-icon.png');
+      // A quick deterministic "random" color picker by summing up ascii char codees
+      const charCodeSum = categoryType
+        .split('')
+        .reduce((acc: number, x: string) => acc + x.charCodeAt(0), 0);
+      bgColor =
+        MOMENT_CATEGORY_BG_COLORS[
+          charCodeSum % MOMENT_CATEGORY_BG_COLORS.length
+        ];
       break;
   }
 
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 3a304938..5fa05588 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -12,18 +12,13 @@ import {
 import Animated from 'react-native-reanimated';
 import {
   CategorySelectionScreenType,
-  MomentCategoryType,
   MomentType,
   ProfilePreviewType,
   ProfileType,
   ScreenType,
   UserType,
 } from '../../types';
-import {
-  COVER_HEIGHT,
-  MOMENT_CATEGORIES,
-  TAGG_TEXT_LIGHT_BLUE,
-} from '../../constants';
+import {COVER_HEIGHT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
 import {fetchUserX, SCREEN_HEIGHT, userLogin} from '../../utils';
 import TaggsBar from '../taggs/TaggsBar';
 import {Moment} from '../moments';
@@ -45,7 +40,6 @@ import {
   NO_PROFILE,
   EMPTY_PROFILE_PREVIEW_LIST,
   EMPTY_MOMENTS_LIST,
-  MOMENT_CATEGORIES_MAP,
 } from '../../store/initialStates';
 import {Cover} from '.';
 import {TouchableOpacity} from 'react-native-gesture-handler';
@@ -77,7 +71,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.moments);
 
-  const {momentCategories = MOMENT_CATEGORIES_MAP} = userXId
+  const {momentCategories = []} = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.momentCategories);
 
@@ -103,13 +97,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const [shouldBounce, setShouldBounce] = useState<boolean>(true);
   const [refreshing, setRefreshing] = useState<boolean>(false);
 
-  /**
-   * Filter list of categories already selected by user
-   */
-  const userMomentCategories = MOMENT_CATEGORIES.filter(
-    (category) => momentCategories[category] === true,
-  );
-
   const onRefresh = useCallback(() => {
     const refrestState = async () => {
       if (!userXId) {
@@ -226,7 +213,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
    * Confirm with user before deleting the category
    * @param category category to be deleted
    */
-  const handleCategoryDeletion = (category: MomentCategoryType) => {
+  const handleCategoryDeletion = (category: string) => {
     Alert.alert(
       'Category Deletion',
       `Are you sure that you want to delete the category ${category} ?`,
@@ -239,7 +226,12 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
           text: 'Yes',
           onPress: () => {
             dispatch(
-              updateMomentCategories([category], false, loggedInUser.userId),
+              updateMomentCategories(
+                momentCategories.filter(
+                  (mc) => mc !== category,
+                  loggedInUser.userId,
+                ),
+              ),
             );
             dispatch(deleteUserMomentsForCategory(category));
           },
@@ -304,7 +296,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
             } has not posted any moments yet`}</Text>
           </View>
         )}
-        {userMomentCategories.map(
+        {momentCategories.map(
           (title, index) =>
             (!userXId || imagesMap.get(title)) && (
               <Moment
@@ -314,15 +306,14 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
                 userXId={userXId}
                 screenType={screenType}
                 handleMomentCategoryDelete={handleCategoryDeletion}
-                shouldAllowDeletion={userMomentCategories.length > 2}
+                shouldAllowDeletion={momentCategories.length > 1}
               />
             ),
         )}
-        {!userXId && userMomentCategories.length < 6 && (
+        {!userXId && (
           <TouchableOpacity
             onPress={() =>
               navigation.push('CategorySelection', {
-                categories: momentCategories,
                 screenType: CategorySelectionScreenType.Profile,
                 user: loggedInUser,
               })