@eohjsc/react-native-smart-city 0.3.92 → 0.3.94

package/src/screens/Unit/AddMenu.js

@@ -7,61 +7,84 @@ import AddDeviceIcon from '../../../assets/images/Popover/Dashboard/AddDevice.sv
 import SmartAccount from '../../../assets/images/Popover/Dashboard/SmartAccount.svg';
 import AddMemberIcon from '../../../assets/images/Popover/Dashboard/AddMember.svg';
 import { useNavigation } from '@react-navigation/native';
+import { ToastBottomHelper } from '../../utils/Utils';
+import { useBackendPermission } from '../../utils/Permission/backend';
 
 const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
   const t = useTranslations();
   const navigation = useNavigation();
+  const permissions = useBackendPermission();
 
   const onItemClick = useCallback(
-    ({ route: routeName, data }) => {
+    (item) => {
       setHideAdd(true);
       afterItemClick();
-      routeName && navigation.navigate(routeName, data);
+      item.onClick && item.onClick();
     },
-    [setHideAdd, afterItemClick, navigation]
+    [setHideAdd, afterItemClick]
   );
 
   const listItem = useMemo(() => {
     return [
       {
         id: 'add_sub_unit',
-        route: Routes.AddSubUnitStack,
         text: t('sub_unit'),
         image: <AddSubUnitIcon width={43} height={43} />,
-        data: {
-          screen: Routes.AddSubUnit,
-          params: { unit, isInsideUnit: true },
+        onClick: () => {
+          // 2 is station favorite and smart
+          if (unit.stations.length - 2 >= permissions.max_stations_per_unit) {
+            ToastBottomHelper.error(t('reach_max_stations_per_unit'));
+            return;
+          }
+          navigation.navigate(Routes.AddSubUnitStack, {
+            screen: Routes.AddSubUnit,
+            params: { unit, isInsideUnit: true },
+          });
         },
       },
       {
         id: 'add_member',
-        route: Routes.AddMemberStack,
         text: t('member'),
         image: <AddMemberIcon width={43} height={43} />,
-        data: { screen: Routes.SharingSelectPermission, params: { unit } },
+        onClick: () =>
+          navigation.navigate(Routes.AddMemberStack, {
+            screen: Routes.SharingSelectPermission,
+            params: { unit },
+          }),
       },
       {
         id: 'add_device',
-        route: Routes.AddGatewayStack,
         text: t('device'),
         image: <AddDeviceIcon width={43} height={43} />,
-        data: {
-          screen: Routes.SelectDeviceType,
-          params: { unit },
+        onClick: () => {
+          let hasPermission = false;
+          Object.keys(permissions).forEach((key) => {
+            if (key.includes('plug_and_play') && permissions[key]) {
+              hasPermission = true;
+            }
+          });
+          if (!hasPermission) {
+            ToastBottomHelper.error(t('not_support_plug_and_play'));
+            return;
+          }
+          navigation.navigate(Routes.AddGatewayStack, {
+            screen: Routes.SelectDeviceType,
+            params: { unit },
+          });
         },
       },
       {
         id: 'add_smart_account',
-        route: Routes.SmartAccountStack,
         text: t('name_smart_account'),
         image: <SmartAccount width={43} height={43} />,
-        data: {
-          screen: Routes.SmartAccount,
-          params: { unitId: unit?.id, unitName: unit?.name },
-        },
+        onClick: () =>
+          navigation.navigate(Routes.SmartAccountStack, {
+            screen: Routes.SmartAccount,
+            params: { unitId: unit?.id, unitName: unit?.name },
+          }),
       },
     ];
-  }, [t, unit]);
+  }, [t, unit, navigation, permissions]);
 
   const hideAddModal = useCallback(() => {
     setHideAdd(false);

package/src/screens/Unit/Detail.js

@@ -2,11 +2,10 @@ import React, {
   useCallback,
   useEffect,
   useState,
-  useRef,
   useContext,
   useMemo,
 } from 'react';
-import { AppState, RefreshControl, View, Platform } from 'react-native';
+import { RefreshControl, View, Platform } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -219,7 +218,7 @@ const UnitDetail = ({ route }) => {
     isSuccessfullyConnected ? RouterHardware(Routes.Dashboard) : goBack
   );
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
-  const { isLavidaSource, isFirstOpenCamera } = useSCContextSelector(
+  const { isLavidaSource, isFirstOpenCamera, appState } = useSCContextSelector(
     (state) => state.app
   );
 
@@ -228,7 +227,6 @@ const UnitDetail = ({ route }) => {
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
   const [showPreventAccess, setShowPreventAccess, setHidePreventAccess] =
     useBoolean(false);
-  const appState = useRef(AppState.currentState);
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
@@ -306,21 +304,8 @@ const UnitDetail = ({ route }) => {
   );
 
   useEffect(() => {
-    const handler = (nextAppState) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        fetchDetails();
-      }
-      appState.current = nextAppState;
-    };
-    const subscription = AppState.addEventListener('change', handler);
-
-    return () => {
-      subscription?.remove();
-    };
-  }, [fetchDetails]);
+    appState === 'active' && fetchDetails();
+  }, [appState, fetchDetails]);
 
   useValueEvaluations(unitId);
 

package/src/screens/Unit/Summaries.js

@@ -1,5 +1,5 @@
-import React, { memo, useCallback, useEffect, useState, useRef } from 'react';
-import { AppState, ScrollView } from 'react-native';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
 import SummaryItem from '../../commons/SummaryItem';
 import Routes from '../../utils/Route';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
@@ -7,6 +7,7 @@ import { axiosGet } from '../../utils/Apis/axios';
 import { API } from '../../configs';
 import { useReceiveNotifications } from '../../hooks';
 import { AccessibilityLabel } from '../../configs/Constants';
+import { useSCContextSelector } from '../../context';
 
 let timeoutId;
 
@@ -14,7 +15,7 @@ const Summaries = memo(({ unit }) => {
   const [unitSummaries, setUnitSummaries] = useState([]);
   const isFocused = useIsFocused();
   const navigation = useNavigation();
-  const appState = useRef(AppState.currentState);
+  const appState = useSCContextSelector((state) => state.app.appState);
 
   const fetchUnitSummary = useCallback(async () => {
     if (!unit.id) {
@@ -59,20 +60,8 @@ const Summaries = memo(({ unit }) => {
   }, [fetchUnitSummary]);
 
   useEffect(() => {
-    const subscription = AppState.addEventListener('change', (nextAppState) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        fetchUnitSummary();
-      }
-      appState.current = nextAppState;
-    });
-
-    return () => {
-      subscription?.remove();
-    };
-  }, [fetchUnitSummary]);
+    appState === 'active' && fetchUnitSummary();
+  }, [appState, fetchUnitSummary]);
 
   useEffect(() => {
     if (!isFocused) {

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

@@ -5,13 +5,15 @@ import MenuActionAddnew from '../../../commons/MenuActionAddnew';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import AddMenu from '../AddMenu';
+import { useNavigation } from '@react-navigation/native';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import { getTranslate } from '../../../utils/I18n';
 
-const mockedNavigate = jest.fn();
 const mockedAfterItemClick = jest.fn();
 const mockedHideAddModal = jest.fn();
 
-const wrapComponent = (unit) => (
-  <SCProvider initState={mockSCStore({})}>
+const wrapComponent = (unit, storeData = {}) => (
+  <SCProvider initState={mockSCStore(storeData)}>
     <AddMenu
       unit={unit}
       afterItemClick={mockedAfterItemClick}
@@ -21,17 +23,15 @@ const wrapComponent = (unit) => (
   </SCProvider>
 );
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: jest.fn(),
-  };
-});
-
 describe('Test AddMenu Unit', () => {
+  const mockedNavigate = useNavigation().navigate;
+  const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    spyToastError.mockClear();
+  });
+
   let tree;
   it('render AddMenu without route', async () => {
     let unit = { id: 1, name: 'Unit 1' };
@@ -68,8 +68,9 @@ describe('Test AddMenu Unit', () => {
     const menuActionAddnew = instance.findByType(MenuActionAddnew);
     await act(async () => {
       menuActionAddnew.props.onItemClick({
-        route: 'route test',
-        data: 'data test',
+        onClick: () => {
+          mockedNavigate('route test', 'data test');
+        },
       });
     });
 
@@ -77,4 +78,56 @@ describe('Test AddMenu Unit', () => {
     expect(mockedAfterItemClick).toHaveBeenCalled();
     expect(mockedNavigate).toHaveBeenCalledWith('route test', 'data test');
   });
+
+  it('add new device but have no permission', async () => {
+    let unit = { id: 1, name: 'Unit 1' };
+    await act(async () => {
+      tree = await create(
+        wrapComponent(unit, {
+          auth: {
+            account: {
+              user: {
+                permissions: {},
+              },
+            },
+          },
+        })
+      );
+    });
+
+    const instance = tree.root;
+    const menuActionAddnew = instance.findByType(MenuActionAddnew);
+    await act(async () => {
+      menuActionAddnew.props.onItemClick(menuActionAddnew.props.dataActions[2]);
+    });
+    expect(spyToastError).toBeCalledWith(
+      getTranslate('en', 'not_support_plug_and_play')
+    );
+  });
+
+  it('add new device has permission', async () => {
+    let unit = { id: 1, name: 'Unit 1' };
+    await act(async () => {
+      tree = await create(
+        wrapComponent(unit, {
+          auth: {
+            account: {
+              user: {
+                permissions: {
+                  plug_and_play_zigbee: true,
+                },
+              },
+            },
+          },
+        })
+      );
+    });
+
+    const instance = tree.root;
+    const menuActionAddnew = instance.findByType(MenuActionAddnew);
+    await act(async () => {
+      menuActionAddnew.props.onItemClick(menuActionAddnew.props.dataActions[2]);
+    });
+    expect(spyToastError).not.toBeCalled();
+  });
 });

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

@@ -104,10 +104,10 @@ describe('Test Summaries', () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent(props));
     });
-    expect(mock.history.get).toHaveLength(1);
+    expect(mock.history.get).toHaveLength(2);
     await act(async () => {
       jest.runOnlyPendingTimers();
     });
-    expect(mock.history.get).toHaveLength(2);
+    expect(mock.history.get).toHaveLength(3);
   });
 });

package/src/screens/Unit/components/AutomateScript/index.js

@@ -59,7 +59,7 @@ const AutomateScript = ({ automate, onPress, isSelected }) => {
           </Text>
           <View style={styles.descriptionContainer}>
             <Text numberOfLines={1} type={'Label'} color={Colors.Gray7}>
-              {`${t('create_by')} ${author}`}
+              {t('created_by', { name: author })}
             </Text>
             <IconOutline name="right" size={12} />
           </View>