Revamp category selection

3 files changed, 61 insertions, 23 deletions

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 64060554..47e16aed 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -188,9 +188,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         <MainStack.Screen
           name="ChoosingCategoryScreen"
           component={ChoosingCategoryScreen}
-          options={{
-            ...headerBarOptions('white', 'Categories'),
-          }}
         />
         <MainStack.Screen
           name="SocialMediaTaggs"
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index d329c589..fc4db950 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -292,7 +292,9 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                   text={'Category'}
                   imageUri={require('../../assets/images/images.png')}
                   onPress={() =>
-                    navigation.navigate('ChoosingCategoryScreen', {})
+                    navigation.navigate('ChoosingCategoryScreen', {
+                      newCustomCategory: momentCategory,
+                    })
                   }
                 />
               ),
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index 8a7e3007..5e29d4de 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, useEffect} from 'react';
+import React, {FC, Fragment, useEffect, useState} from 'react';
 import {
   Image,
   ScrollView,
@@ -11,11 +11,12 @@ import {
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {useDispatch, useSelector} from 'react-redux';
+import BackIcon from '../../assets/icons/back-arrow.svg';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
 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 {headerBarOptions, MainStackParams} from '../../routes';
 import {updateMomentCategories} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {
@@ -42,20 +43,51 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
   const {momentCategories} = useSelector(
     (state: RootState) => state.momentCategories,
   );
+  const newCustomCategory = route.params.newCustomCategory;
+  const [selectedCategory, setSelectedCategory] = useState<string | undefined>(
+    newCustomCategory,
+  );
   const dispatch = useDispatch();
   const navigation = useNavigation();
   const tabBarHeight = useBottomTabBarHeight();
 
   useEffect(() => {
-    if (route.params.newCustomCategory) {
-      dispatch(
-        updateMomentCategories(
-          momentCategories.concat([route.params.newCustomCategory]),
-          false,
-        ),
+    navigation.setOptions({
+      ...headerBarOptions('white', 'Choose Category'),
+      headerLeft: () => (
+        <TouchableOpacity
+          onPress={() => {
+            navigation.navigate('CaptionScreen', {
+              selectedCategory: selectedCategory,
+            });
+          }}>
+          <BackIcon
+            height={normalize(18)}
+            width={normalize(18)}
+            color={'white'}
+            style={styles.backButton}
+          />
+        </TouchableOpacity>
+      ),
+    });
+  }, [navigation, selectedCategory]);
+
+  useEffect(() => {
+    if (newCustomCategory) {
+      const isPresent = momentCategories.findIndex(
+        (item) => newCustomCategory === item,
       );
+      if (isPresent === -1) {
+        dispatch(
+          updateMomentCategories(
+            momentCategories.concat([newCustomCategory]),
+            false,
+          ),
+        );
+      }
+      setSelectedCategory(newCustomCategory);
     }
-  }, [route.params.newCustomCategory]);
+  }, [route.params]);
 
   const ListItem: FC<{
     title: string;
@@ -77,11 +109,15 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
           <Text style={styles.itemTitle}>{title}</Text>
         </View>
         <View style={styles.row}>
-          <FrontArrow
-            width={normalize(13)}
-            height={normalize(13)}
-            color={'white'}
-          />
+          {selectedCategory === title ? (
+            <FrontArrow
+              width={normalize(13)}
+              height={normalize(13)}
+              color={'white'}
+            />
+          ) : (
+            <Fragment />
+          )}
         </View>
       </TouchableOpacity>
     );
@@ -97,11 +133,7 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
             <ListItem
               key={title}
               title={title}
-              onPress={() =>
-                navigation.navigate('CaptionScreen', {
-                  selectedCategory: title,
-                })
-              }
+              onPress={() => setSelectedCategory(title)}
             />
           ))}
           <TaggSquareButton
@@ -126,6 +158,13 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
 };
 
 const styles = StyleSheet.create({
+  backButton: {
+    marginLeft: 30,
+    shadowColor: 'black',
+    shadowRadius: 3,
+    shadowOpacity: 0.7,
+    shadowOffset: {width: 0, height: 0},
+  },
   container: {
     marginTop: StatusBarHeight,
   },