From 43f40d60d7ea4f2882cfaabeb38441b71d40a92e Mon Sep 17 00:00:00 2001
From: Tejas Gajjar <gajjartejas26@gmail.com>
Date: Tue, 17 Oct 2023 21:57:12 +0530
Subject: [PATCH] feat: separate card settings section (#66)

* feat: seperate card settings section

* feat: seperate card settings section
---
 app/locales/en.json                           |  28 ++--
 app/navigation/HomeTabNavigator.tsx           |   4 +-
 app/navigation/types.ts                       |   2 +
 .../HomeIntro/LearnCharsCard/index.tsx        |   5 +-
 app/screens/Settings/GeneralSetting/index.tsx |  37 +----
 .../Settings/SwipeCardSetting/index.tsx       | 148 ++++++++++++++++++
 .../Settings/SwipeCardSetting/styles.ts       |  26 +++
 package-lock.json                             |  14 +-
 package.json                                  |   2 +-
 9 files changed, 211 insertions(+), 55 deletions(-)
 create mode 100644 app/screens/Settings/SwipeCardSetting/index.tsx
 create mode 100644 app/screens/Settings/SwipeCardSetting/styles.ts

diff --git a/app/locales/en.json b/app/locales/en.json
index 5166037..f765c7e 100644
--- a/app/locales/en.json
+++ b/app/locales/en.json
@@ -80,6 +80,25 @@
   },
   "generalSetting": {
     "title": "General",
+    "section1": {
+      "header": "General",
+      "row1": {
+        "title": "Swipe Card",
+        "subTitle": "Change card animation & duration"
+      }
+    },
+    "section2": {
+      "header": "Other",
+      "row1": {
+        "title": "Clear progress",
+        "subTitle": "Clear all progress",
+        "dialogTitle": "Clear app progress?",
+        "dialogSubTitle": "Are you sure you want to clear app progress?"
+      }
+    }
+  },
+  "swipeCardSetting": {
+    "title": "Swipe Card",
     "section1": {
       "header": "General",
       "row1": {
@@ -95,15 +114,6 @@
           "unit": "Second(s)"
         }
       }
-    },
-    "section2": {
-      "header": "Other",
-      "row1": {
-        "title": "Clear progress",
-        "subTitle": "Clear all progress",
-        "dialogTitle": "Clear app progress?",
-        "dialogSubTitle": "Are you sure you want to clear app progress?"
-      }
     }
   },
   "cardAnimation": {
diff --git a/app/navigation/HomeTabNavigator.tsx b/app/navigation/HomeTabNavigator.tsx
index 1ca2304..c95aa6d 100644
--- a/app/navigation/HomeTabNavigator.tsx
+++ b/app/navigation/HomeTabNavigator.tsx
@@ -26,11 +26,12 @@ import LearnBySelectedChar from 'app/screens/HomeIntro/CharsIntro/LearnBySelecte
 import LearnCharStrokeOrder from 'app/screens/HomeIntro/CharsIntro/LearnCharStrokeOrder';
 import GeneralSetting from 'app/screens/Settings/GeneralSetting';
 import CardAnimation from 'app/screens/Settings/CardAnimation';
+import LearnCharAnimatedDrawing from 'app/screens/HomeIntro/CharsIntro/LearnCharAnimatedDrawing';
+import SwipeCardSetting from 'app/screens/Settings/SwipeCardSetting';
 
 //App Modules
 import { HomeTabsNavigatorParams, LoggedInTabNavigatorParams } from 'app/navigation/types';
 import { AppTheme } from 'app/models/theme';
-import LearnCharAnimatedDrawing from 'app/screens/HomeIntro/CharsIntro/LearnCharAnimatedDrawing';
 
 const Tab = createMaterialBottomTabNavigator<HomeTabsNavigatorParams>();
 
@@ -102,6 +103,7 @@ const LoggedInTabNavigator = () => {
       <LoggedInStack.Screen name="LearnCharInfo" component={LearnCharInfo} options={{ headerShown: false }} />
       <LoggedInStack.Screen name="LearnCharsCard" component={LearnCharsCard} options={{ headerShown: false }} />
       <LoggedInStack.Screen name="GeneralSetting" component={GeneralSetting} options={{ headerShown: false }} />
+      <LoggedInStack.Screen name="SwipeCardSetting" component={SwipeCardSetting} options={{ headerShown: false }} />
       <LoggedInStack.Screen name="CardAnimation" component={CardAnimation} options={{ headerShown: false }} />
       <LoggedInStack.Group screenOptions={{ presentation: 'modal' }}>
         <LoggedInStack.Screen
diff --git a/app/navigation/types.ts b/app/navigation/types.ts
index fcc1d75..28e8053 100644
--- a/app/navigation/types.ts
+++ b/app/navigation/types.ts
@@ -12,6 +12,7 @@ export interface GujaratiScriptIntroParams {
   color: string;
 }
 export interface GeneralSettingParams {}
+export interface SwipeCardSettingParams {}
 export interface MoreAppsParams {}
 export interface SettingsParams {}
 export interface LicenseTypes {}
@@ -93,6 +94,7 @@ export type LoggedInTabNavigatorParams = {
   LearnCharStrokeOrder: LearnCharStrokeOrderParams;
   LearnCharAnimatedDrawing: LearnCharAnimatedDrawingParams;
   CardAnimation: CardAnimationParams;
+  SwipeCardSetting: SwipeCardSettingParams;
 };
 
 export type HomeTabsNavigatorParams = {
diff --git a/app/screens/HomeIntro/LearnCharsCard/index.tsx b/app/screens/HomeIntro/LearnCharsCard/index.tsx
index b77c88d..949131e 100644
--- a/app/screens/HomeIntro/LearnCharsCard/index.tsx
+++ b/app/screens/HomeIntro/LearnCharsCard/index.tsx
@@ -413,7 +413,7 @@ const LearnCharsCard = ({ navigation, route }: Props) => {
   }, [color, isRandomMode, learnMode, navigation, onlyInclude, type]);
 
   const onPressSetting = useCallback(() => {
-    navigation.push('GeneralSetting', {});
+    navigation.push('SwipeCardSetting', {});
   }, [navigation]);
 
   const onCloseRandomDialog = useCallback(() => {
@@ -438,6 +438,7 @@ const LearnCharsCard = ({ navigation, route }: Props) => {
         <Components.AppBaseView edges={['bottom', 'left', 'right']} style={styles.safeArea}>
           {!practiceMode && (
             <View
+              pointerEvents={autoSwiping ? 'none' : 'auto'}
               onLayout={e => {
                 const { width: w, height: h } = e.nativeEvent.layout;
                 setWidth(w > h ? h : w);
@@ -450,7 +451,7 @@ const LearnCharsCard = ({ navigation, route }: Props) => {
                     onSwipe={onSwipe}
                     swipeRequirementType={'position'}
                     swipeThreshold={100}
-                    preventSwipe={autoSwiping ? ['left', 'right', 'up', 'bottom'] : []}>
+                    preventSwipe={[]}>
                     <TouchableRipple rippleColor={`${colors.primary}20`} onPress={() => onPressCard(item, index)}>
                       <Animated.View
                         entering={FadeInDown.duration(index % GROUP_COUNT === 1 ? 0 : 1000).easing(
diff --git a/app/screens/Settings/GeneralSetting/index.tsx b/app/screens/Settings/GeneralSetting/index.tsx
index 3681610..9121a43 100644
--- a/app/screens/Settings/GeneralSetting/index.tsx
+++ b/app/screens/Settings/GeneralSetting/index.tsx
@@ -21,7 +21,6 @@ import { LoggedInTabNavigatorParams } from 'app/navigation/types';
 import useOtherStatics from 'app/realm/crud/otherStatics';
 import useLargeScreenMode from 'app/hooks/useLargeScreenMode';
 import AppHeader from 'app/components/AppHeader';
-import useCardAnimationConfigStore from 'app/store/cardAnimationConfig';
 
 //Params
 type Props = NativeStackScreenProps<LoggedInTabNavigatorParams, 'GeneralSetting'>;
@@ -36,12 +35,9 @@ const GeneralSetting = ({ navigation }: Props) => {
   const { clearAllData: clearAllChartData } = useChartStatics();
   const { clearAllData: clearAllOtherData } = useOtherStatics();
   const largeScreenMode = useLargeScreenMode();
-  const cardAutoSwipeDurationSeconds = useCardAnimationConfigStore(store => store.cardAutoSwipeDurationSeconds);
-  const setCardAutoSwipeDurationSeconds = useCardAnimationConfigStore(store => store.setCardAutoSwipeDurationSeconds);
 
   //States
   const [clearProgressAlertVisible, setClearProgressAlertVisible] = useState(false);
-  const [autoSwipeCardModeAlertVisible, setAutoSwipeCardModeAlertVisible] = useState(false);
 
   const [apps] = useState<ISettingSection[]>([
     {
@@ -50,20 +46,12 @@ const GeneralSetting = ({ navigation }: Props) => {
       items: [
         {
           id: 0,
-          iconName: 'animation-play',
+          iconName: 'cards',
           iconType: 'material-community',
           title: t('generalSetting.section1.row1.title'),
           description: t('generalSetting.section1.row1.subTitle'),
           route: 'CardAnimation',
         },
-        {
-          id: 1,
-          iconName: 'gesture-swipe',
-          iconType: 'material-community',
-          title: t('generalSetting.section1.row2.title'),
-          description: t('generalSetting.section1.row2.subTitle'),
-          route: 'CardAnimation',
-        },
       ],
     },
     {
@@ -89,10 +77,7 @@ const GeneralSetting = ({ navigation }: Props) => {
   const onPressAppearanceOption = (item: ISettingSection, index: number, subItem: ISettingItem, subIndex: number) => {
     switch (true) {
       case index === 0 && subIndex === 0:
-        navigation.navigate('CardAnimation', {});
-        break;
-      case index === 0 && subIndex === 1:
-        setAutoSwipeCardModeAlertVisible(true);
+        navigation.navigate('SwipeCardSetting', {});
         break;
       case index === 1 && subIndex === 0:
         setClearProgressAlertVisible(true);
@@ -108,11 +93,6 @@ const GeneralSetting = ({ navigation }: Props) => {
     clearAllOtherData();
   };
 
-  const onPressConfirmCardAutoSwipeDuration = (value: number) => {
-    setCardAutoSwipeDurationSeconds(value);
-    setAutoSwipeCardModeAlertVisible(false);
-  };
-
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
       <AppHeader
@@ -168,19 +148,6 @@ const GeneralSetting = ({ navigation }: Props) => {
         onPressConfirm={onClearAllData}
         onPressCancel={() => setClearProgressAlertVisible(false)}
       />
-      <Components.AppSliderDialog
-        title={t('generalSetting.section1.row2.cardAutoSwipeDurationAlert.title')}
-        description={t('generalSetting.section1.row2.cardAutoSwipeDurationAlert.desc')}
-        visible={autoSwipeCardModeAlertVisible}
-        cancelText={t('general.cancel')}
-        confirmText={t('general.ok')}
-        onPressConfirm={onPressConfirmCardAutoSwipeDuration}
-        onPressCancel={() => setAutoSwipeCardModeAlertVisible(false)}
-        range={[1, 10]}
-        step={1}
-        unit={t('generalSetting.section1.row2.cardAutoSwipeDurationAlert.unit')}
-        value={cardAutoSwipeDurationSeconds}
-      />
     </View>
   );
 };
diff --git a/app/screens/Settings/SwipeCardSetting/index.tsx b/app/screens/Settings/SwipeCardSetting/index.tsx
new file mode 100644
index 0000000..9f9ff7c
--- /dev/null
+++ b/app/screens/Settings/SwipeCardSetting/index.tsx
@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { ScrollView, View } from 'react-native';
+
+//ThirdParty
+import { useTranslation } from 'react-i18next';
+import { Divider, List, useTheme } from 'react-native-paper';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import Icon from 'react-native-easy-icon';
+
+//App modules
+import styles from './styles';
+
+//ThirdParty
+
+//App Modules
+import { ISettingItem, ISettingSection } from 'app/models/viewModels/settingItem';
+import Components from 'app/components';
+import { LoggedInTabNavigatorParams } from 'app/navigation/types';
+import useLargeScreenMode from 'app/hooks/useLargeScreenMode';
+import AppHeader from 'app/components/AppHeader';
+import useCardAnimationConfigStore from 'app/store/cardAnimationConfig';
+
+//Params
+type Props = NativeStackScreenProps<LoggedInTabNavigatorParams, 'SwipeCardSetting'>;
+
+const SwipeCardSetting = ({ navigation }: Props) => {
+  //Refs
+
+  //Constants
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const largeScreenMode = useLargeScreenMode();
+  const cardAutoSwipeDurationSeconds = useCardAnimationConfigStore(store => store.cardAutoSwipeDurationSeconds);
+  const setCardAutoSwipeDurationSeconds = useCardAnimationConfigStore(store => store.setCardAutoSwipeDurationSeconds);
+
+  //States
+  const [autoSwipeCardModeAlertVisible, setAutoSwipeCardModeAlertVisible] = useState(false);
+
+  const [apps] = useState<ISettingSection[]>([
+    {
+      id: 0,
+      title: t('swipeCardSetting.section1.header'),
+      items: [
+        {
+          id: 0,
+          iconName: 'animation-play',
+          iconType: 'material-community',
+          title: t('swipeCardSetting.section1.row1.title'),
+          description: t('swipeCardSetting.section1.row1.subTitle'),
+          route: 'CardAnimation',
+        },
+        {
+          id: 1,
+          iconName: 'gesture-swipe',
+          iconType: 'material-community',
+          title: t('swipeCardSetting.section1.row2.title'),
+          description: t('swipeCardSetting.section1.row2.subTitle'),
+          route: 'CardAnimation',
+        },
+      ],
+    },
+  ]);
+
+  const onGoBack = () => {
+    navigation.pop();
+  };
+
+  const onPressAppearanceOption = (item: ISettingSection, index: number, subItem: ISettingItem, subIndex: number) => {
+    switch (true) {
+      case index === 0 && subIndex === 0:
+        navigation.navigate('CardAnimation', {});
+        break;
+      case index === 0 && subIndex === 1:
+        setAutoSwipeCardModeAlertVisible(true);
+        break;
+      default:
+    }
+  };
+
+  const onPressConfirmCardAutoSwipeDuration = (value: number) => {
+    setCardAutoSwipeDurationSeconds(value);
+    setAutoSwipeCardModeAlertVisible(false);
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <AppHeader
+        showBackButton={true}
+        onPressBackButton={onGoBack}
+        title={t('swipeCardSetting.title')}
+        style={{ backgroundColor: colors.background }}
+      />
+
+      <View style={styles.safeArea}>
+        <ScrollView>
+          <View style={[styles.listContainer, largeScreenMode && styles.cardTablet]}>
+            {apps.map((item, index) => {
+              return (
+                <View key={item.id.toString()}>
+                  <List.Subheader style={[styles.listSubHeader, { color: colors.primary }]}>
+                    {item.title}
+                  </List.Subheader>
+                  {item.items.map((subItem, subIndex) => {
+                    return (
+                      <List.Item
+                        key={subItem.id.toString()}
+                        titleStyle={{ color: colors.onSurface }}
+                        descriptionStyle={{ color: `${colors.onSurface}88` }}
+                        onPress={() => onPressAppearanceOption(item, index, subItem, subIndex)}
+                        title={subItem.title}
+                        description={subItem.description}
+                        left={() => (
+                          <Icon
+                            style={styles.listItemIcon}
+                            type={subItem.iconType}
+                            name={subItem.iconName}
+                            color={`${colors.onSurface}88`}
+                            size={24}
+                          />
+                        )}
+                      />
+                    );
+                  })}
+                  <Divider />
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
+      </View>
+      <Components.AppSliderDialog
+        title={t('swipeCardSetting.section1.row2.cardAutoSwipeDurationAlert.title')}
+        description={t('swipeCardSetting.section1.row2.cardAutoSwipeDurationAlert.desc')}
+        visible={autoSwipeCardModeAlertVisible}
+        cancelText={t('general.cancel')}
+        confirmText={t('general.ok')}
+        onPressConfirm={onPressConfirmCardAutoSwipeDuration}
+        onPressCancel={() => setAutoSwipeCardModeAlertVisible(false)}
+        range={[1, 10]}
+        step={1}
+        unit={t('swipeCardSetting.section1.row2.cardAutoSwipeDurationAlert.unit')}
+        value={cardAutoSwipeDurationSeconds}
+      />
+    </View>
+  );
+};
+
+export default SwipeCardSetting;
diff --git a/app/screens/Settings/SwipeCardSetting/styles.ts b/app/screens/Settings/SwipeCardSetting/styles.ts
new file mode 100644
index 0000000..d1b65be
--- /dev/null
+++ b/app/screens/Settings/SwipeCardSetting/styles.ts
@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  headerStyle: {},
+  safeArea: {
+    flex: 1,
+  },
+  scrollView: {},
+  subView: {
+    marginHorizontal: 32,
+  },
+  listSubHeader: { marginLeft: 48 },
+  listItemIcon: { alignSelf: 'center', marginHorizontal: 12 },
+  cardTablet: {
+    width: '70%',
+    alignSelf: 'center',
+  },
+  listContainer: {
+    paddingBottom: 8,
+  },
+});
+
+export default styles;
diff --git a/package-lock.json b/package-lock.json
index 4f923c2..99bf06f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,7 +46,7 @@
         "react-native-toast-message": "^2.1.6",
         "react-native-vector-icons": "^10.0.0",
         "react-singleton-hook": "^4.0.1",
-        "react-tinder-card": "^1.6.2",
+        "react-tinder-card": "^1.6.3",
         "realm": "^11.10.1",
         "svg-path-properties": "^1.2.0",
         "zustand": "^4.4.0"
@@ -13561,9 +13561,9 @@
       }
     },
     "node_modules/react-tinder-card": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.6.2.tgz",
-      "integrity": "sha512-jtdgINFQ4bNA7YoqnoS4Z603mYCtrRHVc+K4R6JHuUzjsRsgO7hEooCUXz++HF5WE+fkOHjkuc22w+rxUlkMJw==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.6.3.tgz",
+      "integrity": "sha512-LwZR7DiECvo/BVV38G5ZGuKXNVMycC5DRbDfIMhOZXLhnE6SxnpWly4PvNHphoO6MqC9H2W56kuyHy53P22OSQ==",
       "dependencies": {
         "p-sleep": "^1.1.0"
       },
@@ -25475,9 +25475,9 @@
       }
     },
     "react-tinder-card": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.6.2.tgz",
-      "integrity": "sha512-jtdgINFQ4bNA7YoqnoS4Z603mYCtrRHVc+K4R6JHuUzjsRsgO7hEooCUXz++HF5WE+fkOHjkuc22w+rxUlkMJw==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.6.3.tgz",
+      "integrity": "sha512-LwZR7DiECvo/BVV38G5ZGuKXNVMycC5DRbDfIMhOZXLhnE6SxnpWly4PvNHphoO6MqC9H2W56kuyHy53P22OSQ==",
       "requires": {
         "p-sleep": "^1.1.0"
       }
diff --git a/package.json b/package.json
index 3050aec..ac0a3d0 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "react-native-toast-message": "^2.1.6",
     "react-native-vector-icons": "^10.0.0",
     "react-singleton-hook": "^4.0.1",
-    "react-tinder-card": "^1.6.2",
+    "react-tinder-card": "^1.6.3",
     "realm": "^11.10.1",
     "svg-path-properties": "^1.2.0",
     "zustand": "^4.4.0"