@eohjsc/react-native-smart-city 0.3.49 → 0.3.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.49",
+  "version": "0.3.51",
   "description": "TODO",
   "main": "index.js",
   "files": [

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__/OnOffTemplate.test.js

@@ -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

@@ -27,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,
@@ -42,7 +42,7 @@ describe('Test SliderRangeTemplate', () => {
       template: 'ColorPickerTemplate',
       configuration: {
         config: 5,
-        action_brightness_data: action_brightness_data,
+        action_data,
       },
       title: '',
     };
@@ -58,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/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,7 +9,9 @@ const keyExtractor = (item) => item.id.toString();
 const PMSensorIndicatior = memo(({ data = [], style }) => {
   const renderItem = useCallback(
     ({ item }) => {
-      const getValue = item?.value >= 0 ? item?.value : '--';
+      const getValue = ['', null, undefined, NaN].includes(item?.value)
+        ? '--'
+        : item?.value;
       return (
         <QualityIndicatorItem
           key={item.id.toString()}

package/src/commons/Processing/styles.js

@@ -1,10 +1,8 @@
 import { StyleSheet } from 'react-native';
 import { Colors, Constants } from '../../configs';
-import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 export default StyleSheet.create({
   wrap: {
-    paddingTop: getStatusBarHeight(true),
     backgroundColor: Colors.White,
     width: '100%',
     height: '100%',

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -5,9 +5,10 @@ import {
   Animated,
   View,
   Platform,
+  SafeAreaView,
 } from 'react-native';
 import { ActivityIndicator } from '@ant-design/react-native';
-import { getStatusBarHeight, isIphoneX } from 'react-native-iphone-x-helper';
+import { isIphoneX } from 'react-native-iphone-x-helper';
 
 import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
@@ -49,7 +50,8 @@ const WrapHeaderScrollable = ({
   );
 
   return (
-    <View style={[styles.container, headerAniStyle]}>
+    // NOTE: We have problem if don't use SafeAreaView in here. Hinh will remove it later
+    <SafeAreaView style={[styles.container, headerAniStyle]}>
       <HeaderAni
         scrollY={animatedScrollYValue}
         contentHeight={contentHeight}
@@ -103,7 +105,7 @@ const WrapHeaderScrollable = ({
           </View>
         )}
       </Animated.ScrollView>
-    </View>
+    </SafeAreaView>
   );
 };
 
@@ -112,7 +114,6 @@ export default memo(WrapHeaderScrollable);
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingTop: getStatusBarHeight() + 10,
   },
   scrollView: {
     flex: 1,

package/src/commons/UnitSummary/ConfigHistoryChart/__test__/ConfigHistoryChart.test.js

@@ -66,6 +66,7 @@ describe('Test HistoryChart', () => {
     const configs = [{ id: 1 }];
     await act(async () => {
       tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
     });
     await assertChartData([]);
   });
@@ -91,6 +92,7 @@ describe('Test HistoryChart', () => {
     const configs = [{ id: 1 }];
     await act(async () => {
       tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
     });
     await assertChartData([{ x: 1, y: 2 }]);
   });
@@ -116,6 +118,7 @@ describe('Test HistoryChart', () => {
     const configs = [{ id: 1 }];
     await act(async () => {
       tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
     });
     await assertChartData([{ x: 1, y: 2 }]);
   });
@@ -141,6 +144,7 @@ describe('Test HistoryChart', () => {
     const configs = [{ id: 1 }];
     await act(async () => {
       tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
     });
     await assertChartData([
       { x: 1, y: 2 },
@@ -171,6 +175,7 @@ describe('Test HistoryChart', () => {
     const configs = [{ id: 1 }];
     await act(async () => {
       tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
     });
     await assertChartData([
       { x: 1, y: 2 },
@@ -183,7 +188,6 @@ describe('Test HistoryChart', () => {
     const cacheUrl = 'https://s3.eoh.io/xxx.json';
     const response = {
       data: {
-        channel: 'cache-xxx',
         configs: [
           {
             id: 1,
@@ -192,6 +196,7 @@ describe('Test HistoryChart', () => {
             middle: {
               ready: [],
               not_ready: [{ date: '2022-03-03', url: cacheUrl }],
+              channel: 'cache-xxx',
             },
           },
         ],
@@ -202,6 +207,7 @@ describe('Test HistoryChart', () => {
     const configs = [{ id: 1 }];
     await act(async () => {
       tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
     });
     await assertChartData([
       { x: 1, y: 2 },
@@ -228,7 +234,6 @@ describe('Test HistoryChart', () => {
     const cacheUrl4 = 'https://s3.eoh.io/xxx4.json';
     const response = {
       data: {
-        channel: 'cache-xxx',
         configs: [
           {
             id: 1,
@@ -243,6 +248,7 @@ describe('Test HistoryChart', () => {
                 { date: '2022-03-03', url: cacheUrl2 },
                 { date: '2022-03-05', url: cacheUrl4 },
               ],
+              channel: 'cache-xxx',
             },
           },
         ],
@@ -256,6 +262,7 @@ describe('Test HistoryChart', () => {
     const configs = [{ id: 1 }];
     await act(async () => {
       tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
     });
     await assertChartData([
       { x: 1, y: 2 },

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

@@ -61,46 +61,44 @@ export const updateConfigChart = async (
     })
   );
 
-  if (data.channel) {
-    const channel = getPusher().subscribe(data.channel);
-    // eslint-disable-next-line no-shadow
-    channel.bind('caching-value-log-process', async ({ success }) => {
-      await Promise.all(
-        data.configs.map(async (config) => {
-          if (config.middle.not_ready.length) {
-            await Promise.all(
-              config.middle.not_ready.map(async (item) => {
-                item.data = await fetchDataS3(item.url);
-              })
-            );
-          }
-          const middleDataByDay = [
-            ...config.middle.not_ready,
-            ...config.middle.ready,
-          ];
-
-          // sort
-          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,
-          ];
-        })
-      );
+  data.configs.map((config) => {
+    if (config.middle.not_ready.length > 0) {
+      const channel = getPusher().subscribe(config.middle.channel);
+      channel.bind('caching-value-log-process', async ({ success }) => {
+        await Promise.all(
+          config.middle.not_ready.map((item) =>
+            (async () => {
+              item.data = await fetchDataS3(item.url);
+            })()
+          )
+        );
+        const middleDataByDay = [
+          ...config.middle.not_ready,
+          ...config.middle.ready,
+        ];
 
-      setChartData(
-        configuration.map((config) => {
-          config.data = data_by_id[config.id];
-          return config;
-        })
-      );
-    });
-  }
+        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];
+        });
+      });
+    }
+  });
 };
 
+const areEqual = ({ configs: oldConfigs }, { configs: newConfigs }) => {
+  return (
+    JSON.stringify(oldConfigs.map((config) => config.id).sort()) ===
+    JSON.stringify(newConfigs.map((config) => config.id).sort())
+  );
+};
+
+let timeoutId;
+
 const ConfigHistoryChart = memo(({ configs }) => {
   const [chartData, setChartData] = useState(configs);
   const [startDate, setStartDate] = useState(
@@ -128,7 +126,11 @@ const ConfigHistoryChart = memo(({ configs }) => {
       });
       updateConfigChart(success, data, configuration, setChartData);
     };
-    fetchData();
+
+    timeoutId = setTimeout(fetchData, 200);
+    return () => {
+      clearTimeout(timeoutId);
+    };
   }, [startDate, endDate, configs]);
 
   if (!chartData.length) {
@@ -143,6 +145,6 @@ const ConfigHistoryChart = memo(({ configs }) => {
       setEndDate={setEndDate}
     />
   );
-});
+}, areEqual);
 
 export default ConfigHistoryChart;

package/src/configs/Constants.js

@@ -254,6 +254,7 @@ export const NOTIFICATION_TYPES = {
   FIRE: 'FIRE',
   SOS: 'SOS',
   FILTER_WATER: 'FILTER_WATER',
+  LOW_BATTERY: 'LOW_BATTERY',
 };
 
 export const ACTIVITY_LOG_TYPES = {
@@ -276,6 +277,7 @@ export const PROBLEM_CODE = {
   UNKNOWN_ERROR: 'UNKNOWN_ERROR',
   CANCEL_ERROR: 'CANCEL_ERROR',
   ADDRESS_CHANGING: 'Please wait 30s for changing address.',
+  READ_CONFIG_PERMISSION: 'read_config_permission_error',
 };
 
 export const DATE_TIME_FORMAT = {

package/src/configs/SCConfig.js

@@ -86,6 +86,7 @@ LocaleConfig.locales.en = {
 };
 
 const SCDefaultConfig = {
+  ENV: 'PRODUCTION',
   apiRoot: 'https://backend.eoh.io/api',
   GOOGLE_MAP_API_KEY: 'AIzaSyCF1Q-WFXCnfAHhOeXRF9WK7eT-TtxO9ss',
   LG_CLIENT_ID: '2b85aee334f046848341547894bb7c4e',
@@ -100,6 +101,7 @@ const SCDefaultConfig = {
 
 export class SCConfig {
   static apiRoot = SCDefaultConfig.apiRoot;
+  static ENV = SCDefaultConfig.ENV;
   static GOOGLE_MAP_API_KEY = SCDefaultConfig.GOOGLE_MAP_API_KEY;
   static LG_CLIENT_ID = SCDefaultConfig.LG_CLIENT_ID;
   static LG_REDIRECT_URI_APP = SCDefaultConfig.LG_REDIRECT_URI_APP;
@@ -115,6 +117,7 @@ export class SCConfig {
 export const initSCConfig = (config) => {
   api.setBaseURL(config.apiRoot ?? SCDefaultConfig.apiRoot);
   LocaleConfig.defaultLocale = config.language ?? SCConfig.language;
+  SCConfig.ENV = config.ENV ?? SCConfig.ENV;
   SCConfig.language = config.language ?? SCConfig.language;
   SCConfig.apiRoot = config.apiRoot ?? SCDefaultConfig.apiRoot;
   SCConfig.GOOGLE_MAP_API_KEY =

package/src/navigations/AddDeviceStack.js

@@ -4,7 +4,6 @@ import React, { memo } from 'react';
 import AddCommonSelectUnit from '../screens/AddCommon/SelectUnit';
 import AddCommonSelectSubUnit from '../screens/AddCommon/SelectSubUnit';
 import AddNewDevice from '../screens/AddNewDevice';
-import ConnectingDevices from '../screens/AddNewDevice/ConnectingDevices';
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
@@ -27,10 +26,6 @@ export const AddDeviceStack = memo(() => {
         component={AddCommonSelectSubUnit}
       />
       <Stack.Screen name={Route.AddNewDevice} component={AddNewDevice} />
-      <Stack.Screen
-        name={Route.ConnectingDevices}
-        component={ConnectingDevices}
-      />
     </Stack.Navigator>
   );
 });