@eohjsc/react-native-smart-city 0.4.41 → 0.4.42

package/src/commons/HeaderAni/index.js

@@ -1,12 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import { Icon } from '@ant-design/react-native';
-import {
-  TouchableOpacity,
-  StyleSheet,
-  Animated,
-  View,
-  Platform,
-} from 'react-native';
+import { TouchableOpacity, StyleSheet, Animated, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
@@ -101,11 +95,7 @@ const HeaderAni = memo(
             onPress={onPressLeft}
             accessibilityLabel={AccessibilityLabel.ICON_BACK}
           >
-            <Icon
-              name={Platform.OS === 'android' ? 'left-square' : 'left'}
-              size={27}
-              color={Colors.Gray9}
-            />
+            <Icon name={'left'} size={27} color={Colors.Gray9} />
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>
         </Animated.View>

package/src/commons/MediaPlayerDetail/__test__/MediaPlayerFull.test.js

@@ -1,10 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import MediaPlayerFull from '../MediaPlayerFull';
 
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
     <MediaPlayerFull {...props} />
@@ -14,7 +22,14 @@ const wrapComponent = (props) => (
 describe('Test MediaPlayerFull', () => {
   let tree;
 
+  afterEach(() => {
+    useState.mockClear();
+  });
+
   it('Test render', async () => {
+    useState.mockImplementationOnce((init) => [false, mockSetState]);
+    useState.mockImplementationOnce((init) => [false, mockSetState]);
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
     await act(async () => {
       tree = await create(
         wrapComponent({
@@ -29,13 +44,18 @@ describe('Test MediaPlayerFull', () => {
     await act(async () => {
       TouchableOpacities[0].props.onPress();
     });
+    expect(mockSetState).toBeCalledWith(false);
     await act(async () => {
       TouchableOpacities[1].props.onPress();
       TouchableOpacities[2].props.onPress();
     });
+    expect(mockSetState).toBeCalledWith(true);
   });
 
   it('Test render 2', async () => {
+    useState.mockImplementationOnce((init) => [true, mockSetState]);
+    useState.mockImplementationOnce((init) => [true, mockSetState]);
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
     await act(async () => {
       tree = await create(
         wrapComponent({
@@ -52,9 +72,11 @@ describe('Test MediaPlayerFull', () => {
     await act(async () => {
       TouchableOpacities[0].props.onPress();
     });
+    expect(mockSetState).toBeCalledWith(false);
     await act(async () => {
       TouchableOpacities[1].props.onPress();
       TouchableOpacities[2].props.onPress();
     });
+    expect(mockSetState).toBeCalledWith(true);
   });
 });

package/src/commons/OneTapTemplate/__test__/NumberUpDownActionTemplate.test.js

@@ -11,12 +11,11 @@ import SelectActionCard from '../../SelectActionCard';
 
 const mockOnSelectAction = jest.fn();
 
-const wrapComponent = (item, params = {}) => (
+const wrapComponent = (item) => (
   <SCProvider initState={mockSCStore({})}>
     <NumberUpDownActionTemplate
       item={item}
       onSelectAction={mockOnSelectAction}
-      {...params}
     />
   </SCProvider>
 );
@@ -36,9 +35,9 @@ describe('Test NumberUpDownActionTemplate', () => {
     },
   };
 
-  const renderOptions = async (params = {}) => {
+  const renderOptions = async () => {
     await act(async () => {
-      tree = await create(wrapComponent(data, params));
+      tree = await create(wrapComponent(data));
     });
     const instance = tree.root;
     const card = instance.findByType(SelectActionCard);
@@ -99,7 +98,6 @@ describe('Test NumberUpDownActionTemplate', () => {
     });
     expect(mockOnSelectAction).toHaveBeenCalled();
   });
-
   it('Test config null show valueDefault', async () => {
     data.configuration.config = null;
     const instance = await renderOptions();

package/src/commons/Processing/index.js

@@ -149,7 +149,6 @@ const Processing = ({
             onLeftClick={goBack}
             rightTitle={t('ok')}
             onRightClick={handleOk}
-            wrapStyle={styles.wrapViewButton}
           />
         </View>
       </ModalCustom>

package/src/commons/Processing/styles.js

@@ -51,7 +51,4 @@ export default StyleSheet.create({
   txtCenter: {
     textAlign: 'center',
   },
-  wrapViewButton: {
-    position: 'relative',
-  },
 });

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

@@ -60,7 +60,6 @@ const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
   const activateAt = activate_at
     ? timeDifference(new Date(), moment(activate_at), true)
     : null;
-
   return (
     <TouchableWithoutFeedback
       onPress={onPressItem || goToDetail}

package/src/commons/Unit/HeaderUnit/index.js

@@ -4,11 +4,9 @@ import { Icon } from '@ant-design/react-native';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
-import { Colors, Device, Images } from '../../../configs';
+import { Colors, Device } from '../../../configs';
 import Text from '../../Text';
 import { AccessibilityLabel } from '../../../configs/Constants';
-import { Image } from 'react-native';
-import { Platform } from 'react-native';
 
 const HeaderUnit = memo(
   ({
@@ -49,7 +47,11 @@ const HeaderUnit = memo(
           style={styles.btnLeft}
           onPress={onPressBack}
         >
-          <Image source={Images.arrowLeft} style={styles.iconBack} />
+          <Icon
+            name={'left'}
+            size={27}
+            color={transparent ? Colors.White : Colors.Black}
+          />
         </TouchableOpacity>
         <View style={[styles.boxTitle, styleBoxTitle]}>
           {title && (
@@ -68,7 +70,7 @@ const HeaderUnit = memo(
                 onPress={onPressAdd}
               >
                 <Icon
-                  name={Platform.OS === 'android' ? 'plus-square' : 'plus'}
+                  name={'plus'}
                   size={27}
                   color={transparent ? Colors.White : Colors.Black}
                 />
@@ -81,10 +83,9 @@ const HeaderUnit = memo(
               accessibilityLabel={idButtonMore}
             >
               <Icon
-                name={'ellipsis'}
+                name={'more'}
                 size={27}
                 color={transparent ? Colors.White : Colors.Black}
-                style={styles.iconMore}
               />
             </TouchableOpacity>
           </View>
@@ -145,12 +146,4 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: Colors.Gray4,
   },
-  iconMore: {
-    transform: [{ rotate: '90deg' }],
-  },
-  iconBack: {
-    tintColor: Colors.White,
-    width: 16,
-    height: 20,
-  },
 });

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 HighchartsReactNative from '@eohjsc/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(HighchartsReactNative);
+    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(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_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/configs/AccessibilityLabel.js

@@ -647,7 +647,6 @@ export default {
   TOUCHABLE_ACTION_ADD_ITEM_FAVORITE: 'TOUCHABLE_ACTION_ADD_ITEM_FAVORITE',
   TOUCHABLE_ACTION_ADD_ITEM_AUTOMATE_FAVORITE:
     'TOUCHABLE_ACTION_ADD_ITEM_AUTOMATE_FAVORITE',
-  BUTTON_SELECT_FAVORITES: 'BUTTON_SELECT_FAVORITES',
 
   // Smart Account
   LOGIN_SMART_ACCOUNT: 'LOGIN_SMART_ACCOUNT',