@eohjsc/react-native-smart-city 0.3.91 → 0.3.93

package/src/screens/Device/components/VisualChart.js

@@ -9,6 +9,8 @@ import { StyleSheet, View } from 'react-native';
 import { Colors } from '../../../configs';
 import ChartAggregationOption from '../../../commons/ChartAggregationOption';
 import Text from '../../../commons/Text';
+import { CHART_GROUP_TYPE } from '../../../configs/Constants';
+import { getDateRangeOfWeek } from '../../../utils/Utils';
 
 const groupByTime = (format) => (x) => x[0].format(format);
 
@@ -26,6 +28,9 @@ const groupByFunc = {
   hour: groupByHour,
 };
 
+const roundNumber = (number, round = 1) =>
+  Math.round(number * 10 ** round) / 10 ** round;
+
 export const convertLineChartData = (data = [], valueType = 'raw', groupBy) => {
   let arr = [];
   for (let i = 0; i < data.length; i++) {
@@ -38,12 +43,44 @@ export const convertLineChartData = (data = [], valueType = 'raw', groupBy) => {
     arr = _.groupBy(arr, groupByFunc[groupBy]);
     arr = Object.entries(arr).map((x) => {
       if (valueType === 'sum') {
-        return [moment(x[0]).valueOf(), _.sum(x[1].map((i) => i[1]))];
+        if (groupBy === CHART_GROUP_TYPE.WEEK) {
+          const dataX = x[0].split('-');
+          return [
+            getDateRangeOfWeek(dataX[1], dataX[0]),
+            roundNumber(_.sum(x[1].map((i) => i[1]))),
+          ];
+        }
+        if (
+          groupBy === CHART_GROUP_TYPE.MONTH ||
+          groupBy === CHART_GROUP_TYPE.YEAR
+        ) {
+          return [x[0], roundNumber(_.sum(x[1].map((i) => i[1])))];
+        }
+        return [
+          moment(x[0]).valueOf(),
+          roundNumber(_.sum(x[1].map((i) => i[1]))),
+        ];
       }
       if (valueType === 'avg') {
+        if (groupBy === CHART_GROUP_TYPE.WEEK) {
+          const dataX = x[0].split('-');
+          return [
+            getDateRangeOfWeek(dataX[1], dataX[0]),
+            roundNumber(_.sum(x[1].map((i) => i[1])) / x[1].length),
+          ];
+        }
+        if (
+          groupBy === CHART_GROUP_TYPE.MONTH ||
+          groupBy === CHART_GROUP_TYPE.YEAR
+        ) {
+          return [
+            x[0],
+            roundNumber(_.sum(x[1].map((i) => i[1])) / x[1].length),
+          ];
+        }
         return [
           moment(x[0]).valueOf(),
-          _.sum(x[1].map((i) => i[1])) / x[1].length,
+          roundNumber(_.sum(x[1].map((i) => i[1])) / x[1].length),
         ];
       }
       /* istanbul ignore next */
@@ -105,11 +142,11 @@ const chartOptions = {
 };
 
 const groupByOptions = [
-  { title: 'H', data: 'hour' },
-  { title: 'D', data: 'day' },
-  { title: 'W', data: 'week' },
-  { title: 'M', data: 'month' },
-  { title: 'Y', data: 'year' },
+  { title: 'H', data: CHART_GROUP_TYPE.HOUR },
+  { title: 'D', data: CHART_GROUP_TYPE.DAY },
+  { title: 'W', data: CHART_GROUP_TYPE.WEEK },
+  { title: 'M', data: CHART_GROUP_TYPE.MONTH },
+  { title: 'Y', data: CHART_GROUP_TYPE.YEAR },
 ];
 
 const VisualChart = ({ item, isDemo = false, isTemplate }) => {
@@ -129,6 +166,12 @@ const VisualChart = ({ item, isDemo = false, isTemplate }) => {
   );
   const chartRef = useRef();
 
+  const shouldDisplayCategory =
+    value_type !== 'raw' &&
+    (groupBy === CHART_GROUP_TYPE.WEEK ||
+      groupBy === CHART_GROUP_TYPE.MONTH ||
+      groupBy === CHART_GROUP_TYPE.YEAR);
+
   const fetchDataDisplayHistory = useFetchConfigHistory(configs, setChartData);
 
   const getSeries = useCallback(() => {
@@ -154,8 +197,12 @@ const VisualChart = ({ item, isDemo = false, isTemplate }) => {
     setOption((prev) => ({
       ...prev,
       series: getSeries(),
+      xAxis: {
+        ...prev.xAxis,
+        type: shouldDisplayCategory ? 'category' : 'datetime',
+      },
     }));
-  }, [getSeries]);
+  }, [getSeries, shouldDisplayCategory]);
 
   useEffect(() => {
     setOption((prev) => {

package/src/screens/Device/detail.js

@@ -25,7 +25,7 @@ import {
 } from './hooks/useEmergencyButton';
 import { useFavoriteDevice } from './hooks/useFavoriteDevice';
 import { usePopover } from '../../hooks/Common';
-import { useConfigGlobalState } from '../../iot/states';
+import { setConfigGlobalState, getConfigGlobalState } from '../../iot/states';
 import { useIsOwnerOfUnit, useBoolean } from '../../hooks/Common';
 import {
   useBluetoothConnection,
@@ -58,17 +58,24 @@ import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
 import { axiosGet } from '../../utils/Apis/axios';
 import { notImplemented } from '../../utils/Utils';
 import { useReceiveNotifications } from '../../hooks';
+import useChipJsonConfiguration, {
+  useConnectChipMqtt,
+} from '../../hooks/useMqtt';
+import { realWatchMultiConfigs } from '../../iot/Monitor';
 
 const DeviceDetail = ({ route }) => {
+  const configIdsTemp = useRef([]);
+
   const t = useTranslations();
   const navigation = useNavigation();
   const token = useSCContextSelector((state) => state.auth.account.token);
-  const { isLockWhenPickColor } = useSCContextSelector((state) => state.app);
+  const { isLockWhenPickColor, appState } = useSCContextSelector(
+    (state) => state.app
+  );
+
   const { setAction } = useContext(SCContext);
   const [offsetTitle, setOffsetTitle] = useState(1);
   const [display, setDisplay] = useState({ items: [] });
-  // eslint-disable-next-line no-unused-vars
-  const [configValues, setConfigValues] = useConfigGlobalState('configValues');
   const [displayValuesData, setDisplayValuesData] = useState({
     isConnected: false,
     lastUpdated: null,
@@ -140,7 +147,14 @@ const DeviceDetail = ({ route }) => {
 
   useDisconnectedDevice(sensorName, isDeviceHasBle, serverDown);
 
-  useDeviceWatchConfigControl(sensor, display);
+  const { chips } = useChipJsonConfiguration(unit?.id);
+
+  const chipFiltered = useMemo(() => {
+    return chips?.filter((item) => item?.id === sensor?.chip_id);
+  }, [chips, sensor?.chip_id]);
+
+  const { mqttConfigs } = useConnectChipMqtt(chipFiltered);
+  useDeviceWatchConfigControl(sensor, display, mqttConfigs);
 
   const isShowSetupEmergencyContact = useMemo(
     () =>
@@ -150,7 +164,6 @@ const DeviceDetail = ({ route }) => {
       ).length > 0,
     [display.items]
   );
-
   const isShowSetUpSmartLock = useMemo(
     () =>
       display.items.filter(
@@ -349,6 +362,18 @@ const DeviceDetail = ({ route }) => {
         data: { unit, sensor },
         text: t('manage_access'),
       });
+      menuItems.push({
+        route: Routes.ChangePosition,
+        data: {
+          unit,
+          sensor,
+          displayItems: display.items,
+          evaluate,
+          station,
+          fetchDataDeviceDetail,
+        },
+        text: t('change_position'),
+      });
       menuItems.push({
         text: t('move_to_another_sub_unit'),
         route: Routes.MoveToAnotherSubUnit,
@@ -439,7 +464,9 @@ const DeviceDetail = ({ route }) => {
     sensor,
     unit,
     sensorName,
+    evaluate,
     station,
+    fetchDataDeviceDetail,
     isMyUnitDeviceScreen,
     emergencyDeviceId,
     addToFavorites,
@@ -474,20 +501,32 @@ const DeviceDetail = ({ route }) => {
       const configIds = [];
 
       display.items.map((item) => {
-        if (item.type !== 'value') {
+        if (!item.configuration) {
           return;
         }
-
-        if (!item.configuration) {
+        if (!['action', 'value'].includes(item.type)) {
           return;
         }
-
-        item.configuration.configs.map((config) => {
-          if (!configIds.includes(config.id)) {
-            configIds.push(config.id);
+        if (item.type === 'action') {
+          if (
+            [
+              'on_off_button_action_template',
+              'one_button_action_template',
+            ].includes(item.configuration.template)
+          ) {
+            !configIds.includes(item.configuration.configuration.config) &&
+              configIds.push(item.configuration.configuration.config);
           }
-        });
+        }
+        if (item.type === 'value') {
+          item.configuration.configs.map((config) => {
+            if (!configIds.includes(config.id)) {
+              configIds.push(config.id);
+            }
+          });
+        }
       });
+      configIdsTemp.current = configIds;
 
       configIds.map((id) => {
         params.append('config', id);
@@ -532,23 +571,28 @@ const DeviceDetail = ({ route }) => {
               lastUpdated: lastUpdated,
             };
           });
-          setConfigValues((prev) => {
-            let hasValueChange = false;
-            data.configs.map((config) => {
-              if (prev[config.id]?.value !== config.value) {
-                hasValueChange = true;
-                prev[config.id] = { ...prev[config.id], value: config.value };
-              }
-              setEvaluate((prevE) => ({
-                ...prevE,
-                [config?.id]: config?.evaluate,
-              }));
-            });
-            if (hasValueChange) {
-              return { ...prev };
+          const configsData = data.configs.filter(
+            (id) => !mqttConfigs.includes(id)
+          );
+          let configValues = getConfigGlobalState('configValues');
+          let hasValueChange = false;
+          configsData.map((config) => {
+            if (configValues[config.id]?.value !== config.value) {
+              hasValueChange = true;
+              configValues[config.id] = {
+                ...configValues[config.id],
+                value: config.value,
+              };
             }
-            return prev;
+            setEvaluate((prev) => ({
+              ...prev,
+              [config?.id]: config?.evaluate,
+            }));
           });
+          if (hasValueChange) {
+            configValues = { ...configValues };
+          }
+          setConfigGlobalState('configValues', { ...configValues });
         } else if (resp_status >= 500) {
           setServerDown(true);
         }
@@ -566,7 +610,7 @@ const DeviceDetail = ({ route }) => {
           setLoading((preState) => ({ ...preState, isConnected: false }));
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sensor, display, isNetworkConnected])
+    }, [display.items, isNetworkConnected, sensor, mqttConfigs])
   );
 
   const isShowEmergencyResolve =
@@ -673,6 +717,10 @@ const DeviceDetail = ({ route }) => {
     SCConfig.setCurrentSensorDisplay(sensor);
   }, [sensor]);
 
+  useEffect(() => {
+    appState === 'active' && realWatchMultiConfigs(configIdsTemp.current);
+  }, [appState]);
+
   const shouldRender =
     loading.displayTemplate === false &&
     loading.isConnected === false &&

package/src/screens/Device/hooks/__test__/useEmergencyButton.test.js

@@ -1,5 +1,7 @@
 import { renderHook } from '@testing-library/react-hooks';
 import MockAdapter from 'axios-mock-adapter';
+import { act } from 'react-test-renderer';
+
 import { API } from '../../../../configs';
 import api from '../../../../utils/Apis/axios';
 import { useEmergencyButton } from '../useEmergencyButton';
@@ -10,28 +12,48 @@ const mockAcquireLockShowing = jest.fn();
 const mock = new MockAdapter(api.axiosInstance);
 
 describe('Test useEmergencyButton', () => {
+  let result;
   it('Test render', async () => {
-    const { result } = renderHook(() =>
-      useEmergencyButton(mockFetchDataDeviceDetail, mockAcquireLockShowing)
-    );
+    await act(async () => {
+      result = renderHook(() =>
+        useEmergencyButton(mockFetchDataDeviceDetail, mockAcquireLockShowing)
+      ).result;
+    });
     jest.useFakeTimers();
-    await result.current.onCancelConfirmAlert();
+    await act(async () => {
+      await result.current.onCancelConfirmAlert();
+    });
+
     expect(result.current.showAlertConfirm).toBe(false);
     jest.runAllTimers();
-    await result.current.onEmergencyButtonPress();
+    await act(async () => {
+      await result.current.onEmergencyButtonPress();
+    });
+
     mock.onPost(API.EMERGENCY_BUTTON.SEND_ALERT()).reply(200);
-    await result.current.onSendNowAlert();
-    expect(result.current.showAlertConfirm).toBe(true);
+
+    await act(async () => {
+      await result.current.onSendNowAlert();
+    });
+    expect(result.current.showAlertSent).toBe(true);
   });
 
   it('Test send alert fail', async () => {
     mock.onPost(API.EMERGENCY_BUTTON.SEND_ALERT()).reply(400);
-    const { result } = renderHook(() =>
-      useEmergencyButton(mockFetchDataDeviceDetail, mockAcquireLockShowing)
-    );
-    await result.current.onSendNowAlert();
-    await result.current.onCloseAlertSent();
-    await result.current.onViewDetails();
+    await act(async () => {
+      result = renderHook(() =>
+        useEmergencyButton(mockFetchDataDeviceDetail, mockAcquireLockShowing)
+      ).result;
+    });
+    await act(async () => {
+      await result.current.onSendNowAlert();
+    });
+    await act(async () => {
+      await result.current.onCloseAlertSent();
+    });
+    await act(async () => {
+      await result.current.onViewDetails();
+    });
     expect(result.current.showAlertConfirm).toBe(false);
   });
 });

package/src/screens/Device/hooks/useDeviceWatchConfigControl.js

@@ -3,7 +3,7 @@ import { DEVICE_TYPE } from '../../../configs/Constants';
 import { getConfigControlFromDeviceDisplay } from '../utils';
 import { useWatchConfigs } from '../../../hooks/IoT';
 
-export const useDeviceWatchConfigControl = (device, display) => {
+export const useDeviceWatchConfigControl = (device, display, mqttConfigs) => {
   const configsNeedWatching = useMemo(() => {
     if (
       !device?.is_managed_by_backend ||
@@ -13,8 +13,18 @@ export const useDeviceWatchConfigControl = (device, display) => {
     ) {
       return [];
     }
-    return getConfigControlFromDeviceDisplay(display);
-  }, [device, display]);
+
+    const configsControl = getConfigControlFromDeviceDisplay(display);
+    if (mqttConfigs?.length) {
+      return configsControl.filter((id) => !mqttConfigs.includes(id));
+    }
+    return configsControl;
+  }, [
+    mqttConfigs,
+    device?.device_type,
+    device?.is_managed_by_backend,
+    display,
+  ]);
 
   useWatchConfigs(configsNeedWatching);
 };

package/src/screens/Device/hooks/useEvaluateValue.js

@@ -1,5 +1,8 @@
-import { useCallback } from 'react';
-import { useSCContextSelector } from '../../../context';
+import { useCallback, useContext } from 'react';
+import { SCContext, useSCContextSelector } from '../../../context';
+import { axiosGet } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { Action } from '../../../context/actionType';
 
 const evaluateRange = (value, configuration) => {
   /*
@@ -98,6 +101,21 @@ export const useGetEvaluateValue = (configId) => {
   const valueEvaluations = useSCContextSelector((state) => {
     return state.valueEvaluations;
   });
+  const { setAction } = useContext(SCContext);
+
+  if (configId && valueEvaluations[configId] === undefined) {
+    (async () => {
+      const { success, data } = await axiosGet(
+        API.FETCH_VALUE_EVALUATION(configId)
+      );
+      if (success) {
+        setAction(Action.UPDATE_VALUE_EVALUATIONS, {
+          unitId: data.unit_id,
+          data: [data],
+        });
+      }
+    })();
+  }
 
   return valueEvaluations[configId];
 };

package/src/screens/Device/styles.js

@@ -24,6 +24,13 @@ export default StyleSheet.create({
     paddingHorizontal: 4,
     marginBottom: 16,
   },
+  cameraOrder: {
+    alignSelf: 'center',
+    width: '100%',
+    height: 150,
+    paddingHorizontal: 16,
+    marginBottom: 16,
+  },
   bottomButtonEmergencyResolve: {
     borderTopWidth: 1,
     borderColor: Colors.Gray4,

package/src/screens/GuestInfo/components/__test__/AccessScheduleSheet.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import AccessScheduleSheet from '../AccessScheduleSheet';
+import BottomSheet from '../../../../commons/BottomSheet';
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AccessScheduleSheet {...props} />
+  </SCProvider>
+);
+
+describe('AccessScheduleSheet', () => {
+  let tree;
+  const mockOnHide = jest.fn();
+  let props = {
+    isVisible: true,
+    data: {
+      access_schedule: {},
+      recurring_time_start: {},
+      recurring_time_end: {},
+      recurring_time_repeat: {},
+      temporary_time_start: {},
+      temporary_time_end: {},
+    },
+    onHide: mockOnHide,
+  };
+  it('render AccessScheduleSheet', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const bottomSheet = instance.findAllByType(BottomSheet);
+    expect(bottomSheet[0].props.accessibilityLabel).toEqual(
+      'ACCESS_SCHEDULE_SHEET'
+    );
+  });
+
+  it('AccessScheduleSheet onCancel', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const bottomSheet = instance.findAllByType(BottomSheet);
+    await act(async () => {
+      bottomSheet[0].props.onBackdropPress();
+    });
+    expect(mockOnHide).toBeCalled();
+  });
+});

package/src/screens/MoveToAnotherSubUnit/__test__/index.test.js

@@ -11,19 +11,10 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import BottomButtonView from '../../../commons/BottomButtonView';
 import api from '../../../utils/Apis/axios';
+import { useNavigation } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <MoveToAnotherSubUnit route={route} />
@@ -88,6 +79,11 @@ describe('Test Render ListSubUnit', () => {
       },
     },
   };
+  const mockNavigate = useNavigation().navigate;
+
+  beforeEach(() => {
+    mockNavigate.mockReset();
+  });
 
   it('render ListSubUnit with out params', async () => {
     await act(async () => {
@@ -128,13 +124,22 @@ describe('Test Render ListSubUnit', () => {
       });
     });
     mock.onPatch(API.DEVICE.CHANGE_SUB_UNIT(200, 3, 73)).reply(200);
-    await bottomButtonView.props.onPressMain();
+    await act(async () => {
+      await bottomButtonView.props.onPressMain();
+    });
+
     expect(mockNavigate).toBeCalled();
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    await TouchableOpacities[2].props.onPress();
+    await act(async () => {
+      await TouchableOpacities[2].props.onPress();
+    });
+
     mockNavigate.mockClear();
     mock.onPatch(API.DEVICE.CHANGE_SUB_UNIT(200, 3, 73)).reply(400);
-    await bottomButtonView.props.onPressMain();
+
+    await act(async () => {
+      await bottomButtonView.props.onPressMain();
+    });
     expect(mockNavigate).not.toBeCalled();
   });
 });

package/src/screens/Notification/__test__/Notification.test.js

@@ -82,7 +82,7 @@ describe('test Notification', () => {
     expect(notificationItem).toHaveLength(2);
   });
 
-  it.only('test handleOnLoadMore', async () => {
+  it('test handleOnLoadMore', async () => {
     const response = {
       count: 13,
       results: [],

package/src/screens/PlayBackCamera/index.js

@@ -11,7 +11,7 @@ import { Colors, Images } from '../../configs';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import Text from '../../commons/Text';
 import Timer from './Timer';
-import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
+import { setStatusBarPreview } from '../../hooks/Common/useStatusBar';
 import MediaPlayerFull from '../../commons/MediaPlayerDetail/MediaPlayerFull';
 import { DATE_TIME_FORMAT, AccessibilityLabel } from '../../configs/Constants';
 
@@ -173,8 +173,7 @@ const PlayBackCamera = () => {
   }, [selected, getHourWithTimeZone]);
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useStatusBarPreview(
+    setStatusBarPreview(
       isShowDate ? Colors.BlackTransparent4 : Colors.TextTransparent
     );
   }, [isShowDate]);

package/src/screens/SelectUnit/__test__/index.test.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { useRoute } from '@react-navigation/native';
 import { act, create } from 'react-test-renderer';
@@ -11,21 +11,14 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
 import api from '../../../utils/Apis/axios';
 import { API } from '../../../configs';
+import BottomButtonView from '../../../commons/BottomButtonView';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockSetState = jest.fn();
 const mockDispatch = jest.fn();
 const mockGoBack = jest.fn();
 const mockNavigate = jest.fn();
 
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
-
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -48,7 +41,6 @@ describe('Test Select unit screen', () => {
   let tree;
 
   beforeEach(() => {
-    mockSetState.mockClear();
     mockNavigate.mockClear();
   });
 
@@ -74,18 +66,21 @@ describe('Test Select unit screen', () => {
       ],
     };
     mock.onGet(API.AUTOMATE.GET_ALL_UNITS()).reply(200, response.data);
-    useState.mockImplementation((init) => [response.data, mockSetState]);
+
     await act(async () => {
       tree = await create(wrapComponent());
     });
     const instance = tree.root;
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    const bottomButtonView = instance.findByType(BottomButtonView);
+
+    expect(bottomButtonView.props.typeMain).toEqual('disabled');
     expect(TouchableOpacities).toHaveLength(4);
     await act(async () => {
       await TouchableOpacities[1].props.onPress();
       await TouchableOpacities[2].props.onPress(response.data[0]);
     });
-    expect(mockSetState).toBeCalledWith(response.data[0]);
+    expect(bottomButtonView.props.typeMain).toEqual('primary');
   });
 
   it('Test SelectUnit getAllUnits fail', async () => {
@@ -106,7 +101,7 @@ describe('Test Select unit screen', () => {
 
     const instance = tree.root;
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(4);
+    expect(TouchableOpacities).toHaveLength(3);
     await act(async () => {
       await TouchableOpacities[1].props.onPress();
       await TouchableOpacities[2].props.onPress();