Add logic to create custom category action

6 files changed, 63 insertions, 8 deletions

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 2447276d..b1e65ba6 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {FC} from 'react';
 import {
   GestureResponderEvent,
   StyleProp,
@@ -25,6 +25,7 @@ interface TaggSquareButtonProps extends TouchableOpacityProps {
   labelColor: 'white' | 'blue';
   style?: StyleProp<ViewStyle>;
   labelStyle?: StyleProp<TextStyle>;
+  icon?: Element;
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
@@ -55,6 +56,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
           {...props}
           onPress={props.onPress}
           style={[styles.largeButton, buttonColor, props.style]}>
+          {props.icon}
           <Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
             {props.title}
           </Text>
@@ -71,6 +73,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
             colors={BACKGROUND_GRADIENT_MAP[0]}
             useAngle
             angle={90}>
+            {props.icon}
             <Text style={[styles.gradientLabel, props.labelStyle]}>
               {props.title}
             </Text>
@@ -84,6 +87,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
           {...props}
           onPress={props.onPress}
           style={[styles.normalButton, buttonColor, props.style]}>
+          {props.icon}
           <Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
             {props.title}
           </Text>
@@ -94,6 +98,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
 
 const styles = StyleSheet.create({
   largeButton: {
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     width: '70%',
@@ -106,6 +111,7 @@ const styles = StyleSheet.create({
     color: '#eee',
   },
   normalButton: {
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.45,
@@ -118,6 +124,7 @@ const styles = StyleSheet.create({
     fontWeight: '500',
   },
   gradientButton: {
+    flexDirection: 'row',
     marginTop: '8%',
     borderRadius: 5,
     paddingVertical: '5%',
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index ca736b92..12c1fda4 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,4 +1,3 @@
-import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import {Text} from 'react-native-animatable';
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 05f5138f..2dac1777 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -50,7 +50,7 @@ export type MainStackParams = {
     moment?: MomentType;
   };
   ChoosingCategoryScreen: {
-    newCustomCategory: string;
+    newCustomCategory?: string;
   };
   TagFriendsScreen: {
     media: {
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 86e30bdc..15566555 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -431,7 +431,6 @@ const styles = StyleSheet.create({
   postButton: {
     width: SCREEN_WIDTH * 0.8,
     height: normalize(37),
-    backgroundColor: TAGG_LIGHT_BLUE,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 6,
diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx
index 9b8672ea..2f364e59 100644
--- a/src/screens/profile/CategorySelection.tsx
+++ b/src/screens/profile/CategorySelection.tsx
@@ -170,7 +170,7 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
             onPress={() => {
               navigation.push('CreateCustomCategory', {
                 existingCategories: momentCategories.concat(selectedCategories),
-                fromScreen: 'CategorySelection',
+                fromScreen: route.name,
               });
             }}>
             <PlusIcon width={30} height={30} color="white" />
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index 24db015e..cdc941db 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -1,6 +1,6 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {FC} from 'react';
+import React, {FC, useEffect} from 'react';
 import {
   Image,
   ScrollView,
@@ -11,16 +11,19 @@ import {
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
-import {SearchBackground} from '../../components';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
+import {SearchBackground, TaggSquareButton} from '../../components';
 import {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
+import {updateMomentCategories} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {
   getMomentCategoryIconInfo,
   normalize,
   SCREEN_HEIGHT,
+  SCREEN_WIDTH,
   StatusBarHeight,
 } from '../../utils';
 
@@ -39,10 +42,22 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
   const {momentCategories} = useSelector(
     (state: RootState) => state.momentCategories,
   );
+  const dispatch = useDispatch();
   const navigation = useNavigation();
   const tabBarHeight = useBottomTabBarHeight();
   const insetTop = useSafeAreaInsets().top;
 
+  useEffect(() => {
+    if (route.params.newCustomCategory) {
+      dispatch(
+        updateMomentCategories(
+          momentCategories.concat([route.params.newCustomCategory]),
+          false,
+        ),
+      );
+    }
+  }, [route.params.newCustomCategory]);
+
   const ListItem: FC<{
     title: string;
     onPress: () => void;
@@ -90,6 +105,21 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
               }
             />
           ))}
+          <TaggSquareButton
+            onPress={() =>
+              navigation.navigate('CreateCustomCategory', {
+                existingCategories: momentCategories,
+                fromScreen: route.name,
+              })
+            }
+            title={'Create a new category'}
+            buttonStyle={'large'}
+            buttonColor={'blue'}
+            labelColor={'white'}
+            style={styles.button}
+            labelStyle={styles.buttonText}
+            icon={<PlusIcon style={styles.plusIcon} />}
+          />
         </ScrollView>
       </View>
     </SearchBackground>
@@ -138,6 +168,26 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  button: {
+    width: SCREEN_WIDTH * 0.9,
+    height: normalize(67),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    alignSelf: 'center',
+    marginTop: 40,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: normalize(15),
+    lineHeight: 18,
+  },
+  plusIcon: {
+    color: 'white',
+    marginRight: normalize(25),
+    width: 30,
+    height: 30,
+  },
 });
 
 export default ChoosingCategoryScreen;