@eohjsc/react-native-smart-city 0.3.91 → 0.3.92

package/src/screens/{AddNewAction → Automate/AddNewAction}/ChooseConfig.js

@@ -2,119 +2,87 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Image, TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import Text from '../../commons/Text';
-import { axiosGet } from '../../utils/Apis/axios';
-import { API, Colors, Images } from '../../configs';
-import Routes from '../../utils/Route';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Text from '../../../commons/Text';
+import { axiosGet } from '../../../utils/Apis/axios';
+import { API, Colors, Images } from '../../../configs';
+import Routes from '../../../utils/Route';
 import styles from './Styles/SelectActionStyles';
-import { TitleCheckBox } from '../Sharing/Components';
+import { TitleCheckBox } from '../../Sharing/Components';
 import { LoadingSelectAction } from './Components';
-import { ToastBottomHelper } from '../../utils/Utils';
+import { ToastBottomHelper } from '../../../utils/Utils';
 import {
   generateAutomationConditionText,
   generateAutomationDataConditionText,
-  getAutomationData,
 } from '../ScriptDetail/utils';
-import { useSCContextSelector } from '../../context';
-import { AUTOMATE_TYPE } from '../../configs/Constants';
+import { useSCContextSelector } from '../../../context';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
 import NewActionWrapper from './NewActionWrapper';
 
 const ChooseConfig = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const {
-    unit,
     device,
-    automateId,
     automate = {},
-    scriptName,
-    type,
-    isAutomateTab,
-    isMultiUnits,
-    newSensorData,
+    newCondition,
     closeScreen,
   } = route?.params || {};
 
-  const [sensorData, setSensorData] = useState([]);
+  const [configs, setConfigs] = useState([]);
   const [checkedItem, setCheckedItem] = useState({ id: automate?.config_id });
   const [isLoading, setIsLoading] = useState(false);
   const valueEvaluations = useSCContextSelector((state) => {
     return state.valueEvaluations;
   });
-
+  const [conditions, setConditions] = useState({});
   const fetchData = useCallback(async () => {
     setIsLoading(true);
-    const configs = { params: {} };
-    if (type === AUTOMATE_TYPE.EVENT) {
-      configs.params.type = 'event';
+    const params = {};
+    if (automate?.type === AUTOMATE_TYPE.EVENT) {
+      params.type = 'event';
     }
 
     const { success, data: automateData } = await axiosGet(
       API.AUTOMATE.DISPLAY_CONFIGS(device.id),
-      configs
+      { params }
     );
+
     if (success) {
-      setSensorData(automateData);
+      setConfigs(automateData);
     }
     setIsLoading(false);
-  }, [device.id, type]);
+  }, [device.id, automate?.type]);
 
   const onSave = useCallback(() => {
-    let itemTemp = sensorData?.find((i) => i.id === checkedItem?.id);
-
-    const isDefault = automate?.config_id === itemTemp?.id;
-
-    // todo Bang refactor remove this using same data format for get/push
-    if ([null, undefined].includes(itemTemp?.value) && isDefault) {
-      itemTemp = getAutomationData(type, automate);
-    }
-
-    if ([null, undefined].includes(itemTemp?.value)) {
+    let condition = conditions[checkedItem?.id];
+    const isDefault =
+      automate?.config_id && automate?.config_id === checkedItem?.id;
+    if (!condition && !isDefault) {
       ToastBottomHelper.error(t('please_choose_condition_before_continue'));
       return;
     }
-    navigate(Routes.AddNewOneTap, {
-      automateData: itemTemp,
-      type,
-      unit,
-      isAutomateTab,
-      isMultiUnits,
-      automateId,
+
+    navigate(Routes.ValueChangeName, {
       automate: {
         ...automate,
-        ...itemTemp,
+        ...condition,
       },
-      scriptName,
+      closeScreen,
     });
-  }, [
-    sensorData,
-    navigate,
-    type,
-    unit,
-    isAutomateTab,
-    isMultiUnits,
-    automateId,
-    automate,
-    scriptName,
-    checkedItem?.id,
-    t,
-  ]);
+  }, [conditions, checkedItem?.id, navigate, automate, closeScreen, t]);
 
   const onChecked = useCallback(
     (_, isChecked, id) => {
-      setCheckedItem(isChecked ? sensorData.find((i) => i?.id === id) : {});
+      setCheckedItem(isChecked ? configs.find((i) => i?.id === id) : {});
     },
-    [sensorData]
+    [configs]
   );
 
   const onPressItem = (item) => () => {
     navigate(Routes.SetupConfigCondition, {
       item,
-      sensorData,
-      isAutomateTab,
-      type,
-      automate,
+      defaultCondition: conditions[item.id],
       closeScreen,
     });
   };
@@ -122,8 +90,9 @@ const ChooseConfig = ({ route }) => {
   const renderCondition = useCallback(
     (item) => {
       return generateAutomationDataConditionText(
-        type,
-        item,
+        automate?.type,
+        item.name,
+        conditions[item.id],
         item.value_evaluation || {
           // backward compatible
           template: item.evaluate_template,
@@ -132,7 +101,7 @@ const ChooseConfig = ({ route }) => {
         t
       );
     },
-    [t, type]
+    [automate?.type, conditions, t]
   );
 
   useEffect(() => {
@@ -140,8 +109,12 @@ const ChooseConfig = ({ route }) => {
   }, [fetchData]);
 
   useEffect(() => {
-    newSensorData && setSensorData(newSensorData);
-  }, [newSensorData]);
+    newCondition &&
+      setConditions((prev) => ({
+        ...prev,
+        [newCondition.config]: newCondition,
+      }));
+  }, [newCondition]);
 
   return (
     <NewActionWrapper
@@ -153,8 +126,8 @@ const ChooseConfig = ({ route }) => {
       {isLoading ? (
         <LoadingSelectAction style={styles.container} />
       ) : (
-        sensorData.map((item) => {
-          const hasValue = ![undefined, null].includes(item?.value);
+        configs.map((item) => {
+          const hasCondition = conditions[item.id];
           const isChecked = checkedItem?.id === item?.id;
           const isDefault = automate?.config_id === item?.id;
           return (
@@ -181,18 +154,17 @@ const ChooseConfig = ({ route }) => {
                   semibold={isChecked}
                   style={styles.description}
                 >
-                  {hasValue
+                  {hasCondition
                     ? renderCondition(item)
                     : isDefault
                     ? generateAutomationConditionText(
-                        type,
                         automate,
                         valueEvaluations[automate?.config_id],
                         t
                       )
                     : t('no_condition')}
                 </Text>
-                {hasValue && (
+                {hasCondition && (
                   <Image source={Images.arrowBack} style={styles.arrowRight} />
                 )}
               </TouchableOpacity>

package/src/screens/{AddNewAction → Automate/AddNewAction}/Components/LoadingSelectAction.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import ContentLoader, { Rect } from 'react-content-loader/native';
-import { Constants } from '../../../configs';
+import { Constants } from '../../../../configs';
 
 const LoadingSelectAction = ({ style }) => (
   <View style={style}>

package/src/screens/{AddNewAction → Automate/AddNewAction}/Components/SelectDevices.js

@@ -1,10 +1,10 @@
 import { View } from 'react-native';
 import styles from '../Styles/SelectSensorDevicesStyles';
-import Text from '../../../commons/Text';
-import NavBar from '../../../commons/NavBar';
+import Text from '../../../../commons/Text';
+import NavBar from '../../../../commons/NavBar';
 import Device from '../Device';
 import React, { useCallback, useState } from 'react';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import NewActionWrapper from '../NewActionWrapper';
 
 const SelectDevices = ({

package/src/screens/{AddNewAction → Automate/AddNewAction}/Device/DeviceStyles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Colors, Constants } from '../../../configs';
+import { Colors, Constants } from '../../../../configs';
 
 const marginItem = 12;
 const marginHorizontal = 16;
@@ -40,4 +40,8 @@ export default StyleSheet.create({
     height: 40,
     resizeMode: 'contain',
   },
+  antIconStyle: {
+    width: 40,
+    height: 40,
+  },
 });

package/src/screens/{AddNewAction → Automate/AddNewAction}/Device/__test__/index.test.js

@@ -2,9 +2,9 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TouchableWithoutFeedback } from 'react-native';
 
-import Device from '..';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
+import Device from '../index';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
 
 const wrapComponent = (svgMain, sensor, title, isSelectDevice, onPress) => (
   <SCProvider initState={mockSCStore({})}>

package/src/screens/{AddNewAction → Automate/AddNewAction}/Device/index.js

@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
-import { Colors } from '../../../configs';
-import Text from '../../../commons/Text';
-import IconComponent from '../../../commons/IconComponent';
-import { AccessibilityLabel } from '../../../configs/Constants';
+import { Colors } from '../../../../configs';
+import Text from '../../../../commons/Text';
+import IconComponent from '../../../../commons/IconComponent';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import styles from './DeviceStyles';
 
 const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
@@ -23,6 +23,7 @@ const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
           <IconComponent
             icon={sensor?.icon_kit || svgMain}
             style={styles.iconSensor}
+            antIconStyle={styles.antIconStyle}
           />
         </View>
         <Text numberOfLines={1} semibold type="Body" color={Colors.Gray9}>

package/src/screens/{AddNewAction → Automate/AddNewAction}/NewActionWrapper.js

@@ -1,17 +1,15 @@
 import React, { useCallback, useMemo } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { KeyboardAvoidingView, Platform, TouchableOpacity } from 'react-native';
 
 import styles from './Styles/SelectActionStyles';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
 import { Icon } from '@ant-design/react-native';
-import { Colors } from '../../configs';
+import { Colors } from '../../../configs';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import BottomButtonView from '../../commons/BottomButtonView';
-import { AccessibilityLabel } from '../../configs/Constants';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
-  const t = useTranslations();
   const { navigate } = useNavigation();
   const { params = {} } = useRoute();
   const { closeScreen } = params;
@@ -34,9 +32,12 @@ const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
   );
 
   return (
-    <View style={styles.wrap}>
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.wrap}
+    >
       <WrapHeaderScrollable
-        title={t('set_up {name}', { name })}
+        title={name}
         headerAniStyle={styles.headerAniStyle}
         rightComponent={rightComponent}
       >
@@ -48,7 +49,7 @@ const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
         onPressMain={onNext}
         typeMain={canNext ? 'primary' : 'disabled'}
       />
-    </View>
+    </KeyboardAvoidingView>
   );
 };
 

package/src/screens/{AddNewAction → Automate/AddNewAction}/SelectControlDevices.js

@@ -1,25 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
-import { fetchWithCache } from '../../utils/Apis/axios';
-import { API } from '../../configs';
-import Routes from '../../utils/Route';
+import { fetchWithCache } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import Routes from '../../../utils/Route';
 import SelectDevices from './Components/SelectDevices';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 const SelectControlDevices = ({ route }) => {
   const t = useTranslations();
-  const {
-    unit,
-    automateId,
-    automate = {},
-    type,
-    scriptName,
-    isAutomateTab,
-    isCreateNewAction,
-    isMultiUnits,
-    oldType,
-    closeScreen,
-  } = route?.params || {};
+  const { unitId, closeScreen, automateId } = route?.params || {};
 
   const [stations, setStations] = useState([]);
   const [listStation, setListStation] = useState([]);
@@ -29,7 +18,7 @@ const SelectControlDevices = ({ route }) => {
   const [loading, setLoading] = useState(true);
 
   const fetchDetails = useCallback(async () => {
-    await fetchWithCache(API.UNIT.DEVICE_CONTROL(unit.id), {}, (response) => {
+    await fetchWithCache(API.UNIT.DEVICE_CONTROL(unitId), {}, (response) => {
       const { success, data } = response;
       if (success) {
         const newData = data.filter((item) => item.sensors.length > 0);
@@ -44,48 +33,22 @@ const SelectControlDevices = ({ route }) => {
       }
     });
     setLoading(false);
-  }, [unit]);
+  }, [unitId]);
 
   useEffect(() => {
     fetchDetails();
   }, [fetchDetails]);
 
   const onPressContinue = useCallback(
-    (selectedDevice, indexStation) => {
+    (selectedDevice) => {
       navigate(Routes.ChooseAction, {
-        unit,
+        unitId,
+        automateId,
         device: selectedDevice,
-        automateId: automateId,
-        automate: {
-          ...automate,
-          sensor_id: selectedDevice?.id
-            ? selectedDevice.id
-            : automate.sensor_id,
-        },
-        stationName: stations[indexStation]?.name,
-        type,
-        scriptName,
-        isAutomateTab,
-        isCreateNewAction,
-        isMultiUnits,
-        oldType,
         closeScreen,
       });
     },
-    [
-      navigate,
-      unit,
-      automateId,
-      automate,
-      stations,
-      type,
-      scriptName,
-      isAutomateTab,
-      isCreateNewAction,
-      isMultiUnits,
-      oldType,
-      closeScreen,
-    ]
+    [navigate, unitId, automateId, closeScreen]
   );
 
   if (loading) {
@@ -95,7 +58,6 @@ const SelectControlDevices = ({ route }) => {
   return (
     <SelectDevices
       onPressContinue={onPressContinue}
-      automateId={automateId}
       listStation={listStation}
       listMenuItem={listMenuItem}
       stations={stations}

package/src/screens/{AddNewAction → Automate/AddNewAction}/SelectMonitorDevices.js

@@ -1,27 +1,16 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
 
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { fetchWithCache } from '../../utils/Apis/axios';
-import { API } from '../../configs';
-import Routes from '../../utils/Route';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { fetchWithCache } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import Routes from '../../../utils/Route';
 import SelectDevices from './Components/SelectDevices';
-import { AUTOMATE_TYPE } from '../../configs/Constants';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
 
 const SelectMonitorDevices = ({ route }) => {
   const t = useTranslations();
-  const {
-    unit,
-    automateId,
-    automate = {},
-    type,
-    scriptName,
-    isAutomateTab,
-    isCreateNewAction,
-    isMultiUnits,
-    oldType,
-    closeScreen,
-  } = route?.params || {};
+  const { automate = {}, isCreateNewAction, closeScreen } = route?.params || {};
 
   const [stations, setStations] = useState([]);
   const [listStation, setListStation] = useState([]);
@@ -33,11 +22,11 @@ const SelectMonitorDevices = ({ route }) => {
 
   const fetchDetails = useCallback(async () => {
     const configs = { params: {} };
-    if (type === AUTOMATE_TYPE.EVENT) {
+    if (automate?.type === AUTOMATE_TYPE.EVENT) {
       configs.params.type = 'event';
     }
     await fetchWithCache(
-      API.UNIT.DEVICE_SENSOR(unit.id),
+      API.UNIT.DEVICE_SENSOR(automate?.unit),
       configs,
       (response) => {
         const { success, data } = response;
@@ -56,7 +45,7 @@ const SelectMonitorDevices = ({ route }) => {
       }
     );
     setLoading(false);
-  }, [type, unit.id]);
+  }, [automate?.type, automate?.unit]);
 
   useEffect(() => {
     if (!automate?.sensor_id) {
@@ -86,9 +75,7 @@ const SelectMonitorDevices = ({ route }) => {
   const onPressContinue = useCallback(
     (selectedDevice, indexStation) => {
       navigate(Routes.ChooseConfig, {
-        unit,
         device: selectedDevice,
-        automateId: automateId,
         automate: {
           ...automate,
           sensor_id: selectedDevice?.id
@@ -96,29 +83,11 @@ const SelectMonitorDevices = ({ route }) => {
             : automate.sensor_id,
         },
         stationName: stations[indexStation]?.name,
-        type,
-        scriptName,
-        isAutomateTab,
         isCreateNewAction,
-        isMultiUnits,
-        oldType,
         closeScreen,
       });
     },
-    [
-      navigate,
-      unit,
-      automateId,
-      automate,
-      stations,
-      type,
-      scriptName,
-      isAutomateTab,
-      isCreateNewAction,
-      isMultiUnits,
-      oldType,
-      closeScreen,
-    ]
+    [navigate, automate, stations, isCreateNewAction, closeScreen]
   );
 
   if (loading) {
@@ -128,7 +97,6 @@ const SelectMonitorDevices = ({ route }) => {
   return (
     <SelectDevices
       onPressContinue={onPressContinue}
-      automateId={automateId}
       listStation={listStation}
       listMenuItem={listMenuItem}
       stations={stations}