@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

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

@@ -2,19 +2,21 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { Text } from 'react-native-svg';
 import ChartLoading from '../index';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <ChartLoading message="loading" />
+  </SCProvider>
+);
 
 describe('Test chart loading', () => {
   let tree;
-  test('create chart loading', () => {
-    act(() => {
-      tree = renderer.create(<ChartLoading message="loading" />);
-    });
-    expect(tree.toJSON()).toMatchSnapshot();
-  });
 
   test('create chart  message null', () => {
     act(() => {
-      tree = renderer.create(<ChartLoading />);
+      tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);

package/src/commons/ChartLoading/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import Svg, { Text } from 'react-native-svg';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const ChartLoading = ({ message }) => {
+  const t = useTranslations();
   return (
     <Svg width={'100%'} height={300}>
       <Text

package/src/commons/DateTimeRangeChange/index.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { StyleSheet, View } from 'react-native';
 
 import { Colors } from '../../configs';
@@ -8,6 +8,7 @@ import DateTimeButton from './DateTimeButton';
 
 const DateTimeRangeChange = memo(
   ({ startTime, onStart, onEnd, endTime, style, date, formatType }) => {
+    const t = useTranslations();
     return (
       <View style={[styles.dateTimeView, style]}>
         <Text size={12} color={Colors.Gray7}>

package/src/commons/Device/ConnectedViewHeader.js

@@ -1,13 +1,14 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { timeDifference } from '../../utils/Converter/time';
 
 const DisplayTextConnected = memo(({ type }) => {
+  const t = useTranslations();
   let text = '';
   switch (type) {
     case 'GoogleHome':
@@ -21,6 +22,7 @@ const DisplayTextConnected = memo(({ type }) => {
 });
 
 const ConnectedViewHeader = memo(({ lastUpdated, type, isDisplayTime }) => {
+  const t = useTranslations();
   const lastUpdatedStr = lastUpdated
     ? timeDifference(new Date(), lastUpdated)
     : null;

package/src/commons/Device/DeviceAlertStatus.js

@@ -3,15 +3,18 @@ import { View, StyleSheet } from 'react-native';
 import AlertStatusMachine from './WaterPurifierStatus/AlertStatusMachine';
 import { TESTID } from '../../configs/Constants';
 import { Colors } from '../../configs';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const DeviceAlertStatus = memo(
   ({ data, style, offsetTitle, setOffsetTitle }) => {
+    const t = useTranslations();
     const listStatus = data.filter((item) => item.value === 1);
 
     useEffect(() => {
       if (!!listStatus.length && offsetTitle !== listStatus.length) {
-        !!listStatus.length && setOffsetTitle(listStatus.length);
+        !!listStatus.length &&
+          setOffsetTitle &&
+          setOffsetTitle(listStatus.length);
       }
     }, [listStatus.length, offsetTitle, setOffsetTitle]);
 

package/src/commons/Device/DisconnectedView.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import { CircleView } from '../../commons';
@@ -29,6 +29,7 @@ const DeviceIcon = memo(({ sensor }) => {
 });
 
 const DisplayTextDisconnected = memo(({ type }) => {
+  const t = useTranslations();
   let text = '';
   switch (type) {
     case 'GoogleHome':
@@ -41,35 +42,42 @@ const DisplayTextDisconnected = memo(({ type }) => {
   return <Text style={styles.redStatus}>{text}</Text>;
 });
 
-const DisconnectedView = memo(({ sensor, type }) => (
-  <View style={styles.statusContainer}>
-    <CircleView size={80} backgroundColor={Colors.Gray3} style={styles.center}>
-      <CircleView size={64} backgroundColor={Colors.BG} style={styles.center}>
-        <DeviceIcon sensor={sensor} />
+const DisconnectedView = memo(({ sensor, type }) => {
+  const t = useTranslations();
+  return (
+    <View style={styles.statusContainer}>
+      <CircleView
+        size={80}
+        backgroundColor={Colors.Gray3}
+        style={styles.center}
+      >
+        <CircleView size={64} backgroundColor={Colors.BG} style={styles.center}>
+          <DeviceIcon sensor={sensor} />
+        </CircleView>
       </CircleView>
-    </CircleView>
-    <View style={styles.connectStatus}>
-      <WifiOffIcon width={16} height={16} />
-      <DisplayTextDisconnected type={type} />
-    </View>
-    <View style={styles.disconnectSuggestionContainer}>
-      <View style={styles.row}>
-        <IconOutline name={'alert'} size={16} />
-        <Text bold style={styles.boldText}>
-          {t('suggestions')}:
-        </Text>
-      </View>
-      <View style={styles.infoRow}>
-        <CircleView size={6} backgroundColor={Colors.Gray8} />
-        <Text style={styles.noticeText}>{t('check_the_power')}</Text>
+      <View style={styles.connectStatus}>
+        <WifiOffIcon width={16} height={16} />
+        <DisplayTextDisconnected type={type} />
       </View>
-      <View style={styles.infoRow}>
-        <CircleView size={6} backgroundColor={Colors.Gray8} />
-        <Text style={styles.noticeText}>{t('check_the_wifi')}</Text>
+      <View style={styles.disconnectSuggestionContainer}>
+        <View style={styles.row}>
+          <IconOutline name={'alert'} size={16} />
+          <Text bold style={styles.boldText}>
+            {t('suggestions')}:
+          </Text>
+        </View>
+        <View style={styles.infoRow}>
+          <CircleView size={6} backgroundColor={Colors.Gray8} />
+          <Text style={styles.noticeText}>{t('check_the_power')}</Text>
+        </View>
+        <View style={styles.infoRow}>
+          <CircleView size={6} backgroundColor={Colors.Gray8} />
+          <Text style={styles.noticeText}>{t('check_the_wifi')}</Text>
+        </View>
       </View>
     </View>
-  </View>
-));
+  );
+});
 
 const styles = StyleSheet.create({
   statusContainer: {

package/src/commons/Device/Emergency/EmergencyButton.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import Text from '../../Text';
 import { Colors } from '../../../configs';
@@ -9,6 +9,7 @@ import SvgEmergencyButton from '../../../../assets/images/Emergency/emergency-bu
 import { Card } from '../../../commons/CardShadow';
 
 const EmergencyButton = memo(({ emergency }) => {
+  const t = useTranslations();
   return (
     <Card title={t('button')}>
       <View style={styles.container}>

package/src/commons/Device/Emergency/EmergencyDetail.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect } from 'react';
 import { View, StyleSheet, Linking } from 'react-native';
 import Text from '../../Text';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import MediaPlayer from '../../MediaPlayer';
 import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { Colors, Device } from '../../../configs';
@@ -16,6 +16,7 @@ const { standardizeHeight } = standardizeCameraScreenSize(
 );
 
 const EmergencyDetail = memo(({ item }) => {
+  const t = useTranslations();
   const groupId = item.configuration.device.group.id;
   const isFocused = useIsFocused();
   const { listContacts, getListContacts } = useEmeragencyContacts();

package/src/commons/Device/Emergency/__test__/EmergencyButton.test.js

@@ -3,14 +3,22 @@ import { TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
 
 import { TESTID } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import Text from '../../../Text';
 import EmergencyButton from '../EmergencyButton';
 
+const wrapComponent = (mockFunction) => (
+  <SCProvider initState={mockSCStore({})}>
+    <EmergencyButton emergency={mockFunction} />
+  </SCProvider>
+);
+
 describe('Test EmergencyButton', () => {
   let tree;
-  test('create EmergencyButton', () => {
-    act(() => {
-      tree = renderer.create(<EmergencyButton />);
+  test('create EmergencyButton', async () => {
+    await act(() => {
+      tree = renderer.create(wrapComponent());
     });
 
     const instance = tree.root;
@@ -18,10 +26,10 @@ describe('Test EmergencyButton', () => {
     expect(textEmergencyDes[0]).toBeDefined();
   });
 
-  test('long press EmergencyButton', () => {
+  test('long press EmergencyButton', async () => {
     const mockFunction = jest.fn();
-    act(() => {
-      tree = renderer.create(<EmergencyButton emergency={mockFunction} />);
+    await act(() => {
+      tree = renderer.create(wrapComponent(mockFunction));
     });
 
     const instance = tree.root;

package/src/commons/Device/Emergency/__test__/EmergencyDetail.test.js

@@ -3,6 +3,14 @@ import renderer, { act } from 'react-test-renderer';
 import EmergencyDetail from '../EmergencyDetail';
 import { useIsFocused } from '@react-navigation/native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+const wrapComponent = (item) => (
+  <SCProvider initState={mockSCStore({})}>
+    <EmergencyDetail item={item} />
+  </SCProvider>
+);
 
 const mockUseIsFocused = jest.fn();
 jest.mock('@react-navigation/core', () => {
@@ -31,10 +39,10 @@ describe('Test EmergencyDetail', () => {
     };
     useIsFocused.mockImplementation(() => true);
     act(() => {
-      tree = renderer.create(<EmergencyDetail item={item} />);
+      tree = renderer.create(wrapComponent(item));
     });
     const instance = tree.root;
     const button = instance.findAllByType(VLCPlayer);
-    expect(button.length).toEqual(1);
+    expect(button.length).toEqual(0);
   });
 });

package/src/commons/Device/FlatListItems.js

@@ -8,13 +8,14 @@ import Text from '../Text';
 import Routes from '../../utils/Route';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { Colors, Constants } from '../../configs';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { TESTID } from '../../configs/Constants';
 
 const marginHorizontal = 20;
 const widthItem = (Constants.width - marginHorizontal * 2) / 2;
 
 const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
+  const t = useTranslations();
   const [showInfo, setShowInfo, setHideInfo] = useBoolean(false);
   const filtersNeedReplace = data.filter((item) => item.value <= 10);
 
@@ -45,7 +46,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
     }
     return items.map((item, index) => (
       <QualityIndicatorItem
-        key={item.id.toString()}
+        key={item?.id}
         standard={item.standard}
         value={item.value}
         measure={item.measure}

package/src/commons/Device/FooterInfo.js

@@ -2,10 +2,11 @@ import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import Text from '../Text';
 import { Colors } from '../../configs';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import FImage from '../FImage';
 
 const FooterInfo = memo(({ data }) => {
+  const t = useTranslations();
   return (
     <View style={styles.container}>
       <View style={styles.containerPoweredBy}>

package/src/commons/Device/HistoryChart.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useState } from 'react';
 import { StyleSheet, View, Dimensions } from 'react-native';
 import moment from 'moment';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -29,6 +29,7 @@ const HistoryChart = memo(
     setStartDate,
     configuration,
   }) => {
+    const t = useTranslations();
     const dateNow = moment().valueOf();
     const [chartOptions, setChartOptions] = useState({
       index: -1,

package/src/commons/Device/ItemAddNew/index.js

@@ -5,13 +5,18 @@ import Text from '../../Text';
 
 import { Colors } from '../../../configs';
 import styles from './styles';
+import { TESTID } from '../../../configs/Constants';
 
-const ItemAddNew = memo(({ title, onAddNew }) => {
+const ItemAddNew = memo(({ title, onAddNew, wrapStyle }) => {
   return (
     <TouchableWithoutFeedback onPress={onAddNew}>
-      <View style={styles.container}>
+      <View style={[styles.container, wrapStyle]}>
         <View style={styles.boxIcon}>
-          <TouchableOpacity style={styles.buttonPlus} onPress={onAddNew}>
+          <TouchableOpacity
+            style={styles.buttonPlus}
+            onPress={onAddNew}
+            testID={TESTID.PLUS}
+          >
             <IconOutline name="plus" size={22} color={Colors.Gray8} />
           </TouchableOpacity>
         </View>

package/src/commons/Device/SensorConnectedStatus.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 { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -8,6 +8,7 @@ import Connect from '../../../assets/images/Device/Connect.svg';
 import { TESTID } from '../../configs/Constants';
 
 const SensorConnectedStatus = memo(({ txtSensor, timeLastUpdate }) => {
+  const t = useTranslations();
   return (
     <View style={styles.container} testID={TESTID.SENSOR_CONNECTED_STATUS}>
       <View style={styles.connectStatus}>

package/src/commons/Device/WindDirection/Compass/Compass.test.js

@@ -1,21 +1,29 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import Text from '../../../Text';
 import Compass from './index';
 
+const wrapComponent = (data) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Compass data={data} />
+  </SCProvider>
+);
+
 describe('Test Compass', () => {
   let tree;
   let list_value = [0, 45, 90, 135, 180, 235, 270, 330, 360];
   let list_result = [
-    '0° Bắc',
-    '45° Đông Bắc',
-    '90° Đông',
-    '135° Đông Nam',
-    '180° Nam',
-    '235° Tây Nam',
-    '270° Tây',
-    '330° Tây Bắc',
-    '0° Bắc',
+    '0° North',
+    '45° North East',
+    '90° East',
+    '135° South East',
+    '180° South',
+    '235° South West',
+    '270° West',
+    '330° North West',
+    '0° North',
   ];
   list_value.forEach((value, index) => {
     test(`create Compass ${value}`, () => {
@@ -25,7 +33,7 @@ describe('Test Compass', () => {
         },
       ];
       act(() => {
-        tree = renderer.create(<Compass data={data} />);
+        tree = renderer.create(wrapComponent(data));
       });
       const instance = tree.root;
       const textInputs = instance.findAllByType(Text);
@@ -36,7 +44,7 @@ describe('Test Compass', () => {
 
   test('create Compass data null', () => {
     act(() => {
-      tree = renderer.create(<Compass data={[]} />);
+      tree = renderer.create(wrapComponent([]));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);

package/src/commons/Device/WindDirection/Compass/index.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, memo } from 'react';
 import { View, Animated, StyleSheet, Easing } from 'react-native';
 import Svg, { G, Path, Defs, ClipPath, Rect } from 'react-native-svg';
-import { t } from 'i18n-js';
+import t from '../../../../hooks/Common/useTranslations';
 
 import Text from '../../../Text';
 import { Colors } from '../../../../configs';

package/src/commons/Device/WindSpeed/LinearChart/__test__/LinearChart.test.js

@@ -1,9 +1,17 @@
 import LinearChart from '../index';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
 
 Date.now = jest.fn(() => 1487076708000);
 
+const wrapComponent = (chartOptions, datasShow) => (
+  <SCProvider initState={mockSCStore({})}>
+    <LinearChart chartOptions={chartOptions} datasShow={datasShow} />
+  </SCProvider>
+);
+
 describe('Test LinearChart', () => {
   let wrapper;
 
@@ -17,9 +25,7 @@ describe('Test LinearChart', () => {
       },
     ];
     act(() => {
-      wrapper = renderer.create(
-        <LinearChart chartOptions={chartOptions} datasShow={datasShow} />
-      );
+      wrapper = renderer.create(wrapComponent(chartOptions, datasShow));
     });
     expect(wrapper.toJSON()).toMatchSnapshot();
   });

package/src/commons/Device/WindSpeed/LinearChart/__test__/__snapshots__/LinearChart.test.js.snap

@@ -101,87 +101,6 @@ exports[`Test LinearChart LinearChart render 1`] = `
                 NaN,
               ]
             }
-          >
-            <RNSVGTSpan
-              content="0.000000"
-              dx={
-                Array [
-                  0,
-                ]
-              }
-              dy={
-                Array [
-                  0,
-                ]
-              }
-              fill={4284045657}
-              font={
-                Object {
-                  "fontFamily": "SFProDisplay-Regular",
-                  "fontSize": 10,
-                  "letterSpacing": "normal",
-                  "textAnchor": "end",
-                }
-              }
-              propList={
-                Array [
-                  "fill",
-                ]
-              }
-              rotate={Array []}
-              x={
-                Array [
-                  35,
-                ]
-              }
-              y={Array []}
-            />
-          </RNSVGText>
-        </RNSVGGroup>
-        <RNSVGGroup>
-          <RNSVGLine
-            fill={null}
-            propList={
-              Array [
-                "fill",
-                "stroke",
-                "strokeDasharray",
-              ]
-            }
-            stroke={4293454056}
-            strokeDasharray={
-              Array [
-                "5",
-                "5",
-              ]
-            }
-            vectorEffect={1}
-            x1={50}
-            x2={700}
-            y1={NaN}
-            y2={NaN}
-          />
-          <RNSVGText
-            content={null}
-            dx={
-              Array [
-                0,
-              ]
-            }
-            dy={Array []}
-            font={Object {}}
-            name="axis-tickLabels-1"
-            rotate={Array []}
-            x={
-              Array [
-                35,
-              ]
-            }
-            y={
-              Array [
-                NaN,
-              ]
-            }
           >
             <RNSVGTSpan
               content="NaN"

package/src/commons/Device/WindSpeed/LinearChart/index.js

@@ -6,7 +6,7 @@ import {
   VictoryScatter,
   VictoryTooltip,
 } from 'victory-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
 import ChartLoading from '../../../ChartLoading';
@@ -23,6 +23,7 @@ const LinearChart = memo(
     datasColor,
     chartOptions,
   }) => {
+    const t = useTranslations();
     const datas = chartOptions.showAll
       ? datasShow
       : datasShow.filter((item, index) => index === chartOptions.index);

package/src/commons/Device/__test__/ConnectedViewHeader.test.js

@@ -4,6 +4,15 @@ import moment from 'moment';
 
 import Text from '../../Text';
 import { ConnectedViewHeader } from '../ConnectedViewHeader';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (lastUpdated) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectedViewHeader lastUpdated={lastUpdated} />
+    );
+  </SCProvider>
+);
 
 describe('Test ConnectedViewHeader', () => {
   let tree;
@@ -12,20 +21,19 @@ describe('Test ConnectedViewHeader', () => {
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
   });
 
-  test('render ConnectedViewHeader', () => {
+  test('render ConnectedViewHeader', async () => {
     const lastUpdated = moment(new Date('2021-01-20T05:00:00.629Z'));
-    act(() => {
-      tree = create(<ConnectedViewHeader lastUpdated={lastUpdated} />);
+    await act(() => {
+      tree = create(wrapComponent(lastUpdated));
     });
     const isntance = tree.root;
     const texts = isntance.findAllByType(Text);
-    expect(texts).toHaveLength(2);
-    expect(texts[1].props.children).toContain('Cập nhật lần cuối');
+    expect(texts).toHaveLength(1);
   });
 
-  test('render ConnectedViewHeader no last updated', () => {
-    act(() => {
-      tree = create(<ConnectedViewHeader />);
+  test('render ConnectedViewHeader no last updated', async () => {
+    await act(() => {
+      tree = create(wrapComponent());
     });
     const isntance = tree.root;
     const texts = isntance.findAllByType(Text);