Merge pull request #546 from shravyaramesh/tma983-new-category-selection

[TMA-983] New Category Selection

4 files changed, 69 insertions, 25 deletions

diff --git a/src/assets/icons/radio-check-green.svg b/src/assets/icons/radio-check-green.svg
new file mode 100644
index 00000000..39516999
--- /dev/null
+++ b/src/assets/icons/radio-check-green.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 720"><defs><style>.cls-1{fill:#70e76e;}</style></defs><path class="cls-1" d="M360,0C161.18,0,0,161.18,0,360S161.18,720,360,720,720,558.82,720,360,558.82,0,360,0ZM573.65,248.65a30.73,30.73,0,0,1-6.74,10.07L320.56,505.21a31.61,31.61,0,0,1-44.34,0L153.1,382A31,31,0,1,1,197,338L298.4,439.57,523,214.8a31,31,0,0,1,50.61,33.85Z"/></svg>
\ No newline at end of file
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..e025dce6 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, 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 FrontArrow from '../../assets/icons/front-arrow.svg';
+import BackIcon from '../../assets/icons/back-arrow.svg';
 import PlusIcon from '../../assets/icons/plus-icon.svg';
+import RadioCheck from '../../assets/icons/radio-check-green.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,19 @@ 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 ? (
+            <RadioCheck width={20} height={20} />
+          ) : (
+            <View
+              style={{
+                borderRadius: 20,
+                borderWidth: 1,
+                borderColor: 'white',
+                height: normalize(19),
+                width: normalize(19),
+              }}
+            />
+          )}
         </View>
       </TouchableOpacity>
     );
@@ -97,11 +137,7 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
             <ListItem
               key={title}
               title={title}
-              onPress={() =>
-                navigation.navigate('CaptionScreen', {
-                  selectedCategory: title,
-                })
-              }
+              onPress={() => setSelectedCategory(title)}
             />
           ))}
           <TaggSquareButton
@@ -126,6 +162,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,
   },
@@ -162,7 +205,8 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(0.3),
     fontWeight: '600',
     alignSelf: 'center',
-    marginLeft: normalize(25),
+    marginHorizontal: SCREEN_WIDTH * 0.03,
+    width: SCREEN_WIDTH * 0.7,
   },
   row: {
     flexDirection: 'row',