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

package/src/navigations/UnitStack.js

@@ -1,16 +1,15 @@
 import React, { memo, useContext, useEffect } from 'react';
-import { View } from 'react-native';
+import { AppState, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { BleManager } from 'react-native-ble-plx';
 import NetInfo from '@react-native-community/netinfo';
-import { AppState } from 'react-native';
 import { get } from 'lodash';
 
 import Text from '../commons/Text';
 import { useTranslations } from '../hooks/Common/useTranslations';
 import { unwatchAllConfigs } from '../iot/Monitor';
-import { Colors, Device } from '../configs';
+import { API, Colors, Device } from '../configs';
 import Route from '../utils/Route';
 import ActivityLogScreen from '../screens/ActivityLog';
 import { screenOptions } from './utils';
@@ -43,10 +42,9 @@ import ScriptDetail from '../screens/ScriptDetail';
 import EditActionsList from '../screens/EditActionsList';
 import SelectUnit from '../screens/SelectUnit';
 import SetSchedule from '../screens/SetSchedule';
-import SelectSensorDevices from '../screens/AddNewAction/SelectSensorDevices';
-import SelectAction from '../screens/AddNewAction/SelectAction';
+import SelectMonitorDevices from '../screens/AddNewAction/SelectMonitorDevices';
 import EditSubUnit from '../screens/SubUnit/EditSubUnit';
-import SetUpSensor from '../screens/AddNewAction/SetupSensor';
+import SetupConfigCondition from '../screens/AddNewAction/SetupConfigCondition';
 import EditDevice from '../screens/Device/EditDevice/index';
 import EmergencySetting from '../screens/EmergencySetting';
 import ConfirmUnitDeletion from '../screens/ConfirmUnitDeletion';
@@ -56,12 +54,14 @@ import AllGateway from '../screens/AllGateway';
 import SelectAddToFavorites from '../screens/Unit/SelectAddToFavorites';
 import { HanetCameraStack } from './HanetCameraStack';
 import { axiosGet, fetchWithCache } from '../utils/Apis/axios';
-import { API } from '../configs';
 import SideMenuDetail from '../screens/SideMenuDetail';
 import { styles } from './UnitStackStyles';
 import { useBluetoothConnection } from '../hooks/IoT';
 import { realScanBluetoothDevices } from '../iot/RemoteControl/Bluetooth';
 import { ToastBottomHelper } from '../utils/Utils';
+import ChooseConfig from '../screens/AddNewAction/ChooseConfig';
+import SelectControlDevices from '../screens/AddNewAction/SelectControlDevices';
+import ChooseAction from '../screens/AddNewAction/ChooseAction';
 
 const Stack = createStackNavigator();
 
@@ -410,8 +410,13 @@ export const UnitStack = memo((props) => {
         }}
       />
       <Stack.Screen
-        name={Route.SelectSensorDevices}
-        component={SelectSensorDevices}
+        name={Route.SelectMonitorDevices}
+        component={SelectMonitorDevices}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={Route.SelectControlDevices}
+        component={SelectControlDevices}
         options={{ headerShown: false }}
       />
       <Stack.Screen
@@ -420,13 +425,18 @@ export const UnitStack = memo((props) => {
         options={{ headerShown: false }}
       />
       <Stack.Screen
-        name={Route.SetUpSensor}
-        component={SetUpSensor}
+        name={Route.SetupConfigCondition}
+        component={SetupConfigCondition}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={Route.ChooseConfig}
+        component={ChooseConfig}
         options={{ headerShown: false }}
       />
       <Stack.Screen
-        name={Route.SelectAction}
-        component={SelectAction}
+        name={Route.ChooseAction}
+        component={ChooseAction}
         options={{ headerShown: false }}
       />
       <Stack.Screen

package/src/screens/ActivityLog/FilterPopup.js

@@ -78,7 +78,7 @@ const FilterPopup = ({
     [selectedUsers, setSelectedUsers]
   );
 
-  const onPickStartDate = useCallback(() => {
+  const selectStart = useCallback(() => {
     onHide();
     acquireLockShowing();
     setStateDatePicker((state) => ({
@@ -88,7 +88,7 @@ const FilterPopup = ({
     }));
   }, [onHide, acquireLockShowing]);
 
-  const onPickEndDate = useCallback(() => {
+  const selectEnd = useCallback(() => {
     onHide();
     acquireLockShowing();
     setStateDatePicker((state) => ({
@@ -208,8 +208,8 @@ const FilterPopup = ({
             <DateTimeRangeChange
               startTime={stateDatePicker.startDate}
               endTime={stateDatePicker.endDate}
-              onStart={onPickStartDate}
-              onEnd={onPickEndDate}
+              selectStart={selectStart}
+              selectEnd={selectEnd}
               formatType="date"
               inline={true}
             />

package/src/screens/ActivityLog/__test__/FilterPopup.test.js

@@ -133,10 +133,10 @@ it('test date picker pick valid and invalid date', async () => {
   const _pickDateAndTest = async (timeChange) => {
     await act(async () => {
       if (timeChange === 'start') {
-        await dateTimeRangeChange.props.onStart();
+        await dateTimeRangeChange.props.selectStart();
         await datePicker.props.onConfirm(moment(dateFrom));
       } else {
-        await dateTimeRangeChange.props.onEnd();
+        await dateTimeRangeChange.props.selectEnd();
         await datePicker.props.onConfirm(moment(dateTo));
       }
     });

package/src/screens/ActivityLog/__test__/index.test.js

@@ -118,7 +118,7 @@ describe('Test Activity log', () => {
 
     // pick start date
     await act(async () => {
-      await dateTimeRangeChange.props.onStart();
+      await dateTimeRangeChange.props.selectStart();
       await filterPopup[0].props.onModalHide();
     });
     expect(filterPopup[0].props.isVisible).toBeFalsy();
@@ -136,7 +136,7 @@ describe('Test Activity log', () => {
     expect(filterPopup[0].props.isVisible).toBeTruthy();
     // pick end date
     await act(async () => {
-      await dateTimeRangeChange.props.onEnd();
+      await dateTimeRangeChange.props.selectEnd();
       await filterPopup[0].props.onModalHide();
     });
     expect(filterPopup[0].props.isVisible).toBeFalsy();

package/src/screens/AddCommon/__test__/SelectSubUnit.test.js

@@ -44,7 +44,7 @@ describe('Test SelectSubUnit', () => {
   it('test ViewButtonBottom onRightClick', async () => {
     const route = { params: { addType: 'AddHassiDevice' } };
     await act(async () => {
-      tree = renderer.create(wrapComponent(route));
+      tree = await renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -72,7 +72,7 @@ describe('Test SelectSubUnit container', () => {
     test(`create SelectSubUnit ${type} container`, async () => {
       const route = { params: { addType: type } };
       await act(async () => {
-        tree = renderer.create(wrapComponent(route));
+        tree = await renderer.create(wrapComponent(route));
       });
       const instance = tree.root;
       const button = instance.findAllByType(TouchableOpacity);
@@ -88,7 +88,7 @@ describe('Test SelectSubUnit container', () => {
       ]);
 
       await act(async () => {
-        tree = renderer.create(wrapComponent(route));
+        tree = await renderer.create(wrapComponent(route));
       });
 
       const instance = tree.root;

package/src/screens/AddCommon/__test__/SelectUnit.test.js

@@ -55,7 +55,7 @@ describe('Test SelectUnit container', () => {
     test(`create SelectUnit ${type} container`, async () => {
       const route = { params: { addType: type } };
       await act(async () => {
-        tree = renderer.create(wrapComponent(route));
+        tree = await renderer.create(wrapComponent(route));
       });
       const instance = tree.root;
       const button = instance.findAllByType(TouchableOpacity);
@@ -89,7 +89,7 @@ describe('Test SelectUnit container', () => {
       };
       mock.onGet(API.SHARE.UNITS()).reply(200, response.data);
       await act(async () => {
-        tree = renderer.create(wrapComponent(route));
+        tree = await renderer.create(wrapComponent(route));
       });
 
       const instance = tree.root;
@@ -165,7 +165,7 @@ describe('test single SelectUnit', () => {
     };
     mock.onGet(API.SHARE.UNITS()).reply(200, response.data);
     await act(async () => {
-      tree = renderer.create(wrapComponent(route));
+      tree = await renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
     const unitName = instance.findAll(
@@ -201,7 +201,7 @@ describe('test single SelectUnit', () => {
     const route = { params: { addType: 'AddSubUnit' } };
     mock.onGet(500);
     await act(async () => {
-      tree = renderer.create(wrapComponent(route));
+      tree = await renderer.create(wrapComponent(route));
     });
 
     const instance = tree.root;
@@ -224,7 +224,7 @@ describe('test single SelectUnit', () => {
   it('click goBack', async () => {
     const route = { params: { addType: 'AddSubUnit' } };
     await act(async () => {
-      tree = renderer.create(wrapComponent(route));
+      tree = await renderer.create(wrapComponent(route));
     });
 
     const instance = tree.root;

package/src/screens/AddNewAction/ChooseAction.js

@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import moment from 'moment';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import ActionTemplate from '../../commons/ActionTemplate';
+import NumberUpDownActionTemplate from '../../commons/OneTapTemplate/NumberUpDownActionTemplate';
+import OptionsDropdownActionTemplate from '../../commons/OneTapTemplate/OptionsDropdownActionTemplate';
+import StatesGridActionTemplate from '../../commons/OneTapTemplate/StatesGridActionTemplate';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import { API } from '../../configs';
+import { AUTOMATE_TYPE } from '../../configs/Constants';
+import Routes from '../../utils/Route';
+import NewActionWrapper from './NewActionWrapper';
+
+const ChooseAction = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const {
+    unit,
+    device,
+    automateId,
+    automate = {},
+    scriptName,
+    type,
+    isMultiUnits,
+    index = -1,
+  } = route?.params || {};
+  const [data, setData] = useState([]);
+  const [actions, setActions] = useState([]);
+
+  const fetchData = useCallback(async () => {
+    const { success, data: automateData } = await axiosGet(
+      API.DEVICE.DISPLAY_ACTIONS(device.id)
+    );
+
+    if (success) {
+      setData(automateData);
+    }
+  }, [device.id]);
+
+  const onSave = useCallback(async () => {
+    if (automateId) {
+      let list_action = [...actions];
+      list_action = list_action.map((item) => ({
+        action: item.action,
+        data: item.data,
+      }));
+      const { success } = await axiosPost(
+        API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
+        {
+          list_action,
+          unit: unit.id,
+        }
+      );
+
+      success &&
+        navigate(Routes.ScriptDetail, {
+          id: automateId,
+          name: scriptName,
+          havePermission: true,
+          unit,
+          saveAt: moment().valueOf(),
+          type: type,
+          isMultiUnits,
+          automate,
+        });
+    } else {
+      navigate(Routes.AddNewOneTap, {
+        automateData: {
+          action: actions[0].action,
+        },
+        type: AUTOMATE_TYPE.EVENT_ACTION,
+        unit,
+        isMultiUnits,
+        automateId,
+        automate: {
+          ...automate,
+          action: actions[0].action,
+        },
+        scriptName,
+      });
+    }
+  }, [
+    actions,
+    automateId,
+    navigate,
+    scriptName,
+    unit,
+    type,
+    isMultiUnits,
+    automate,
+  ]);
+
+  const handleOnSelectAction = (action) => {
+    let newActions = [...actions];
+
+    if (index < 0) {
+      newActions.push(action);
+    } else {
+      newActions[index] = action; // todo Bang this case is not happening?
+    }
+    setActions(newActions);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return (
+    <NewActionWrapper
+      canNext={actions.length}
+      onNext={onSave}
+      nextTitle={t('continue')}
+      title={t('choose_action')}
+    >
+      <View>
+        {data?.length > 0 &&
+          data.map((item) => (
+            <RenderActionItem
+              device={device}
+              item={item}
+              key={item.id}
+              handleOnSelectAction={handleOnSelectAction}
+            />
+          ))}
+      </View>
+    </NewActionWrapper>
+  );
+};
+
+const RenderActionItem = ({ device, item, handleOnSelectAction }) => {
+  switch (item.template) {
+    case 'on_off_button_action_template':
+    case 'one_button_action_template':
+    case 'three_button_action_template':
+    case 'OnOffSimpleActionTemplate':
+    case 'curtain_action_template':
+    case 'OnOffSmartLockActionTemplate':
+      return (
+        <ActionTemplate
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
+    case 'OptionsDropdownActionTemplate':
+      return (
+        <OptionsDropdownActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
+    case 'NumberUpDownActionTemplate':
+      return (
+        <NumberUpDownActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
+    case 'StatesGridActionTemplate':
+      return (
+        <StatesGridActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+export default ChooseAction;

package/src/screens/AddNewAction/ChooseConfig.js

@@ -0,0 +1,207 @@
+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 styles from './Styles/SelectActionStyles';
+import { TitleCheckBox } from '../Sharing/Components';
+import { LoadingSelectAction } from './Components';
+import { ToastBottomHelper } from '../../utils/Utils';
+import {
+  generateAutomationConditionText,
+  generateAutomationDataConditionText,
+  getAutomationData,
+} from '../ScriptDetail/utils';
+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,
+    closeScreen,
+  } = route?.params || {};
+
+  const [sensorData, setSensorData] = useState([]);
+  const [checkedItem, setCheckedItem] = useState({ id: automate?.config_id });
+  const [isLoading, setIsLoading] = useState(false);
+  const valueEvaluations = useSCContextSelector((state) => {
+    return state.valueEvaluations;
+  });
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    const configs = { params: {} };
+    if (type === AUTOMATE_TYPE.EVENT) {
+      configs.params.type = 'event';
+    }
+
+    const { success, data: automateData } = await axiosGet(
+      API.AUTOMATE.DISPLAY_CONFIGS(device.id),
+      configs
+    );
+    if (success) {
+      setSensorData(automateData);
+    }
+    setIsLoading(false);
+  }, [device.id, 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)) {
+      ToastBottomHelper.error(t('please_choose_condition_before_continue'));
+      return;
+    }
+    navigate(Routes.AddNewOneTap, {
+      automateData: itemTemp,
+      type,
+      unit,
+      isAutomateTab,
+      isMultiUnits,
+      automateId,
+      automate: {
+        ...automate,
+        ...itemTemp,
+      },
+      scriptName,
+    });
+  }, [
+    sensorData,
+    navigate,
+    type,
+    unit,
+    isAutomateTab,
+    isMultiUnits,
+    automateId,
+    automate,
+    scriptName,
+    checkedItem?.id,
+    t,
+  ]);
+
+  const onChecked = useCallback(
+    (_, isChecked, id) => {
+      setCheckedItem(isChecked ? sensorData.find((i) => i?.id === id) : {});
+    },
+    [sensorData]
+  );
+
+  const onPressItem = (item) => () => {
+    navigate(Routes.SetupConfigCondition, {
+      item,
+      sensorData,
+      isAutomateTab,
+      type,
+      automate,
+      closeScreen,
+    });
+  };
+
+  const renderCondition = useCallback(
+    (item) => {
+      return generateAutomationDataConditionText(
+        type,
+        item,
+        item.value_evaluation || {
+          // backward compatible
+          template: item.evaluate_template,
+          configuration: item.evaluate_configuration,
+        },
+        t
+      );
+    },
+    [t, type]
+  );
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  useEffect(() => {
+    newSensorData && setSensorData(newSensorData);
+  }, [newSensorData]);
+
+  return (
+    <NewActionWrapper
+      name={t('set_up {name}', { name: device?.name })}
+      nextTitle={t('continue')}
+      onNext={onSave}
+      canNext={checkedItem?.id}
+    >
+      {isLoading ? (
+        <LoadingSelectAction style={styles.container} />
+      ) : (
+        sensorData.map((item) => {
+          const hasValue = ![undefined, null].includes(item?.value);
+          const isChecked = checkedItem?.id === item?.id;
+          const isDefault = automate?.config_id === item?.id;
+          return (
+            <View style={styles.wrapItem} key={item?.id}>
+              <TitleCheckBox
+                onPress={onChecked}
+                id={item?.id}
+                title={item?.name}
+                titleStyle={styles.titleStyle}
+                wrapStyle={styles.wrapStyleCheckBox}
+                isChecked={isChecked}
+              />
+              <TouchableOpacity
+                onPress={onPressItem(item)}
+                style={[styles.wrapCondition, styles.shadowView]}
+                accessibilityLabel={`config-${item.id}`}
+              >
+                <Text type="Body" color={Colors.Gray7}>
+                  {t('condition')}
+                </Text>
+                <Text
+                  numberOfLines={1}
+                  type="H4"
+                  semibold={isChecked}
+                  style={styles.description}
+                >
+                  {hasValue
+                    ? renderCondition(item)
+                    : isDefault
+                    ? generateAutomationConditionText(
+                        type,
+                        automate,
+                        valueEvaluations[automate?.config_id],
+                        t
+                      )
+                    : t('no_condition')}
+                </Text>
+                {hasValue && (
+                  <Image source={Images.arrowBack} style={styles.arrowRight} />
+                )}
+              </TouchableOpacity>
+            </View>
+          );
+        })
+      )}
+    </NewActionWrapper>
+  );
+};
+
+export default ChooseConfig;

package/src/screens/AddNewAction/Components/SelectDevices.js

@@ -0,0 +1,75 @@
+import { View } from 'react-native';
+import styles from '../Styles/SelectSensorDevicesStyles';
+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 NewActionWrapper from '../NewActionWrapper';
+
+const SelectDevices = ({
+  onPressContinue,
+  listStation,
+  listMenuItem,
+  title,
+  stations,
+  defaultSelectedDevice,
+}) => {
+  const t = useTranslations();
+
+  const [selectedDevice, setSelectedDevice] = useState(defaultSelectedDevice);
+  const [indexStation, setIndexStation] = useState(0);
+
+  const onSnapToItem = useCallback((item, index) => {
+    setIndexStation(index);
+  }, []);
+
+  const onPressDevice = (sensor) => {
+    if (selectedDevice && selectedDevice.id === sensor.id) {
+      setSelectedDevice(null);
+    } else {
+      setSelectedDevice(sensor);
+    }
+  };
+
+  return (
+    <NewActionWrapper
+      nextTitle={t('continue')}
+      onNext={() => onPressContinue(selectedDevice, indexStation)}
+      canNext={Object.keys(selectedDevice || {}).length}
+      name={title}
+    >
+      {listStation.length ? (
+        <NavBar
+          listStation={listStation}
+          listMenuItem={listMenuItem}
+          onSnapToItem={onSnapToItem}
+          indexStation={indexStation}
+          style={styles.navbar}
+        />
+      ) : (
+        <View style={styles.noneData}>
+          <Text center>
+            {t('you_do_not_have_the_device_or_have_share_control_device')}
+          </Text>
+        </View>
+      )}
+
+      <View style={styles.boxDevices}>
+        {stations[indexStation]?.sensors &&
+          stations[indexStation].sensors.map((sensor) => (
+            <Device
+              svgMain={sensor.icon || 'sensor'}
+              title={sensor.name}
+              sensor={sensor}
+              isSelectDevice={selectedDevice && selectedDevice.id === sensor.id}
+              onPress={onPressDevice}
+              key={sensor.id}
+            />
+          ))}
+      </View>
+    </NewActionWrapper>
+  );
+};
+
+export default SelectDevices;

package/src/screens/AddNewAction/Device/__test__/index.test.js

@@ -25,7 +25,7 @@ describe('Test SelectDevice', () => {
     const sensor = { id: 1, name: 'sensor' };
     const mockFuntion = jest.fn();
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         wrapComponent(sensor.icon_kit, sensor, sensor.name, true, mockFuntion)
       );
     });