@eohjsc/react-native-smart-city 0.3.34 → 0.3.37

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

@@ -1,16 +1,25 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import ConfigHistoryChart from '../';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
-import HistoryChart from '../../../../commons/Device/HistoryChart';
 import MockAdapter from 'axios-mock-adapter';
-import { API } from '../../../../configs';
+
+import ConfigHistoryChart from '../';
+import HighchartsReactNative from '@eohjsc/highcharts';
 import api from '../../../../utils/Apis/axios';
+import { mockSCStore } from '../../../../context/mockStore';
+import { SCProvider } from '../../../../context';
+import API from '../../../../configs/API';
+import { getPusher } from '../../../../utils/Pusher';
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const wrapComponent = (configs = [1]) => (
+const wrapComponent = (configs = []) => (
   <SCProvider initState={mockSCStore({})}>
     <ConfigHistoryChart configs={configs} />
   </SCProvider>
@@ -21,36 +30,260 @@ describe('Test HistoryChart', () => {
 
   beforeAll(() => {
     jest.useFakeTimers();
-    mock.onGet(API.CONFIG.DISPLAY_HISTORY()).reply(200, [
-      {
-        config: 1,
-        data: [
+  });
+
+  beforeEach(() => {
+    getPusher().subscribe.mockClear();
+  });
+
+  const assertChartData = async (data) => {
+    const chart = tree.root.findByType(HighchartsReactNative);
+    expect(chart.props.options.series[0].data).toEqual(
+      data.map((i) => [i.x, i.y])
+    );
+  };
+
+  it('Test render null', async () => {
+    await act(() => {
+      tree = create(wrapComponent());
+    });
+    const instance = tree.root;
+    const HistoryCharts = instance.findAllByType(HighchartsReactNative);
+    expect(HistoryCharts).toHaveLength(0);
+  });
+
+  it('Test render chart empty data', async () => {
+    const response = {
+      data: {
+        configs: [
+          {
+            id: 1,
+            head: [],
+            tail: [],
+            middle: {
+              ready: [],
+              not_ready: [],
+              channel: '',
+            },
+          },
+        ],
+      },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY()).reply(200, response.data);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
+    });
+    await assertChartData([]);
+  });
+
+  it('Test render chart empty head data', async () => {
+    const response = {
+      data: {
+        configs: [
+          {
+            id: 1,
+            head: [],
+            tail: [{ x: 1, y: 2 }],
+            middle: {
+              ready: [],
+              not_ready: [],
+              channel: '',
+            },
+          },
+        ],
+      },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY()).reply(200, response.data);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
+    });
+    await assertChartData([{ x: 1, y: 2 }]);
+  });
+
+  it('Test render chart empty tail data', async () => {
+    const response = {
+      data: {
+        configs: [
           {
-            url: 'https://valuelog-history/test',
+            id: 1,
+            head: [{ x: 1, y: 2 }],
+            tail: [],
+            middle: {
+              ready: [],
+              not_ready: [],
+              channel: '',
+            },
           },
+        ],
+      },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY()).reply(200, response.data);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
+    });
+    await assertChartData([{ x: 1, y: 2 }]);
+  });
+
+  it('Test render chart merge head and tail data', async () => {
+    const response = {
+      data: {
+        configs: [
           {
-            x: '2022-06-16T00:00:00Z',
-            y: 5.0,
+            id: 1,
+            head: [{ x: 1, y: 2 }],
+            tail: [{ x: 2, y: 3 }],
+            middle: {
+              ready: [],
+              not_ready: [],
+              channel: '',
+            },
           },
         ],
       },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY()).reply(200, response.data);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
+    });
+    await assertChartData([
+      { x: 1, y: 2 },
+      { x: 2, y: 3 },
     ]);
-    mock.onGet('https://valuelog-history/test').reply(200, [
-      {
-        config_id: 1,
-        start_time: '2022-07-04T02:00:06.151765Z',
-        value_log: 0.0,
-        converted_value_log: 0.0,
+  });
+
+  it('Test render chart merge fetch ready data', async () => {
+    const cacheUrl = 'https://s3.eoh.io/xxx.json';
+    const response = {
+      data: {
+        configs: [
+          {
+            id: 1,
+            head: [{ x: 1, y: 2 }],
+            tail: [{ x: 2, y: 3 }],
+            middle: {
+              ready: [{ date: '2022-03-03', url: cacheUrl }],
+              not_ready: [],
+              channel: '',
+            },
+          },
+        ],
       },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY()).reply(200, response.data);
+    mock.onGet(cacheUrl).reply(200, [{ x: 3, y: 4 }]);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
+    });
+    await assertChartData([
+      { x: 1, y: 2 },
+      { x: 3, y: 4 },
+      { x: 2, y: 3 },
     ]);
   });
 
-  it('Test render', async () => {
-    await act(() => {
-      tree = create(wrapComponent());
+  it('Test render chart merge fetch not-ready data', async () => {
+    const cacheUrl = 'https://s3.eoh.io/xxx.json';
+    const response = {
+      data: {
+        channel: 'cache-xxx',
+        configs: [
+          {
+            id: 1,
+            head: [{ x: 1, y: 2 }],
+            tail: [{ x: 2, y: 3 }],
+            middle: {
+              ready: [],
+              not_ready: [{ date: '2022-03-03', url: cacheUrl }],
+            },
+          },
+        ],
+      },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY()).reply(200, response.data);
+    mock.onGet(cacheUrl).reply(200, [{ x: 3, y: 4 }]);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
     });
-    const instance = tree.root;
-    const HistoryCharts = instance.findAllByType(HistoryChart);
-    expect(HistoryCharts).toHaveLength(0);
+    await assertChartData([
+      { x: 1, y: 2 },
+      { x: 2, y: 3 },
+    ]);
+    await act(async () => {
+      await getPusher()
+        .subscribe('cache-xxx')
+        .trigger('caching-value-log-process', {
+          success: true,
+        });
+    });
+    await assertChartData([
+      { x: 1, y: 2 },
+      { x: 3, y: 4 },
+      { x: 2, y: 3 },
+    ]);
+  });
+
+  it('Test render chart merge fetch both ready and not-ready data', async () => {
+    const cacheUrl1 = 'https://s3.eoh.io/xxx1.json';
+    const cacheUrl2 = 'https://s3.eoh.io/xxx2.json';
+    const cacheUrl3 = 'https://s3.eoh.io/xxx3.json';
+    const cacheUrl4 = 'https://s3.eoh.io/xxx4.json';
+    const response = {
+      data: {
+        channel: 'cache-xxx',
+        configs: [
+          {
+            id: 1,
+            head: [{ x: 1, y: 2 }],
+            tail: [{ x: 2, y: 3 }],
+            middle: {
+              ready: [
+                { date: '2022-03-02', url: cacheUrl1 },
+                { date: '2022-03-04', url: cacheUrl3 },
+              ],
+              not_ready: [
+                { date: '2022-03-03', url: cacheUrl2 },
+                { date: '2022-03-05', url: cacheUrl4 },
+              ],
+            },
+          },
+        ],
+      },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY()).reply(200, response.data);
+    mock.onGet(cacheUrl1).reply(200, [{ x: 3, y: 4 }]);
+    mock.onGet(cacheUrl2).reply(200, [{ x: 4, y: 5 }]);
+    mock.onGet(cacheUrl3).reply(200, [{ x: 5, y: 6 }]);
+    mock.onGet(cacheUrl4).reply(200, [{ x: 7, y: 8 }]);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
+    });
+    await assertChartData([
+      { x: 1, y: 2 },
+      { x: 3, y: 4 },
+      { x: 5, y: 6 },
+      { x: 2, y: 3 },
+    ]);
+    await act(async () => {
+      await getPusher()
+        .subscribe('cache-xxx')
+        .trigger('caching-value-log-process', {
+          success: true,
+        });
+    });
+    await assertChartData([
+      { x: 1, y: 2 },
+      { x: 3, y: 4 },
+      { x: 4, y: 5 },
+      { x: 5, y: 6 },
+      { x: 7, y: 8 },
+      { x: 2, y: 3 },
+    ]);
   });
 });

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

@@ -4,7 +4,7 @@ import moment from 'moment';
 import { API } from '../../../configs';
 import HistoryChart from '../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../utils/Apis/axios';
-import { updateConfigChart } from '../ConfigHistoryChart';
+import { getPusher } from '../../../utils/Pusher';
 
 export const dateTimeType = {
   date: 'date',
@@ -12,6 +12,95 @@ export const dateTimeType = {
   dateTime: 'datetime',
 };
 
+const fetchDataS3 = async (url) => {
+  const { data } = await axiosGet(url, {
+    // todo Bang try not to use axiosGet
+    transformRequest: (rq, headers) => {
+      delete headers.Authorization;
+      return rq;
+    },
+  });
+  return data;
+};
+
+export const updateConfigChart = async (
+  success,
+  data,
+  configuration,
+  setChartData
+) => {
+  if (!success) {
+    return;
+  }
+
+  const data_by_id = {};
+  await Promise.all(
+    data.configs.map(async (config) => {
+      data_by_id[config.id] = [...config.head, ...config.tail];
+      let readyResult = [];
+      if (config.middle.ready.length) {
+        readyResult = await Promise.all(
+          config.middle.ready.map(async (item) => {
+            item.data = await fetchDataS3(item.url);
+            return item.data;
+          })
+        );
+      }
+      data_by_id[config.id] = [
+        ...config.head,
+        ...readyResult.flat(),
+        ...config.tail,
+      ];
+    })
+  );
+
+  setChartData(
+    configuration.map((config) => {
+      config.data = data_by_id[config.id];
+      return config;
+    })
+  );
+
+  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,
+          ];
+        })
+      );
+
+      setChartData(
+        configuration.map((config) => {
+          config.data = data_by_id[config.id];
+          return config;
+        })
+      );
+    });
+  }
+};
+
 const ConfigHistoryChart = memo(({ configs }) => {
   const [chartData, setChartData] = useState(configs);
   const [startDate, setStartDate] = useState(

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

@@ -6,8 +6,8 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 describe('Test Total Power Box', () => {
   let tree;
 
-  test('render Total Power Box', () => {
-    act(() => {
+  it('render Total Power Box', async () => {
+    await act(async () => {
       tree = renderer.create(<TotalPowerBox title={'titleTest'} />);
     });
     const instance = tree.root;

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

@@ -18,8 +18,8 @@ const wrapComponent = () => (
 describe('Test Total Power Consumption', () => {
   let tree;
 
-  test('render Total Power Consumption', async () => {
-    await act(() => {
+  it('render Total Power Consumption', async () => {
+    await act(async () => {
       tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;

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

@@ -6,8 +6,8 @@ import ViewButtonBottom from '../index';
 describe('Test TouchableScale', () => {
   let tree;
   const mockFunc = jest.fn();
-  test('create TouchableScale onPress', () => {
-    act(() => {
+  it('create TouchableScale onPress', async () => {
+    await act(async () => {
       tree = renderer.create(
         <ViewButtonBottom
           leftTitle={'leftTitle'}
@@ -21,7 +21,7 @@ describe('Test TouchableScale', () => {
     expect(textInputs.length).toBe(1);
 
     const button = instance.findByType(TouchableOpacity);
-    act(() => {
+    await act(async () => {
       button.props.onPress();
     });
     expect(mockFunc).toHaveBeenCalled();

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

@@ -32,7 +32,7 @@ describe('Test WheelDateTimePicker', () => {
     };
   });
 
-  test('test render with mode time', async () => {
+  it('test render with mode time', async () => {
     const time = moment().hour(10).minute(30).second(0);
     props.defaultValue = time;
     await act(async () => {
@@ -53,7 +53,7 @@ describe('Test WheelDateTimePicker', () => {
     expect(mockOnPicked).toBeCalledWith(time.hour(9).minute(27).valueOf());
   });
 
-  test('test render with mode datetime', async () => {
+  it('test render with mode datetime', async () => {
     const date = moment('2021-09-09T10:00:00.000Z')
       .hour(10)
       .minute(30)

package/src/commons/WrapParallaxScrollView/index.js

@@ -37,7 +37,7 @@ const WrapParallaxScrollView = ({
           hideRightPlus={hideRightPlus}
           idButtonMore={idButtonMore}
         />
-        <Text semibold style={styles.nameUnit}>
+        <Text numberOfLines={1} semibold style={styles.nameUnit}>
           {title}
         </Text>
         {contentBackground}
@@ -120,6 +120,7 @@ const styles = StyleSheet.create({
   },
   nameUnit: {
     left: 16,
+    width: '90%',
     fontStyle: 'normal',
     fontWeight: '600',
     fontSize: 24,

package/src/configs/API.js

@@ -44,9 +44,12 @@ const API = {
   },
   CHIP: {
     GET_CHIPS_FROM_UNIT: (id) => `/property_manager/get_chips/?unit_id=${id}`,
-    SEARCH_DEVICE: (id) => `/chip_manager/chips/${id}/search_device/`,
     SCAN_SENSOR: (id) => `/chip_manager/chips/${id}/scan_sensor/`,
     RENAME_DEVICES: (id) => `/chip_manager/chips/${id}/rename_devices/`,
+    ZIGBEE: {
+      ACCEPT_NEW_DEVICE: (id) =>
+        `/iot/modules/zigbee/chips/${id}/search_device/`,
+    },
   },
   DEVICE: {
     SENSOR_DETAIL: (id) => `/property_manager/sensors/${id}/`,
@@ -60,6 +63,7 @@ const API = {
     REMOTE_CONTROL_OPTIONS: (id) =>
       `/property_manager/sensors/${id}/remote_control_options/`,
     TRIGGER_ACTION: (id) => `/property_manager/sensors/${id}/quick_action/`,
+    SETUP: (id) => `/property_manager/devices/${id}/setup/`,
     CHECK_CONNECTION: (id) =>
       `/property_manager/sensors/${id}/check_connection/`,
     UPDATE_SENSOR: (unit_id, station_id, id) =>
@@ -80,7 +84,7 @@ const API = {
     ACCESS: (id) => `/property_manager/shared_sensors/${id}/access/`,
   },
   CONFIG: {
-    DISPLAY_HISTORY: () => '/property_manager/configs/display_history_v2/',
+    DISPLAY_HISTORY: () => '/chip_manager/configs/value_history_v3/',
   },
   AUTOMATE: {
     ACTION_ONE_TAP: (id) => `/property_manager/automate/${id}/action_one_tap/`,

package/src/configs/AccessibilityLabel.js

@@ -527,6 +527,9 @@ export default {
   // OnOffButtonAction
   ON_OFF_BUTTON_ACTION_TITLE: 'ON_OFF_BUTTON_ACTION_TITLE',
 
+  // OnOffSimpleAction
+  ON_OFF_SIMPLE_ACTION_ON: 'ON_OFF_SIMPLE_ACTION_ON',
+
   // Add New Device LG
   ADD_NEW_DEVICE_LG_ADD: 'ADD_NEW_DEVICE_LG_ADD',
   ADD_NEW_DEVICE_LG_THEN_SELECT: 'ADD_NEW_DEVICE_LG_THEN_SELECT',
@@ -626,4 +629,6 @@ export default {
   BUTTON_CANCEL_EDIT_ACTION_LIST: 'BUTTON_CANCEL_EDIT_ACTION_LIST',
   BUTTON_SAVE_EDIT_ACTION_LIST: 'BUTTON_SAVE_EDIT_ACTION_LIST',
   BUTTON_REMOVE_EDIT_ACTION_LIST: 'BUTTON_REMOVE_EDIT_ACTION_LIST',
+  //ButtonWrapper
+  BUTTON_WRAPPER: 'BUTTON_WRAPPER',
 };

package/src/configs/Constants.js

@@ -81,6 +81,8 @@ export const DEVICE_TYPE = {
   HANET: 'HANET',
   ZIGBEE: 'ZIGBEE',
   GOOGLE_HOME: 'GOOGLE_HOME',
+  WIFI_DEVICE: 'WIFI_DEVICE',
+  MODBUS: 'MODBUS',
 };
 
 const marginItem = 12;

package/src/hooks/Common/__test__/useAndroidTranslucentStatusBar.test.js

@@ -31,7 +31,7 @@ describe('test useAndroidTranslucentStatusBar', () => {
     mockAddListener.mockClear();
   });
 
-  test('test useAndroidTranslucentStatusBar android', () => {
+  it('test useAndroidTranslucentStatusBar android', async () => {
     Platform.OS = 'android';
     renderHook(
       () => useAndroidTranslucentStatusBar({ background: '#ffffff' }),
@@ -42,7 +42,7 @@ describe('test useAndroidTranslucentStatusBar', () => {
     expect(mockAddListener).not.toBeCalled();
   });
 
-  test('test useAndroidTranslucentStatusBar ios', () => {
+  it('test useAndroidTranslucentStatusBar ios', async () => {
     Platform.OS = 'ios';
     renderHook(
       () => useAndroidTranslucentStatusBar({ background: '#ffffff' }),

package/src/hooks/Common/__test__/useStatusbar.test.js

@@ -6,22 +6,22 @@ describe('test useStatusBarPreview', () => {
     Platform = require('react-native').Platform;
   });
 
-  it('test useStatusBarPreview on android', () => {
+  it('test useStatusBarPreview on android', async () => {
     Platform.OS = 'ios';
     useStatusBarPreview();
   });
 
-  it('test useStatusBarPreview on iOS', () => {
+  it('test useStatusBarPreview on iOS', async () => {
     Platform.OS = 'android';
     useStatusBarPreview();
   });
 
-  it('test useHiddenStatusBar on android', () => {
+  it('test useHiddenStatusBar on android', async () => {
     Platform.OS = 'ios';
     useHiddenStatusBar(false);
   });
 
-  it('test useHiddenStatusBar on iOS', () => {
+  it('test useHiddenStatusBar on iOS', async () => {
     Platform.OS = 'android';
     useHiddenStatusBar(true);
   });

package/src/hooks/Common/__test__/useTranslations.test.js

@@ -16,7 +16,7 @@ const mockUseContext = jest.fn().mockImplementation(() => ({
 React.useContext = mockUseContext;
 
 describe('Test useTranslations', () => {
-  it('test useTranslations', () => {
+  it('test useTranslations', async () => {
     // eslint-disable-next-line no-unused-vars
     const { result } = renderHook(() => useTranslations(), { wrapper });
   });

package/src/hooks/IoT/__test__/useRemoteControl.test.js

@@ -58,7 +58,7 @@ describe('Test useRemoteControl', () => {
     const { result: sendRemoteCommand } = renderHook(() => useRemoteControl(), {
       wrapper,
     });
-    act(() => {
+    await act(async () => {
       sendRemoteCommand.current(sensor, action, data, userId);
     });
     expect(sendCommandOverInternet).not.toBeCalled();
@@ -73,7 +73,7 @@ describe('Test useRemoteControl', () => {
     });
 
     sendCommandOverBluetooth.mockImplementation(async () => true);
-    act(() => {
+    await act(async () => {
       sendRemoteCommand.current(sensor, action, data, userId);
     });
     expect(sendCommandOverBluetooth).toBeCalledWith(
@@ -96,7 +96,7 @@ describe('Test useRemoteControl', () => {
       throw SEND_COMMAND_OVER_BLUETOOTH_FAIL;
     });
     sendCommandOverInternet.mockImplementation(async () => true);
-    act(() => {
+    await act(async () => {
       sendRemoteCommand.current(sensor, action, data, userId);
     });
     expect(sendCommandOverBluetooth).toBeCalledWith(
@@ -125,7 +125,7 @@ describe('Test useRemoteControl', () => {
       throw 'ANOTHER_ERROR';
     });
     sendCommandOverInternet.mockImplementation(async () => true);
-    act(() => {
+    await act(async () => {
       sendRemoteCommand.current(sensor, action, data, userId);
     });
     expect(sendCommandOverBluetooth).toBeCalledWith(
@@ -147,7 +147,7 @@ describe('Test useRemoteControl', () => {
     });
 
     sendCommandOverInternet.mockImplementation(async () => true);
-    act(() => {
+    await act(async () => {
       sendRemoteCommand.current(sensor, action, data, userId);
     });
     expect(sendCommandOverInternet).toBeCalledWith(
@@ -169,7 +169,7 @@ describe('Test useRemoteControl', () => {
     });
 
     sendCommandOverHomeAssistant.mockImplementation(async () => true);
-    act(() => {
+    await act(async () => {
       sendRemoteCommand.current(sensor, action, data, userId);
     });
     expect(sendCommandOverHomeAssistant).toBeCalledWith(
@@ -191,7 +191,7 @@ describe('Test useRemoteControl', () => {
     });
 
     sendCommandOverLGThinq.mockImplementation(async () => true);
-    act(() => {
+    await act(async () => {
       sendRemoteCommand.current(sensor, action, data, userId);
     });
     expect(sendCommandOverBluetooth).not.toBeCalled();

package/src/hooks/IoT/useRemoteControl.js

@@ -18,7 +18,6 @@ const useRemoteControl = () => {
     async (sensor, action, data, userId) => {
       // No action, raise not authorized
       let result = false;
-
       if (!action) {
         ToastBottomHelper.error(
           t('your_account_has_not_been_authorized_to_control')