[TMA 446] Create category (#144)

* Added welcome page

* Working code

* Small fix

* Some more cleanup

* Fixes

* Cleanup

* Fix again

* Use gradient for white bg as well

* Fixed type

1 files changed, 88 insertions, 8 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index f2e0db0a..7064f775 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,21 +1,29 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {
+  Alert,
   LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
   RefreshControl,
   StyleSheet,
+  Text,
   View,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
 import {
+  CategorySelectionScreenType,
+  MomentCategoryType,
   MomentType,
   ProfilePreviewType,
   ProfileType,
   ScreenType,
   UserType,
 } from '../../types';
-import {COVER_HEIGHT, defaultMoments} from '../../constants';
+import {
+  COVER_HEIGHT,
+  MOMENT_CATEGORIES,
+  TAGG_TEXT_LIGHT_BLUE,
+} from '../../constants';
 import {fetchUserX, SCREEN_HEIGHT, userLogin} from '../../utils';
 import TaggsBar from '../taggs/TaggsBar';
 import {Moment} from '../moments';
@@ -29,15 +37,19 @@ import {
   blockUnblockUser,
   loadFollowData,
   updateUserXFollowersAndFollowing,
+  updateMomentCategories,
 } from '../../store/actions';
 import {
   NO_USER,
   NO_PROFILE,
   EMPTY_PROFILE_PREVIEW_LIST,
   EMPTY_MOMENTS_LIST,
+  MOMENT_CATEGORIES_MAP,
 } from '../../store/initialStates';
 import {Cover} from '.';
-import {Background} from '../onboarding';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useNavigation} from '@react-navigation/native';
+import {deleteMomentCategories} from '../../services';
 
 interface ContentProps {
   y: Animated.Value<number>;
@@ -60,6 +72,10 @@ 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
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.momentCategories);
+
   const {blockedUsers = EMPTY_PROFILE_PREVIEW_LIST} = useSelector(
     (state: RootState) => state.blocked,
   );
@@ -68,6 +84,8 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   );
   const state = useStore().getState();
 
+  const navigation = useNavigation();
+
   /**
    * States
    */
@@ -80,6 +98,13 @@ 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) {
@@ -194,6 +219,33 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     await dispatch(updateUserXFollowersAndFollowing(user.userId, state));
   };
 
+  /**
+   * Handle deletion of a category
+   * Confirm with user before deleting the category
+   * @param category category to be deleted
+   */
+  const handleCategoryDeletion = (category: MomentCategoryType) => {
+    Alert.alert(
+      'Category Deletion',
+      `Are you sure that you want to delete the category ${category} ?`,
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Yes',
+          onPress: () => {
+            dispatch(
+              updateMomentCategories([category], false, loggedInUser.userId),
+            );
+          },
+        },
+      ],
+      {cancelable: true},
+    );
+  };
+
   const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     /**
      * Set the new y position
@@ -239,32 +291,60 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
       />
       <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
       <View style={styles.momentsContainer}>
-        {defaultMoments.map((title, index) => (
+        {userMomentCategories.map((title, index) => (
           <Moment
             key={index}
             title={title}
             images={imagesMap.get(title)}
             userXId={userXId}
             screenType={screenType}
+            handleMomentCategoryDelete={handleCategoryDeletion}
+            shouldAllowDeletion={userMomentCategories.length > 2}
           />
         ))}
+        {!userXId && userMomentCategories.length < 6 && (
+          <TouchableOpacity
+            onPress={() =>
+              navigation.push('CategorySelection', {
+                categories: momentCategories,
+                screenType: CategorySelectionScreenType.Profile,
+                user: loggedInUser,
+              })
+            }
+            style={styles.createCategoryButton}>
+            <Text style={styles.createCategoryButtonLabel}>
+              Create a new category
+            </Text>
+          </TouchableOpacity>
+        )}
       </View>
     </Animated.ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
-  refreshControlContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   container: {
     flex: 1,
   },
   momentsContainer: {
     backgroundColor: '#f2f2f2',
     paddingBottom: SCREEN_HEIGHT / 10,
+    flex: 1,
+    flexDirection: 'column',
+  },
+  createCategoryButton: {
+    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '70%',
+    height: 30,
+    marginTop: '15%',
+    alignSelf: 'center',
+  },
+  createCategoryButtonLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: 'white',
   },
 });