@eohjsc/react-native-smart-city 0.3.63 → 0.3.65

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.63",
+  "version": "0.3.65",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -102,7 +102,7 @@
     "@ant-design/icons-react-native": "^2.2.1",
     "@ant-design/react-native": "^4.0.5",
     "@babel/helper-environment-visitor": "^7.16.7",
-    "@eohjsc/highcharts": "^1.0.9",
+    "@eohjsc/highcharts": "^1.1.0",
     "@eohjsc/react-native-keyboard-aware-scroll-view": "^0.9.5",
     "@formatjs/intl-getcanonicallocales": "^1.4.5",
     "@formatjs/intl-numberformat": "^5.6.2",

package/src/commons/Action/ItemQuickAction.js

@@ -83,8 +83,7 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
     >
       <View style={wrapperStyle}>
         <IconComponent
-          icon={action.icon}
-          iconKit={action.icon_kit}
+          icon={action?.icon_kit || action?.icon}
           isSendingCommand={isSendingCommand}
           icon_outlined={'poweroff'}
         />

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -130,8 +130,7 @@ const OptionsDropdownActionTemplate = ({
       <View style={styles.iconAndText}>
         {!checkIcon && (
           <IconComponent
-            icon={icon}
-            iconKit={iconKit}
+            icon={iconKit || icon}
             icon_outlined={icon_outlined}
             isSendingCommand={false}
             size={17}

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -92,8 +92,7 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
       >
         {!checkIcon && (
           <IconComponent
-            icon={icon}
-            iconKit={iconKit}
+            icon={iconKit || icon}
             icon_outlined={icon_outlined}
             isSendingCommand={false}
             size={24}

package/src/commons/ActionGroup/ThreeButtonTemplate.js

@@ -5,6 +5,7 @@ import styles from './ThreeButtonTemplateStyle';
 import Text from '../Text';
 import { AccessibilityLabel } from '../../configs/Constants';
 import { Colors } from '../../configs';
+import IconComponent from '../IconComponent';
 
 const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
   const { configuration } = actionGroup;
@@ -28,7 +29,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
     return icon === 'stop' ? (
       <View style={styles.squareStop} />
     ) : (
-      <Icon name={icon} size={30} color={Colors.Primary} />
+      <IconComponent icon={icon2} iconSize={30} />
     );
   };
   const onButton1Press = useCallback(() => {
@@ -75,6 +76,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
       </>
     );
   };
+
   return (
     <>
       <View style={styles.wrap}>
@@ -85,7 +87,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
           underlayColor={Colors.Gray2}
         >
           <View style={styles.imageButton}>
-            <Icon name={icon1} size={30} color={Colors.Primary} />
+            <IconComponent icon={icon1} iconSize={30} />
           </View>
           <Text style={styles.text}>{text1}</Text>
         </TouchableOpacity>
@@ -107,7 +109,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
           underlayColor={Colors.Gray2}
         >
           <View style={styles.imageButton}>
-            <Icon name={icon3} size={30} color={Colors.Primary} />
+            <IconComponent icon={icon3} iconSize={30} />
           </View>
           <Text style={styles.text}>{text3}</Text>
         </TouchableOpacity>

package/src/commons/DevMode/Item.js

@@ -10,7 +10,7 @@ const Item = ({ item, index, onPress }) => {
       onPress={onPress}
       style={[styles.item, index % 2 === 0 && styles.oddItem]}
     >
-      <IconComponent iconKit={item?.icon} />
+      <IconComponent icon={item?.icon} />
       <Text style={styles.nameItem}>{item?.name}</Text>
     </TouchableOpacity>
   );

package/src/commons/Device/ItemDevice.js

@@ -133,7 +133,7 @@ const ItemDevice = memo(
         >
           <View style={styles.boxIcon}>
             <TouchableOpacity onPress={goToSensorDisplay}>
-              <IconComponent icon={sensor.icon} iconKit={sensor.icon_kit} />
+              <IconComponent icon={sensor?.icon_kit || sensor?.icon} />
             </TouchableOpacity>
             {canRenderQuickAction && (
               <ItemQuickAction sensor={sensor} unit={unit} />

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

@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import Svg, { Path, Text, G, Circle } from 'react-native-svg';
+import Svg, { Path, Text, Circle } from 'react-native-svg';
 import { View, StyleSheet } from 'react-native';
 
 import {
@@ -28,6 +28,8 @@ const Anemometer = memo(
     };
 
     const value = data.length ? data[0].value : 0;
+    const measure = data.length ? data[0].measure : 'm/s';
+
     const radius = (size - strokeWidth) / 2;
     const viewBox = `0 0 ${width} ${width}`;
     const d = drawArc(center.x, center.y, radius, startAngle, endAngle);
@@ -35,8 +37,6 @@ const Anemometer = memo(
     const strokeAngle = (endAngle - startAngle) / numberOfSection;
     const strokeLength = (strokeAngle * circumference) / 360 - 1;
     const strokeDasharrayBg = `${strokeLength} 1`;
-    const totalAngle = (3 * PI) / 2;
-    const alpha = (value * totalAngle) / maxValue;
     const arc = circumference * 0.75;
     const offset = arc - (value / maxValue) * arc;
 
@@ -54,7 +54,7 @@ const Anemometer = memo(
           arr.push(
             <Text
               fill={txtColor}
-              fontSize="10"
+              fontSize={18}
               x={textPosition.x}
               y={textPosition.y}
               textAnchor="middle"
@@ -75,7 +75,7 @@ const Anemometer = memo(
           arr.push(
             <Text
               fill={txtColor}
-              fontSize="10"
+              fontSize={18}
               x={textPosition.x}
               y={textPosition.y}
               textAnchor="middle"
@@ -95,7 +95,7 @@ const Anemometer = memo(
           arr.push(
             <Text
               fill={txtColor}
-              fontSize="10"
+              fontSize={18}
               x={textPosition.x}
               y={textPosition.y}
               textAnchor="middle"
@@ -116,7 +116,6 @@ const Anemometer = memo(
       maxValue,
       txtColor,
     ]);
-    const needleAngle = -21 + (alpha / PI) * 180;
 
     return (
       <View style={styles.standard}>
@@ -145,10 +144,11 @@ const Anemometer = memo(
           />
           {textAngles()}
           <Text
-            fill={Colors.Gray8}
-            fontSize="24"
+            fill={Colors.Lime6}
+            fontSize={48}
+            fontWeight="bold"
             x={width / 2}
-            y={width / 2 + 64}
+            y={width / 2 + 16}
             textAnchor="middle"
             fontFamily={Fonts.Regular}
           >
@@ -156,30 +156,14 @@ const Anemometer = memo(
           </Text>
           <Text
             fill={Colors.Gray8}
-            fontSize="16"
+            fontSize={16}
             x={width / 2}
-            y={width / 2 + 88}
+            y={width / 2 + 64}
             textAnchor="middle"
             fontFamily={Fonts.Regular}
           >
-            m/s
+            {measure}
           </Text>
-
-          <G
-            x={width / 2 - 50}
-            y={width / 2 - 12}
-            rotation={needleAngle}
-            origin="50,10."
-          >
-            <Path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              // eslint-disable-next-line max-len
-              d="M6.75518 30.5986L46.6732 5.59447C49.7242 3.68338 53.7596 4.87054 55.2897 8.12934C56.8321 11.4146 55.1275 15.3065 51.667 16.4005L6.75518 30.5986Z"
-              fill="#595959"
-            />
-            <Circle cx={49.5} cy={10.5762} r={3.5} fill="white" />
-          </G>
         </Svg>
       </View>
     );

package/src/commons/FourButtonFilterHistory/index.js

@@ -47,7 +47,7 @@ const FourButtonFilterHistory = memo(({ groupBy, setGroupBy }) => {
 
   const onPressButton = useCallback(
     (data) => () => {
-      setGroupBy(data);
+      setGroupBy && setGroupBy(data);
     },
     [setGroupBy]
   );

package/src/commons/IconComponent/index.js

@@ -1,29 +1,39 @@
 import { IconOutline, IconFill } from '@ant-design/icons-react-native';
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 import FImage from '../FImage';
 import Text from '../Text';
 
-// Priority: iconKit - icon - icon_outlined
+// Priority: icon - icon_outlined
 const IconComponent = memo(
   ({
     icon_outlined,
     icon,
-    iconKit,
     isSendingCommand = false,
     size = 40,
+    iconSize = 24,
     style,
   }) => {
     let extraStyle = {
       width: size,
       height: size,
     };
+    const isUrlImage = useMemo(() => {
+      if (!icon) {
+        return false;
+      }
+      const isUrl = icon?.match(
+        // eslint-disable-next-line no-useless-escape
+        /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g
+      );
+      return isUrl !== null;
+    }, [icon]);
 
-    if (iconKit) {
+    if (isUrlImage) {
       return (
         <FImage
-          source={{ uri: iconKit }}
+          source={{ uri: icon }}
           style={[styles.iconAction, extraStyle, style]}
         />
       );
@@ -32,7 +42,7 @@ const IconComponent = memo(
         <IconFill
           name={icon}
           color={isSendingCommand ? Colors.TextGray : Colors.Green7}
-          size={24}
+          size={iconSize}
           style={style}
         />
       );
@@ -41,7 +51,7 @@ const IconComponent = memo(
         <IconOutline
           name={icon_outlined}
           color={isSendingCommand ? Colors.TextGray : Colors.Green7}
-          size={24}
+          size={iconSize}
           style={style}
         />
       );

package/src/hooks/IoT/useValueEvaluation.js

@@ -15,9 +15,7 @@ const useValueEvaluations = (unitId) => {
       if (!unitId || fetchedValueEvaluationUnits.indexOf(unitId) !== -1) {
         return;
       }
-      const params = new URLSearchParams();
-      params.append('config__end_device__station__unit', unitId);
-      params.append('page', page);
+      const params = { configs__end_device__station__unit: unitId, page: page };
       const { success, data } = await axiosGet(API.VALUE_EVALUATIONS(), {
         params,
       });

package/src/iot/RemoteControl/Bluetooth.js

@@ -71,12 +71,13 @@ export const realScanBluetoothDevices = async (onDeviceFound) => {
     }
   });
 
-  setTimeout(() => {
+  const to = setTimeout(() => {
     try {
       bleManager.stopDeviceScan();
+      clearTimeout(to);
       // eslint-disable-next-line no-empty
     } catch {}
-  }, 15000);
+  }, 30000);
 };
 
 export const sendCommandOverBluetooth = async (

package/src/screens/AddNewAction/Device/index.js

@@ -21,8 +21,7 @@ const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
       <View style={[styles.container, isActive]}>
         <View style={styles.boxIcon}>
           <IconComponent
-            icon={svgMain}
-            iconKit={sensor.icon_kit}
+            icon={sensor?.icon_kit || svgMain}
             style={styles.iconSensor}
           />
         </View>

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -143,7 +143,7 @@ const RenameNewDevices = memo(({ route }) => {
           {isGateway ? (
             <GatewayIcon width={43} height={43} />
           ) : (
-            <IconComponent icon={item?.icon} iconKit={item?.icon_kit} />
+            <IconComponent icon={item?.icon_kit || item?.icon} />
           )}
           <View style={styles.viewTextInput}>
             {isCanRenameItem ? (

package/src/screens/AllGateway/GatewayDetail/index.js

@@ -112,13 +112,13 @@ const GatewayDetail = () => {
     };
     const RouteRebootGateway = {
       id: 2,
-      text: t('reboot'),
+      text: `${t('reboot')} ${t('gateway')?.toLowerCase()}`,
       textStyle: styles.textColorRed,
       doAction: handleRebootGateway,
     };
     const ListDeleteGateway = {
       id: 3,
-      text: t('delete'),
+      text: `${t('delete')} ${t('gateway')?.toLowerCase()}`,
       textStyle: styles.textColorRed,
       doAction: handleDeleteGateway,
     };

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

@@ -25,9 +25,15 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-const wrapComponent = (route) => (
+const wrapComponent = (
+  route = {
+    params: {
+      unitId: 1,
+    },
+  }
+) => (
   <SCProvider initState={mockSCStore({})}>
-    <Gateway />
+    <Gateway route={route} />
   </SCProvider>
 );
 

package/src/screens/AllGateway/components/GatewayItem/index.js

@@ -15,7 +15,7 @@ const GatewayItem = ({ item, onPress }) => {
         </View>
         <View style={styles.viewValue}>
           <Text type="Body" color={Colors.Gray20} style={styles.textValue}>
-            {`${item?.last_healthy || '--'} dBm`}
+            {`${item?.last_healthy?.signal || '--'} dBm`}
           </Text>
         </View>
         <StatusBox status={item?.is_connected} />

package/src/screens/AllGateway/hooks/useGateway.js

@@ -23,6 +23,9 @@ export const useGateway = () => {
   const [detailDeviceModbus, setDetailDeviceModbus] = useState({});
   const [detailDeviceInternal, setDetailDeviceInternal] = useState({});
   const [dataModalPopupCT, setDataModalPopupCT] = useState({});
+  const [pages, setPages] = useState(1);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [canLoadMore, setCanLoadMore] = useState(true);
 
   const hideModalPopupCT = useCallback(() => {
     setDataModalPopupCT((prevData) => ({
@@ -191,10 +194,39 @@ export const useGateway = () => {
     []
   );
 
-  const fetchDataGateways = useCallback(async () => {
-    const { success, data } = await axiosGet(API.DEV_MODE.GATEWAY.LIST());
-    success && setGateways(data?.results || []);
-  }, []);
+  const fetchDataGateways = useCallback(
+    async (selectedPage, unitId) => {
+      if (!canLoadMore) {
+        return;
+      }
+      setPages(selectedPage);
+      if (selectedPage === 1) {
+        setRefresh(true);
+      } else {
+        setLoadingMore(true);
+      }
+      const params = new URLSearchParams();
+      params.append('page', selectedPage);
+      params.append('unit', unitId);
+      const { success, data } = await axiosGet(API.DEV_MODE.GATEWAY.LIST(), {
+        params,
+      });
+      if (success) {
+        if (selectedPage === 1) {
+          setGateways(data?.results || []);
+        } else {
+          setGateways((prevData) => prevData.concat(data?.results));
+          setCanLoadMore(!(data?.results?.length < 10));
+        }
+      }
+      if (selectedPage === 1) {
+        setRefresh(false);
+      } else {
+        setLoadingMore(false);
+      }
+    },
+    [canLoadMore]
+  );
 
   return {
     gateways,
@@ -225,5 +257,8 @@ export const useGateway = () => {
     hideModalPopupCT,
     fetchConfigActionInterval,
     detailDeviceInternal,
+    loadingMore,
+    pages,
+    setCanLoadMore,
   };
 };

package/src/screens/AllGateway/index.js

@@ -11,17 +11,23 @@ import Routes from '../../utils/Route';
 import styles from './styles';
 import { HeaderCustom } from '../../commons/Header';
 
+let onEndReachedCalledDuringMomentum = false;
+
 const AllGateway = ({ route }) => {
   const t = useTranslations();
   const isFocused = useIsFocused();
   const { navigate } = useNavigation();
+  const { unitId } = route?.params;
+
   const {
     gateways,
     fetchDataGateways,
     setNameSearch,
     nameSearch,
     refresh,
-    setRefresh,
+    pages,
+    loadingMore,
+    setCanLoadMore,
   } = useGateway();
 
   const goGoDetail = useCallback(
@@ -60,14 +66,23 @@ const AllGateway = ({ route }) => {
   );
 
   const onRefresh = useCallback(() => {
-    setRefresh(true);
-    fetchDataGateways();
-    setRefresh(false);
-  }, [fetchDataGateways, setRefresh]);
+    setCanLoadMore(true);
+    fetchDataGateways(1, unitId);
+  }, [fetchDataGateways, setCanLoadMore, unitId]);
 
   useEffect(() => {
-    isFocused && fetchDataGateways();
-  }, [isFocused, fetchDataGateways]);
+    isFocused && fetchDataGateways(1, unitId);
+  }, [isFocused, fetchDataGateways, unitId]);
+
+  const onMomentumScrollBegin = () =>
+    (onEndReachedCalledDuringMomentum = false);
+
+  const onLoadMore = useCallback(() => {
+    if (!onEndReachedCalledDuringMomentum) {
+      onEndReachedCalledDuringMomentum = true;
+      fetchDataGateways(pages + 1, unitId);
+    }
+  }, [fetchDataGateways, pages, unitId]);
 
   return (
     <>
@@ -86,6 +101,7 @@ const AllGateway = ({ route }) => {
         <FlatList
           onRefresh={onRefresh}
           refreshing={refresh}
+          isLoadMore={loadingMore}
           columnWrapperStyle={styles.spaceBetween}
           showsVerticalScrollIndicator={false}
           showsHorizontalScrollIndicator={false}
@@ -99,6 +115,8 @@ const AllGateway = ({ route }) => {
           extraData={gatewaysSearched}
           ListEmptyComponent={renderListEmptyComponent}
           numColumns={2}
+          onMomentumScrollBegin={onMomentumScrollBegin}
+          onEndReached={onLoadMore}
         />
       </View>
     </>

package/src/screens/Device/__test__/DetailHistoryChart.test.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
 import { DetailHistoryChart } from '../components/DetailHistoryChart';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import HistoryChart from '../../../commons/Device/HistoryChart';
-const mockSetState = jest.fn();
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
+
 const wrapComponent = (item, sensor) => (
   <SCProvider initState={mockSCStore({})}>
     <DetailHistoryChart item={item} sensor={sensor} />
@@ -20,12 +19,28 @@ const wrapComponent = (item, sensor) => (
 describe('Test DetailHistoryChart', () => {
   let tree;
   it('create DetailHistoryChart', async () => {
+    mock
+      .onGet(API.VALUE_CONSUME.DISPLAY_HISTORY())
+      .reply(200, [{ data: [1, 2, 3] }]);
     const item = {
+      id: 10452,
+      order: 0,
+      template: 'history',
+      type: 'history',
       configuration: {
-        configs: [0],
-        icon: 'slack',
+        type: 'horizontal_bar_chart',
+        date_format: 'DD.MM',
+        configs: [
+          {
+            id: 9848,
+            title: 'horizontal',
+            color: 'blue',
+          },
+        ],
       },
+      is_configuration_ready: true,
     };
+
     const sensor = {
       name: 'Sensor name',
       is_managed_by_backend: false,

package/src/screens/Device/components/DetailHistoryChart.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import HistoryChart from '../../../commons/Device/HistoryChart';
 import { API } from '../../../configs';
@@ -7,20 +7,40 @@ import { axiosGet } from '../../../utils/Apis/axios';
 
 export const DetailHistoryChart = ({ item = {}, sensor = {} }) => {
   const { configuration = {} } = item;
-  const { configs = [] } = configuration;
-  const [chartData, setChartData] = useState(configs);
+  const { configs = [], type = '' } = configuration;
+  const [lineChartData, setLineChartData] = useState(configs);
+  const [horizontalChartData, setHorizontalChartData] = useState([]);
+  const [groupBy, setGroupBy] = useState('date');
   const [startDate, setStartDate] = useState(
-    moment().subtract(1, 'days').valueOf()
+    type === 'line_chart'
+      ? moment().subtract(1, 'days').valueOf()
+      : moment().subtract(6, 'days')
   );
-  const [endDate, setEndDate] = useState(moment().valueOf());
-  useEffect(() => {
-    const fetchData = async () => {
-      let params = new URLSearchParams();
-      configs.map((config) => {
-        params.append('config', config.id);
-      });
+  const [endDate, setEndDate] = useState(
+    type === 'line_chart' ? moment().valueOf() : moment()
+  );
+  const [chartConfig, setChartConfig] = useState({
+    unit: '',
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    let params = new URLSearchParams();
+    configs.map((config) => {
+      params.append('config', config.id);
+    });
+
+    if (type !== 'line_chart') {
+      params.append('group_by', groupBy);
+      if (groupBy === 'date') {
+        params.append('date_from', moment(startDate).format('YYYY-MM-DD'));
+        params.append('date_to', moment(endDate).format('YYYY-MM-DD'));
+      }
+    } else {
       params.append('date_from', startDate / 1000);
       params.append('date_to', endDate / 1000);
+    }
+    if (type === 'line_chart') {
       const { success, data } = await axiosGet(
         API.DEVICE.DISPLAY_HISTORY(sensor.id),
         { params }
@@ -38,23 +58,55 @@ export const DetailHistoryChart = ({ item = {}, sensor = {} }) => {
           };
           return { ...config, data: dataChart.data };
         });
-        setChartData(formatData);
+        setLineChartData(formatData);
+        setIsLoading(true);
+      }
+    }
+    if (type === 'horizontal_bar_chart') {
+      const { success, data } = await axiosGet(
+        API.VALUE_CONSUME.DISPLAY_HISTORY(),
+        {
+          params,
+        }
+      );
+      if (success) {
+        if (data[0]?.data) {
+          setHorizontalChartData(data);
+          setIsLoading(true);
+        } else {
+          setIsLoading(false);
+        }
       }
-    };
+    }
+  }, [configs, endDate, groupBy, sensor.id, startDate, type]);
+
+  useEffect(() => {
     fetchData();
-  }, [startDate, endDate, sensor, configs]);
-  if (!chartData.length) {
+  }, [fetchData]);
+
+  if (!lineChartData?.length) {
     return false;
   }
 
   return (
-    <HistoryChart
-      configuration={item.configuration}
-      datas={chartData}
-      style={styles.chartStyle}
-      setStartDate={setStartDate}
-      setEndDate={setEndDate}
-    />
+    <>
+      {isLoading && (
+        <HistoryChart
+          configuration={item.configuration}
+          datas={type === 'line_chart' ? lineChartData : horizontalChartData}
+          setStartDate={setStartDate}
+          startDate={startDate}
+          setEndDate={setEndDate}
+          endDate={endDate}
+          groupBy={groupBy}
+          setGroupBy={setGroupBy}
+          chartConfig={chartConfig}
+          setChartConfig={setChartConfig}
+          formatType={type !== 'line_chart' && 'date'}
+          style={styles.chartStyle}
+        />
+      )}
+    </>
   );
 };
 

package/src/screens/Notification/components/NotificationItem.js

@@ -199,7 +199,7 @@ const NotificationItem = memo(({ item }) => {
               },
             }),
           iconContent: (
-            <IconComponent iconKit={icon} style={styles.iconNotification} />
+            <IconComponent icon={icon} style={styles.iconNotification} />
           ),
         };
       case NOTIFICATION_TYPES.NOTIFY_REMOVE_UNIT:
@@ -378,7 +378,7 @@ const NotificationItem = memo(({ item }) => {
       <View style={[styles.container, !isRead && styles.backgroundGray]}>
         <View style={styles.wrapIcon}>
           {iconContent || (
-            <IconComponent iconKit={icon} style={styles.iconNotification} />
+            <IconComponent icon={icon} style={styles.iconNotification} />
           )}
         </View>
 

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

@@ -179,8 +179,8 @@ describe('Test WaterQualityGuide', () => {
 
     expect(textTitle).toHaveLength(2);
     expect(textDescription).toHaveLength(2);
-    expect(textTitleLevel).toHaveLength(2);
-    expect(textDescriptionLevel).toHaveLength(2);
+    expect(textTitleLevel).toHaveLength(3);
+    expect(textDescriptionLevel).toHaveLength(3);
 
     expect(textTitle1).toHaveLength(0);
     expect(textDescription1).toHaveLength(0);

package/src/screens/WaterQualityGuide/index.js

@@ -29,23 +29,30 @@ const WaterQualityGuide = memo(({ route }) => {
               {t('text_recommended_clo')}{' '}
               <Text bold color={Colors.Gray8}>
                 {t('text_recommended_clo_range')}
-              </Text>
+              </Text>{' '}
+              {t('text_recommend_ref')}
             </>
           ),
         },
       ],
       level: [
         {
-          type: 'Very Good',
-          title: t('text_very_good_level'),
+          type: 'Low',
+          title: t('text_low_level'),
+          color: Colors.Yellow6,
+          des: t('text_clo_low_range'),
+        },
+        {
+          type: 'Good',
+          title: t('text_good_level'),
           color: Colors.Green6,
-          des: t('text_clo_very_good_range'),
+          des: t('text_clo_good_range'),
         },
         {
-          type: 'Poor',
-          title: t('text_poor_level'),
+          type: 'High',
+          title: t('text_high_level'),
           color: Colors.Red6,
-          des: t('text_clo_poor_range'),
+          des: t('text_clo_high_range'),
         },
       ],
       titles1: [],
@@ -70,7 +77,8 @@ const WaterQualityGuide = memo(({ route }) => {
               {t('text_turbidity_recommend')}{' '}
               <Text bold color={Colors.Gray8}>
                 {t('text_turbidity_recommend_range')}
-              </Text>
+              </Text>{' '}
+              {t('text_recommend_ref')}
             </>
           ),
         },
@@ -111,7 +119,8 @@ const WaterQualityGuide = memo(({ route }) => {
               {t('text_ph_recommend')}{' '}
               <Text bold color={Colors.Gray8}>
                 {t('text_ph_recommend_range')}
-              </Text>
+              </Text>{' '}
+              {t('text_recommend_ref')}
             </>
           ),
         },

package/src/utils/I18n/translations/en.json

@@ -180,9 +180,10 @@
   "text_what_clo": "Residual chlorine is the low level amount of chlorine remaining in the water after a certain period of contact time after its initial application. It constitutes an important safeguard against the risk of subsequent microbial contamination after treatment—a unique and significant benefit for public health.\nTesting for residual chlorine is one of the most common tests used by water treatment plants. Through the residual chlorine test, the remaining chlorine amount is determined in water that has finished testing and is ready to be released in the distribution system.",
   "recommended_clo_level": "Recommended Chlorine residual levels",
   "text_recommended_clo": "For normal domestic use, residual chlorine levels at the point where the consumer collects water should be",
-  "text_recommended_clo_range": "between 0.2 and 1 mg/l.",
-  "text_clo_very_good_range": "0.2 - 1 mg/l",
-  "text_clo_poor_range": "< 0.2 mg/l\n> 1 mg/l",
+  "text_recommended_clo_range": "between 0.2 and 1 mg/l",
+  "text_clo_good_range": "0.2 - 1 mg/l",
+  "text_clo_high_range": "> 1 mg/l",
+  "text_clo_low_range": "< 0.2 mg/l",
   "text_low_level": "Low",
   "text_high_level": "High",
   "launch_one_tap": "Launch One-Tap",
@@ -199,15 +200,12 @@
   "text_moderate_level": "Moderate",
   "text_poor_level": "Poor",
   "text_very_poor_level": "Very poor",
-  "text_clo_low_range": "< 0.2 mg/l",
-  "text_clo_good_range": "0.2 - 0.5 mg/l",
-  "text_clo_high_range": "> 0.5 mg/l",
   "turbidity_guide": "Water Turbidity Guide",
   "what_is_turbidity": "What is Water Turbidity?",
   "text_what_is_turbidity": "Turbidity is the amount of cloudiness in the water. This can vary from a river full of mud and silt where it would be impossible to see through the water (high turbidity), to a spring water which appears to be completely clear (low turbidity). Turbidity can be caused by :\n- silt, sand and mud ;\n- bacteria and other germs ;\n- chemical precipitates.",
   "turbidity_recommend": "Recommended Turbidity levels",
   "text_turbidity_recommend": "For normal domestic use, residual chlorine levels at the point where the consumer collects water should be",
-  "text_turbidity_recommend_range": "less than 2 NTU.",
+  "text_turbidity_recommend_range": "less than 2 NTU",
   "text_turbidity_very_good_range": "0 - 2 NTU",
   "text_turbidity_poor_range": "> 2 NTU",
   "ph_guide": "pH Guide",
@@ -215,7 +213,8 @@
   "text_what_ph": "pH is a measurement of electrically charged particles in a substance. It indicates how acidic or alkaline (basic) that substance is.",
   "ph_recommend": "Recommended pH levels",
   "text_ph_recommend": "For normal domestic use, pH levels at the point where the consumer collects water should be",
-  "text_ph_recommend_range": "between 6.0 and 8.5.",
+  "text_ph_recommend_range": "between 6.0 and 8.5",
+  "text_recommend_ref": "(The National technical regulation on domestic water quality QCVN 01-1:2018/BYT)",
   "text_ph_very_good_range": "pH 6.0 - 8.5",
   "text_ph_poor_range": "pH < 6.0\npH > 8.5",
   "ph_scale": "The pH scale",

package/src/utils/I18n/translations/vi.json

@@ -225,7 +225,7 @@
   "text_what_clo": "Clo dư là lượng clo ở mức thấp vẫn còn trong nước sau một thời gian nhất định hoặc tiếp xúc thời gian sau khi ứng dụng ban đầu của nó. Nó tạo nên một lớp bảo vệ chống lại nguy cơ vi sinh vật tiếp theo gây ô nhiễm sau khi xử lý - một lợi ích độc đáo cho sức khỏe cộng đồng.\nThử nghiệm clo dư là một trong những thử nghiệm phổ biến nhất được các nhà máy xử lý nước sử dụng. Qua thử nghiệm clo dư, lượng clo còn lại được xác định trong nước đã kết thúc thử nghiệm và sẵn sàng đưa ra hệ thống phân phối.",
   "recommended_clo_level": "Mức độ Clo dư khuyến nghị",
   "text_recommended_clo": "Đối với mục đích sử dụng bình thường trong sinh hoạt, mức độ Clo tại điểm người tiêu dùng lấy nước phải nằm trong khoảng",
-  "text_recommended_clo_range": "từ 0.2 đến 1 mg/l.",
+  "text_recommended_clo_range": "từ 0.2 đến 1 mg/l",
   "text_low_level": "Thấp",
   "text_high_level": "Cao",
   "text_very_good_level": "Rất tốt",
@@ -233,14 +233,15 @@
   "text_moderate_level": "Trung bình",
   "text_poor_level": "Kém",
   "text_very_poor_level": "Rất kém",
-  "text_clo_very_good_range": "0.2 - 1mg/l",
-  "text_clo_poor_range": "< 0.2mg/l\n> 1mg/l",
+  "text_clo_good_range": "0.2 - 1mg/l",
+  "text_clo_high_range": "> 1 mg/l",
+  "text_clo_low_range": "< 0.2 mg/l",
   "turbidity_guide": "Độ đục",
   "what_is_turbidity": "Độ đục của nước là gì?",
   "text_what_is_turbidity": "Độ đục của nước là thước đo độ trong tương đối của nước. Độ đục là một đặc tính quang học của nước và là một biểu hiện của lượng ánh sáng được phân tán bởi vật liệu trong nước khi ánh sáng được chiếu xuyên qua mẫu nước. Cường độ ánh sáng càng cao thì độ đục càng cao. Độ đục có thể đến từ các hạt vật chất lơ lửng như bùn, đất sét, vật liêu vô cơ hoặc các chất hữu cơ như tảo, sinh vật phù du, vật liệu phân rã.",
   "turbidity_recommend": "Mức độ đục của nước khuyến nghị",
   "text_turbidity_recommend": "Đối với mục đích sử dụng bình thường trong sinh hoạt, mức độ pH tại điểm người tiêu dùng lấy nước phải",
-  "text_turbidity_recommend_range": "thấp hơn 2 NTU.",
+  "text_turbidity_recommend_range": "thấp hơn 2 NTU",
   "text_turbidity_very_good_range": "0 - 2 NTU",
   "text_turbidity_poor_range": "> 2 NTU",
   "ph_guide": "Độ pH",
@@ -248,7 +249,8 @@
   "text_what_ph": "pH là một chỉ số xác định tính chất hoá học của nước. Nó cho biết chất đó có tính axit hoặc kiềm (bazơ) như thế nào.",
   "ph_recommend": "Mức độ pH khuyến nghị",
   "text_ph_recommend": "Đối với mục đích sử dụng bình thường trong sinh hoạt, mức độ pH tại điểm người tiêu dùng lấy nước phải nằm trong khoảng",
-  "text_ph_recommend_range": "từ 6.0 đến 8.5.",
+  "text_ph_recommend_range": "từ 6.0 đến 8.5",
+  "text_recommend_ref": "(Quy chuẩn kỹ thuật quốc gia về chất lượng nước sinh hoạt QCVN 01-1:2018/BYT)",
   "text_ph_very_good_range": "pH 6.0 - 8.5",
   "text_ph_poor_range": "pH < 6.0\npH > 8.5",
   "ph_scale": "Thang đo pH",