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

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

@@ -2,16 +2,14 @@ import React, { useCallback, useMemo } from 'react';
 import { TouchableOpacity, View } 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;
@@ -36,7 +34,7 @@ const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
-        title={t('set_up {name}', { name })}
+        title={name}
         headerAniStyle={styles.headerAniStyle}
         rightComponent={rightComponent}
       >

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}

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

@@ -3,35 +3,26 @@ import { Image, TouchableOpacity, View } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
 
 import styles from './Styles/SetupSensorStyles';
-import { Colors, Images } from '../../configs';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { ModalCustom } from '../../commons/Modal';
-import Text from '../../commons/Text';
-import { HorizontalPicker } from '../../commons';
-import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
-import Routes from '../../utils/Route';
-import { getAutomationData } from '../ScriptDetail/utils';
+import { Colors, Images } from '../../../configs';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { ModalCustom } from '../../../commons/Modal';
+import Text from '../../../commons/Text';
+import { setStatusBarPreview } from '../../../hooks/Common/useStatusBar';
+import Routes from '../../../utils/Route';
 import NewActionWrapper from './NewActionWrapper';
+import _TextInput from '../../../commons/Form/TextInput';
+import { ToastBottomHelper } from '../../../utils/Utils';
 
 const SetupConfigCondition = () => {
   const t = useTranslations();
 
   const { navigate } = useNavigation();
   const { params = {} } = useRoute();
-  const { item, sensorData, type, automate } = params;
+  const { item, defaultCondition = {} } = params;
 
-  const hasLimit = useMemo(() => !!item?.range_max, [item]);
   const [isShowModal, setIsShowModal] = useState(false);
-  const [itemActiveModal, setItemActiveModal] = useState(null);
-  const [value, setValue] = useState(null);
-  const [minimum] = useState(hasLimit ? parseInt(item?.range_min, 10) : 0);
-  const [maximum, setMaximum] = useState(
-    value === 0
-      ? 100
-      : hasLimit
-      ? (parseInt(item?.range_max, 10) - minimum) * 10 + minimum
-      : (parseInt(item?.value, 10) + 20 - minimum) * 10 + minimum
-  );
+  const [itemActiveModal, setItemActiveModal] = useState(defaultCondition);
+  const [value, setValue] = useState(defaultCondition?.value || '');
 
   const hasNoValueEvaluation = !item?.evaluate_configuration;
 
@@ -63,35 +54,6 @@ const SetupConfigCondition = () => {
     return [];
   }, [item.evaluate_configuration, item.id, t]);
 
-  useEffect(() => {
-    let defaultCondition = null;
-    if (sensorData) {
-      const index = sensorData.findIndex((i) => i?.id === item?.id);
-      if (index !== -1 && sensorData[index].condition) {
-        defaultCondition = sensorData[index];
-      }
-    }
-
-    if (automate && !defaultCondition) {
-      const automationData = getAutomationData(type, automate);
-
-      const index = conditionOptions.findIndex(
-        (i) =>
-          i.condition === automationData?.condition &&
-          i.value === automationData?.value
-      );
-      if (index !== -1) {
-        defaultCondition = conditionOptions[index];
-      }
-    }
-
-    if (!defaultCondition) {
-      defaultCondition = conditionOptions[0];
-    }
-
-    setItemActiveModal(defaultCondition);
-  }, [conditionOptions, item, sensorData, automate, type]);
-
   const onOpenModal = useCallback(() => {
     setIsShowModal(true);
   }, []);
@@ -101,67 +63,48 @@ const SetupConfigCondition = () => {
   }, []);
 
   const onChooseCondition = (selectedItem) => () => {
-    setItemActiveModal(selectedItem);
+    setItemActiveModal((prev) => ({ ...prev, ...selectedItem }));
     onCloseModal();
   };
 
-  const onChangeValue = useCallback(
-    (newValue) => {
-      setValue(
-        (parseFloat(newValue / 128) + parseFloat(minimum)).toFixed(
-          item?.decimal_behind || 1
-        )
-      );
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [value]
-  );
-
   const onSave = useCallback(() => {
-    const dataTemp = [...sensorData];
-    const index = dataTemp.findIndex((i) => i?.id === item?.id);
-    dataTemp.splice(index, 1, { ...item, ...itemActiveModal });
+    const conditionValue = parseFloat(itemActiveModal?.value);
+    if (isNaN(conditionValue)) {
+      ToastBottomHelper.error(t('value_must_be_a_number'));
+      return;
+    }
+
+    if (['<', '>', '='].includes(itemActiveModal?.condition)) {
+      if (item.range_min !== null && conditionValue < item.range_min) {
+        ToastBottomHelper.error(
+          t('value_must_be_greater_than_min', { min: item.range_min })
+        );
+        return;
+      }
+      if (item.range_max !== null && conditionValue > item.range_max) {
+        ToastBottomHelper.error(
+          t('value_must_be_less_than_max', { max: item.range_max })
+        );
+        return;
+      }
+    }
+
     navigate({
       name: Routes.ChooseConfig,
       merge: true,
       params: {
-        newSensorData: dataTemp,
+        newCondition: {
+          ...itemActiveModal,
+          config: item.id,
+        },
       },
     });
-  }, [sensorData, item, itemActiveModal, navigate]);
-
-  const renderScroll = useMemo(() => {
-    return (
-      <HorizontalPicker
-        minimum={minimum}
-        maximum={maximum}
-        segmentSpacing={8}
-        segmentWidth={8}
-        step={10}
-        normalHeight={4}
-        normalWidth={4}
-        stepHeight={12}
-        stepWidth={12}
-        stepColor={Colors.Gray6}
-        normalColor={Colors.Gray6}
-        onChangeValue={onChangeValue}
-        value={value - minimum}
-      />
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [minimum, maximum, value]);
+  }, [item.id, item.range_max, item.range_min, itemActiveModal, navigate, t]);
 
   useEffect(() => {
     !hasNoValueEvaluation && setValue(1);
   }, [hasNoValueEvaluation]);
 
-  useEffect(() => {
-    if (!hasLimit && maximum - 150 <= value * 10) {
-      setMaximum(maximum + 200);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
-
   useEffect(() => {
     if (item?.title) {
       const itemTemp = conditionOptions.find((i) => i.title === item.title);
@@ -171,19 +114,23 @@ const SetupConfigCondition = () => {
   }, [item]);
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useStatusBarPreview(
+    setStatusBarPreview(
       isShowModal ? Colors.BlackTransparent4 : Colors.TextTransparent
     );
   }, [isShowModal]);
 
+  const onChangeValue = useCallback((newValue) => {
+    setValue(newValue);
+    setItemActiveModal((prev) => ({ ...prev, value: newValue }));
+  }, []);
+
   return (
     <>
       <NewActionWrapper
         name={t('set_up {name}', { name: item?.name })}
         nextTitle={t('save')}
         onNext={onSave}
-        canNext={true}
+        canNext={itemActiveModal?.condition}
       >
         <TouchableOpacity
           onPress={onOpenModal}
@@ -204,14 +151,18 @@ const SetupConfigCondition = () => {
             </Text>
             <View style={[styles.flexRow, styles.center]}>
               <View>
-                <Text style={styles.value}>{value}</Text>
-                <View style={styles.underline} />
+                <_TextInput
+                  textInputStyle={styles.value}
+                  wrapStyle={styles.wrapValue}
+                  value={value}
+                  keyboardType={'numeric'}
+                  onChange={onChangeValue}
+                />
               </View>
               <Text type="H2" style={styles.unit}>
                 {item?.unit}
               </Text>
             </View>
-            {renderScroll}
           </>
         )}
       </NewActionWrapper>

package/src/screens/{AddNewAction → Automate/AddNewAction}/Styles/SelectActionStyles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { getBottomSpace } from 'react-native-iphone-x-helper';
-import { Colors, Constants, Theme } from '../../../configs';
+import { Colors, Constants, Theme } from '../../../../configs';
 
 export default StyleSheet.create({
   ...Theme,

package/src/screens/{AddNewAction → Automate/AddNewAction}/Styles/SelectSensorDevicesStyles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { getBottomSpace } from 'react-native-iphone-x-helper';
-import { Colors, Constants } from '../../../configs';
+import { Colors, Constants } from '../../../../configs';
 
 export default StyleSheet.create({
   wrap: {

package/src/screens/{AddNewAction → Automate/AddNewAction}/Styles/SetupSensorStyles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Theme, Colors } from '../../../configs';
+import { Theme, Colors } from '../../../../configs';
 
 export default StyleSheet.create({
   ...Theme,
@@ -46,8 +46,10 @@ export default StyleSheet.create({
     fontSize: 48,
     fontWeight: 'bold',
     textAlign: 'center',
-    marginLeft: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Black,
   },
+  wrapValue: { marginTop: 0, margin: 0 },
   unit: {
     marginTop: -30,
   },

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

@@ -3,14 +3,14 @@ import renderer, { act } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 
 import ChooseAction from '../ChooseAction';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import BottomButtonView from '../../../commons/BottomButtonView';
-import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
-import api from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import BottomButtonView from '../../../../commons/BottomButtonView';
+import { AccessibilityLabel, DEVICE_TYPE } from '../../../../configs/Constants';
+import api from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
 import { TouchableOpacity } from 'react-native';
-import SelectActionCard from '../../../commons/SelectActionCard';
+import SelectActionCard from '../../../../commons/SelectActionCard';
 import { useNavigation } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
@@ -68,9 +68,9 @@ describe('Test ChooseAction', () => {
 
   it('test fetchData', async () => {
     const response = [
-      { template: 'on_off_button_action_template' },
-      { template: 'one_button_action_template' },
-      { template: 'three_button_action_template' },
+      { template: 'on_off_button_action_template', id: 1, configuration: {} },
+      { template: 'one_button_action_template', id: 2, configuration: {} },
+      { template: 'three_button_action_template', id: 3, configuration: {} },
     ];
     mock.onGet(API.DEVICE.DISPLAY_ACTIONS(1)).reply(200, response);
     await act(async () => {
@@ -291,7 +291,6 @@ describe('Test ChooseAction', () => {
             data: { config_id: config5, config_value: 1 },
           },
         ],
-        unit: 1,
       })
     );
   });