@eohjsc/react-native-smart-city 0.6.2 → 0.7.3-rc1

package/src/navigations/AutomateStack.js

@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useEffect, useContext } from 'react';
 import { TouchableOpacity } from 'react-native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/core';
-import { Icon } from '@ant-design/react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { SCContext } from '../context';
 import { Action } from '../context/actionType';
 
@@ -16,7 +16,7 @@ import MultiUnits from '../screens/Automate/MultiUnits';
 import { axiosGet } from '../utils/Apis/axios';
 import { API } from '../configs';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const AutomateStack = memo(() => {
   const t = useTranslations();
@@ -44,7 +44,7 @@ const AutomateStack = memo(() => {
         title: t('smart'),
         headerLeft: () => (
           <TouchableOpacity style={Theme.menuIcon} onPress={toggleDrawer}>
-            <Icon name={'menu'} color={Colors.Black} />
+            <MaterialIcons name={'menu'} color={Colors.Black} size={27} />
           </TouchableOpacity>
         ),
         headerTitleAlign: 'left',

package/src/navigations/EmergencyContactsStack.js

@@ -1,5 +1,5 @@
-import { IconOutline } from '@ant-design/icons-react-native';
-import { createStackNavigator } from '@react-navigation/stack';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
 
@@ -10,7 +10,7 @@ import { EmergencyContactsSelectContacts } from '../screens/EmergencyContacts/Em
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const EmergencyContactsStack = memo(() => {
   return (
@@ -19,7 +19,7 @@ export const EmergencyContactsStack = memo(() => {
         ...screenOptions,
         headerTitleAlign: 'center',
         headerBackImage: () => (
-          <IconOutline
+          <AntDesign
             name="left"
             size={27}
             color={Colors.Black}

package/src/navigations/GatewayStack.js

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Routes from '../utils/Route';
 import { screenOptions } from './utils';
 import Gateway from '../screens/Gateway';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const GatewayStack = memo(() => {
   return (

package/src/navigations/HanetCameraStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 import HanetCameraDetail from '../screens/HanetCamera/Detail';
 import HanetManageAccess from '../screens/HanetCamera/ManageAccess';
@@ -7,7 +7,7 @@ import HanetCaptureFaceID from '../screens/HanetCamera/CaptureFaceID';
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const HanetCameraStack = memo(() => {
   return (

package/src/navigations/Main.js

@@ -10,7 +10,7 @@
 // import { createDrawerNavigator } from '@react-navigation/drawer';
 // import { useNavigation } from '@react-navigation/native';
 // import { getStatusBarHeight } from 'react-native-iphone-x-helper';
-// import { createStackNavigator } from '@react-navigation/stack';
+// import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 // import Tabbar from '../commons/Tabbar';
 // import { Colors, Constants, Images } from '../configs';
@@ -40,7 +40,7 @@
 
 // const Tab = createBottomTabNavigator();
 // const Drawer = createDrawerNavigator();
-// const Stack = createStackNavigator();
+// const Stack = createNativeStackNavigator();
 
 // const getWidth = () => {
 //   const Width = Constants.width - 12;

package/src/navigations/NotificationStack.js

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Routes from '../utils/Route';
 import Notification from '../screens/Notification';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const NotificationStack = memo(() => {
   return (

package/src/navigations/SharedStack.js

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { Icon } from '@ant-design/react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useTranslations } from '../hooks/Common/useTranslations';
 
 import Shared from '../screens/SharedUnit';
@@ -10,11 +10,12 @@ import { Colors } from '../configs';
 import Routes from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 const SharedStack = memo(() => {
   const t = useTranslations();
   const { toggleDrawer, goBack } = useNavigation();
   const { params } = useRoute();
+  const { isMainSource } = params || {};
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -26,11 +27,12 @@ const SharedStack = memo(() => {
           headerLeft: () => (
             <TouchableOpacity
               style={styles.btnMenu}
-              onPress={() => (params?.isMainSource ? toggleDrawer() : goBack())}
+              onPress={() => (isMainSource ? toggleDrawer() : goBack())}
             >
-              <Icon
-                name={params?.isMainSource ? 'menu' : 'arrow-left'}
+              <MaterialIcons
+                name={isMainSource ? 'menu' : 'chevron-left'}
                 color={Colors.Black}
+                size={27}
               />
             </TouchableOpacity>
           ),

package/src/navigations/SmartAccountStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 import SmartAccount from '../screens/SmartAccount';
 import SmartAccountConnecting from '../screens/SmartAccount/Connecting';
@@ -8,7 +8,7 @@ import SuccessfullyConnected from '../screens/SmartAccount/SuccessfullyConnected
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const SmartAccountStack = memo(() => {
   return (

package/src/navigations/SmartIrStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import SelectIrDeviceType from '../screens/SmartIr/components/SelectIrDeviceType';
@@ -7,7 +7,7 @@ import GroupButtonByType from '../screens/SmartIr/components/GroupButtonByType/G
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const SmartIrStack = memo(() => {
   return (

package/src/navigations/SmartLockStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import Route from '../utils/Route';
@@ -8,7 +8,7 @@ import AutoLock from '../commons/ActionGroup/OnOffSmartLock/AutoLock/index';
 import PasscodeList from '../commons/ActionGroup/OnOffSmartLock/PasscodeList/index';
 import ItemPasscode from '../commons/ActionGroup/OnOffSmartLock/PasscodeList/ItemPasscode';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const SmartLockStack = memo(() => {
   return (

package/src/navigations/SmartStack.js

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Routes from '../utils/Route';
 import { screenOptions } from './utils';
 import Smart from '../screens/Smart';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const SmartStack = memo(() => {
   return (

package/src/navigations/TemplateStack.js

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Routes from '../utils/Route';
 import { screenOptions } from './utils';
 import Template from '../screens/Template';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const TemplateStack = memo(() => {
   return (

package/src/navigations/UnitStack.js

@@ -1,7 +1,7 @@
 import React, { memo, useContext, useEffect } from 'react';
 import { AppState, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
-import { createStackNavigator } from '@react-navigation/stack';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { BleManager } from 'react-native-ble-plx';
 import NetInfo from '@react-native-community/netinfo';
 import { get } from 'lodash';
@@ -25,7 +25,6 @@ import SelectAddress from '../screens/Unit/SelectAddress';
 import ChooseLocation from '../screens/Unit/ChooseLocation';
 import ManageUnit from '../screens/Unit/ManageUnit';
 import ListSmartAccount from '../screens/Unit/SmartAccount';
-import SubUnitDetail from '../screens/SubUnit/Detail';
 import UnitDetail from '../screens/Unit/Detail';
 import UnitSummary from '../screens/UnitSummary';
 import UVIndexGuide from '../screens/UVIndexGuide';
@@ -70,7 +69,7 @@ import SetupScriptNotify from '../screens/Automate/AddNewAction/SetupScriptNotif
 import SetupScriptDelay from '../screens/Automate/AddNewAction/SetupScriptDelay';
 import UpdateActionScript from '../screens/Automate/EditActionsList/UpdateActionScript';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const bleManager = new BleManager();
 
@@ -174,7 +173,7 @@ export const UnitStack = memo((props) => {
         ...screenOptions,
         headerTitleAlign: 'center',
         headerBackImage: () => (
-          <IconOutline
+          <AntDesign
             name="left"
             size={27}
             color={Colors.Black}
@@ -250,13 +249,6 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
-      <Stack.Screen
-        name={Route.SubUnitDetail}
-        component={SubUnitDetail}
-        options={{
-          headerShown: false,
-        }}
-      />
       <Stack.Screen
         name={Route.ManageSubUnit}
         component={ManageSubUnit}

package/src/navigations/utils.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { CardStyleInterpolators } from '@react-navigation/stack';
 import { StackActions } from '@react-navigation/native';
 
 // NavigationContainer is referred here - Check NavigationStack
@@ -13,9 +12,7 @@ export function goBack() {
   navigationRef.current?.goBack();
 }
 
-export const screenOptions = {
-  cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
-};
+export const screenOptions = {};
 
 export const popAction = (value) => StackActions.pop(value);
 

package/src/screens/ActivityLog/hooks/index.js

@@ -59,6 +59,9 @@ export default ({ id, type, share, filterEnabled }) => {
 
   const permissions = useBackendPermission();
   const fetchData = async (filters) => {
+    if (!api) {
+      return;
+    }
     if (api?.needPermission && !permissions?.[api?.needPermission]) {
       setIsLoading(false);
       setIsRefreshing(false);
@@ -81,12 +84,12 @@ export default ({ id, type, share, filterEnabled }) => {
       setIsLoading(true);
     }
     const params = new URLSearchParams();
-    if (filterEnabled.user) {
+    if (filterEnabled?.user) {
       filters.users.map((id) => {
         params.append('users', id);
       });
     }
-    if (filterEnabled.date) {
+    if (filterEnabled?.date) {
       params.append(
         'date_from',
         moment(filters.date_from).format('YYYY-MM-DD')
@@ -117,10 +120,10 @@ export default ({ id, type, share, filterEnabled }) => {
 
   const fetchMembers = async () => {
     const api = apiMaps[type];
-    if (!filterEnabled.user) {
+    if (!filterEnabled?.user) {
       return;
     }
-    const { success, data } = await axiosGet(api.memberUrl(share.id));
+    const { success, data } = await axiosGet(api.memberUrl(share?.id));
     if (success) {
       data.unshift({ id: 0, name: t('all') });
       setMembers(data);

package/src/screens/ActivityLog/index.js

@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Colors } from '../../configs';
 import { HeaderCustom } from '../../commons/Header';
 import ItemLog from './ItemLog';
@@ -83,7 +83,7 @@ const ActivityLogScreen = ({ route }) => {
         onPress={setShowFilterPopup}
         accessibilityLabel={AccessibilityLabel.FILTER_BUTTON}
       >
-        <Icon name={'filter'} size={27} color={Colors.Black} />
+        <AntDesign name={'filter'} size={27} color={Colors.Black} />
       </TouchableOpacity>
     ),
     [setShowFilterPopup]

package/src/screens/AddCommon/__test__/SelectSubUnit.test.js

@@ -15,19 +15,6 @@ import Routes from '../../../utils/Route';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedGoBack = jest.fn();
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-      goBack: mockedGoBack,
-    }),
-    useIsFocused: () => ({}),
-  };
-});
-
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <AddCommonSelectSubUnit route={route} />
@@ -35,10 +22,6 @@ const wrapComponent = (route) => (
 );
 
 describe('Test SelectSubUnit', () => {
-  beforeEach(() => {
-    mockedNavigate.mockClear();
-    mockedGoBack.mockClear();
-  });
   let tree;
 
   it('test ViewButtonBottom onRightClick', async () => {
@@ -51,14 +34,14 @@ describe('Test SelectSubUnit', () => {
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).toHaveBeenCalled();
+    expect(global.mockedNavigate).toHaveBeenCalled();
   });
 });
 
 describe('Test SelectSubUnit container', () => {
   beforeEach(() => {
-    mockedNavigate.mockClear();
-    mockedGoBack.mockClear();
+    global.mockedNavigate.mockClear();
+    global.mockedGoBack.mockClear();
   });
   let tree;
   const list_type = ['AddHassiDevice'];
@@ -109,7 +92,7 @@ describe('Test SelectSubUnit container', () => {
 
       switch (type) {
         case 'AddHassiDevice':
-          expect(mockedNavigate).toHaveBeenCalledWith(
+          expect(global.mockedNavigate).toHaveBeenCalledWith(
             Routes.SmartAccountStack,
             {
               screen: Routes.SmartAccountConnecting,

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

@@ -14,18 +14,6 @@ import SelectUnit from '../../../commons/SelectUnit';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedGoBack = jest.fn();
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-      goBack: mockedGoBack,
-    }),
-  };
-});
-
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <AddCommonSelectUnit route={route} />
@@ -34,8 +22,8 @@ const wrapComponent = (route) => (
 
 describe('Test SelectUnit container', () => {
   beforeEach(() => {
-    mockedNavigate.mockClear();
-    mockedGoBack.mockClear();
+    global.mockedNavigate.mockClear();
+    global.mockedGoBack.mockClear();
   });
 
   beforeEach(() => {
@@ -115,12 +103,12 @@ describe('Test SelectUnit container', () => {
 
       switch (type) {
         case 'AddSubUnit':
-          expect(mockedNavigate).toBeCalledWith('AddSubUnit', {
+          expect(global.mockedNavigate).toBeCalledWith('AddSubUnit', {
             unit: { id: 1, name: 'Unit 1' },
           });
           break;
         case 'AddDevice':
-          expect(mockedNavigate).toBeCalledWith('AddGatewayStack', {
+          expect(global.mockedNavigate).toBeCalledWith('AddGatewayStack', {
             screen: 'SelectDeviceType',
             params: {
               unit: {
@@ -131,12 +119,12 @@ describe('Test SelectUnit container', () => {
           });
           break;
         case 'AddMember':
-          expect(mockedNavigate).toBeCalledWith('SelectShareDevice', {
+          expect(global.mockedNavigate).toBeCalledWith('SelectShareDevice', {
             unit: { id: 1, name: 'Unit 1' },
           });
           break;
         case 'AddLGDevice':
-          expect(mockedNavigate).toBeCalledWith('AddLGDevice', {
+          expect(global.mockedNavigate).toBeCalledWith('AddLGDevice', {
             code: 'CODE',
             backend_url: 'https://doamin.com/',
             unit_id: 1,
@@ -237,6 +225,6 @@ describe('test single SelectUnit', () => {
     await act(async () => {
       goBack.props.onPress();
     });
-    expect(mockedGoBack).toBeCalled();
+    expect(global.mockedGoBack).toBeCalled();
   });
 });

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

@@ -16,6 +16,7 @@ import {
   OpenSetting,
 } from '../../../utils/Permission/common';
 import { RESULTS } from 'react-native-permissions';
+import { useNavigation } from '@react-navigation/native';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -25,18 +26,6 @@ const wrapComponent = (route) => (
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockNavigate = jest.fn();
-const mockGoBack = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-      goBack: mockGoBack,
-    }),
-  };
-});
-
 jest.mock('react-native-maps', () => {
   const { forwardRef } = require('react');
   const { View } = require('react-native');
@@ -83,6 +72,7 @@ jest.mock('react-native-permissions', () => {
 describe('Test SelectAddress', () => {
   let tree, route, Platform;
   const mockUpdateLocation = jest.fn();
+  const { navigate } = useNavigation();
 
   beforeAll(() => {
     Platform = require('react-native').Platform;
@@ -259,6 +249,6 @@ describe('Test SelectAddress', () => {
     await act(async () => {
       await button.props.onPress();
     });
-    expect(mockNavigate).toBeCalled();
+    expect(navigate).toBeCalled();
   });
 });

package/src/screens/AddLocationMaps/index.js

@@ -2,7 +2,8 @@ import React, { memo, useState, useCallback, useRef, useEffect } from 'react';
 import { View, ScrollView, TouchableOpacity } from 'react-native';
 import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
-import { IconOutline, IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { check, RESULTS } from 'react-native-permissions';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -204,7 +205,11 @@ const AddLocationMaps = memo(() => {
                   style={styles.button}
                   accessibilityLabel={AccessibilityLabel.BUTTON_YOUR_LOCATION}
                 >
-                  <IconOutline name="aim" size={27} color={Colors.Primary} />
+                  <MaterialIcons
+                    name="my-location"
+                    size={27}
+                    color={Colors.Primary}
+                  />
                   <Text
                     type="Body"
                     color={Colors.Gray9}
@@ -220,8 +225,8 @@ const AddLocationMaps = memo(() => {
                   style={styles.button}
                   accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
                 >
-                  <IconFill
-                    name="environment"
+                  <AntDesign
+                    name="enviroment"
                     size={27}
                     color={Colors.Primary}
                   />
@@ -269,8 +274,8 @@ const AddLocationMaps = memo(() => {
                   }}
                   tracksViewChanges={false}
                 >
-                  <IconFill
-                    name="environment"
+                  <AntDesign
+                    name="enviroment"
                     size={27}
                     color={Colors.Blue10}
                   />

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

@@ -22,27 +22,10 @@ const wrapComponent = (route) => (
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedNavigate = jest.fn();
-const mockedGoBack = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-      goBack: mockedGoBack,
-    }),
-  };
-});
-
 describe('Test AddNewDevice', () => {
   let tree;
   let route;
 
-  afterEach(() => {
-    mockedNavigate.mockClear();
-  });
-
   beforeEach(() => {
     route = {
       params: {
@@ -145,7 +128,7 @@ describe('Test AddNewDevice', () => {
     await act(async () => {
       viewButtonBottom.props.onLeftClick();
     });
-    expect(mockedGoBack).toHaveBeenCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
   });
 
   it('ViewButtonBottom onRightClick without select stationId', async () => {
@@ -157,7 +140,7 @@ describe('Test AddNewDevice', () => {
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).toHaveBeenCalled();
+    expect(global.mockedNavigate).toHaveBeenCalled();
   });
 
   it('ViewButtonBottom onRightClick with stationId', async () => {
@@ -181,7 +164,7 @@ describe('Test AddNewDevice', () => {
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScanSensorQR, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScanSensorQR, {
       station_id: 2,
       unit_id: 1,
       unit_name: 'Unit name',