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

package/src/navigations/UnitStack.js

@@ -55,7 +55,7 @@ import InfoMemberUnit from '../screens/Sharing/InfoMemberUnit';
 import EnterPassword from '../screens/EnterPassword';
 import SelectAddToFavorites from '../screens/Unit/SelectAddToFavorites';
 import { HanetCameraStack } from './HanetCameraStack';
-import { axiosGet } from '../utils/Apis/axios';
+import { axiosGet, fetchWithCache } from '../utils/Apis/axios';
 import { API } from '../configs';
 import SideMenuDetail from '../screens/SideMenuDetail';
 import { styles } from './UnitStackStyles';
@@ -117,12 +117,13 @@ export const UnitStack = memo((props) => {
       if (!id) {
         return;
       }
-      const { success, data } = await axiosGet(
+      await fetchWithCache(
         API.UNIT.FAVOURITE_DEVICES(id),
         {},
-        true
+        ({ success, data }) => {
+          success && setAction(Action.SET_FAVORITE_DEVICES, data);
+        }
       );
-      success && setAction(Action.SET_FAVORITE_DEVICES, data);
     };
     fetchFavoriteDevices();
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/screens/AQIGuide/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { View, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
-import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors, Theme } from '../../configs';
@@ -146,7 +146,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Theme.color.backgroundColor,
-    paddingTop: getStatusBarHeight() + 10,
+    paddingBottom: getBottomSpace(),
   },
   titles: {
     marginHorizontal: 16,

package/src/screens/ActivityLog/styles/itemLogStyles.js

@@ -31,6 +31,7 @@ export default StyleSheet.create({
   },
   name: {
     fontWeight: 'bold',
+    lineHeight: 22,
   },
   wrapText: {
     flexShrink: 1,

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

@@ -97,7 +97,7 @@ describe('Test AddNewDevice', () => {
   });
 
   it('fetchDetails fail', async () => {
-    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(400);
+    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(500);
     await act(async () => {
       tree = await create(wrapComponent(route));
     });

package/src/screens/AddNewGateway/ConnectingDevice.js

@@ -1,8 +1,12 @@
-import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useEffect, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { Alert } from 'react-native';
+
 import Processing from '../../commons/Processing';
 import Routes from '../../utils/Route';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
+let timeout;
 const ConnectingDevice = ({
   title,
   fail,
@@ -13,13 +17,13 @@ const ConnectingDevice = ({
   chipId,
   sensorId,
   addDeviceType,
-  goBack,
   showPopupTurnOnGuide,
   setHidePopupTurnOnGuide,
   setIsRecallChipScan,
   isChangeAddressSuccess,
 }) => {
-  const { navigate } = useNavigation();
+  const t = useTranslations();
+  const { navigate, goBack } = useNavigation();
 
   const [renameParams, setRenameParams] = useState({
     unitId,
@@ -31,11 +35,29 @@ const ConnectingDevice = ({
 
   const complete = useCallback(
     (deviceInfo) => {
+      timeout && clearTimeout(timeout);
       navigate(Routes.RenameNewDevices, renameParams);
     },
     [navigate, renameParams]
   );
 
+  useEffect(() => {
+    timeout = setTimeout(() => {
+      Alert.alert(t('continue_to_wait'), t('it_has_been_5_minutes'), [
+        {
+          text: t('back'),
+          onPress: goBack,
+        },
+        {
+          text: t('continue'),
+        },
+      ]);
+    }, 300 * 1000); // when test, it takes more than 3 min
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [fail, goBack, t]);
+
   const onMessage = useCallback(
     (data) => {
       setRenameParams((oldParams) => {

package/src/screens/AddNewGateway/ConnectingWifiGuide.js

@@ -99,7 +99,7 @@ const ConnectingWifiGuide = ({ route }) => {
         setWifiList(data.wifi);
         setCurrentState(0);
         clearInterval(intervalSend);
-        socket.close();
+        socket?.close();
         socket = null;
       }
     });

package/src/screens/AddNewGateway/ConnectingWifiGuideStyles.js

@@ -1,4 +1,6 @@
+import { Platform } from 'react-native';
 import { Dimensions, StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
 import { Colors } from '../../configs';
 
 const customWidth = (Dimensions.get('window').width - 32 - 15) / 2; // set gap between flex item is 15px
@@ -55,4 +57,12 @@ export default StyleSheet.create({
     textAlign: 'center',
     lineHeight: 24,
   },
+  bottomButtonView: {
+    marginBottom:
+      getBottomSpace() +
+      Platform.select({
+        android: 10,
+        ios: -10,
+      }),
+  },
 });

package/src/screens/AddNewGateway/ConnectingZigbeeDevice.js

@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import { Alert } from 'react-native';
+
 import API from '../../configs/API';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { axiosPost } from '../../utils/Apis/axios';
@@ -10,7 +11,6 @@ const ConnectingZigbeeDevice = ({ route }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
   const { unitId, subUnit, chipId } = route?.params || {};
-  const [sensorId, setSensorId] = useState(null);
 
   const fail = useCallback(
     (message) => {
@@ -43,20 +43,6 @@ const ConnectingZigbeeDevice = ({ route }) => {
     [chipId, fail, subUnit?.id, unitId]
   );
 
-  useEffect(() => {
-    const timeOut = setTimeout(() => {
-      setSensorId((value) => {
-        if (!value) {
-          fail(t('no_zigbee_device_join_timeout'));
-        }
-        return value;
-      });
-    }, 120 * 1000); // when test, it takes more than 1 min
-    return () => {
-      clearTimeout(timeOut);
-    };
-  }, [fail, t]);
-
   return (
     <ConnectingDevice
       title={t('connect_device')}
@@ -66,7 +52,7 @@ const ConnectingZigbeeDevice = ({ route }) => {
       unitId={unitId}
       subUnit={subUnit}
       chipId={chipId}
-      sensorId={sensorId}
+      sensorId={null}
     />
   );
 };

package/src/screens/AddNewGateway/ShareWifiPassword.js

@@ -105,6 +105,7 @@ const ShareWifiPassword = ({ route }) => {
         }
         if (ssid !== currentSsid) {
           clearInterval(checkWifiInterval);
+          setIsShowPopupPassword(false);
           navigation.navigate(Routes.ConnectingWifiDevice, {
             unitId,
             subUnit,
@@ -149,7 +150,7 @@ const ShareWifiPassword = ({ route }) => {
 
     socket.on('message', (msg, rinfo) => {
       if (handleSocketOnMsg(currentSsid, msg)) {
-        socket.close();
+        socket?.close();
         socket = null;
       }
     });

package/src/screens/AddNewGateway/__test__/ConnectingWifiDevice.test.js

@@ -60,7 +60,8 @@ describe('Test connecting wifi device', () => {
     });
     const instance = tree.root;
     expect(instance.findAllByType(Processing)).toHaveLength(1);
-    jest.runAllTimers();
+    jest.runOnlyPendingTimers();
+
     expect(mock.history.post).toHaveLength(0);
     const connectingDevice = instance.findByType(ConnectingDevice);
     await act(async () => {

package/src/screens/AddNewGateway/__test__/ConnectingZigbeeDevice.test.js

@@ -8,6 +8,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
 import Processing from '../../../commons/Processing';
+import { Alert } from 'react-native';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -17,9 +18,21 @@ const wrapComponent = (route) => (
 
 const mock = new MockAdapter(api.axiosInstance);
 
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+  return Object.setPrototypeOf(
+    {
+      Alert: {
+        ...RN.Alert,
+        alert: jest.fn(),
+      },
+    },
+    RN
+  );
+});
+
 const mockedNavigate = jest.fn();
 const mockedGoBack = jest.fn();
-
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -62,6 +75,19 @@ describe('Test connecting modbus device', () => {
     expect(mock.history.post).toHaveLength(1);
   });
 
+  it('timeout', async () => {
+    jest.useFakeTimers();
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+
+    await act(async () => {
+      jest.runOnlyPendingTimers();
+    });
+    expect(Alert.alert).toBeCalled();
+  });
+
   it('receive sensor-id from channel then rename sensor-id', async () => {
     mock.onPost().reply(200, {});
     await act(async () => {

package/src/screens/Device/detail.js

@@ -165,9 +165,7 @@ const DeviceDetail = ({ route }) => {
   }, [currentUserId, unit]);
 
   const fetchUnitDetail = useCallback(async () => {
-    const { success, data } = await axiosGet(API.UNIT.UNIT_DETAIL(unitId), {
-      headers: { 'Cache-Control': 'no-cache' },
-    });
+    const { success, data } = await axiosGet(API.UNIT.UNIT_DETAIL(unitId));
     if (success) {
       setUnit(data);
     }

package/src/screens/Gateway/components/Information/styles.js

@@ -21,7 +21,6 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'flex-start',
     padding: 16,
-    gap: 16,
     backgroundColor: Colors.Blue14,
     borderColor: Colors.Blue15,
     borderWidth: 1,

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

@@ -165,6 +165,7 @@ describe('test NotificationItem', () => {
     NOTIFICATION_TYPES.FIRE,
     NOTIFICATION_TYPES.SOS,
     NOTIFICATION_TYPES.FILTER_WATER,
+    NOTIFICATION_TYPES.LOW_BATTERY,
   ];
   for (const content_code of listSensorType2) {
     test(`create ItemNotification ${content_code}`, async () => {

package/src/screens/Notification/components/NotificationItem.js

@@ -187,6 +187,21 @@ const NotificationItem = memo(({ item }) => {
             }),
           iconContent: <Image source={Images.logo} style={styles.logo} />,
         };
+      case NOTIFICATION_TYPES.LOW_BATTERY:
+        return {
+          content: customColorText(t('text_notification_content_low_battery')),
+          redirect: () =>
+            navigation.navigate(Routes.UnitStack, {
+              screen: Routes.DeviceDetail,
+              params: {
+                unitId,
+                sensorId,
+              },
+            }),
+          iconContent: (
+            <IconComponent iconKit={icon} style={styles.iconNotification} />
+          ),
+        };
       case NOTIFICATION_TYPES.NOTIFY_REMOVE_UNIT:
         return {
           content: customColorText(
@@ -342,7 +357,7 @@ const NotificationItem = memo(({ item }) => {
       default:
         return null;
     }
-  }, [content_code, customColorText, navigation, params, t]);
+  }, [content_code, customColorText, icon, navigation, params, t]);
 
   const { content, redirect, iconContent } = renderItem() || {};
 

package/src/screens/Notification/index.js

@@ -96,6 +96,7 @@ const Notification = memo(() => {
         onLoadMore={handleOnLoadMore}
         onRefresh={onRefresh}
         disableLoadMore={page >= maxPageNotification}
+        styleScrollView={styles.styleScrollView}
       >
         {notifications.map((item, index) => (
           <NotificationItem item={item} key={index} />

package/src/screens/Notification/styles/indexStyles.js

@@ -16,4 +16,7 @@ export default StyleSheet.create({
   iconPlus: {
     marginRight: 22,
   },
+  styleScrollView: {
+    marginTop: -10,
+  },
 });

package/src/screens/Sharing/SelectPermission.js

@@ -8,7 +8,7 @@ import Text from '../../commons/Text';
 import { DeviceItem, TitleCheckBox } from './Components';
 import styles from './Styles/SelectPermissionStyles';
 import { axiosGet, axiosPost } from '../../utils/Apis/axios';
-import { object_Ids } from '../../utils/Utils';
+import { objectIds } from '../../utils/Utils';
 import Routes from '../../utils/Route';
 import { API, Colors } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
@@ -174,7 +174,7 @@ const SelectPermission = ({ route }) => {
     if (isUpdateSharedDevice) {
       if (hasDataChecked) {
         const { stationIds, deviceIds, actionIds, configIds } =
-          object_Ids(dataDeviceShared);
+          objectIds(dataDeviceShared);
         for (let station in dataStations) {
           for (let item in dataStations[station].devices) {
             const itemTemp = dataStations[station].devices[item];

package/src/screens/SmartAccount/SuccessfullyConnected/__test__/SuccessfullyConnected.test.js

@@ -13,12 +13,13 @@ import Routes from '../../../../utils/Route';
 
 const mock = new MockAdapter(api.axiosInstance);
 const mockedNavigate = jest.fn();
+const mockedDispatch = jest.fn();
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
     useNavigation: () => ({
       navigate: mockedNavigate,
-      dispatch: jest.fn(),
+      dispatch: mockedDispatch,
     }),
     useIsFocused: () => true,
   };
@@ -128,13 +129,31 @@ describe('Test SuccessfullyConnected', () => {
     await act(async () => {
       handleFinish.props.onPress();
     });
-    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
-      screen: Routes.UnitDetail,
-      params: {
-        unitId: 1,
-        stationId: 2,
-        isSuccessfullyConnected: true,
+    expect(mockedDispatch).toBeCalledWith({
+      payload: {
+        index: 0,
+        routes: [
+          {
+            name: 'Main',
+            params: {
+              params: { screen: 'Dashboard' },
+              screen: 'DashboardStack',
+            },
+          },
+          {
+            name: 'UnitStack',
+            params: {
+              params: {
+                isSuccessfullyConnected: true,
+                stationId: 2,
+                unitId: 1,
+              },
+              screen: 'UnitDetail',
+            },
+          },
+        ],
       },
+      type: 'RESET',
     });
   });
 });

package/src/screens/SmartAccount/SuccessfullyConnected/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { View, ScrollView } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, CommonActions } from '@react-navigation/native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { ActivityIndicator } from '@ant-design/react-native';
 
@@ -28,7 +28,7 @@ const SuccessfullyConnected = memo(({ route }) => {
     chipId,
   } = route.params;
   const t = useTranslations();
-  const { navigate } = useNavigation();
+  const { navigate, dispatch } = useNavigation();
   const [info, setInfo] = useState({});
   const [loadingFilterInfo, setLoadingFilterInfo] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -55,15 +55,33 @@ const SuccessfullyConnected = memo(({ route }) => {
 
   const handleFinish = useCallback(async () => {
     await axiosPost(API.CHIP.RENAME_DEVICES(info.id), info);
-    navigate(Routes.UnitStack, {
-      screen: Routes.UnitDetail,
-      params: {
-        unitId: unit_id,
-        stationId,
-        isSuccessfullyConnected: true,
-      },
+    const resetAction = CommonActions.reset({
+      index: 0,
+      routes: [
+        {
+          name: Routes.Main,
+          params: {
+            screen: Routes.DashboardStack,
+            params: {
+              screen: Routes.Dashboard,
+            },
+          },
+        },
+        {
+          name: Routes.UnitStack,
+          params: {
+            screen: Routes.UnitDetail,
+            params: {
+              unitId: unit_id,
+              stationId,
+              isSuccessfullyConnected: true,
+            },
+          },
+        },
+      ],
     });
-  }, [info, navigate, stationId, unit_id]);
+    dispatch(resetAction);
+  }, [dispatch, info, stationId, unit_id]);
 
   const handleFilterNewInfo = useCallback(async () => {
     let newInfo = [];
@@ -125,7 +143,7 @@ const SuccessfullyConnected = memo(({ route }) => {
             {!loading && info?.sensors?.length !== 0 ? (
               <View>
                 {info?.sensors?.map((sensor, sensor_index) => (
-                  <View style={styles.wrapItem}>
+                  <View style={styles.wrapItem} key={`${sensor?.id}`}>
                     {sensor?.end_devices?.length &&
                       sensor?.end_devices?.map(
                         (end_device, end_device_index) => (

package/src/screens/SyncLGDevice/__test__/AddLGDevice.test.js

@@ -98,7 +98,7 @@ describe('Test Add LG Device', () => {
   });
 
   it('fetchDetails fail', async () => {
-    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(400);
+    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(500);
     await act(async () => {
       tree = await create(wrapComponent(route));
     });

package/src/screens/Template/__test__/GatewayList.test.js

@@ -21,6 +21,6 @@ describe('Test GatewayList', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(13);
+    expect(Views).toHaveLength(12);
   });
 });

package/src/screens/Template/__test__/Information.test.js

@@ -11,6 +11,6 @@ describe('Test Information', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(14);
+    expect(Views).toHaveLength(13);
   });
 });

package/src/screens/Unit/Detail.js

@@ -26,7 +26,7 @@ import {
 import { useFavorites } from './hook/useFavorites';
 import { useUnitConnectRemoteDevices } from './hook/useUnitConnectRemoteDevices';
 import { useValueEvaluations } from '../../hooks/IoT';
-import { fetchWithCache, axiosGet } from '../../utils/Apis/axios';
+import { fetchWithCache } from '../../utils/Apis/axios';
 import ShortDetailSubUnit from '../../commons/SubUnit/ShortDetail';
 import NavBar from '../../commons/NavBar';
 import WrapParallaxScrollView from '../../commons/WrapParallaxScrollView';
@@ -119,21 +119,6 @@ const UnitDetail = ({ route }) => {
     [t]
   );
 
-  const fetchDetails = useCallback(async () => {
-    getAutomates();
-    const { success, data, resp_status } = await axiosGet(
-      API.UNIT.UNIT_DETAIL(unitId),
-      { headers: { 'Cache-Control': 'no-cache' } },
-      true
-    );
-    if (success) {
-      prepareData(data);
-      setUnit(data);
-    } else if (resp_status === 404) {
-      setShowPreventAccess();
-    }
-  }, [getAutomates, unitId, prepareData, setShowPreventAccess]);
-
   const getAutomates = useCallback(async () => {
     await fetchWithCache(
       API.UNIT.AUTOMATE(unitId),
@@ -160,6 +145,26 @@ const UnitDetail = ({ route }) => {
     );
   }, [t, unitId]);
 
+  const fetchUnitDetail = useCallback(async () => {
+    await fetchWithCache(
+      API.UNIT.UNIT_DETAIL(unitId),
+      {},
+      ({ success, data, resp_status }) => {
+        if (success) {
+          prepareData(data);
+          setUnit(data);
+        } else if (resp_status === 404) {
+          setShowPreventAccess();
+        }
+      }
+    );
+  }, [prepareData, setShowPreventAccess, unitId]);
+
+  const fetchDetails = useCallback(async () => {
+    getAutomates();
+    await fetchUnitDetail();
+  }, [getAutomates, fetchUnitDetail]);
+
   const onRefresh = useCallback(
     (data = { content_code: NOTIFICATION_TYPES.NOTIFY_RENAME_UNIT }) => {
       data.content_code === NOTIFICATION_TYPES.NOTIFY_RENAME_UNIT &&
@@ -169,7 +174,7 @@ const UnitDetail = ({ route }) => {
   );
 
   useEffect(() => {
-    const subscription = AppState.addEventListener('change', (nextAppState) => {
+    const handler = (nextAppState) => {
       if (
         appState.current.match(/inactive|background/) &&
         nextAppState === 'active'
@@ -177,7 +182,8 @@ const UnitDetail = ({ route }) => {
         fetchDetails();
       }
       appState.current = nextAppState;
-    });
+    };
+    const subscription = AppState.addEventListener('change', handler);
 
     return () => {
       subscription?.remove();