@eohjsc/react-native-smart-city 0.4.46 → 0.4.48

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

@@ -0,0 +1,289 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
+import ConfigHistoryChart from '../';
+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';
+import Highcharts from '../../../Highcharts';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = (configs = []) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConfigHistoryChart configs={configs} />
+  </SCProvider>
+);
+
+describe('Test HistoryChart', () => {
+  let tree;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  beforeEach(() => {
+    getPusher().subscribe.mockClear();
+  });
+
+  const assertChartData = async (data) => {
+    const chart = tree.root.findByType(Highcharts);
+    expect(chart.props.options.series[0].data).toEqual(
+      data.map((i) => [i.x, i.y])
+    );
+  };
+
+  it('Test render null', async () => {
+    await act(async () => {
+      tree = create(wrapComponent());
+    });
+    const instance = tree.root;
+    const HistoryCharts = instance.findAllByType(Highcharts);
+    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_V3()).reply(200, response.data);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
+    });
+    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_V3()).reply(200, response.data);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
+    });
+    await assertChartData([{ x: 1, y: 2 }]);
+  });
+
+  it('Test render chart empty tail data', async () => {
+    const response = {
+      data: {
+        configs: [
+          {
+            id: 1,
+            head: [{ x: 1, y: 2 }],
+            tail: [],
+            middle: {
+              ready: [],
+              not_ready: [],
+              channel: '',
+            },
+          },
+        ],
+      },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, response.data);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
+    });
+    await assertChartData([{ x: 1, y: 2 }]);
+  });
+
+  it('Test render chart merge head and tail data', async () => {
+    const response = {
+      data: {
+        configs: [
+          {
+            id: 1,
+            head: [{ x: 1, y: 2 }],
+            tail: [{ x: 2, y: 3 }],
+            middle: {
+              ready: [],
+              not_ready: [],
+              channel: '',
+            },
+          },
+        ],
+      },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, response.data);
+    const configs = [{ id: 1 }];
+    await act(async () => {
+      tree = await create(wrapComponent(configs));
+      jest.runAllTimers();
+    });
+    await assertChartData([
+      { x: 1, y: 2 },
+      { x: 2, y: 3 },
+    ]);
+  });
+
+  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_V3()).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));
+      jest.runAllTimers();
+    });
+    await assertChartData([
+      { x: 1, y: 2 },
+      { x: 3, y: 4 },
+      { x: 2, y: 3 },
+    ]);
+  });
+
+  it('Test render chart merge fetch not-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: [],
+              not_ready: [{ date: '2022-03-03', url: cacheUrl }],
+              channel: 'cache-xxx',
+            },
+          },
+        ],
+      },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).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));
+      jest.runAllTimers();
+    });
+    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: {
+        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 },
+              ],
+              channel: 'cache-xxx',
+            },
+          },
+        ],
+      },
+    };
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).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));
+      jest.runAllTimers();
+    });
+    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

@@ -1,6 +1,8 @@
-import { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import moment from 'moment';
 
 import { API } from '../../../configs';
+import HistoryChart from '../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../utils/Apis/axios';
 import { getPusher } from '../../../utils/Pusher';
 
@@ -99,6 +101,7 @@ export const updateConfigChart = async (
           ...config.middle.not_ready,
           ...config.middle.ready,
         ];
+
         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];
@@ -111,3 +114,58 @@ export const updateConfigChart = async (
     }
   });
 };
+
+let timeoutId;
+
+const ConfigHistoryChart = ({ configs }) => {
+  const [chartData, setChartData] = useState(configs);
+  const [startDate, setStartDate] = useState(
+    moment().subtract(1, 'days').valueOf()
+  );
+  const [endDate, setEndDate] = useState(moment().valueOf());
+
+  useEffect(() => {
+    const fetchData = async () => {
+      let params = new URLSearchParams();
+      let configuration = configs.filter((item) => item.id);
+      configuration.map((item) => {
+        params.append('configs', item.id);
+      });
+      params.append(
+        'date_from',
+        moment(startDate).utc().format('YYYY-MM-DD HH:mm:ss')
+      );
+      params.append(
+        'date_to',
+        moment(endDate).utc().format('YYYY-MM-DD HH:mm:ss')
+      );
+      const { success, data } = await axiosGet(
+        API.CONFIG.DISPLAY_HISTORY_V3(),
+        {
+          params,
+        }
+      );
+      updateConfigChart(success, data, configuration, setChartData);
+    };
+
+    timeoutId = setTimeout(fetchData, 200);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [startDate, endDate, configs]);
+
+  if (!chartData.length) {
+    return false;
+  }
+
+  return (
+    <HistoryChart
+      configuration={{ type: 'line_chart', date_format: 'DD.MM' }}
+      datas={chartData}
+      setStartDate={setStartDate}
+      setEndDate={setEndDate}
+    />
+  );
+};
+
+export default ConfigHistoryChart;

package/src/commons/WrapParallaxScrollView/index.js

@@ -88,7 +88,6 @@ const WrapParallaxScrollView = ({
           hideRight={hideRight}
           hideRightPlus={hideRightPlus}
           idButtonMore={idButtonMore}
-          iconBackStyle={styles.iconBackStyle}
         />
       </View>
     ),
@@ -137,7 +136,4 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: 40,
   },
-  iconBackStyle: {
-    tintColor: Colors.Black,
-  },
 });

package/src/configs/AccessibilityLabel.js

@@ -126,8 +126,6 @@ export default {
   HORIZONTAL_BAR_CHART: 'HORIZONTAL_BAR_CHART',
   DEVICE_SHOW_REMOVE: 'DEVICE_SHOW_REMOVE',
   DEVICE_SHOW_RENAME: 'DEVICE_SHOW_RENAME',
-  PIN_BUTTON: 'PIN_BUTTON',
-  STAR_BUTTON: 'STAR_BUTTON',
 
   // common
   COMMON_LOADING_ANIMATION: 'COMMON_LOADING_ANIMATION',
@@ -675,7 +673,6 @@ export default {
   GATEWAY_CONNECTION_METHODS_TEXT: 'GATEWAY_CONNECTION_METHODS_TEXT',
   //Notification
   CUSTOM_TEXT: 'CUSTOM_TEXT',
-  NotificationItemText: 'NotificationItemText',
   //ButtonWrapper
   BUTTON_WRAPPER: 'BUTTON_WRAPPER',
   //devmod

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { act, renderHook } from '@testing-library/react-hooks';
 import { useRemoteControl } from '../index';
 import {
-  // BLUETOOOH_DEVICE_UNSTABLE,
+  BLUETOOOH_DEVICE_UNSTABLE,
   sendCommandOverBluetooth,
   SEND_COMMAND_OVER_BLUETOOTH_FAIL,
 } from '../../../iot/RemoteControl/Bluetooth';
@@ -35,7 +35,6 @@ describe('Test useRemoteControl', () => {
     sendCommandOverBluetooth.mockClear();
     sendCommandOverHomeAssistant.mockClear();
     sendCommandOverInternet.mockClear();
-    jest.useFakeTimers();
 
     sensor = {
       id: 1,
@@ -255,58 +254,58 @@ describe('Test useRemoteControl', () => {
     expect(sendCommandOverBluetooth).not.toBeCalled();
   });
 
-  // it('test send remote command via bluetooth case when bluetooh device unstable', async () => {
-  //   action.command_prefer_over_bluetooth = true;
-  //   action.command_prefer_over_internet = false;
-  //   const { result: sendRemoteCommand } = renderHook(() => useRemoteControl(), {
-  //     wrapper,
-  //   });
+  it('test send remote command via bluetooth case when bluetooh device unstable', async () => {
+    action.command_prefer_over_bluetooth = true;
+    action.command_prefer_over_internet = false;
+    const { result: sendRemoteCommand } = renderHook(() => useRemoteControl(), {
+      wrapper,
+    });
 
-  //   sendCommandOverBluetooth.mockImplementation(() => {
-  //     return BLUETOOOH_DEVICE_UNSTABLE;
-  //   });
-  //   await act(async () => {
-  //     await sendRemoteCommand.current(sensor, action, data, userId);
-  //   });
-  //   await flushPromises();
-  //   expect(sendCommandOverBluetooth).toBeCalledWith(
-  //     sensor,
-  //     action,
-  //     data,
-  //     userId
-  //   );
-  //   expect(sendCommandOverBluetooth).toBeCalledTimes(6);
-  // });
+    sendCommandOverBluetooth.mockImplementation(() => {
+      return BLUETOOOH_DEVICE_UNSTABLE;
+    });
+    await act(async () => {
+      await sendRemoteCommand.current(sensor, action, data, userId);
+    });
+    await flushPromises();
+    expect(sendCommandOverBluetooth).toBeCalledWith(
+      sensor,
+      action,
+      data,
+      userId
+    );
+    expect(sendCommandOverBluetooth).toBeCalledTimes(6);
+  });
 
   // eslint-disable-next-line max-len
-  // it('test send remote command via bluetooth case when bluetooh device unstable 5 times will switch send internet', async () => {
-  //   action.command_prefer_over_bluetooth = true;
-  //   action.command_prefer_over_internet = false;
-  //   const { result: sendRemoteCommand } = renderHook(() => useRemoteControl(), {
-  //     wrapper,
-  //   });
+  it('test send remote command via bluetooth case when bluetooh device unstable 5 times will switch send internet', async () => {
+    action.command_prefer_over_bluetooth = true;
+    action.command_prefer_over_internet = false;
+    const { result: sendRemoteCommand } = renderHook(() => useRemoteControl(), {
+      wrapper,
+    });
 
-  //   sendCommandOverBluetooth.mockImplementation(() => {
-  //     return BLUETOOOH_DEVICE_UNSTABLE;
-  //   });
-  //   sendCommandOverInternet.mockImplementation(async () => true);
-  //   await act(async () => {
-  //     await sendRemoteCommand.current(sensor, action, data, userId);
-  //   });
-  //   await flushPromises();
-  //   expect(sendCommandOverBluetooth).toBeCalledWith(
-  //     sensor,
-  //     action,
-  //     data,
-  //     userId
-  //   );
-  //   expect(sendCommandOverInternet).toBeCalledWith(
-  //     sensor,
-  //     action,
-  //     data,
-  //     'bluetooth'
-  //   );
-  //   expect(sendCommandOverBluetooth).toBeCalledTimes(6);
-  //   expect(sendCommandOverInternet).toBeCalledTimes(1);
-  // });
+    sendCommandOverBluetooth.mockImplementation(() => {
+      return BLUETOOOH_DEVICE_UNSTABLE;
+    });
+    sendCommandOverInternet.mockImplementation(async () => true);
+    await act(async () => {
+      await sendRemoteCommand.current(sensor, action, data, userId);
+    });
+    await flushPromises();
+    expect(sendCommandOverBluetooth).toBeCalledWith(
+      sensor,
+      action,
+      data,
+      userId
+    );
+    expect(sendCommandOverInternet).toBeCalledWith(
+      sensor,
+      action,
+      data,
+      'bluetooth'
+    );
+    expect(sendCommandOverBluetooth).toBeCalledTimes(6);
+    expect(sendCommandOverInternet).toBeCalledTimes(1);
+  });
 });

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

@@ -40,8 +40,7 @@ describe('Test useWatchConfigs', () => {
     renderHook(() => useWatchConfigs([1]), {
       wrapper,
     });
-    // NOTE: Hinh will fix it later
-    expect(watchMultiConfigs).not.toBeCalledWith([1]);
-    expect(unwatchMultiConfigs).not.toBeCalledWith([1]);
+    expect(watchMultiConfigs).toBeCalledWith([1]);
+    expect(unwatchMultiConfigs).toBeCalledWith([1]);
   });
 });

package/src/navigations/AutomateStack.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useEffect, useContext } from 'react';
-import { Platform, TouchableOpacity } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/core';
 import { Icon } from '@ant-design/react-native';
@@ -44,10 +44,7 @@ const AutomateStack = memo(() => {
         title: t('smart'),
         headerLeft: () => (
           <TouchableOpacity style={Theme.menuIcon} onPress={toggleDrawer}>
-            <Icon
-              name={Platform.OS === 'android' ? 'menu-unfold' : 'menu'}
-              color={Colors.Black}
-            />
+            <Icon name={'menu'} color={Colors.Black} />
           </TouchableOpacity>
         ),
         headerTitleAlign: 'left',

package/src/navigations/NotificationStack.js

@@ -1,44 +1,18 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 
 import Routes from '../utils/Route';
 import Notification from '../screens/Notification';
 import { screenOptions } from './utils';
-import { TouchableOpacity } from 'react-native';
-import { Colors, Theme } from '../configs';
-import { useNavigation } from '@react-navigation/native';
-import { Icon } from '@ant-design/react-native';
-import { useTranslations } from '../hooks/Common/useTranslations';
-import { Platform } from 'react-native';
 
 const Stack = createStackNavigator();
 
 const NotificationStack = memo(() => {
-  const navigation = useNavigation();
-  const t = useTranslations();
-
-  const toggleDrawer = useCallback(() => {
-    navigation.toggleDrawer();
-  }, [navigation]);
-
   return (
     <Stack.Navigator
       screenOptions={{
         ...screenOptions,
-        headerShown: true,
-        title: t('notifications'),
-        headerLeft: () => (
-          <TouchableOpacity style={Theme.menuIcon} onPress={toggleDrawer}>
-            <Icon
-              name={Platform.OS === 'android' ? 'menu-unfold' : 'menu'}
-              color={Colors.Black}
-            />
-          </TouchableOpacity>
-        ),
-        headerTitleAlign: 'left',
-        headerStyle: {
-          backgroundColor: Colors.Gray2,
-        },
+        headerShown: false,
       }}
     >
       <Stack.Screen name={Routes.Notification} component={Notification} />

package/src/navigations/SharedStack.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
-import { TouchableOpacity, StyleSheet, Platform } from 'react-native';
+import { TouchableOpacity, StyleSheet } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { Icon } from '@ant-design/react-native';
 import { useTranslations } from '../hooks/Common/useTranslations';
@@ -29,13 +29,7 @@ const SharedStack = memo(() => {
               onPress={() => (params?.isMainSource ? toggleDrawer() : goBack())}
             >
               <Icon
-                name={
-                  params?.isMainSource
-                    ? Platform.OS === 'android'
-                      ? 'menu-unfold'
-                      : 'menu'
-                    : 'arrow-left'
-                }
+                name={params?.isMainSource ? 'menu' : 'arrow-left'}
                 color={Colors.Black}
               />
             </TouchableOpacity>

package/src/navigations/UnitStack.js

@@ -1,5 +1,5 @@
 import React, { memo, useContext, useEffect } from 'react';
-import { AppState, Platform, 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';
@@ -172,7 +172,7 @@ export const UnitStack = memo((props) => {
         headerTitleAlign: 'center',
         headerBackImage: () => (
           <IconOutline
-            name={Platform.OS === 'android' ? 'left-square' : 'left'}
+            name="left"
             size={27}
             color={Colors.Black}
             style={styles.icLeft}