@eohjsc/react-native-smart-city 0.3.48 → 0.3.50

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.48",
+  "version": "0.3.50",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -64,9 +64,9 @@
   "license": "MIT",
   "licenseFilename": "LICENSE",
   "peerDependencies": {
-    "@react-native-community/clipboard": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "@react-native-community/clipboard": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -183,7 +183,7 @@
     "react-native-pager-view": "^5.4.1",
     "react-native-parallax-scroll-view": "^0.21.3",
     "react-native-parsed-text": "^0.0.22",
-    "react-native-permissions": "3.0.3",
+    "react-native-permissions": "3.4.0",
     "react-native-popover-view": "^4.0.3",
     "react-native-progress": "^5.0.0",
     "react-native-reanimated": "1.10.1",

package/src/Images/DevMode/file_copy.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 1.59863H4C2.9 1.59863 2 2.49863 2 3.59863V17.5986H4V3.59863H16V1.59863ZM15 5.59863H8C6.9 5.59863 6.01 6.49863 6.01 7.59863L6 21.5986C6 22.6986 6.89 23.5986 7.99 23.5986H19C20.1 23.5986 21 22.6986 21 21.5986V11.5986L15 5.59863ZM8 21.5986V7.59863H14V12.5986H19V21.5986H8Z" fill="#808080"/>
+</svg>

package/src/commons/Action/__test__/ItemQuickAction.test.js

@@ -12,13 +12,6 @@ class Sensor {}
 
 factory.define('Sensor', Sensor, {});
 
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-  };
-});
-
 const mockSendRemoteControl = jest.fn();
 jest.mock('../../../hooks/IoT', () => {
   return {

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -75,9 +75,8 @@ const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
         break;
       case DEVICE_TYPE.LG_THINQ:
         setTempIsOn((prev) => !prev);
-        if (action_data) {
-          await doAction(action_data, JSON.stringify({ value: !isOn }));
-        }
+        action_data &&
+          (await doAction(action_data, JSON.stringify({ value: !isOn })));
         break;
       default:
         if (action_data) {
@@ -97,11 +96,10 @@ const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
         break;
     }
     updateStatusFromPusher();
-    if (sensor?.is_managed_by_backend) {
-      if (config && sensor.device_type === DEVICE_TYPE.LG_THINQ) {
-        watchMultiConfigs([config]);
-      }
-    }
+    sensor?.is_managed_by_backend &&
+      config &&
+      sensor.device_type === DEVICE_TYPE.LG_THINQ &&
+      watchMultiConfigs([config]);
   }, [
     allow_config_store_value,
     config,

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -30,14 +30,19 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
   const [valueBrightness, setValueBrightness] = useState(getPercent());
   const [isFirstTime, setIsFirstTime] = useState(true);
 
+  // TODO Thinh: remove action_brightness_data
   const onChangeBrightness = useCallback(
     async (value) => {
       await doAction(
-        configuration?.action_brightness_data,
+        configuration?.action_brightness_data || configuration?.action_data,
         JSON.stringify({ value_brness: value })
       );
     },
-    [configuration?.action_brightness_data, doAction]
+    [
+      configuration?.action_brightness_data,
+      configuration?.action_data,
+      doAction,
+    ]
   );
 
   useEffect(() => {

package/src/commons/ActionGroup/__test__/ColorPickerTemplate.test.js

@@ -12,14 +12,7 @@ const mockDoAction = jest.fn();
 jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: jest.fn(),
 }));
-const mockSetState = jest.fn();
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useState: jest.fn((init) => [init, mockSetState]),
-    memo: (x) => x,
-  };
-});
+
 const wrapComponent = (actionGroup, doAction, sensor) => (
   <SCProvider initState={mockSCStore({})}>
     <ColorPickerTemplate

package/src/commons/ActionGroup/__test__/OnOffTemplate.test.js

@@ -118,7 +118,7 @@ describe('Test OnOffTemplate', () => {
     });
     const instance = tree.root;
     const template = instance.findAllByType(OnOffButtonTemplate);
-    expect(template).toHaveLength(0);
+    expect(template).toHaveLength(1);
   });
 
   it('render with wrong template', async () => {
@@ -227,6 +227,7 @@ describe('Test OnOffTemplate', () => {
   });
 
   it('render with template OnOffSimpleActionTemplate with just action_data lg_thinq', async () => {
+    jest.useFakeTimers();
     actionGroup = {
       template: 'OnOffSimpleActionTemplate',
       configuration: {
@@ -242,6 +243,7 @@ describe('Test OnOffTemplate', () => {
       tree = await create(
         wrapComponent(actionGroup, mockDoAction, {
           device_type: DEVICE_TYPE.LG_THINQ,
+          is_managed_by_backend: true,
         })
       );
     });
@@ -253,12 +255,108 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await template[0].props.triggerAction();
     });
+    jest.runAllTimers();
     expect(mockDoAction).toHaveBeenCalledWith(
       action_data,
       JSON.stringify({ value: false })
     );
   });
 
+  it('render with template OnOffSimpleActionTemplate with action_data zigbee trigger off', async () => {
+    actionGroup = {
+      template: 'OnOffSimpleActionTemplate',
+      configuration: {
+        config: 5,
+        action_on_data: action_on_data,
+        action_off_data: action_off_data,
+        icon: 'up',
+        is_on_value: [2],
+        allow_config_store_value: true,
+      },
+      title: 'Turn on / off',
+    };
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      tree = await create(
+        wrapComponent(actionGroup, mockDoAction, {
+          device_type: DEVICE_TYPE.ZIGBEE,
+        })
+      );
+    });
+    const instance = tree.root;
+    const template = instance.findAllByType(OnOffSimpleTemplate);
+
+    await act(async () => {
+      await template[0].props.triggerAction();
+    });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      action_off_data,
+      JSON.stringify({ state: 0, config_id: 5, config_value: 0 })
+    );
+  });
+
+  it('render with template OnOffSimpleActionTemplate with action_data zigbee trigger on', async () => {
+    actionGroup = {
+      template: 'OnOffSimpleActionTemplate',
+      configuration: {
+        config: 5,
+        action_on_data: action_on_data,
+        action_off_data: action_off_data,
+        icon: 'up',
+        is_on_value: [1],
+        allow_config_store_value: true,
+      },
+      title: 'Turn on / off',
+    };
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      tree = await create(
+        wrapComponent(actionGroup, mockDoAction, {
+          device_type: DEVICE_TYPE.ZIGBEE,
+        })
+      );
+    });
+    const instance = tree.root;
+    const template = instance.findAllByType(OnOffSimpleTemplate);
+
+    await act(async () => {
+      await template[0].props.triggerAction();
+    });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      action_on_data,
+      JSON.stringify({ state: 1, config_id: 5, config_value: 1 })
+    );
+  });
+
+  it('render with template OnOffSimpleActionTemplate with zigbee device wrong action_data', async () => {
+    actionGroup = {
+      template: 'OnOffSimpleActionTemplate',
+      configuration: {
+        config: 5,
+        action_data: action_data,
+        icon: 'up',
+        is_on_value: [2],
+        allow_config_store_value: true,
+      },
+      title: 'Turn on / off',
+    };
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      tree = await create(
+        wrapComponent(actionGroup, mockDoAction, {
+          device_type: DEVICE_TYPE.ZIGBEE,
+        })
+      );
+    });
+    const instance = tree.root;
+    const template = instance.findAllByType(OnOffSimpleTemplate);
+
+    await act(async () => {
+      await template[0].props.triggerAction();
+    });
+    expect(mockDoAction).not.toHaveBeenCalled();
+  });
+
   it('render with template OnOffSimpleActionTemplate disabled', async () => {
     actionGroup = {
       template: 'OnOffSimpleActionTemplate',

package/src/commons/ActionGroup/__test__/SliderRangeTemplate.test.js

@@ -12,14 +12,7 @@ const mockDoAction = jest.fn();
 jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: jest.fn(),
 }));
-const mockSetState = jest.fn();
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useState: jest.fn((init) => [init, mockSetState]),
-    memo: (x) => x,
-  };
-});
+
 const wrapComponent = (actionGroup, doAction, sensor) => (
   <SCProvider initState={mockSCStore({})}>
     <SliderRangeTemplate
@@ -34,7 +27,7 @@ describe('Test SliderRangeTemplate', () => {
   let wrapper;
   let actionGroup;
 
-  const action_brightness_data = {
+  const action_data = {
     color: '#00979D',
     command_prefer_over_bluetooth: false,
     command_prefer_over_googlehome: false,
@@ -49,7 +42,7 @@ describe('Test SliderRangeTemplate', () => {
       template: 'ColorPickerTemplate',
       configuration: {
         config: 5,
-        action_brightness_data: action_brightness_data,
+        action_data,
       },
       title: '',
     };
@@ -65,7 +58,31 @@ describe('Test SliderRangeTemplate', () => {
     const silderRange = instance.findAllByType(SliderRange);
     expect(silderRange).toHaveLength(1);
     await act(async () => {
-      await silderRange[0].props.onSlidingComplete();
+      await silderRange[0].props.onSlidingComplete(50);
+    });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      action_data,
+      JSON.stringify({ value_brness: 50 })
+    );
+  });
+
+  it('render template SliderRangeTemplate with data backward compatible', async () => {
+    actionGroup.configuration.action_data = undefined;
+    actionGroup.configuration.action_brightness_data = action_data;
+    useConfigGlobalState.mockImplementation(() => [{}, jest.fn()]);
+    const sensor = { is_managed_by_backend: true, name: 'Sensor' };
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const silderRange = instance.findAllByType(SliderRange);
+    expect(silderRange).toHaveLength(1);
+    await act(async () => {
+      await silderRange[0].props.onSlidingComplete(50);
     });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      action_data,
+      JSON.stringify({ value_brness: 50 })
+    );
   });
 });

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import CurtainAction from '../CurtainAction';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (configuration, onPress) => (
+  <SCProvider initState={mockSCStore({})}>
+    <CurtainAction configuration={configuration} onPress={onPress} />
+  </SCProvider>
+);
+
+describe('Test CurtainAction', () => {
+  let tree;
+
+  it('test onPress curtain action', async () => {
+    const configuration = {
+      open_action: 'a',
+      close_action: 'b',
+      stop_action: 'c',
+      text1: '1',
+      text2: '2',
+      text3: '3',
+    };
+    const mockFuntion = jest.fn();
+    await act(async () => {
+      tree = renderer.create(wrapComponent(configuration, mockFuntion));
+    });
+    const instance = tree.root;
+    const touchOpacity = instance.findAllByType(TouchableOpacity);
+
+    expect(touchOpacity).toHaveLength(3);
+    await act(async () => {
+      touchOpacity[0].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalledWith({
+      name: configuration.text1,
+      action: configuration.close_action,
+      template: undefined,
+    });
+
+    mockFuntion.mockClear();
+    await act(async () => {
+      touchOpacity[1].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalledWith({
+      name: configuration.text2,
+      action: configuration.stop_action,
+      template: undefined,
+    });
+
+    mockFuntion.mockClear();
+    await act(async () => {
+      touchOpacity[2].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalledWith({
+      name: configuration.text3,
+      action: configuration.open_action,
+      template: undefined,
+    });
+  });
+});

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import OnOffSmartLockAction from '../OnOffSmartLockAction';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (configuration, onPress) => (
+  <SCProvider initState={mockSCStore({})}>
+    <OnOffSmartLockAction configuration={configuration} onPress={onPress} />
+  </SCProvider>
+);
+
+describe('Test OnOffSmartLockAction', () => {
+  let tree;
+
+  it('test onPress smart lock action', async () => {
+    const configuration = {
+      action_on: 'a',
+      action_off: 'b',
+      text_on: 'on',
+      text_off: 'off',
+    };
+    const mockFuntion = jest.fn();
+    await act(async () => {
+      tree = renderer.create(wrapComponent(configuration, mockFuntion));
+    });
+    const instance = tree.root;
+    const touchOpacity = instance.findAllByType(TouchableOpacity);
+
+    expect(touchOpacity).toHaveLength(2);
+    await act(async () => {
+      touchOpacity[0].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalledWith({
+      ...configuration,
+      name: configuration.text_off,
+      action: configuration.action_off,
+      action_on: null,
+    });
+
+    mockFuntion.mockClear();
+    await act(async () => {
+      touchOpacity[1].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalledWith({
+      ...configuration,
+      name: configuration.text_on,
+      action: configuration.action_on,
+      action_off: null,
+    });
+  });
+});

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

@@ -8,13 +8,6 @@ import SelectActionCard from '../../SelectActionCard';
 import Modal from 'react-native-modal';
 import ThreeButtonAction from '../ThreeButtonAction';
 
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-  };
-});
-
 const mockOnSelectAction = jest.fn();
 
 const wrapComponent = (data) => (

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

@@ -12,7 +12,7 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 import SharedUnit from '../../Unit/SharedUnit';
 import { fetchWithCache } from '../../../utils/Apis/axios';
 
-const MyPinnedSharedUnit = () => {
+const MyPinnedSharedUnit = ({ refreshing }) => {
   const t = useTranslations();
   const isFocused = useIsFocused();
   const navigation = useNavigation();
@@ -35,10 +35,10 @@ const MyPinnedSharedUnit = () => {
   }, [setSharedUnits]);
 
   useEffect(() => {
-    if (isFocused) {
+    if (isFocused || refreshing) {
       fetchSharedUnitDashboard();
     }
-  }, [fetchSharedUnitDashboard, isFocused]);
+  }, [fetchSharedUnitDashboard, isFocused, refreshing]);
 
   return (
     <>

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -32,7 +32,7 @@ jest.mock('react-redux', () => ({
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
-    <MyUnit />
+    <MyUnit refreshing={true} />
   </SCProvider>
 );
 

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

@@ -13,6 +13,7 @@ import {
   useFocusEffect,
 } from '@react-navigation/native';
 import NetInfo from '@react-native-community/netinfo';
+import { BleManager } from 'react-native-ble-plx';
 import { API, Colors, Images } from '../../../configs';
 import Text from '../../Text';
 import { fetchWithCache } from '../../../utils/Apis/axios';
@@ -21,7 +22,7 @@ import styles from './styles';
 import { Section } from '../../Section';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useUnitConnectRemoteDevices } from '../../../screens/Unit/hook/useUnitConnectRemoteDevices';
-import { useWatchConfigs } from '../../../hooks/IoT';
+import { useWatchConfigs, useBluetoothConnection } from '../../../hooks/IoT';
 import { SCContext } from '../../../context';
 import { Action } from '../../../context/actionType';
 
@@ -31,7 +32,10 @@ import Routes from '../../../utils/Route';
 import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
 
 let screenWidth = Dimensions.get('window').width;
-const MyUnit = () => {
+
+const bleManager = new BleManager();
+
+const MyUnit = ({ refreshing }) => {
   const t = useTranslations();
   const isFocused = useIsFocused();
   const navigation = useNavigation();
@@ -39,6 +43,15 @@ const MyUnit = () => {
   const [slideIndex, setSlideIndex] = useState(0);
   const { setAction } = useContext(SCContext);
 
+  const {
+    permissionsRequested: bluetoothPermRequested,
+    requestPerm: requestBluetoothPerm,
+  } = useBluetoothConnection();
+
+  useEffect(() => {
+    !bluetoothPermRequested && requestBluetoothPerm();
+  }, [bluetoothPermRequested, requestBluetoothPerm]);
+
   const fetchMyUnitDashboard = useCallback(async () => {
     await fetchWithCache(API.UNIT.MY_UNITS(), {}, (response) => {
       const { success, data } = response;
@@ -47,8 +60,10 @@ const MyUnit = () => {
   }, [setMyUnits]);
 
   useEffect(() => {
-    isFocused && fetchMyUnitDashboard();
-  }, [fetchMyUnitDashboard, isFocused]);
+    if (isFocused || refreshing) {
+      fetchMyUnitDashboard();
+    }
+  }, [fetchMyUnitDashboard, isFocused, refreshing]);
 
   useFocusEffect(
     useCallback(() => {
@@ -60,6 +75,17 @@ const MyUnit = () => {
     }, [])
   );
 
+  useFocusEffect(
+    useCallback(() => {
+      const subscription = bleManager.onStateChange((state) => {
+        const connected = state === 'PoweredOn';
+        setAction(Action.SET_BLUETOOTH_STATE, connected);
+      }, true);
+      return () => subscription.remove();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+  );
+
   useUnitConnectRemoteDevices(myUnits[slideIndex]);
 
   const configsNeedWatching = useMemo(() => {

package/src/commons/DevMode/Styles/ItemStyles.js

@@ -21,7 +21,7 @@ export default StyleSheet.create({
   },
   countItem: {
     fontSize: 12,
-    fontWeight: 400,
+    fontWeight: '400',
     color: Colors.Neutral.Neutral5,
   },
 });

package/src/commons/Device/HorizontalBarChart.js

@@ -163,7 +163,6 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.White,
     justifyContent: 'center',
     flex: 1,
-    marginRight: 24,
   },
   chartStyle: {
     backgroundColor: Colors.White,

package/src/commons/Device/PMSensor/PMSensorIndicatior.js

@@ -9,12 +9,15 @@ const keyExtractor = (item) => item.id.toString();
 const PMSensorIndicatior = memo(({ data = [], style }) => {
   const renderItem = useCallback(
     ({ item }) => {
+      const getValue = ['', null, undefined, NaN].includes(item?.value)
+        ? '--'
+        : item?.value;
       return (
         <QualityIndicatorItem
           key={item.id.toString()}
           color={item.color}
           standard={item.standard}
-          value={item.value || '--'}
+          value={getValue}
           evaluate={item.evaluate}
           measure={item.measure}
           style={style}

package/src/commons/FourButtonFilterHistory/__test__/FourButtonFilterHistory.test.js

@@ -11,13 +11,6 @@ const wrapComponent = (props) => (
   </SCProvider>
 );
 
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-  };
-});
-
 it('test', async () => {
   const mockSetGroupBy = jest.fn();
   let tree;

package/src/commons/Header/HeaderCustom.js

@@ -7,6 +7,7 @@ import { useNavigation } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { notImplemented } from '../../utils/Utils';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const HeaderCustom = ({
   title = '',
@@ -25,6 +26,7 @@ const HeaderCustom = ({
   wrapTitleStyle,
   iconBackStyle,
   isCanBack = true,
+  customTitle = false,
 }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
@@ -53,12 +55,16 @@ const HeaderCustom = ({
         </TouchableOpacity>
       )}
       <View style={[styles.wrapTitle, wrapTitleStyle]}>
-        <Text
-          style={[styles.title, titleStyles, !isShowRight && styles.title2]}
-          numberOfLines={1}
-        >
-          {title}
-        </Text>
+        {!customTitle ? (
+          <Text
+            style={[styles.title, titleStyles, !isShowRight && styles.title2]}
+            numberOfLines={1}
+          >
+            {title}
+          </Text>
+        ) : (
+          customTitle
+        )}
       </View>
 
       <View style={styles.viewRight}>
@@ -77,6 +83,7 @@ const HeaderCustom = ({
               style={styles.buttonBack}
               onPress={handleShowMenuAction}
               ref={refMenuAction}
+              accessibilityLabel={AccessibilityLabel.MENU_POPPER_MORE}
             >
               <Icon name={'more'} size={27} color={Colors.Black} />
             </TouchableOpacity>

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

@@ -5,13 +5,6 @@ import { mockSCStore } from '../../../context/mockStore';
 import { TouchableOpacity } from 'react-native';
 import MediaPlay from '../index';
 
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-  };
-});
-
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
     <MediaPlay {...props} />