@eohjsc/react-native-smart-city 0.7.3-rc9 → 0.7.4

package/src/screens/Automate/AddNewAction/ChooseAction.js

@@ -14,7 +14,13 @@ import RenderActionItem from './RenderActionItem';
 const ChooseAction = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
-  const { unitId, device, automateId, numberActionCanAdd } = route?.params;
+  const {
+    unitId,
+    device,
+    automateId,
+    numberActionCanAdd,
+    multiUnit = {},
+  } = route.params;
   const [data, setData] = useState([]);
   const [actions, setActions] = useState([]);
 
@@ -48,7 +54,7 @@ const ChooseAction = ({ route }) => {
       API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
       {
         list_action,
-        unit: unitId,
+        unit: unitId || multiUnit.id,
       }
     );
 
@@ -58,7 +64,15 @@ const ChooseAction = ({ route }) => {
         merge: true,
         params: { saveAt: moment().valueOf() },
       });
-  }, [actions, numberActionCanAdd, automateId, unitId, navigate, t]);
+  }, [
+    actions,
+    numberActionCanAdd,
+    automateId,
+    unitId,
+    multiUnit.id,
+    navigate,
+    t,
+  ]);
 
   const handleOnSelectAction = (action) => {
     setActions((prevActions) => {

package/src/screens/Automate/AddNewAction/ChooseConfig.js

@@ -1,17 +1,17 @@
+import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
 
-import { useTranslations } from '../../../hooks/Common/useTranslations';
+import GridItem from '../../../commons/Grid/GridItem';
 import Text from '../../../commons/Text';
-import { axiosGet } from '../../../utils/Apis/axios';
 import { API, Colors } from '../../../configs';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { axiosGet } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
-import styles from './Styles/SelectActionStyles';
 import { LoadingSelectAction } from './Components';
-import { AUTOMATE_TYPE } from '../../../configs/Constants';
 import NewActionWrapper from './NewActionWrapper';
-import GridItem from '../../../commons/Grid/GridItem';
+import styles from './Styles/SelectActionStyles';
 
 const ChooseConfig = ({ route }) => {
   const t = useTranslations();
@@ -44,6 +44,7 @@ const ChooseConfig = ({ route }) => {
         config,
         automate,
         closeScreen,
+        unitId: automate?.unit,
       });
     },
     [automate, closeScreen, navigate]

package/src/screens/Automate/AddNewAction/NewActionWrapper.js

@@ -1,14 +1,14 @@
+import { KeyboardAwareScrollView } from '@eohjsc/react-native-keyboard-aware-scroll-view';
 import React, { useCallback, useMemo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { KeyboardAwareScrollView } from '@eohjsc/react-native-keyboard-aware-scroll-view';
 
-import styles from './Styles/SelectActionStyles';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-import { Colors } from '../../../configs';
 import { useNavigation, useRoute } from '@react-navigation/native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { FullLoading, HeaderCustom } from '../../../commons';
 import BottomButtonView from '../../../commons/BottomButtonView';
+import { Colors } from '../../../configs';
 import { AccessibilityLabel } from '../../../configs/Constants';
-import { FullLoading, HeaderCustom } from '../../../commons';
+import styles from './Styles/SelectActionStyles';
 
 const NewActionWrapper = ({
   name,
@@ -25,8 +25,8 @@ const NewActionWrapper = ({
   const { closeScreen } = params;
 
   const handleClose = useCallback(() => {
-    navigate(closeScreen);
-  }, [closeScreen, navigate]);
+    navigate(closeScreen, params);
+  }, [closeScreen, navigate, params]);
 
   const rightComponent = useMemo(
     () => (
@@ -35,7 +35,7 @@ const NewActionWrapper = ({
         onPress={handleClose}
         accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
       >
-        <AntDesign name={'close'} size={24} color={Colors.Black} />
+        <IconOutline name={'close'} size={24} color={Colors.Black} />
       </TouchableOpacity>
     ),
     [handleClose]

package/src/screens/Automate/AddNewAction/SelectControlDevices.js

@@ -1,15 +1,20 @@
-import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
-import { fetchWithCache } from '../../../utils/Apis/axios';
+import React, { useCallback, useEffect, useState } from 'react';
 import { API } from '../../../configs';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { fetchWithCache } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
 import SelectDevices from './Components/SelectDevices';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 const SelectControlDevices = ({ route }) => {
   const t = useTranslations();
-  const { unitId, closeScreen, automateId, numberActionCanAdd } =
-    route?.params || {};
+  const {
+    unitId,
+    closeScreen,
+    automateId,
+    numberActionCanAdd,
+    multiUnit = {},
+  } = route.params || {};
 
   const [stations, setStations] = useState([]);
   const [listStation, setListStation] = useState([]);
@@ -19,22 +24,26 @@ const SelectControlDevices = ({ route }) => {
   const [loading, setLoading] = useState(true);
 
   const fetchDetails = useCallback(async () => {
-    await fetchWithCache(API.UNIT.DEVICE_CONTROL(unitId), {}, (response) => {
-      const { success, data } = response;
-      if (success) {
-        const newData = data.filter((item) => item.sensors.length > 0);
-        const listMenu = newData.map((item, index) => ({
-          text: item.name,
-          station: item,
-          index: index,
-        }));
-        setStations(newData);
-        setListMenuItem(listMenu);
-        setListStation(listMenu);
+    await fetchWithCache(
+      API.UNIT.DEVICE_CONTROL(unitId || multiUnit.id),
+      {},
+      (response) => {
+        const { success, data } = response;
+        if (success) {
+          const newData = data.filter((item) => item.sensors.length > 0);
+          const listMenu = newData.map((item, index) => ({
+            text: item.name,
+            station: item,
+            index: index,
+          }));
+          setStations(newData);
+          setListMenuItem(listMenu);
+          setListStation(listMenu);
+        }
       }
-    });
+    );
     setLoading(false);
-  }, [unitId]);
+  }, [multiUnit.id, unitId]);
 
   useEffect(() => {
     fetchDetails();
@@ -48,9 +57,10 @@ const SelectControlDevices = ({ route }) => {
         device: selectedDevice,
         closeScreen,
         numberActionCanAdd,
+        multiUnit,
       });
     },
-    [navigate, unitId, automateId, closeScreen, numberActionCanAdd]
+    [navigate, unitId, automateId, closeScreen, numberActionCanAdd, multiUnit]
   );
 
   if (loading) {

package/src/screens/Automate/AddNewAction/SelectMonitorDevices.js

@@ -1,16 +1,22 @@
-import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useEffect, useState } from 'react';
 
+import { API } from '../../../configs';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
 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';
 
 const SelectMonitorDevices = ({ route }) => {
   const t = useTranslations();
-  const { automate = {}, isCreateNewAction, closeScreen } = route?.params || {};
+  const {
+    automate = {},
+    isCreateNewAction,
+    closeScreen,
+    multiUnit = {},
+  } = route.params || {};
+  const { type, unit, sensor_id } = automate;
 
   const [stations, setStations] = useState([]);
   const [listStation, setListStation] = useState([]);
@@ -22,11 +28,11 @@ const SelectMonitorDevices = ({ route }) => {
 
   const fetchDetails = useCallback(async () => {
     const configs = { params: {} };
-    if (automate?.type === AUTOMATE_TYPE.EVENT) {
+    if (type === AUTOMATE_TYPE.EVENT) {
       configs.params.type = 'event';
     }
     await fetchWithCache(
-      API.UNIT.DEVICE_SENSOR(automate?.unit),
+      API.UNIT.DEVICE_SENSOR(unit || multiUnit.id),
       configs,
       (response) => {
         const { success, data } = response;
@@ -46,17 +52,17 @@ const SelectMonitorDevices = ({ route }) => {
       }
     );
     setLoading(false);
-  }, [automate?.type, automate?.unit]);
+  }, [multiUnit.id, type, unit]);
 
   useEffect(() => {
-    if (!automate?.sensor_id) {
+    if (!sensor_id) {
       return;
     }
     let selectSensor = {};
     let found = false;
     for (let i = 0; i < stations.length; i++) {
       for (let j = 0; j < stations[i].sensors.length; j++) {
-        if (stations[i].sensors[j].id === automate.sensor_id) {
+        if (stations[i].sensors[j].id === sensor_id) {
           selectSensor = stations[i].sensors[j];
           found = true;
           break;
@@ -67,7 +73,7 @@ const SelectMonitorDevices = ({ route }) => {
       }
     }
     setDefaultSelectedDevice(selectSensor);
-  }, [automate?.sensor_id, stations]);
+  }, [sensor_id, stations]);
 
   useEffect(() => {
     fetchDetails();
@@ -86,6 +92,7 @@ const SelectMonitorDevices = ({ route }) => {
         stationName: stations[indexStation]?.name,
         isCreateNewAction,
         closeScreen,
+        unitId: automate?.unit,
       });
     },
     [navigate, automate, stations, isCreateNewAction, closeScreen]

package/src/screens/Automate/AddNewAction/SetupConfigCondition.js

@@ -1,17 +1,21 @@
-import React, { useMemo, useState } from 'react';
-import { View, TouchableOpacity, FlatList } from 'react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
 
-import styles from './Styles/SetupSensorStyles';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import Text from '../../../commons/Text';
-import { useNavigation, useRoute } from '@react-navigation/native';
-import NewActionWrapper from './NewActionWrapper';
+import {
+  useFocusEffect,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native';
+import { Button } from '../../../commons';
+import TextInput from '../../../commons/Form/TextInput';
 import GridItem from '../../../commons/Grid/GridItem';
-import Routes from '../../../utils/Route';
 import ModalCustom from '../../../commons/Modal/ModalCustom';
+import Text from '../../../commons/Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Routes from '../../../utils/Route';
 import { ToastBottomHelper } from '../../../utils/Utils';
-import CheckBox from '@react-native-community/checkbox';
-import TextInput from '../../../commons/Form/TextInput';
+import NewActionWrapper from './NewActionWrapper';
+import styles from './Styles/SetupSensorStyles';
 
 const valueEvaluationToOptions = (valueEvaluation) => {
   if (valueEvaluation.template === 'range') {
@@ -43,7 +47,7 @@ const SetupConfigCondition = () => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const { params = {} } = useRoute();
-  const { config, automate, closeScreen } = params;
+  const { config, automate, closeScreen, unitId } = params;
   const [selectedCondition, setSelectedCondition] = useState(undefined);
   const [customCondition, setCustomCondition] = useState(undefined);
   const [isShowModal, setIsShowModal] = useState(false);
@@ -54,7 +58,7 @@ const SetupConfigCondition = () => {
         value: '<',
       },
       {
-        label: `${t('is')} (=)`,
+        label: `${t('is_equal')} (=)`,
         value: '=',
       },
       {
@@ -88,15 +92,21 @@ const SetupConfigCondition = () => {
     navigate(Routes.ValueChangeName, {
       automate,
       closeScreen,
+      unitId,
     });
   };
 
-  const resetCustomizeCondition = () => {
+  const resetCustomizeCondition = useCallback(() => {
     automate.condition = null;
     automate.value = null;
     setCustomCondition(undefined);
-    setIsShowModal(false);
-  };
+  }, [automate]);
+
+  useFocusEffect(
+    useCallback(() => {
+      resetCustomizeCondition();
+    }, [resetCustomizeCondition])
+  );
 
   return (
     <NewActionWrapper name={t('set_up {name}', { name: config?.name })}>
@@ -127,61 +137,65 @@ const SetupConfigCondition = () => {
         </GridItem>
       </View>
       <ModalCustom
-        onBackdropPress={() => resetCustomizeCondition()}
+        onBackdropPress={() => setIsShowModal(false)}
         isVisible={isShowModal}
         style={styles.modal}
       >
         <View style={styles.modalContent}>
-          <Text type="Body">
+          <Text type="Body" bold style={styles.titleCondition}>
             {t('when_value_is', { config_name: config.name })}
           </Text>
-          <FlatList
-            renderHeader={t('condition')}
-            data={normalConditions}
-            renderItem={({ item }) => {
+          <View style={styles.flatListCondition}>
+            {normalConditions.map((item) => {
               return (
-                <View>
-                  <Text>{item.label}</Text>
-                  <CheckBox
-                    onChange={() => {
-                      automate.condition = item.value;
-                      setCustomCondition(item.value);
-                    }}
-                    value={item.value === customCondition}
-                  />
-                </View>
+                <GridItem
+                  onPress={() => {
+                    automate.condition = item.value;
+                    setCustomCondition(item.value);
+                  }}
+                  selected={item.value === customCondition}
+                  style={styles.gridItem}
+                >
+                  <Text type="Body">{item.label}</Text>
+                </GridItem>
               );
-            }}
-          />
+            })}
+          </View>
+
           <View style={styles.inputValue}>
-            <Text>{t('value')}</Text>
             <TextInput
               keyboardType="decimal-pad"
               type="number"
               maxLength={10}
+              placeholder={t('value')}
               onChange={(value) => {
                 const floatValue = parseFloat(value.replace(',', '.'));
                 automate.value = floatValue;
               }}
-              style={styles.numberInput}
+              textInputStyle={styles.numberInput}
+              wrapStyle={styles.wrapTextInput}
             />
           </View>
-          <TouchableOpacity
+
+          <Button
+            type="primary"
+            title={t('continue')}
             testID={'continue_button'}
             onPress={() => {
-              if (
-                !automate.value ||
-                automate.condition === 'value_evaluation'
-              ) {
+              if (!automate.value || !automate.condition) {
                 ToastBottomHelper.error(t('please_enter_a_number'), '', 3000);
                 return;
               }
               setIsShowModal(false);
-              navigate(Routes.ValueChangeName, { automate, closeScreen });
+              navigate(Routes.ValueChangeName, {
+                automate,
+                closeScreen,
+                unitId,
+              });
             }}
-          >
-            <Text>{t('continue')}</Text>
-          </TouchableOpacity>
+            style={styles.buttonContinue}
+            textSemiBold={false}
+          />
         </View>
       </ModalCustom>
     </NewActionWrapper>

package/src/screens/Automate/AddNewAction/SetupScriptDelay.js

@@ -40,7 +40,7 @@ const SetupScriptDelay = ({ route }) => {
         params: { saveAt: moment().valueOf() },
       });
     } else {
-      ToastBottomHelper.error(t('text_done'));
+      ToastBottomHelper.error(t('error_please_try_later'));
     }
   }, [automateId, navigate, delay, t]);
 

package/src/screens/Automate/AddNewAction/SetupScriptNotify.js

@@ -17,9 +17,9 @@ import moment from 'moment';
 const SetupScriptNotify = ({ route }) => {
   const t = useTranslations();
   const { goBack, navigate } = useNavigation();
-  const { automate = {}, unitId } = route?.params || {};
+  const { automate = {}, unitId, multiUnit } = route.params || {};
   const { id: automateId } = automate;
-  const [notify, setNotify] = useState({ unit: unitId });
+  const [notify, setNotify] = useState({ unit: unitId || multiUnit.id });
 
   const onChangeTitle = (value) => {
     setNotify((state) => ({
@@ -47,7 +47,7 @@ const SetupScriptNotify = ({ route }) => {
         params: { saveAt: moment().valueOf() },
       });
     } else {
-      ToastBottomHelper.error(t('text_done'));
+      ToastBottomHelper.error(t('error_please_try_later'));
     }
   }, [automateId, navigate, notify, t]);
 

package/src/screens/Automate/AddNewAction/Styles/SetupSensorStyles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Theme, Colors } from '../../../../configs';
+import { Colors, Theme } from '../../../../configs';
 
 export default StyleSheet.create({
   ...Theme,
@@ -11,10 +11,9 @@ export default StyleSheet.create({
   },
   inputValue: { marginBottom: 10 },
   numberInput: {
-    borderRadius: 5,
+    borderRadius: 8,
     borderWidth: 1,
-    height: 38,
-    marginTop: 10,
+    height: 50,
   },
   boxDevices: {
     flexWrap: 'wrap',
@@ -43,4 +42,21 @@ export default StyleSheet.create({
     width: '100%',
     borderRadius: 10,
   },
+  titleCondition: {
+    marginBottom: 16,
+  },
+  wrapTextInput: {
+    marginTop: 0,
+  },
+  flatListCondition: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  gridItem: {
+    width: 'fit-content',
+  },
+  buttonContinue: {
+    flex: 0,
+  },
 });

package/src/screens/Automate/AddNewAction/__test__/ChooseAction.test.js

@@ -162,7 +162,7 @@ describe('Test ChooseAction', () => {
               is_on_value: 1,
               action: '800ff454-4e2a-4a38-bad6-1bded728193e',
               allow_config_store_value: true,
-              icon: 'upcircle',
+              icon: 'up-circle',
               icon_kit: 41,
               text: 'Auto',
             },

package/src/screens/Automate/AddNewAction/__test__/SelectControlDevices.test.js

@@ -1,17 +1,17 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
+import { TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
-import Device from '../Device';
 import NavBar from '../../../../commons/NavBar';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
-import { TouchableOpacity } from 'react-native';
-import Routes from '../../../../utils/Route';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
+import Routes from '../../../../utils/Route';
+import Device from '../Device';
 import SelectControlDevices from '../SelectControlDevices';
-import { useNavigation, useRoute } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -108,6 +108,12 @@ describe('Test SelectMonitorDevices', () => {
     await act(async () => {
       iconClose[0].props.onPress();
     });
-    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail);
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
+      automate: { sensor_id: 1 },
+      automateId: 1,
+      closeScreen: 'ScriptDetail',
+      scriptName: 'scriptName test',
+      unitId: 1,
+    });
   });
 });

package/src/screens/Automate/AddNewAction/__test__/SelectMonitorDevices.test.js

@@ -1,15 +1,15 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import SelectMonitorDevices from '../SelectMonitorDevices';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
+import { useRoute } from '@react-navigation/native';
+import { TouchableOpacity } from 'react-native';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
-import { TouchableOpacity } from 'react-native';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
-import { useRoute } from '@react-navigation/native';
+import SelectMonitorDevices from '../SelectMonitorDevices';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -70,6 +70,12 @@ describe('Test SelectMonitorDevices', () => {
     await act(async () => {
       iconClose[0].props.onPress();
     });
-    expect(global.mockedNavigate).toHaveBeenCalledWith('closeScreen');
+    expect(global.mockedNavigate).toHaveBeenCalledWith('closeScreen', {
+      automate: { sensor_id: 1 },
+      automateId: null,
+      closeScreen: 'closeScreen',
+      scriptName: 'scriptName test',
+      unit: { id: 1, name: 'Unit test' },
+    });
   });
 });