@eohjsc/react-native-smart-city 0.7.21 → 0.7.23

package/src/commons/ActionTemplate/__test__/OnOffSmartLockAction.test.js

@@ -2,13 +2,21 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
 
+import Text from '../../Text';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import OnOffSmartLockAction from '../OnOffSmartLockAction';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 
-const wrapComponent = (configuration, onPress) => (
+const wrapComponent = (configuration, onPress, onPressToggle) => (
   <SCProvider initState={mockSCStore({})}>
-    <OnOffSmartLockAction configuration={configuration} onPress={onPress} />
+    <OnOffSmartLockAction
+      configuration={configuration}
+      onPress={onPress}
+      onPressToggle={onPressToggle}
+      title={'Lock'}
+      template={'OnOffSmartLockActionTemplate'}
+    />
   </SCProvider>
 );
 
@@ -17,38 +25,70 @@ describe('Test OnOffSmartLockAction', () => {
 
   it('test onPress smart lock action', async () => {
     const configuration = {
-      action_on: 'a',
-      action_off: 'b',
-      text_on: 'on',
-      text_off: 'off',
+      action_off: 'f49e1577-493d-4bae-a9ab-3b0f96a4ec52',
+      action_on: '94600cbe-2035-47d5-bd43-89ace5d59796',
+      text_on: 'Open',
+      text_off: 'Close',
     };
     const mockFuntion = jest.fn();
+    const mockToggle = jest.fn();
     await act(async () => {
-      tree = await renderer.create(wrapComponent(configuration, mockFuntion));
+      tree = await renderer.create(
+        wrapComponent(configuration, mockFuntion, mockToggle)
+      );
     });
     const instance = tree.root;
     const touchOpacity = instance.findAllByType(TouchableOpacity);
 
-    expect(touchOpacity).toHaveLength(2);
+    expect(touchOpacity).toHaveLength(3);
     await act(async () => {
       touchOpacity[0].props.onPress();
     });
+    expect(mockFuntion).toHaveBeenCalledWith({
+      ...configuration,
+      name: configuration.text_on,
+      action: configuration.action_on,
+      action_off: null,
+      template: 'OnOffSmartLockActionTemplate',
+      is_toggle: false,
+    });
+    expect(mockToggle).not.toHaveBeenCalled();
+
+    mockFuntion.mockClear();
+    await act(async () => {
+      touchOpacity[1].props.onPress();
+    });
     expect(mockFuntion).toHaveBeenCalledWith({
       ...configuration,
       name: configuration.text_off,
       action: configuration.action_off,
       action_on: null,
+      template: 'OnOffSmartLockActionTemplate',
+      is_toggle: false,
     });
+    expect(mockToggle).not.toHaveBeenCalled();
 
     mockFuntion.mockClear();
     await act(async () => {
-      touchOpacity[1].props.onPress();
+      touchOpacity[2].props.onPress();
     });
-    expect(mockFuntion).toHaveBeenCalledWith({
+    expect(mockFuntion).not.toHaveBeenCalled();
+    expect(mockToggle).toHaveBeenCalledWith({
       ...configuration,
-      name: configuration.text_on,
-      action: configuration.action_on,
-      action_off: null,
+      action_on_data: null,
+      action_off_data: null,
+      template: 'OnOffSmartLockActionTemplate',
+      is_toggle: true,
     });
+
+    const textTitle = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE && el.type === Text
+    );
+    expect(textTitle).toHaveLength(3);
+    expect(textTitle[0].props.children).toEqual('Lock - Open');
+    expect(textTitle[1].props.children).toEqual('Lock - Close');
+    expect(textTitle[2].props.children).toEqual('Lock - Toggle');
   });
 });

package/src/commons/ActionTemplate/__test__/SwitchButtonAction.test.js

@@ -8,11 +8,12 @@ import Text from '../../Text';
 import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import SwitchButtonAction from '../SwitchButtonAction';
 
-const wrapComponent = (configuration, onPress) => (
+const wrapComponent = (configuration, onPress, onPressToggle) => (
   <SCProvider initState={mockSCStore({})}>
     <SwitchButtonAction
       configuration={configuration}
       onPress={onPress}
+      onPressToggle={onPressToggle}
       title={'Cong tac 1'}
       template={'switch_button_action_template'}
     />
@@ -30,26 +31,64 @@ describe('Test SwitchButtonAction', () => {
       action_on: '94600cbe-2035-47d5-bd43-89ace5d59796',
     };
     const mockFuntion = jest.fn();
+    const mockToggle = jest.fn();
     await act(async () => {
-      tree = await renderer.create(wrapComponent(configuration, mockFuntion));
+      tree = await renderer.create(
+        wrapComponent(configuration, mockFuntion, mockToggle)
+      );
     });
     const instance = tree.root;
     const touchOpacity = instance.findAllByType(TouchableOpacity);
 
-    expect(touchOpacity).toHaveLength(2);
+    expect(touchOpacity).toHaveLength(3);
     await act(async () => {
       touchOpacity[0].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalledWith({
+      ...configuration,
+      name: configuration.text_on,
+      action: configuration.action_on,
+      action_off: null,
+      template: 'switch_button_action_template',
+      is_toggle: false,
+    });
+    expect(mockToggle).not.toHaveBeenCalled();
+
+    mockFuntion.mockClear();
+    await act(async () => {
       touchOpacity[1].props.onPress();
     });
-    expect(mockFuntion).toHaveBeenCalled();
+    expect(mockFuntion).toHaveBeenCalledWith({
+      ...configuration,
+      name: configuration.text_off,
+      action: configuration.action_off,
+      action_on: null,
+      template: 'switch_button_action_template',
+      is_toggle: false,
+    });
+    expect(mockToggle).not.toHaveBeenCalled();
+
+    mockFuntion.mockClear();
+    await act(async () => {
+      touchOpacity[2].props.onPress();
+    });
+    expect(mockFuntion).not.toHaveBeenCalled();
+    expect(mockToggle).toHaveBeenCalledWith({
+      ...configuration,
+      action_on_data: null,
+      action_off_data: null,
+      template: 'switch_button_action_template',
+      is_toggle: true,
+    });
 
     const textTitle = instance.findAll(
       (el) =>
         el.props.accessibilityLabel ===
           AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE && el.type === Text
     );
-    expect(textTitle).toHaveLength(2);
-    expect(textTitle[0].props.children).toEqual(['Cong tac 1', ' ', 'On']);
-    expect(textTitle[1].props.children).toEqual(['Cong tac 1', ' ', 'Off']);
+    expect(textTitle).toHaveLength(3);
+    expect(textTitle[0].props.children).toEqual('Cong tac 1 - On');
+    expect(textTitle[1].props.children).toEqual('Cong tac 1 - Off');
+    expect(textTitle[2].props.children).toEqual('Cong tac 1 - Toggle');
   });
 });

package/src/commons/ActionTemplate/__test__/index.test.js

@@ -39,7 +39,7 @@ describe('Test ActionTemplate', () => {
     },
   };
   let switchTemplate = {
-    title: '',
+    title: 'LED',
     template: 'switch_button_action_template',
     configuration: {
       text_on: 'On',
@@ -88,6 +88,7 @@ describe('Test ActionTemplate', () => {
       template: 'three_button_action_template',
     });
   });
+
   it('test render SwitchButtonAction', async () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent(switchTemplate));
@@ -99,6 +100,9 @@ describe('Test ActionTemplate', () => {
         el.props.accessibilityLabel ===
           AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE && el.type === Text
     );
-    expect(textTitle).toHaveLength(2);
+    expect(textTitle).toHaveLength(3);
+    expect(textTitle[0].props.children).toEqual('LED - On');
+    expect(textTitle[1].props.children).toEqual('LED - Off');
+    expect(textTitle[2].props.children).toEqual('LED - Toggle');
   });
 });

package/src/commons/ActionTemplate/index.js

@@ -20,19 +20,27 @@ const ActionTemplate = memo(({ device, item, onSelectAction }) => {
   const onClose = () => setVisible(false);
   const [actionName, setActionName] = useState();
 
-  const onPressSelectAction = useCallback(
-    (action) => {
+  const getActionData = useCallback(
+    (action, value) => {
       let actionData = null;
       if (device?.device_type === DEVICE_TYPE.ZIGBEE) {
-        const state = action?.action_on ? 1 : 0;
+        const state = value;
         actionData = { state: state };
         if (action?.allow_config_store_value && action?.config) {
           actionData.config_id = action.config;
           actionData.config_value = state;
         }
       } else if (device?.device_type === DEVICE_TYPE.LG_THINQ) {
-        actionData = { value: action?.action_on ? 1 : 0 };
+        actionData = { value };
       }
+      return actionData;
+    },
+    [device?.device_type]
+  );
+
+  const onPressSelectAction = useCallback(
+    (action) => {
+      const actionData = getActionData(action, action?.action_on ? 1 : 0);
       setVisible(false);
       setActionName(action?.name);
       onSelectAction &&
@@ -42,31 +50,78 @@ const ActionTemplate = memo(({ device, item, onSelectAction }) => {
           action: action?.action,
           data: actionData,
           template: action?.template,
+          is_toggle: action?.is_toggle,
+        });
+    },
+    [item?.index, onSelectAction, getActionData]
+  );
+
+  const onPressSelectToggle = useCallback(
+    (toggle) => {
+      const actionOnData = getActionData(toggle, 1);
+      const actionOffData = getActionData(toggle, 0);
+      setVisible(false);
+      setActionName(t('toggle'));
+      onSelectAction &&
+        onSelectAction({
+          index: item?.index,
+          action_on: toggle?.action_on,
+          action_on_data: actionOnData,
+          action_off: toggle?.action_off,
+          action_off_data: actionOffData,
+          config: toggle?.config,
+          is_on_values: toggle?.is_on_value,
+          template: toggle?.template,
+          is_toggle: toggle?.is_toggle,
         });
     },
-    [device?.device_type, item?.index, onSelectAction]
+    [item?.index, onSelectAction, getActionData, t]
   );
 
   const renderAction = useMemo(() => {
     switch (item.template) {
       case 'on_off_button_action_template':
-        return <OnOffButtonAction {...item} onPress={onPressSelectAction} />;
+        return (
+          <OnOffButtonAction
+            {...item}
+            onPress={onPressSelectAction}
+            onPressToggle={onPressSelectToggle}
+          />
+        );
       case 'one_button_action_template':
         return <OneButtonAction {...item} onPress={onPressSelectAction} />;
       case 'three_button_action_template':
         return <ThreeButtonAction {...item} onPress={onPressSelectAction} />;
       case 'OnOffSimpleActionTemplate':
-        return <OnOffSimpleAction {...item} onPress={onPressSelectAction} />;
+        return (
+          <OnOffSimpleAction
+            {...item}
+            onPress={onPressSelectAction}
+            onPressToggle={onPressSelectToggle}
+          />
+        );
       case 'curtain_action_template':
         return <CurtainAction {...item} onPress={onPressSelectAction} />;
       case 'OnOffSmartLockActionTemplate':
-        return <OnOffSmartLockAction {...item} onPress={onPressSelectAction} />;
+        return (
+          <OnOffSmartLockAction
+            {...item}
+            onPress={onPressSelectAction}
+            onPressToggle={onPressSelectToggle}
+          />
+        );
       case 'switch_button_action_template':
-        return <SwitchButtonAction {...item} onPress={onPressSelectAction} />;
+        return (
+          <SwitchButtonAction
+            {...item}
+            onPress={onPressSelectAction}
+            onPressToggle={onPressSelectToggle}
+          />
+        );
       default:
         return null;
     }
-  }, [item, onPressSelectAction]);
+  }, [item, onPressSelectAction, onPressSelectToggle]);
 
   return (
     <>

package/src/commons/Dashboard/MyUnit/index.js

@@ -1,40 +1,39 @@
+import { API, Colors, Images, SCConfig } from '../../../configs';
+import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
+import { Dimensions, TouchableOpacity, View } from 'react-native';
 import React, {
   memo,
   useCallback,
-  useEffect,
-  useState,
   useContext,
+  useEffect,
   useMemo,
   useRef,
+  useState,
 } from 'react';
-import { View, TouchableOpacity, Dimensions } from 'react-native';
+import { SCContext, useSCContextSelector } from '../../../context';
+import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
+import { useBluetoothConnection, useWatchConfigs } from '../../../hooks/IoT';
 import {
-  useNavigation,
-  useIsFocused,
   useFocusEffect,
+  useIsFocused,
+  useNavigation,
 } from '@react-navigation/native';
-import NetInfo from '@react-native-community/netinfo';
-import { BleManager } from 'react-native-ble-plx';
-import { API, Colors, Images, SCConfig } from '../../../configs';
-import Text from '../../Text';
-import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
 
-import styles from './styles';
-import { Section } from '../../Section';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { useUnitConnectRemoteDevices } from '../../../screens/Unit/hook/useUnitConnectRemoteDevices';
-import { useWatchConfigs, useBluetoothConnection } from '../../../hooks/IoT';
-import { SCContext, useSCContextSelector } from '../../../context';
 import { Action } from '../../../context/actionType';
-
+import { BleManager } from 'react-native-ble-plx';
 import Carousel from 'react-native-new-snap-carousel';
-import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
-import Routes from '../../../utils/Route';
+import FImage from '../../FImage';
 import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
+import NetInfo from '@react-native-community/netinfo';
+import Routes from '../../../utils/Route';
 import { STORAGE_KEY } from '../../../utils/Storage';
+import { Section } from '../../Section';
+import Text from '../../Text';
 import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
-import FImage from '../../FImage';
+import styles from './styles';
 import { usePrevious } from '../../../hooks';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { useUnitConnectRemoteDevices } from '../../../screens/Unit/hook/useUnitConnectRemoteDevices';
 
 let screenWidth = Dimensions.get('window').width;
 

package/src/commons/DevMode/Search.js

@@ -10,7 +10,7 @@ const Search = ({ onSearch }) => {
       <Image source={Images.search} style={styles.icon} />
       <TextInput
         style={styles.textInput}
-        placeholder={t('what_are_you_looking_for')}
+        placeholder={t('search')}
         onChangeText={onSearch}
       />
     </View>

package/src/commons/Device/RainningSensor/CurrentRainSensor.js

@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
+import { StyleSheet, View } from 'react-native';
 
-import { Colors } from '../../../configs';
 import { CircleView } from '../../../commons';
-import Text from '../../../commons/Text';
+import { Colors } from '../../../configs';
+import FImage from '../../FImage';
 import IconComponent from '../../IconComponent';
+import LinearGradient from 'react-native-linear-gradient';
+import Text from '../../../commons/Text';
 import images from '../../../configs/Images';
-import FImage from '../../FImage';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 const CurrentRainSensor = ({

package/src/commons/MediaPlayerDetail/MediaPlayerFull.js

@@ -45,37 +45,6 @@ const MediaPlayerFull = ({
     setIsFullScreen(!isFullScreen);
   }, [isFullScreen]);
 
-  const renderCamera = useMemo(() => {
-    return (
-      <VLCPlayer
-        autoAspectRatio={true}
-        videoAspectRatio={
-          isFullScreen
-            ? `${Constants.height}:${Constants.width}`
-            : `${Constants.width}:224`
-        }
-        source={{
-          initType: 2,
-          hwDecoderEnabled: 1,
-          hwDecoderForced: 1,
-          uri,
-          initOptions: [
-            '--no-audio',
-            '--rtsp-tcp',
-            '--network-caching=150',
-            '--rtsp-caching=150',
-            '--no-stats',
-            '--tcp-caching=150',
-            '--realrtsp-caching=150',
-          ],
-        }}
-        style={styles.video}
-        resizeMode={'cover'}
-        isLive={true}
-      />
-    );
-  }, [isFullScreen, uri]);
-
   useEffect(() => {
     setPaused(isPaused);
   }, [isPaused]);
@@ -137,7 +106,32 @@ const MediaPlayerFull = ({
             />
           </View>
         ) : (
-          renderCamera
+          <VLCPlayer
+            autoAspectRatio={true}
+            videoAspectRatio={
+              isFullScreen
+                ? `${Constants.height}:${Constants.width}`
+                : `${Constants.width}:224`
+            }
+            source={{
+              initType: 2,
+              hwDecoderEnabled: 1,
+              hwDecoderForced: 1,
+              uri,
+              initOptions: [
+                '--no-audio',
+                '--rtsp-tcp',
+                '--network-caching=150',
+                '--rtsp-caching=150',
+                '--no-stats',
+                '--tcp-caching=150',
+                '--realrtsp-caching=150',
+              ],
+            }}
+            style={styles.video}
+            resizeMode={'cover'}
+            isLive={true}
+          />
         )}
         <View style={styles.buttonView}>
           <View style={styles.buttonPause}>

package/src/commons/OneTapTemplate/StatesGridActionTemplate.js

@@ -14,24 +14,25 @@ const ActionItem = ({
   setVisible,
   template,
   item,
+  option,
 }) => {
   const handleSelectAction = useCallback(() => {
     let actionData = null;
-    const { allow_config_store_value, config, is_on_value } = item;
+    const { allow_config_store_value, config, is_on_value } = option;
     if (allow_config_store_value && config) {
       actionData = { config_id: config, config_value: is_on_value };
     }
-    setActionName(item.text);
+    setActionName(option.text);
 
     onSelectAction &&
       onSelectAction({
         index: item.index,
-        action: item.action,
+        action: option.action,
         data: actionData,
         template,
       });
     setVisible(false);
-  }, [item, setActionName, onSelectAction, template, setVisible]);
+  }, [item, option, setActionName, onSelectAction, template, setVisible]);
 
   return (
     <TouchableOpacity
@@ -39,7 +40,7 @@ const ActionItem = ({
       accessibilityLabel={AccessibilityLabel.STATES_GRID_ACTION_GRID_ITEM}
     >
       <Text type="H4" style={styles.textWithLine}>
-        {item.text}
+        {option.text}
       </Text>
     </TouchableOpacity>
   );
@@ -71,7 +72,8 @@ const StatesGridActionTemplate = ({ device, item, onSelectAction }) => {
           <View style={styles.modalContent}>
             {options.map((option, index) => (
               <ActionItem
-                item={option}
+                item={item}
+                option={option}
                 key={index}
                 setActionName={setActionName}
                 onSelectAction={onSelectAction}

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -91,9 +91,15 @@ describe('test Item', () => {
     expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScenarioName, {
       automate: {
         type: 'one_tap',
+        conditions: [
+          {
+            type: 'one_tap',
+          },
+        ],
         unit: undefined,
       },
       closeScreen: undefined,
+      unitId: undefined,
     });
     mockedNavigate.mockClear();
 

package/src/commons/SubUnit/OneTap/index.js

@@ -55,6 +55,11 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
         navigate(Routes.ScenarioName, {
           automate: {
             type: AUTOMATE_TYPE.ONE_TAP,
+            conditions: [
+              {
+                type: AUTOMATE_TYPE.ONE_TAP,
+              },
+            ],
             unit: unit?.id,
           },
           unitId: unit?.id,

package/src/commons/UnitSummary/ConfigHistoryChart/index.js

@@ -86,13 +86,11 @@ export const updateConfigChart = async (
       ];
     })
   );
-
-  setChartData(
-    configuration.map((config) => {
-      config.data = data_by_id[config.id];
-      return config;
-    })
-  );
+  const chartData = configuration.map((config) => {
+    config.data = data_by_id[config.id];
+    return config;
+  });
+  setChartData(chartData);
 
   data.configs.map((config) => {
     if (config.middle.not_ready.length > 0) {
@@ -113,10 +111,10 @@ export const updateConfigChart = async (
         middleDataByDay.sort((a, b) => (a.date > b.date ? 1 : -1)); // small to large
         const middleData = middleDataByDay.map((x) => x.data).flat();
         data_by_id[config.id] = [...config.head, ...middleData, ...config.tail];
-        setChartData((chartData) => {
-          const index = chartData.map((c) => c.id).indexOf(config.id);
-          chartData[index].data = data_by_id[config.id];
-          return [...chartData];
+        setChartData((prev) => {
+          const index = prev.map((c) => c.id).indexOf(config.id);
+          prev[index].data = data_by_id[config.id];
+          return [...prev];
         });
       });
     }

package/src/commons/Widgets/IFrameWithConfig/IFrameWithConfig.js

@@ -1,12 +1,12 @@
 import moment from 'moment';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 
+import API from '../../../configs/API';
 import { styles as useIframeStyle } from '../IFrame/IFrameStyles';
 import { styles } from './IFrameWithConfigStyles';
 import IconComponent from '../../IconComponent';
 import { useConfigGlobalState } from '../../../iot/states';
 import { useFetchConfigHistory } from '../../UnitSummary/ConfigHistoryChart';
-import API from '../../../configs/API';
 import WebView from 'react-native-webview';
 import { TouchableOpacity, View } from 'react-native';
 
@@ -26,7 +26,7 @@ const IFrameWithConfig = memo(
     const fetchDataDisplayHistory = useFetchConfigHistory(
       configuration?.history_configs,
       setChartData,
-      API.CONFIG.DISPLAY_HISTORY_V4()
+      API.CONFIG.DISPLAY_HISTORY_V5()
     );
 
     const postMessage = useCallback((message) => {

package/src/commons/Widgets/IFrameWithConfig/__tests__/IFrameWithConfig.test.js

@@ -252,7 +252,7 @@ describe('Test IFrame With Config', () => {
     });
 
     const mockAxios = new MockAdapter(api.axiosInstance);
-    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V4()).reply(200, {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V5()).reply(200, {
       configs: [
         {
           id: 1,