@eohjsc/react-native-smart-city 0.7.13 → 0.7.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.13",
+  "version": "0.7.15",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -118,7 +118,7 @@
     "jetifier": "^1.6.6",
     "lint-staged": "^12.4.1",
     "lodash": "^4.17.19",
-    "lottie-react-native": "^6.7.2",
+    "lottie-react-native": "^7.1.0",
     "md5": "^2.3.0",
     "metro-react-native-babel-preset": "0.73.9",
     "moment": "^2.27.0",

package/src/commons/Widgets/IFrame/IFrame.js

@@ -29,13 +29,13 @@ const IFrame = memo(({ item = {} }) => {
   }, [id, url]);
 
   return (
-    <View>
+    <View style={styles.viewIframe}>
       <TouchableOpacity style={styles.reloadButton} onClick={reload}>
         <IconComponent size={20} icon="ReloadOutlined" />
       </TouchableOpacity>
       <WebView
         source={{ uri: urlWithEnv }}
-        style={styles.iframe}
+        className={styles.iframe}
         ref={ref}
         title={title}
         javaScriptEnabled

package/src/commons/Widgets/IFrame/IFrameStyles.js

@@ -30,4 +30,9 @@ export const styles = StyleSheet.create({
   settingWidget: {
     width: 256,
   },
+  viewIframe: {
+    width: '100%',
+    display: 'flex',
+    height: 200,
+  },
 });

package/src/configs/API.js

@@ -21,7 +21,8 @@ const API = {
     AUTOMATE: (id) => `/property_manager/units/${id}/automate/`,
     DEVICE_CONTROL: (id) => `/property_manager/units/${id}/device_control/`,
     DEVICE_SENSOR: (id) => `/property_manager/units/${id}/device_sensor/`,
-    SENSORS_STATUS: (id) => `/property_manager/units/${id}/sensors_status/`,
+    END_DEVICES_STATUS: (id) =>
+      `/property_manager/units/${id}/end_devices_status/`,
     CHANGE_OWNER: (id) => `/property_manager/units/${id}/change_owner/`,
     FAVOURITE_DEVICES: (id) =>
       `/property_manager/units/${id}/favourite_devices/`,

package/src/hooks/Common/useBlockBack.js

@@ -1,36 +1,51 @@
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { useCallback, useRef } from 'react';
-import { BackHandler } from 'react-native';
+import { BackHandler, Platform } from 'react-native';
 
 export const useBlockBack = (actionBack) => {
   const navigation = useNavigation();
-  const isBeforeRemoveHandled = useRef(false);
+  const isListening = useRef(false);
 
   const blockBack = useCallback(() => {
     actionBack && actionBack();
     return true;
   }, [actionBack]);
 
+  const blockBeforeRemove = useCallback(
+    (e) => {
+      e.preventDefault();
+      blockBack();
+    },
+    [blockBack]
+  );
+
   useFocusEffect(
     useCallback(() => {
-      const onBeforeRemove = (e) => {
-        if (!isBeforeRemoveHandled.current) {
-          isBeforeRemoveHandled.current = true;
-          e.preventDefault();
-          blockBack();
-        }
-      };
-
-      BackHandler.addEventListener('hardwareBackPress', blockBack);
-      const unsubscribe = navigation.addListener(
-        'beforeRemove',
-        onBeforeRemove
-      );
-
-      return () => {
-        BackHandler.removeEventListener('hardwareBackPress', blockBack);
-        unsubscribe();
-      };
-    }, [blockBack, navigation])
+      if (isListening.current) {
+        return;
+      }
+      isListening.current = true;
+
+      if (Platform.OS === 'ios') {
+        const unsubscribe = navigation.addListener(
+          'beforeRemove',
+          blockBeforeRemove
+        );
+
+        return () => {
+          unsubscribe();
+          isListening.current = false;
+        };
+      }
+
+      if (Platform.OS === 'android') {
+        BackHandler.addEventListener('hardwareBackPress', blockBack);
+
+        return () => {
+          BackHandler.removeEventListener('hardwareBackPress', blockBack);
+          isListening.current = false;
+        };
+      }
+    }, [blockBack, blockBeforeRemove, navigation])
   );
 };

package/src/hooks/Common/useDevicesStatus.js

@@ -1,7 +1,7 @@
 import { useCallback, useContext, useEffect, useRef } from 'react';
 import { useIsFocused } from '@react-navigation/native';
 import { SCContext, useSCContextSelector } from '../../context';
-import { axiosGet } from '../../utils/Apis/axios';
+import { axiosPost } from '../../utils/Apis/axios';
 import { API } from '../../configs';
 import { Action } from '../../context/actionType';
 
@@ -13,7 +13,7 @@ const useDevicesStatus = (unit, devices) => {
     (state) => state.app.isNetworkConnected
   );
   const isFocused = useIsFocused();
-  const hasFetched = useRef(false); // Track if data has been fetched
+  const hasFetched = useRef([]); // Track if data has been fetched
 
   const getDevicesStatus = useCallback(
     async (_unit, _devices) => {
@@ -21,24 +21,29 @@ const useDevicesStatus = (unit, devices) => {
         clearTimeout(timeoutId);
         timeoutId = null;
       }
-      const params = new URLSearchParams();
-      _devices.forEach((device) => {
-        params.append('sensors', device.id);
-      });
-      const { success, data } = await axiosGet(
-        API.UNIT.SENSORS_STATUS(_unit.id),
+      const end_device_ids = _devices.map((item) => item.id);
+
+      if (hasFetched.current.toString() === end_device_ids.toString()) {
+        return;
+      }
+      const { success, data } = await axiosPost(
+        API.UNIT.END_DEVICES_STATUS(_unit.id),
         {
-          params: params,
+          end_device_ids,
         }
       );
-      success && setAction(Action.SET_DEVICES_STATUS, data);
+
+      if (success) {
+        hasFetched.current = end_device_ids;
+        setAction(Action.SET_DEVICES_STATUS, data);
+      }
       timeoutId = setTimeout(() => getDevicesStatus(_unit, _devices), 10000);
     },
     [setAction]
   );
 
   useEffect(() => {
-    if (!isFocused || !isNetworkConnected || hasFetched.current) {
+    if (!isFocused || !isNetworkConnected) {
       return;
     }
     if (!devices?.length) {
@@ -53,7 +58,6 @@ const useDevicesStatus = (unit, devices) => {
     }
 
     getDevicesStatus(unit, devices);
-    hasFetched.current = true; // Mark as fetched
     return () => {
       if (timeoutId) {
         clearTimeout(timeoutId);
@@ -65,7 +69,6 @@ const useDevicesStatus = (unit, devices) => {
   useEffect(() => {
     // Reset the hasFetched flag when the component is no longer focused
     if (!isFocused) {
-      hasFetched.current = false;
       if (timeoutId) {
         clearTimeout(timeoutId); // Clear timeout when losing focus
         timeoutId = null;

package/src/screens/AddNewGateway/ScanDeviceLocal.js

@@ -221,23 +221,21 @@ const ScanDeviceLocal = ({ route }) => {
         title={t('device_scaned')}
         isShowSeparator
       />
-      {!deviceList.length ? (
+
+      <View style={styles.rowContainer}>
+        <Text style={styles.subTitle} type="Body">
+          {t('select_device_and_connect')}
+        </Text>
         <ActivityIndicator style={styles.containerLoading} />
-      ) : (
-        <>
-          <Text style={styles.subTitle} type="Body">
-            {t('select_device_and_connect')}
-          </Text>
-          <FlatList
-            style={styles.listContainer}
-            keyExtractor={(item) => item?.host}
-            data={deviceList}
-            renderItem={renderItem}
-            extraData={deviceList}
-            numColumns={1}
-          />
-        </>
-      )}
+      </View>
+      <FlatList
+        style={styles.listContainer}
+        keyExtractor={(item) => item?.host}
+        data={deviceList}
+        renderItem={renderItem}
+        extraData={deviceList}
+        numColumns={1}
+      />
 
       <ViewButtonBottom
         leftTitle={t('cancel')}

package/src/screens/AddNewGateway/ScanDeviceLocalStyles.js

@@ -6,6 +6,10 @@ export default StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.Gray2,
   },
+  rowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   title: {
     marginVertical: 16,
     marginLeft: 16,
@@ -53,6 +57,7 @@ export default StyleSheet.create({
   containerLoading: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'flex-start',
+    marginLeft: 16,
   },
 });

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

@@ -105,6 +105,9 @@ describe('test ScanDeviceLocal', () => {
     );
     expect(zeroconfMock.on).toHaveBeenCalledWith('error', expect.any(Function));
     expect(zeroconfMock.scan).toHaveBeenCalledWith('plugandplay', 'tcp');
+
+    const activityIndicator = instance.findByType(ActivityIndicator);
+    expect(activityIndicator).toBeTruthy();
   };
 
   it('test connect gateway and navigate', async () => {
@@ -382,17 +385,6 @@ describe('test ScanDeviceLocal', () => {
     expect(mockedGoBack).toHaveBeenCalled();
   });
 
-  it('test renders loading indicator when device list is empty', async () => {
-    const route = { params: { unit: 1 } };
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-    const instance = tree.root;
-
-    const activityIndicator = instance.findByType(ActivityIndicator);
-    expect(activityIndicator).toBeTruthy();
-  });
-
   it('test renders device list when devices are available', async () => {
     const route = { params: { unit: 1 } };
     await act(async () => {
@@ -451,8 +443,7 @@ describe('test ScanDeviceLocal', () => {
       await removeCallback('Device 1');
     });
 
-    const flatListAfter = instance.findAllByType(FlatList);
-    expect(flatListAfter.length).toBe(0);
+    expect(flatList.props.data).toEqual([]);
 
     const activityIndicator = instance.findByType(ActivityIndicator);
     expect(activityIndicator).toBeTruthy();

package/src/screens/Automate/ScriptDetail/__test__/index.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { BackHandler, Platform } from 'react-native';
 import { create, act } from 'react-test-renderer';
 import Toast from 'react-native-toast-message';
 import { useNavigation } from '@react-navigation/native';
@@ -40,10 +41,12 @@ describe('Test ScriptDetail', () => {
   const mockGoBack = useNavigation().goBack;
   const mockAddListener = useNavigation().addListener;
   const mockedNavigate = useNavigation().navigate;
+  const mockedDispatch = useNavigation().dispatch;
   beforeEach(() => {
     mockGoBack.mockClear();
     mockAddListener.mockClear();
     mockedNavigate.mockClear();
+    mockedDispatch.mockClear();
     global.mockedNavigate.mockClear();
     mock.reset();
     route = {
@@ -596,11 +599,35 @@ describe('Test ScriptDetail', () => {
       menuActionMore.props.onItemClick({ doAction: jest.fn() });
       menuActionMore.props.listMenuItem[2].doAction();
     });
-    expect(global.mockedNavigate).toBeCalledWith(Routes.AddUnknownTypeSmart, {
-      automate,
-      closeScreen: undefined,
+
+    const mockState = {
+      routes: [{ name: 'Home' }],
+    };
+    const updatedState = mockedDispatch.mock.calls[0][0](mockState);
+    expect(updatedState).toEqual({
+      type: 'RESET',
+      payload: {
+        index: 2,
+        routes: [
+          {
+            name: 'Home',
+          },
+          {
+            name: Routes.ScriptDetail,
+            params: route.params,
+          },
+          {
+            name: Routes.AddUnknownTypeSmart,
+            params: {
+              automate: automate,
+              closeScreen: undefined,
+            },
+          },
+        ],
+      },
     });
-    global.mockedNavigate.mockClear();
+    expect(mockedDispatch).toHaveBeenCalledTimes(1);
+
     expect(menuActionMore.props.listMenuItem[0].text).toEqual('Device display');
     await act(async () => {
       menuActionMore.props.listMenuItem[0].doAction();
@@ -705,6 +732,7 @@ describe('Test ScriptDetail', () => {
   });
 
   it('test navigate to UnitDetail on event beforeRemove', async () => {
+    Platform.OS = 'ios';
     route.params.closeScreen = Routes.UnitDetail;
     route.params.preAutomate.unit = 2;
 
@@ -729,4 +757,31 @@ describe('Test ScriptDetail', () => {
       unitId: 2,
     });
   });
+
+  it('test navigate to UnitDetail on event hardwareBackPress', async () => {
+    Platform.OS = 'android';
+    jest.spyOn(BackHandler, 'addEventListener');
+    route.params.closeScreen = Routes.UnitDetail;
+    route.params.preAutomate.unit = 2;
+
+    await act(async () => {
+      await create(wrapComponent(route));
+    });
+
+    expect(BackHandler.addEventListener).toHaveBeenCalledWith(
+      'hardwareBackPress',
+      expect.any(Function)
+    );
+    const backPressHandler = BackHandler.addEventListener.mock.calls.find(
+      ([eventName]) => eventName === 'hardwareBackPress'
+    )[1];
+
+    await act(async () => {
+      backPressHandler();
+    });
+
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.UnitDetail, {
+      unitId: 2,
+    });
+  });
 });

package/src/screens/Automate/ScriptDetail/index.js

@@ -10,7 +10,11 @@ import { PopoverMode } from 'react-native-popover-view';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
-import { useIsFocused, useNavigation } from '@react-navigation/native';
+import {
+  CommonActions,
+  useIsFocused,
+  useNavigation,
+} from '@react-navigation/native';
 import Add from '../../../../assets/images/Add.svg';
 import Delay from '../../../../assets/images/Delay.svg';
 import Notify from '../../../../assets/images/Notify.svg';
@@ -39,7 +43,7 @@ import ItemConditionScriptDetail from '../../../commons/Automate/ItemConditionSc
 const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
 
 const ScriptDetail = ({ route }) => {
-  const { navigate, goBack } = useNavigation();
+  const { dispatch, navigate, goBack } = useNavigation();
   const { params = {} } = route;
   const refMenuAction = useRef();
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
@@ -56,8 +60,9 @@ const ScriptDetail = ({ route }) => {
     preAutomate = {}, // pre-loaded automate data
     newActionsList, // updated actions list
     closeScreen,
+    automate: currentAutomate, // when edit and close
   } = params;
-  const [automate, setAutomate] = useState(preAutomate);
+  const [automate, setAutomate] = useState(currentAutomate || preAutomate);
   const isFocused = useIsFocused();
   const [data, setData] = useState([]);
   const [isShowRename, setIsShowRename] = useState(false);
@@ -103,11 +108,42 @@ const ScriptDetail = ({ route }) => {
       ToastBottomHelper.error(t('this_script_has_been_disabled'));
       return;
     }
-    navigate(Routes.AddUnknownTypeSmart, {
-      automate,
-      closeScreen: route.name,
+
+    // Reset stack and navigate to AddUnknownTypeSmart
+    dispatch((state) => {
+      const index = state.routes.findIndex((r) => r.name === closeScreen);
+      let routes = [];
+      if (!closeScreen) {
+        routes = state.routes;
+      } else if (index >= 0) {
+        routes = state.routes.slice(0, index + 1);
+      }
+      const hasScriptDetail = routes.some(
+        (r) => r.name === Routes.ScriptDetail
+      );
+
+      if (!hasScriptDetail) {
+        routes.push({
+          name: Routes.ScriptDetail,
+          params: route.params,
+        });
+      }
+
+      routes.push({
+        name: Routes.AddUnknownTypeSmart,
+        params: {
+          automate,
+          closeScreen: route.name,
+        },
+      });
+
+      return CommonActions.reset({
+        ...state,
+        routes: routes,
+        index: routes.length - 1,
+      });
     });
-  }, [automate, can_edit, enableScript, navigate, route.name, t]);
+  }, [automate, can_edit, closeScreen, enableScript, dispatch, route, t]);
 
   const listMenuItem = useMemo(
     () => [

package/src/screens/SharedUnit/__test__/ShareUnit.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
-import { TouchableOpacity } from 'react-native';
+import { FlatList, RefreshControl, TouchableOpacity } from 'react-native';
 import Modal from 'react-native-modal';
 import MockAdapter from 'axios-mock-adapter';
 
@@ -67,4 +67,25 @@ describe('test SharedUnit', () => {
     });
     expect(tabHeader.props.textFilter).toEqual(t('text_latest_date'));
   });
+
+  it('should trigger refresh when pulling down', async () => {
+    mock
+      .onGet(API.UNIT.FILTER_SHARED_UNITS())
+      .reply(200, [{ id: 1, is_star: false, name: 'Unit 1' }]);
+
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const flatList = instance.findByType(FlatList);
+
+    const refreshControl = flatList.findByType(RefreshControl);
+    expect(refreshControl.props.refreshing).toBe(false);
+
+    await act(async () => {
+      refreshControl.props.onRefresh();
+    });
+    expect(mock.history.get.length).toBeGreaterThan(0);
+  });
 });

package/src/screens/Sharing/UnitMemberList.js

@@ -46,7 +46,7 @@ const UnitMemberList = ({ route }) => {
       return;
     }
 
-    if (permissions?.max_members_per_unit <= dataMembers.length) {
+    if (permissions?.max_members_per_unit < dataMembers.length) {
       ToastBottomHelper.error(
         t('reach_max_members_per_unit', {
           length: permissions?.max_members_per_unit,

package/src/screens/Sharing/__test__/UnitMemberList.test.js

@@ -81,6 +81,16 @@ describe('test MemberList', () => {
   });
 
   it('add new member but reach limit', async () => {
+    const dataMember = [
+      {
+        id: 1,
+        name: 'owner',
+        avatar: 'https://image1.jpg',
+        phone_number: '0933123456',
+      },
+    ];
+    mockAxios.onGet(API.SHARE.UNITS_MEMBERS(1)).reply(200, dataMember);
+
     let tree;
     await act(async () => {
       tree = await create(

package/src/screens/Unit/__test__/Detail.test.js

@@ -59,7 +59,7 @@ describe('Test UnitDetail', () => {
 
   const detailUnitApiUrl = API.UNIT.UNIT_DETAIL(1);
   const summaryUnitApiUrl = API.UNIT.UNIT_SUMMARY(1);
-  const sensorStatusApiUrl = API.UNIT.SENSORS_STATUS(1);
+  const sensorStatusApiUrl = API.UNIT.END_DEVICES_STATUS(1);
   const getAutomates = API.UNIT.AUTOMATE(1);
 
   let tree;