@eohjsc/react-native-smart-city 0.3.88 → 0.3.90

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.88",
+  "version": "0.3.90",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Device/FlatListItems.js

@@ -46,7 +46,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
     }
     return items.map((item, index) => (
       <QualityIndicatorItem
-        key={item?.id}
+        key={(item?.id || index).toString()}
         standard={item.standard}
         value={item.value}
         measure={item.unit}

package/src/commons/Device/HistoryChart.js

@@ -162,7 +162,7 @@ const HistoryChart = memo(
       return roundedSum.toFixed();
     }, [configuration, datas, chartConfig]);
 
-    const renderChart = useCallback(() => {
+    const renderChart = useMemo(() => {
       if (configuration.type === 'line_chart') {
         return (
           <View style={styles.chartContainer}>
@@ -228,7 +228,7 @@ const HistoryChart = memo(
             </View>
           </View>
         )}
-        {renderChart()}
+        {renderChart}
         {configuration.config === 'power_consumption' && !!chartConfig.price && (
           <Text type="H4">
             {t('total_power_price')} <Text bold>{formatMoney(totalPrice)}</Text>

package/src/commons/Device/LinearChart.js

@@ -108,6 +108,7 @@ function LinearChart({ datas }) {
 
   return (
     <View style={styles.container}>
+      {/* // TODO : Hinh will research to fix warning Highchart*/}
       <HighchartsReactNative
         styles={styles.chartStyle}
         webviewStyles={styles.webviewStyle}

package/src/commons/Device/PMSensor/PMSensorIndicator.js

@@ -3,12 +3,8 @@ import { View } from 'react-native';
 import { FlatList } from 'react-native';
 import QualityIndicatorItem from '../WaterQualitySensor/QualityIndicatorsItem';
 import styles from './PMSensorIndicatorStyles';
-import { roundNumber } from '../../../utils/Utils';
+import { keyExtractor, roundNumber } from '../../../utils/Utils';
 
-//using for PM2.5-10, CO, UV, Rainflow Sensor
-const keyExtractor = (item, index) => {
-  return index;
-};
 const PMSensorIndicator = memo(({ data = [], style }) => {
   const renderItem = useCallback(
     ({ item }) => {

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

@@ -36,14 +36,13 @@ describe('Test ProgressBar', () => {
       configuration: { max_value: 100 },
       value: 8,
     };
-    const data = [{ value: 10 }];
+    const data = [{ value: 10, unit: 'oC' }];
     await act(async () => {
       tree = renderer.create(wrapComponent(item, data));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts[0].props.children).toBe('Value bar');
-    expect(texts[1].props.children).toEqual(['Max value', ': ', 100]);
-    expect(texts[2].props.children).toEqual([10, ' ', undefined]);
+    expect(texts[1].props.children).toEqual('Max value: 100 oC');
   });
 });

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

@@ -23,7 +23,7 @@ const ProgressBar = memo(({ data = [], item }) => {
       </Text>
 
       <Text size={16} style={styles.textMaxValue}>
-        {t('max_value')}: {maxValue}
+        {`${t('max_value')}: ${maxValue} ${unit || measure}`}
       </Text>
 
       <View style={styles.wrapProgressBar}>
@@ -36,9 +36,11 @@ const ProgressBar = memo(({ data = [], item }) => {
           borderWidth={0}
           borderRadius={10}
         />
-        <Text style={styles.textValue}>
-          {value} {unit || measure}
-        </Text>
+        <View>
+          <Text numberOfLines={1} style={styles.textValue}>
+            {value}
+          </Text>
+        </View>
       </View>
     </View>
   );

package/src/commons/Device/ProgressBar/styles.js

@@ -6,29 +6,32 @@ export default StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column', //column direction
-    marginRight: 60,
-    marginLeft: 60,
+    marginHorizontal: 30,
     borderWidth: 1,
-    padding: 12,
+    padding: 16,
     borderRadius: 8,
     borderColor: Colors.Gray4,
     marginBottom: 12,
   },
   textLabel: {
-    paddingHorizontal: 16,
+    paddingHorizontal: 15,
     paddingTop: 8,
   },
   textMaxValue: {
-    textAlign: 'right',
+    marginTop: 20,
+    marginLeft: 14,
+    textAlign: 'left',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
   },
   wrapProgressBar: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 8,
   },
   textValue: {
     marginLeft: 8,
+    width: 45,
   },
 });

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

@@ -41,6 +41,7 @@ const Compass = memo(({ data = [], ...props }) => {
       toValue: value,
       duration: 200,
       easing: Easing.linear,
+      useNativeDriver: false,
     }).start();
   }, [currentRotation, value]);
 

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

@@ -49,6 +49,7 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
       >
         {listAutomate.map((item, index) => (
           <TouchableOpacity
+            key={(item?.id || index).toString()}
             style={
               indexAutomate === index
                 ? styles.borderSelection
@@ -79,7 +80,7 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
               isOwner={isOwner}
               automate={item}
               unit={unit}
-              key={item.id}
+              key={item.id.toString()}
             />
           ))}
         <ItemAddNew

package/src/commons/UnitSummary/AirQuality/index.js

@@ -146,7 +146,7 @@ const AirQuality = memo(({ summaryDetail }) => {
           {!!advices &&
             advices.map((item, index) => {
               return (
-                <View key={index} style={styles.boxContentHealth}>
+                <View key={index.toString()} style={styles.boxContentHealth}>
                   <View
                     style={[styles.boxDot, { backgroundColor: outdoorColor }]}
                   />

package/src/context/SCContext.tsx

@@ -91,7 +91,7 @@ export const SCWrapper = (props) => {
   return (
     <>
       <SCProvider {...props} />
-      <Toast config={toastConfig} ref={(ref) => Toast.setRef(ref)} />
+      <Toast config={toastConfig} />
     </>
   );
 };

package/src/screens/Automate/MultiUnits.js

@@ -131,6 +131,7 @@ const MultiUnits = () => {
       <View style={styles.wrapItem}>
         {sortedListItems.map((item, index) => (
           <ItemOneTap
+            key={(item?.id || index).toString()}
             isOwner={isOwner}
             automate={item}
             wrapSyles={[

package/src/screens/Automate/index.js

@@ -25,8 +25,7 @@ import {
   AccessibilityLabel,
   UNIT_TYPES,
 } from '../../configs/Constants';
-
-const keyExtractor = (item) => item.id;
+import { keyExtractor } from '../../utils/Utils';
 
 const Automate = () => {
   const t = useTranslations();

package/src/screens/Device/detail.js

@@ -706,7 +706,7 @@ const DeviceDetail = ({ route }) => {
                 return (
                   <SensorDisplayItem
                     accessibilityLabel={AccessibilityLabel.SENSOR_DISPLAY_ITEM}
-                    key={index}
+                    key={(item?.id || index).toString()}
                     item={item}
                     evaluate={evaluate}
                     emergency={onEmergencyButtonPress}

package/src/screens/Unit/Station/index.js

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { View, Text, TouchableOpacity, FlatList } from 'react-native';
 import { AccessibilityLabel } from '../../../configs/Constants';
+import { keyExtractor } from '../../../utils/Utils';
 import styles from './StationStyles';
 
 const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
@@ -63,10 +64,10 @@ const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
   return (
     <View style={styles.container}>
       <FlatList
+        keyExtractor={keyExtractor}
         removeClippedSubviews={false}
         onScroll={onScroll}
         ref={flatListRef}
-        keyExtractor={(item) => item.id}
         horizontal
         data={data}
         extraData={data}

package/src/screens/Unit/Summaries.js

@@ -107,7 +107,11 @@ const Summaries = memo(({ unit }) => {
           accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_VIEW}
         >
           {unitSummaries.map((item, index) => (
-            <SummaryItem key={index} item={item} goToSummary={goToSummary} />
+            <SummaryItem
+              key={(item?.id || index).toString()}
+              item={item}
+              goToSummary={goToSummary}
+            />
           ))}
         </ScrollView>
       )}

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

@@ -675,7 +675,7 @@
   "text_notification_content_turbility_high": "The Turbility at **unit_name** is **status**. Water is not safe to drink.",
   "text_notification_content_smoke": "Smoke appears in **unit_name**. Please check your home and call the rescue team if there is a fire.",
   "text_notification_content_fire": "There is a fire at **unit_name**, Please move out of the house immediately and call the rescue team.",
-  "text_notification_content_active_sos": "**device_name** is activating at **unit_name** - **station_name**, Please check it NOW.",
+  "text_notification_content_active_sos": "**device_name** is activating at **unit_name** - **station_name**. Please check it NOW.",
   "text_notification_content_replace_water_filter": "Filter **config_name** of **device_name** in **station_name** has less than 10h remaining. Check and replace now.",
   "text_notification_content_low_battery": "Battery of **device_name** in **unit_name**: **station_name** has less than 20%. Check and replace now.",
   "text_notification_content_remove_unit_to_owner": "Unit **unit_name** has been removed successfully.",

package/src/utils/Utils.js

@@ -230,6 +230,8 @@ export const PIN_MAPPING = {
   },
 };
 
+export const keyExtractor = (item, index) => (item?.id || index).toString();
+
 export default {
   validateEmail,
   isObjectEmpty,