@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

package/src/commons/Device/__test__/__snapshots__/DisconnectedView.test.js.snap

@@ -88,7 +88,7 @@ exports[`Test DisconnectedView render DisconnectedView icon barrier 1`] = `
         ]
       }
     >
-      Ngắt kết nối
+      Disconnected
     </Text>
   </View>
   <View
@@ -143,7 +143,7 @@ exports[`Test DisconnectedView render DisconnectedView icon barrier 1`] = `
           ]
         }
       >
-        Gợi ý
+        Suggestions
         :
       </Text>
     </View>
@@ -191,7 +191,7 @@ exports[`Test DisconnectedView render DisconnectedView icon barrier 1`] = `
           ]
         }
       >
-        Kiểm tra lại nguồn điện của thiết bị.
+        Check the power on your device.
       </Text>
     </View>
     <View
@@ -238,7 +238,7 @@ exports[`Test DisconnectedView render DisconnectedView icon barrier 1`] = `
           ]
         }
       >
-        Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.
+        Check the Wi-Fi/Cellular signal or try to reset it.
       </Text>
     </View>
   </View>
@@ -333,7 +333,7 @@ exports[`Test DisconnectedView render DisconnectedView icon dooor 1`] = `
         ]
       }
     >
-      Ngắt kết nối
+      Disconnected
     </Text>
   </View>
   <View
@@ -388,7 +388,7 @@ exports[`Test DisconnectedView render DisconnectedView icon dooor 1`] = `
           ]
         }
       >
-        Gợi ý
+        Suggestions
         :
       </Text>
     </View>
@@ -436,7 +436,7 @@ exports[`Test DisconnectedView render DisconnectedView icon dooor 1`] = `
           ]
         }
       >
-        Kiểm tra lại nguồn điện của thiết bị.
+        Check the power on your device.
       </Text>
     </View>
     <View
@@ -483,7 +483,7 @@ exports[`Test DisconnectedView render DisconnectedView icon dooor 1`] = `
           ]
         }
       >
-        Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.
+        Check the Wi-Fi/Cellular signal or try to reset it.
       </Text>
     </View>
   </View>
@@ -578,7 +578,7 @@ exports[`Test DisconnectedView render DisconnectedView icon sensor 1`] = `
         ]
       }
     >
-      Ngắt kết nối
+      Disconnected
     </Text>
   </View>
   <View
@@ -633,7 +633,7 @@ exports[`Test DisconnectedView render DisconnectedView icon sensor 1`] = `
           ]
         }
       >
-        Gợi ý
+        Suggestions
         :
       </Text>
     </View>
@@ -681,7 +681,7 @@ exports[`Test DisconnectedView render DisconnectedView icon sensor 1`] = `
           ]
         }
       >
-        Kiểm tra lại nguồn điện của thiết bị.
+        Check the power on your device.
       </Text>
     </View>
     <View
@@ -728,7 +728,7 @@ exports[`Test DisconnectedView render DisconnectedView icon sensor 1`] = `
           ]
         }
       >
-        Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.
+        Check the Wi-Fi/Cellular signal or try to reset it.
       </Text>
     </View>
   </View>
@@ -823,7 +823,7 @@ exports[`Test DisconnectedView render DisconnectedView icon test 1`] = `
         ]
       }
     >
-      Ngắt kết nối
+      Disconnected
     </Text>
   </View>
   <View
@@ -878,7 +878,7 @@ exports[`Test DisconnectedView render DisconnectedView icon test 1`] = `
           ]
         }
       >
-        Gợi ý
+        Suggestions
         :
       </Text>
     </View>
@@ -926,7 +926,7 @@ exports[`Test DisconnectedView render DisconnectedView icon test 1`] = `
           ]
         }
       >
-        Kiểm tra lại nguồn điện của thiết bị.
+        Check the power on your device.
       </Text>
     </View>
     <View
@@ -973,7 +973,7 @@ exports[`Test DisconnectedView render DisconnectedView icon test 1`] = `
           ]
         }
       >
-        Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.
+        Check the Wi-Fi/Cellular signal or try to reset it.
       </Text>
     </View>
   </View>
@@ -1068,7 +1068,7 @@ exports[`Test DisconnectedView render DisconnectedView icon wind 1`] = `
         ]
       }
     >
-      Ngắt kết nối
+      Disconnected
     </Text>
   </View>
   <View
@@ -1123,7 +1123,7 @@ exports[`Test DisconnectedView render DisconnectedView icon wind 1`] = `
           ]
         }
       >
-        Gợi ý
+        Suggestions
         :
       </Text>
     </View>
@@ -1171,7 +1171,7 @@ exports[`Test DisconnectedView render DisconnectedView icon wind 1`] = `
           ]
         }
       >
-        Kiểm tra lại nguồn điện của thiết bị.
+        Check the power on your device.
       </Text>
     </View>
     <View
@@ -1218,7 +1218,7 @@ exports[`Test DisconnectedView render DisconnectedView icon wind 1`] = `
           ]
         }
       >
-        Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.
+        Check the Wi-Fi/Cellular signal or try to reset it.
       </Text>
     </View>
   </View>

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import LoadingMessage from '../index';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (visible, onClose, message) => (
+  <SCProvider initState={mockSCStore({})}>
+    <LoadingMessage visible={visible} onClose={onClose} message={message} />
+  </SCProvider>
+);
+
+describe('Test DisplayChecking', () => {
+  let tree;
+  let visible = true;
+  let message = '';
+  let onClose = () => {};
+
+  test('create LoadingMessage', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent(visible, message, onClose));
+    });
+    const instance = tree.root;
+    const textInputs = instance.findAllByType(TouchableOpacity);
+    expect(textInputs.length).toBe(1);
+  });
+});

package/src/commons/EmergencyButton/AlertSendConfirm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { ButtonPopup } from '../index';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../Text';
 import { Colors } from '../../configs';
@@ -14,6 +14,7 @@ const AlertSendConfirm = ({
   unit,
   station,
 }) => {
+  const t = useTranslations();
   return (
     <ButtonPopup
       rowButton

package/src/commons/EmergencyButton/AlertSent.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { ButtonPopup } from '../index';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { IconFill } from '@ant-design/icons-react-native';
 import Text from '../Text';
 import { Colors } from '../../configs';
@@ -16,6 +16,7 @@ const AlertSent = ({
   station,
   isDashboard,
 }) => {
+  const t = useTranslations();
   const data = useMemo(() => {
     if (isDashboard) {
       return {
@@ -34,7 +35,7 @@ const AlertSent = ({
         typeMain: 'alertBorder',
       };
     }
-  }, [isDashboard]);
+  }, [isDashboard, t]);
 
   return (
     <ButtonPopup

package/src/commons/Explore/CityItem/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import { View, Image, StyleSheet, TouchableOpacity } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../configs';
 import Text from '../../../commons/Text';
@@ -12,6 +12,7 @@ import { formatNumberCompact } from '../../../utils/Utils';
 import { axiosPost } from '../../../utils/Apis/axios';
 
 const CityItem = memo(({ item, onSelect }) => {
+  const t = useTranslations();
   const { id, name, icon, is_pin, count_pin } = item;
 
   const onPressPinPublicUnit = useCallback(async () => {

package/src/commons/Explore/HeaderExplore/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Theme from '../../../configs/Theme';
 
 import { Colors } from '../../../configs';
@@ -8,6 +8,7 @@ import Text from '../../../commons/Text';
 import { useSCContextSelector } from '../../../context';
 
 const HeaderExplore = memo(() => {
+  const t = useTranslations();
   useSCContextSelector((state) => state.language);
   return (
     <View style={styles.container}>

package/src/commons/Explore/HeaderLabel/index.js

@@ -1,11 +1,12 @@
 import React, { memo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../configs';
 import Text from '../../../commons/Text';
 
 const HeaderLabel = memo(({ title, style, onPress, seeMore }) => {
+  const t = useTranslations();
   return (
     <View style={[styles.labelHeader, style]}>
       <Text fontSize={14} color={Colors.Gray8} style={styles.textLineHeight}>

package/src/commons/Explore/SearchBox/__test__/SearchBox.test.js

@@ -2,9 +2,17 @@ import SearchBox from '../index';
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 
 const mockedNavigate = jest.fn();
 
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <SearchBox isBack={true} />
+  </SCProvider>
+);
+
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -18,7 +26,7 @@ describe('Test SearchBox', () => {
   let wrapper;
   test('SearchBox render', () => {
     act(() => {
-      wrapper = renderer.create(<SearchBox isBack={true} />);
+      wrapper = renderer.create(wrapComponent());
     });
     const instance = wrapper.root;
     const button = instance.findByType(TouchableOpacity);
@@ -26,7 +34,6 @@ describe('Test SearchBox', () => {
     act(() => {
       button.props.onPress();
     });
-    expect(wrapper.toJSON()).toMatchSnapshot();
     expect(mockedNavigate.mock.calls.length).toBe(1);
   });
 });

package/src/commons/Explore/SearchBox/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback } from 'react';
 import { TextInput, View, StyleSheet, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../configs';
 import Theme from '../../../configs/Theme';
@@ -9,6 +9,7 @@ import Search from '../../../../assets/images/Explore/Search.svg';
 import ArrowBack from '../../../../assets/images/Explore/ArrowBack.svg';
 
 const SearchBox = memo(({ isBack, style, onFocus }) => {
+  const t = useTranslations();
   const { goBack } = useNavigation();
   const onBack = useCallback(() => {
     goBack();

package/src/commons/Explore/__test__/CityItem.test.js

@@ -6,9 +6,17 @@ import axios from 'axios';
 import { API } from '../../../configs';
 import Pin from '../../../../assets/images/Explore/Pin.svg';
 import PinOutline from '../../../../assets/images/Explore/PinOutline.svg';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockedDispatch = jest.fn();
 
+const wrapComponent = (item, mockeSelect) => (
+  <SCProvider initState={mockSCStore({})}>
+    <CityItem item={item} onSelect={mockeSelect} />
+  </SCProvider>
+);
+
 jest.mock('axios');
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -38,9 +46,7 @@ describe('Test CityItem', () => {
       return response;
     });
     await act(async () => {
-      tree = await renderer.create(
-        <CityItem item={item} onSelect={mockeSelect} />
-      );
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
     const buttons = instance.findAllByType(TouchableOpacity);
@@ -82,9 +88,7 @@ describe('Test CityItem', () => {
       return response;
     });
     await act(async () => {
-      tree = await renderer.create(
-        <CityItem item={item} onSelect={mockeSelect} />
-      );
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
 
@@ -111,9 +115,7 @@ describe('Test CityItem', () => {
       return response;
     });
     await act(async () => {
-      tree = await renderer.create(
-        <CityItem item={item} onSelect={mockeSelect} />
-      );
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
 
@@ -140,9 +142,7 @@ describe('Test CityItem', () => {
       return response;
     });
     await act(async () => {
-      tree = await renderer.create(
-        <CityItem item={item} onSelect={mockeSelect} />
-      );
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
     const pin = instance.findAllByType(Pin);
@@ -164,9 +164,7 @@ describe('Test CityItem', () => {
     const mockeSelect = jest.fn();
 
     await act(async () => {
-      tree = await renderer.create(
-        <CityItem item={item} onSelect={mockeSelect} />
-      );
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
     const buttons = instance.findAllByType(TouchableOpacity);

package/src/commons/Explore/__test__/HeaderLabel.test.js

@@ -2,19 +2,25 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
 import HeaderLabel from '../HeaderLabel';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (mockFunc) => (
+  <SCProvider initState={mockSCStore({})}>
+    <HeaderLabel
+      seeMore={true}
+      title={'popular_locations'}
+      onPress={mockFunc}
+    />
+  </SCProvider>
+);
 
 let tree;
 describe('Test HeaderLabel', () => {
-  test('render HeaderLabel', () => {
+  test('render HeaderLabel', async () => {
     const mockFunc = jest.fn();
-    act(() => {
-      tree = renderer.create(
-        <HeaderLabel
-          seeMore={true}
-          title={'popular_locations'}
-          onPress={mockFunc}
-        />
-      );
+    await act(() => {
+      tree = renderer.create(wrapComponent(mockFunc));
     });
     const instance = tree.root;
     const button = instance.findAllByType(TouchableOpacity);

package/src/commons/Header/HeaderCustom.js

@@ -5,6 +5,7 @@ import { Colors } from '../../configs';
 import { Icon } from '@ant-design/react-native';
 import { useNavigation } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const HeaderCustom = ({
   title = '',
@@ -15,15 +16,25 @@ const HeaderCustom = ({
   isShowSeparator = false,
   isDisableRefresh = false,
   titleStyles,
+  isShowClose = false,
+  onGoBack,
 }) => {
+  const t = useTranslations();
   const { goBack } = useNavigation();
   const refMenuAction = useRef();
   const refAddAction = useRef();
   const handleAddAction = () => {};
+  // eslint-disable-next-line no-alert
+  const handleClose = () => alert(t('feature_under_development'));
   const handleShowMenuAction = () => showPopoverWithRef(refMenuAction);
+  const handleGoback = () => {
+    onGoBack && onGoBack();
+    goBack();
+  };
+
   return (
     <View style={[styles.wrap, isShowSeparator && styles.separator]}>
-      <TouchableOpacity style={styles.buttonBack} onPress={goBack}>
+      <TouchableOpacity style={styles.buttonBack} onPress={handleGoback}>
         <Image source={Images.arrowBack} style={styles.iconBack} />
       </TouchableOpacity>
       <View style={styles.wrapTitle}>
@@ -65,6 +76,11 @@ const HeaderCustom = ({
             <Icon name={'plus'} size={27} color={Colors.Black} />
           </TouchableOpacity>
         )}
+        {isShowClose && (
+          <TouchableOpacity style={styles.buttonAdd} onPress={handleClose}>
+            <Icon name={'close'} size={24} color={Colors.Black} />
+          </TouchableOpacity>
+        )}
       </View>
     </View>
   );

package/src/commons/Header/Styles/HeaderCustomStyles.js

@@ -1,6 +1,6 @@
 import { Colors } from '../../../configs';
-import { getStatusBarHeight } from '../../../configs/Constants';
 import { StyleSheet } from 'react-native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 export default StyleSheet.create({
   wrap: {
@@ -10,7 +10,7 @@ export default StyleSheet.create({
     paddingLeft: 7,
     paddingRight: 10,
     paddingBottom: 6,
-    paddingTop: getStatusBarHeight(),
+    paddingTop: getStatusBarHeight() + 10,
   },
   separator: {
     borderBottomWidth: 0.5,

package/src/commons/Header/__test__/HeaderCT.test.js

@@ -3,10 +3,18 @@ import { TouchableOpacity } from 'react-native';
 import { act } from '@testing-library/react-hooks';
 import { create } from 'react-test-renderer';
 import { HeaderCustom } from '..';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockOnRefresh = jest.fn();
 const mockShowPopoverWithRef = jest.fn();
 
+const wrapComponent = (defaultProps) => (
+  <SCProvider initState={mockSCStore({})}>
+    <HeaderCustom {...defaultProps} />
+  </SCProvider>
+);
+
 describe('Test HeaderCustom', () => {
   let tree;
   let defaultProps = {
@@ -18,7 +26,7 @@ describe('Test HeaderCustom', () => {
 
   it('Test not render right', () => {
     act(() => {
-      tree = create(<HeaderCustom {...defaultProps} />);
+      tree = create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const TouchableOpacityElement = instance.findAllByType(TouchableOpacity);
@@ -28,7 +36,7 @@ describe('Test HeaderCustom', () => {
   it('Test render right', () => {
     defaultProps = { ...defaultProps, isShowRight: true };
     act(() => {
-      tree = create(<HeaderCustom {...defaultProps} />);
+      tree = create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const TouchableOpacityElement = instance.findAllByType(TouchableOpacity);
@@ -45,10 +53,10 @@ describe('Test HeaderCustom', () => {
 
   it('Test render without props', () => {
     act(() => {
-      tree = create(<HeaderCustom />);
+      tree = create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const TouchableOpacityElement = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacityElement).toHaveLength(1);
+    expect(TouchableOpacityElement).toHaveLength(3);
   });
 });

package/src/commons/HeaderAni/index.js

@@ -8,7 +8,7 @@ import Text from '../../commons/Text';
 import { Colors } from '../../configs';
 
 const default_height = 44;
-const paddingIos = getStatusBarHeight();
+const paddingIos = getStatusBarHeight() + 10;
 export const title_height = 44;
 export const heightHeader = default_height + title_height + paddingIos;
 
@@ -46,7 +46,9 @@ const HeaderAni = memo(
     const titleMarginRight = rightComponent ? 80 : 0;
 
     return (
-      <Animated.View style={[styles.container, { height: headerHeightAnim }]}>
+      <Animated.View
+        style={[styles.container, headerStyle, { height: headerHeightAnim }]}
+      >
         <View style={styles.header}>
           <TouchableOpacity style={styles.btnBack} onPress={onPressLeft}>
             <Icon name={'left'} size={27} color={Colors.Gray9} />
@@ -90,7 +92,8 @@ const styles = StyleSheet.create({
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    // zIndex: 2,
+    alignItems: 'center',
+    zIndex: 2,
   },
   btnBack: {
     height: default_height,

package/src/commons/IconComponent/index.js

@@ -1,11 +1,19 @@
-import { IconFill } from '@ant-design/icons-react-native';
+import { IconOutline, IconFill } from '@ant-design/icons-react-native';
 import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 import FImage from '../FImage';
 
+// Priority: iconKit - icon - icon_outlined
 const IconComponent = memo(
-  ({ icon, iconKit, isSendingCommand = false, size = 40, style }) => {
+  ({
+    icon_outlined,
+    icon,
+    iconKit,
+    isSendingCommand = false,
+    size = 40,
+    style,
+  }) => {
     let extraStyle = {};
     if (size) {
       extraStyle = {
@@ -18,13 +26,20 @@ const IconComponent = memo(
         source={{ uri: iconKit }}
         style={[styles.iconAction, extraStyle, style]}
       />
-    ) : (
+    ) : icon ? (
       <IconFill
         name={icon}
         color={isSendingCommand ? Colors.TextGray : Colors.Green7}
         size={24}
         style={style}
       />
+    ) : (
+      <IconOutline
+        name={icon_outlined}
+        color={isSendingCommand ? Colors.TextGray : Colors.Green7}
+        size={24}
+        style={style}
+      />
     );
   }
 );