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

package/src/commons/PreventAccess/__test__/PreventAccess.test.js

@@ -8,8 +8,6 @@ import { mockSCStore } from '../../../context/mockStore';
 import Text from '../../Text';
 import t from '../../../hooks/Common/useTranslations';
 
-const mockGoBack = jest.fn();
-
 const wrapComponent = (headerBodyText, visible, hidePreventAccess) => (
   <SCProvider initState={mockSCStore({})}>
     <PreventAccess
@@ -20,16 +18,6 @@ const wrapComponent = (headerBodyText, visible, hidePreventAccess) => (
   </SCProvider>
 );
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      goBack: mockGoBack,
-    }),
-  };
-});
-
 describe('Test PreventAccess.test', () => {
   let tree;
   let headerBodyText = 'some header test';
@@ -61,6 +49,6 @@ describe('Test PreventAccess.test', () => {
     });
     expect(button1).toBeDefined();
     expect(button2).toBeDefined();
-    expect(mockGoBack).toHaveBeenCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
   });
 });

package/src/commons/Processing/__test__/Connecting.test.js

@@ -8,21 +8,9 @@ import { mockSCStore } from '../../../context/mockStore';
 import { getPusher } from '../../../utils/Pusher';
 import ViewButtonBottom from '../../ViewButtonBottom';
 
-const wrapComponent = ({
-  onReady,
-  onMessage,
-  setHidePopupTurnOnGuide,
-  setIsRecallChipScan,
-  isChangeAddressSuccess,
-}) => (
+const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
-    <Processing
-      onReady={onReady}
-      onMessage={onMessage}
-      setHidePopupTurnOnGuide={setHidePopupTurnOnGuide}
-      setIsRecallChipScan={setIsRecallChipScan}
-      isChangeAddressSuccess={isChangeAddressSuccess}
-    />
+    <Processing {...props} />
   </SCProvider>
 );
 describe('Test Processing', () => {
@@ -98,6 +86,7 @@ describe('Test Processing', () => {
           setHidePopupTurnOnGuide: mockSetHidePopupTurnOnGuide,
           setIsRecallChipScan: mockSetIsRecallChipScan,
           isChangeAddressSuccess: true,
+          showPopupTurnOnGuide: true,
         })
       );
     });

package/src/commons/SearchLocation/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, TextInput } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -10,8 +10,8 @@ const SearchBarLocation = memo(({ input, onTextInput }) => {
   const t = useTranslations();
   return (
     <View style={styles.container}>
-      <IconOutline
-        name="search"
+      <AntDesign
+        name="search1"
         size={24}
         color={Colors.Gray6}
         accessibilityLabel="icon-search"

package/src/commons/SelectActionCard/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import { Card } from '../CardShadow';
 import Text from '../Text';
@@ -20,7 +20,7 @@ const SelectActionCard = memo(({ title, action, onPress }) => {
               {action}
             </Text>
           </View>
-          <IconOutline name="right" size={20} />
+          <AntDesign name="right" size={20} />
         </View>
       </TouchableOpacity>
     </Card>

package/src/commons/SelectSubUnit/__test__/SelectSubUnit.test.js

@@ -14,19 +14,6 @@ import api from '../../../utils/Apis/axios';
 
 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: () => true,
-  };
-});
-
 const wrapComponent = (unitId, title, subTitle, onPressNext) => (
   <SCProvider initState={mockSCStore({})}>
     <SelectSubUnit {...{ unitId, title, subTitle, onPressNext }} />
@@ -34,10 +21,6 @@ const wrapComponent = (unitId, title, subTitle, onPressNext) => (
 );
 
 describe('Test SelectSubUnit', () => {
-  beforeEach(() => {
-    mockedNavigate.mockClear();
-    mockedGoBack.mockClear();
-  });
   let tree;
 
   it('fetch sub-unit success', async () => {
@@ -101,6 +84,6 @@ describe('Test SelectSubUnit', () => {
     await act(async () => {
       viewButtonBottom.props.onLeftClick();
     });
-    expect(mockedGoBack).toHaveBeenCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
   });
 });

package/src/commons/SelectSubUnit/index.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
-import { IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import { API, Colors } from '../../configs';
 import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
@@ -98,7 +98,7 @@ const SelectSubUnit = ({ unitId, title, subTitle, onPressNext, route }) => {
               />
             ))}
             <TouchableOpacity style={styles.rowContainer} onPress={addSubUnit}>
-              <IconFill name="plus-circle" size={20} color={Colors.Primary} />
+              <AntDesign name="plus-circle" size={20} color={Colors.Primary} />
               <View style={styles.row}>
                 <Text type="H4" color={Colors.Primary}>
                   {t('add_new_sub_unit')}

package/src/commons/SelectUnit/__test__/SelectUnit.test.js

@@ -13,18 +13,6 @@ import { API } from '../../../configs';
 
 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 = (title, subTitle, onPressNext) => (
   <SCProvider initState={mockSCStore({})}>
     <SelectUnit {...{ title, subTitle, onPressNext }} />
@@ -115,6 +103,6 @@ describe('test single SelectUnit', () => {
     await act(async () => {
       goBack.props.onPress();
     });
-    expect(mockedGoBack).toBeCalled();
+    expect(global.mockedGoBack).toBeCalled();
   });
 });

package/src/commons/Sharing/BtnRemoveMember.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Colors } from '../../configs';
 
 const BtnRemoveMember = memo(({ member, onPressRemove }) => {
@@ -9,7 +9,7 @@ const BtnRemoveMember = memo(({ member, onPressRemove }) => {
   }, [member, onPressRemove]);
   return (
     <TouchableOpacity style={styles.buttonRemove} onPress={onPress}>
-      <IconOutline name={'minus'} size={20} color={Colors.Gray8} />
+      <AntDesign name={'minus'} size={20} color={Colors.Gray8} />
     </TouchableOpacity>
   );
 });

package/src/commons/Sharing/StationDevicePermissions.js

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -86,7 +86,7 @@ const StationDevicePermissions = ({ dataStation, onselectSensor }) => {
           <View style={styles.infoContainer}>
             <Text style={styles.text}>{sensor.name}</Text>
             <View style={styles.rightImage}>
-              <IconOutline
+              <AntDesign
                 name={expandedIndex === index ? 'up' : 'down'}
                 size={20}
                 color={Colors.Gray6}

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -1,12 +1,12 @@
 import React, { useCallback, useRef, useState } from 'react';
 import {
+  ActivityIndicator,
   Animated,
   Platform,
   RefreshControl,
   StyleSheet,
   View,
 } from 'react-native';
-import { ActivityIndicator } from '@ant-design/react-native';
 import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
 import Text from '../../commons/Text';

package/src/commons/Sharing/__test__/ButtonRemoveMember.test.js

@@ -12,7 +12,7 @@ describe('BtnRemoveMember', () => {
       tree = await renderer.create(component);
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(1);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(1);
   });
 });

package/src/commons/Sharing/__test__/DevicePermissionsCheckbox.test.js

@@ -18,7 +18,7 @@ const wrapComponent = (sensor, mockFunction) => (
 describe('Test DevicePermissionsCheckbox', () => {
   let tree;
   let sensor = {
-    icon: 'caret-down',
+    icon: 'caretdown',
     id: 10,
     read_configs: [{ id: 1 }],
     actions: [{ id: 13 }],

package/src/commons/SubUnit/DeviceTemplate/ConfigAndEvaluation/ConfigAndEvaluation.js

@@ -5,7 +5,7 @@ import Text from '../../../Text';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import { EvaluationConfigWrapper } from '../EvaluationOverConfig/EvaluationOverConfig';
 import IconComponent from '../../../IconComponent';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 const ConfigAndEvaluationDisplay = memo(
   ({ device, valueEvaluation, stationItem, configValue }) => {
@@ -44,7 +44,7 @@ const ConfigAndEvaluationDisplay = memo(
               lastUpdated={configValue?.last_updated}
               format={'DDMMYYYY'}
             />
-            <IconOutline style={styles.marginTop10} name="right" size={12} />
+            <AntDesign style={styles.marginTop10} name="right" size={12} />
           </View>
         )}
       </>

package/src/commons/SubUnit/DeviceTemplate/ConfigValue/ConfigValue.js

@@ -5,7 +5,7 @@ import Text from '../../../Text';
 import { useConfigGlobalState } from '../../../../iot/states';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import IconComponent from '../../../IconComponent';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 const ConfigValue = ({ device, stationItem }) => {
   const [configValues] = useConfigGlobalState('configValues');
@@ -40,7 +40,7 @@ const ConfigValue = ({ device, stationItem }) => {
               lastUpdated={configValue?.last_updated}
               format={'DDMMYYYY'}
             />
-            <IconOutline style={styles.marginTop10} name="right" size={12} />
+            <AntDesign style={styles.marginTop10} name="right" size={12} />
           </View>
         )}
       </View>

package/src/commons/SubUnit/DeviceTemplate/EvaluationOverConfig/EvaluationOverConfig.js

@@ -9,7 +9,7 @@ import {
 } from '../../../../screens/Device/hooks/useEvaluateValue';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import IconComponent from '../../../IconComponent';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 export const EvaluationConfigWrapper = memo(
   ({ device, stationItem, Child }) => {
@@ -69,7 +69,7 @@ const EvaluationOverConfigDisplay = memo(
                 lastUpdated={configValue?.last_updated}
                 format={'DDMMYYYY'}
               />
-              <IconOutline style={styles.marginTop10} name="right" size={12} />
+              <AntDesign style={styles.marginTop10} name="right" size={12} />
             </View>
           )}
         </View>

package/src/commons/SubUnit/Item/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, Image } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 import { Colors, Images } from '../../../configs';
 import Text from '../../Text';
@@ -27,8 +27,8 @@ const SubUnitCard = ({ onPressItem, devices, name, id }) => {
           </Text>
           <Text style={[styles.subText]}>{devices + ' devices'}</Text>
         </View>
-        <IconOutline
-          name="more"
+        <MaterialIcons
+          name="more-vert"
           color={Colors.White}
           size={24}
           onPress={() => {}}

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import moment from 'moment';
 import Text from '../../Text';
 import { API, Colors } from '../../../configs';
@@ -107,7 +107,7 @@ const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
             >
               {activateAt && t('activated_time', { time: activateAt })}
             </Text>
-            <IconOutline name="right" size={12} />
+            <AntDesign name="right" size={12} />
           </View>
         </TouchableOpacity>
       </View>

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -88,7 +88,7 @@ describe('test Item', () => {
     await act(async () => {
       await item[0].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScenarioName, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScenarioName, {
       automate: {
         type: 'one_tap',
         unit: undefined,
@@ -106,7 +106,7 @@ describe('test Item', () => {
     await act(async () => {
       await goDetail[0].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
       id: 1,
       preAutomate: data.listAutomate[0].data[0],
     });
@@ -193,7 +193,7 @@ describe('test Item', () => {
     await act(async () => {
       await goDetail[0].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
       id: 1,
       preAutomate: data.listAutomate[0].data[0],
     });
@@ -238,10 +238,13 @@ describe('test Item', () => {
     await act(async () => {
       await item[0].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddAutomationTypeSmart, {
-      automate: { unit: undefined },
-      closeScreen: undefined,
-    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
+      Routes.AddAutomationTypeSmart,
+      {
+        automate: { unit: undefined },
+        closeScreen: undefined,
+      }
+    );
     mockedNavigate.mockClear();
 
     const goDetail = tree.root.findAll(
@@ -286,7 +289,7 @@ describe('test Item', () => {
     await act(async () => {
       await item[0].props.onPress();
     });
-    expect(mockedNavigate).not.toBeCalled();
+    expect(global.mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
       getTranslate('en', 'reach_max_automations_per_unit', { length: 0 }),
       '',

package/src/commons/SubUnit/__test__/Favorites.test.js

@@ -13,18 +13,6 @@ const wrapComponent = (props) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-    useIsFocused: () => true,
-    useFocusEffect: jest.fn(),
-  };
-});
-
 describe('test ShortDetail Subunit', () => {
   let tree;
   let props;
@@ -58,7 +46,7 @@ describe('test ShortDetail Subunit', () => {
         {
           action: {
             color: '#00979D',
-            icon: 'caret-up',
+            icon: 'caretup',
             id: 1,
             key: '',
           },

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -27,17 +27,6 @@ jest.mock('react-native-permissions', () => {
   return mock;
 });
 
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-    useFocusEffect: jest.fn((handler) => handler()),
-  };
-});
 jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{}, null],
 }));
@@ -135,7 +124,7 @@ describe('test ShortDetail Subunit', () => {
       {
         action: {
           color: '#00979D',
-          icon: 'caret-up',
+          icon: 'caretup',
           id: 1,
           key: '',
         },
@@ -167,7 +156,7 @@ describe('test ShortDetail Subunit', () => {
       {
         action: {
           color: '#00979D',
-          icon: 'caret-up',
+          icon: 'caretup',
           id: 1,
           key: '',
         },
@@ -212,7 +201,7 @@ describe('test ShortDetail Subunit', () => {
           {
             action: {
               color: '#00979D',
-              icon: 'caret-up',
+              icon: 'caretup',
               id: 1,
               key: '',
             },
@@ -263,7 +252,7 @@ describe('test ShortDetail Subunit', () => {
         device_type: 'HANET',
         action: {
           color: '#00979D',
-          icon: 'caret-up',
+          icon: 'caretup',
           id: 1,
           key: '',
         },
@@ -299,7 +288,7 @@ describe('test ShortDetail Subunit', () => {
       buttonAddNew.props.onAddNew();
     });
     await mock.request(keyPermission.CAMERA);
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddGatewayStack, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.AddGatewayStack, {
       screen: Routes.SelectDeviceType,
       params: {
         unit: props.unit,

package/src/commons/SummaryItem/index.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import styles from './styles';
 import { Colors } from '../../configs';
@@ -11,38 +11,37 @@ import WaterQuality from '../../../assets/images/WaterQuality.svg';
 import Device from '../../../assets/images/Device.svg';
 import { AccessibilityLabel } from '../../configs/Constants';
 
+const iconMap = {
+  air_quality: AirQuality,
+  water_quality: WaterQuality,
+  temperature: Temperature,
+  uv_index: UVIndex,
+  three_phase_power_consumption: PowerMeter,
+  power_consumption: PowerMeter,
+  default: Device,
+};
+
 const SummaryItem = memo(({ item, goToSummary }) => {
-  const Icon = (() => {
-    switch (item.template) {
-      case 'air_quality':
-        return AirQuality; /* istanbul ignore next */
-      case 'water_quality':
-        return WaterQuality; /* istanbul ignore next */
-      case 'temperature':
-        return Temperature; /* istanbul ignore next */
-      case 'uv_index':
-        return UVIndex; /* istanbul ignore next */
-      case 'three_phase_power_consumption':
-        return PowerMeter; /* istanbul ignore next */
-      case 'power_consumption':
-        return PowerMeter; /* istanbul ignore next */
-      default:
-        return Device; /* istanbul ignore next */
-    }
-  })();
+  const { template, left_text, left_value, id } = item;
+  const Icon = useMemo(() => iconMap[template] || iconMap.default, [template]);
+
+  const handlePress = useCallback(() => {
+    goToSummary(item);
+  }, [goToSummary, item]);
+
   return (
     <TouchableOpacity
-      onPress={() => goToSummary(item)}
+      onPress={handlePress}
       style={styles.wrapSummaryItem}
-      accessibilityLabel={`${AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${item?.id}`}
+      accessibilityLabel={`${AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${id}`}
     >
       <View style={styles.summaryItem}>
         <Icon />
         <Text type="Body" color={Colors.Gray7} style={styles.summaryText}>
-          {item.left_text}
+          {left_text}
         </Text>
         <Text color={Colors.Gray9} bold>
-          {item.left_value}
+          {left_value}
         </Text>
       </View>
       <View style={styles.dashItem} />

package/src/commons/Tabbar/__test__/index.test.js

@@ -12,17 +12,6 @@ const wrapComponent = (props) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 describe('Test HanetCameraDetail', () => {
   Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
   let tree, props;