@eohjsc/react-native-smart-city 0.4.84 → 0.4.85

package/package.json

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

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

@@ -4,25 +4,32 @@ import { FlatList } from 'react-native';
 import QualityIndicatorItem from '../WaterQualitySensor/QualityIndicatorsItem';
 import styles from './PMSensorIndicatorStyles';
 import { keyExtractor, roundNumber } from '../../../utils/Utils';
+import { useConfigGlobalState } from '../../../iot/states';
 
 const PMSensorIndicator = memo(({ data = [], style, isWidgetOrder }) => {
+  const [configValues] = useConfigGlobalState('configValues');
+
   const renderItem = useCallback(
     ({ item }) => {
-      const getValue = ['', null, undefined, NaN].includes(item?.value)
-        ? '--'
-        : roundNumber(item?.value);
+      const { id, color, title, standard, evaluate, unit } = item || {};
+      const getValue =
+        configValues?.[id]?.value === undefined
+          ? '--'
+          : `${roundNumber(configValues[id].value)}`;
+
       return (
         <QualityIndicatorItem
-          color={item.color}
-          standard={item.standard}
+          key={id?.toString()}
+          color={color}
+          standard={title || standard}
           value={getValue}
-          evaluate={item.evaluate}
-          measure={item.unit}
+          evaluate={evaluate}
+          measure={unit}
           style={style}
         />
       );
     },
-    [style]
+    [configValues, style]
   );
 
   const isScrollMode = data.length > 3;

package/src/commons/Device/WaterQualitySensor/ListQualityIndicator.js

@@ -2,25 +2,33 @@ import React, { useCallback } from 'react';
 import { View, StyleSheet, FlatList } from 'react-native';
 
 import QualityIndicatorItem from './QualityIndicatorsItem';
+import { useConfigGlobalState } from '../../../iot/states';
 
 //using for Water quality sensor , power meter SENSOR, INdoor air sensor
 const ListQualityIndicator = ({ data, style }) => {
-  const renderItem = useCallback(({ item }) => {
-    const getValue = ['', null, undefined, NaN].includes(item?.value)
-      ? '--'
-      : item?.value;
+  const [configValues] = useConfigGlobalState('configValues');
+  const renderItem = useCallback(
+    ({ item }) => {
+      const { id, measure, color, title, standard, evaluate, unit } =
+        item || {};
+      const getValue =
+        configValues?.[id]?.value === undefined
+          ? '--'
+          : `${configValues[id].value} ${measure}`;
 
-    return (
-      <QualityIndicatorItem
-        key={item.id.toString()}
-        color={item.color}
-        standard={item.standard}
-        value={getValue}
-        evaluate={item.evaluate}
-        measure={item.unit}
-      />
-    );
-  }, []);
+      return (
+        <QualityIndicatorItem
+          key={id?.toString()}
+          color={color}
+          standard={title || standard}
+          value={getValue}
+          evaluate={evaluate}
+          measure={unit}
+        />
+      );
+    },
+    [configValues]
+  );
   return (
     <View style={styles.standard}>
       <FlatList

package/src/commons/Device/WaterQualitySensor/QualityIndicatorsItem.js

@@ -22,14 +22,14 @@ const QualityIndicatorItem = memo(
       backgroundColor: color,
     };
     const navigation = useNavigation();
+    const measureText =
+      measure && measure.length ? `${value} ${measure}` : `${value}`;
 
     return (
       <View style={[styles.container, style, color && styles.containerPadding]}>
         <View style={[styles.line, styleColor]} />
         <View style={styles.rowFlex}>
-          <Text size={14} color={Colors.Gray8} style={styles.txtMeasure}>
-            {standard}
-          </Text>
+          <Text style={styles.txtMeasure}>{standard}</Text>
           {type === 'machine_status' && (
             <TouchableOpacity
               onPress={() => navigation.navigate(descriptionScreen)}
@@ -43,13 +43,9 @@ const QualityIndicatorItem = memo(
             </TouchableOpacity>
           )}
         </View>
-        <Text size={24} color={Colors.Gray9} style={styles.txtValue}>
-          {measure && measure.length ? `${value} ${measure}` : `${value}`}
-        </Text>
+        <Text style={styles.txtValue}>{measureText}</Text>
         {!!evaluate?.color && (
-          <Text size={12} color={evaluate.color} style={styles.txtEvaluate}>
-            {evaluate.text}
-          </Text>
+          <Text style={styles.txtEvaluate}>{evaluate.text}</Text>
         )}
       </View>
     );
@@ -82,14 +78,19 @@ const styles = StyleSheet.create({
   txtMeasure: {
     lineHeight: 22,
     marginTop: 8,
+    fontSize: 14,
+    color: Colors.Gray8,
   },
   txtValue: {
     lineHeight: 32,
     marginTop: 16,
+    fontSize: 24,
+    color: Colors.Gray9,
   },
   txtEvaluate: {
     lineHeight: 20,
     marginTop: 8,
+    fontSize: 12,
   },
   iconInfo: {
     width: 40,

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -116,7 +116,7 @@ const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
     paddingTop: Platform.select({
-      ios: 0,
+      ios: 15,
       android: heightHeader + 16,
     }),
   },

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

@@ -1,22 +1,16 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import styles from '../styles/ConfigValueStyles';
 import { Platform, View } from 'react-native';
 import Text from '../../../Text';
 import { useConfigGlobalState } from '../../../../iot/states';
-import { useWatchConfigs } from '../../../../hooks/IoT';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import IconComponent from '../../../IconComponent';
 import { IconOutline } from '@ant-design/icons-react-native';
 
 const ConfigValue = ({ device, stationItem }) => {
-  // eslint-disable-next-line no-unused-vars
-  const [configValues, _] = useConfigGlobalState('configValues');
+  const [configValues] = useConfigGlobalState('configValues');
   const configValue = configValues[stationItem.configuration?.config];
-  const configIds = useMemo(() => {
-    return [stationItem.configuration?.config];
-  }, [stationItem.configuration?.config]);
   const { icon_kit, icon } = device || {};
-  useWatchConfigs(configIds);
 
   return (
     <>

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

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import styles from '../styles/ConfigValueStyles';
 import { Platform, View } from 'react-native';
 import Text from '../../../Text';
@@ -7,22 +7,14 @@ import {
   useEvaluateValue,
   useValueEvaluation,
 } from '../../../../screens/Device/hooks/useEvaluateValue';
-import { useWatchConfigs } from '../../../../hooks/IoT';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import IconComponent from '../../../IconComponent';
 import { IconOutline } from '@ant-design/icons-react-native';
 
 export const EvaluationConfigWrapper = memo(
   ({ device, stationItem, Child }) => {
-    // eslint-disable-next-line no-unused-vars
-    const [configValues, _] = useConfigGlobalState('configValues');
+    const [configValues] = useConfigGlobalState('configValues');
     const configValue = configValues[stationItem.configuration?.config];
-    const configIds = useMemo(() => {
-      return [stationItem.configuration?.config];
-    }, [stationItem.configuration?.config]);
-
-    useWatchConfigs(configIds);
-
     const valueEvaluationObject = useValueEvaluation(
       stationItem.configuration?.config,
       device.unit_id,

package/src/commons/SubUnit/ShortDetail.js

@@ -29,12 +29,22 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
   useDevicesStatus(unit, station?.devices);
 
   const configsNeedWatching = useMemo(() => {
-    const configIds = [];
-    (station?.devices || []).forEach((device) => {
-      if (device?.quick_action?.config_id && device?.is_managed_by_backend) {
-        configIds.push(device.quick_action.config_id);
+    const configIds = (station?.devices || []).flatMap((device) => {
+      const ids = [];
+
+      if (device?.quick_action?.config_id && device.is_managed_by_backend) {
+        ids.push(device.quick_action.config_id);
+      }
+
+      if (device?.station_items?.length) {
+        ids.push(
+          ...device.station_items.map((item) => item.configuration.config)
+        );
       }
+
+      return ids;
     });
+
     return configIds;
   }, [station]);
 

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

@@ -318,8 +318,8 @@ describe('test DeviceDetail', () => {
         data: '00012',
       }
     );
-    expect(valueBoxs[0].props.value).toEqual(0.1);
-    expect(valueBoxs[1].props.value).toEqual(0.2);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[1].props.value).toEqual('0.2');
   });
 
   it('should render device detail, modbus call updateGlobalValue, int_all exceed 32767', async () => {
@@ -330,8 +330,8 @@ describe('test DeviceDetail', () => {
         data: '0001F000',
       }
     );
-    expect(valueBoxs[0].props.value).toEqual(0.1);
-    expect(valueBoxs[1].props.value).toEqual(-409.6);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[1].props.value).toEqual('-409.6');
   });
 
   it('should render device detail, modbus call updateGlobalValue, uint_32', async () => {
@@ -346,8 +346,8 @@ describe('test DeviceDetail', () => {
         data: '0001CCDDBBAA',
       }
     );
-    expect(valueBoxs[0].props.value).toEqual(0.1);
-    expect(valueBoxs[1].props.value).toEqual(343708356.1);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[1].props.value).toEqual('343708356.1');
   });
 
   it('should render device detail, modbus call updateGlobalValue, float_cdba', async () => {
@@ -363,8 +363,8 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual(0.1);
-    expect(valueBoxs[1].props.value).toEqual(369.6);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[1].props.value).toEqual('369.6');
   });
 
   it('should render device detail, modbus call updateGlobalValue, float_cdba, data not hex format', async () => {
@@ -380,7 +380,7 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 
@@ -396,7 +396,7 @@ describe('test DeviceDetail', () => {
         data: '0001P5670123', // reverse for simple
       }
     );
-    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 
@@ -412,8 +412,8 @@ describe('test DeviceDetail', () => {
         data: '0001CCDDBBAA',
       }
     );
-    expect(valueBoxs[0].props.value).toEqual(0.1);
-    expect(valueBoxs[1].props.value).toEqual(5244.5);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[1].props.value).toEqual('5244.5');
   });
 
   test('should render device detail, modbus call updateGlobalValue, int_last4', async () => {
@@ -429,8 +429,8 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual(0.1);
-    expect(valueBoxs[1].props.value).toEqual(4804.2);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[1].props.value).toEqual('4804.2');
   });
 
   it('should render device detail, modbus call updateGlobalValue, convert_ai', async () => {
@@ -448,8 +448,8 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual(0.1);
-    expect(valueBoxs[1].props.value).toEqual(10);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[1].props.value).toEqual('10');
   });
 
   it('should render device detail, modbus call updateGlobalValue, convert_ai min_raw same max_raw', async () => {
@@ -467,7 +467,7 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 
@@ -482,7 +482,7 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[0].props.value).toEqual('0.1');
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 
@@ -496,7 +496,7 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual(10);
+    expect(valueBoxs[0].props.value).toEqual('10');
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 
@@ -538,7 +538,7 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual(36);
+    expect(valueBoxs[0].props.value).toEqual('36');
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 

package/src/screens/Device/detail.js

@@ -769,7 +769,7 @@ const DeviceDetail = ({ route }) => {
                       accessibilityLabel={
                         AccessibilityLabel.SENSOR_DISPLAY_ITEM
                       }
-                      key={(item?.id || index).toString()}
+                      key={`display${item?.id || index}`}
                       item={item}
                       evaluate={evaluate}
                       emergency={onEmergencyButtonPress}

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

@@ -8,7 +8,6 @@ import UnitSummary from '..';
 import { API } from '../../../configs';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import { TouchableOpacity } from 'react-native';
-import AirQuality from '../../../commons/UnitSummary/AirQuality';
 import PowerConsumption from '../components/PowerConsumption';
 import ThreePhasePowerConsumption from '../components/3PPowerConsumption';
 import RunningDevices from '../components/RunningDevices';
@@ -20,6 +19,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
 import { WrapHeaderScrollable } from '../../../commons';
+import AirQuality from '../components/AirQuality';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -32,6 +32,7 @@ jest.mock('@react-navigation/native', () => {
       navigate: mockedNavigate,
     }),
     useIsFocused: () => true,
+    useFocusEffect: (func) => func(),
   };
 });
 

package/src/screens/UnitSummary/components/3PPowerConsumption/__test__/3PPowerConsumption.test.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { AccessibilityLabel } from '../../../../../configs/Constants';
-import { API, Colors } from '../../../../../configs';
+import { API } from '../../../../../configs';
 import PowerConsumption from '../index';
 import { SCProvider } from '../../../../../context';
 import { mockSCStore } from '../../../../../context/mockStore';
@@ -17,6 +17,19 @@ jest.mock('react', () => {
     useState: jest.fn(),
   };
 });
+
+const mockedNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+    useFocusEffect: (func) => func(),
+  };
+});
+
 useState.mockImplementation((init) => [init, mockSetState]);
 
 const wrapComponent = (summaryDetail) => (
@@ -35,7 +48,19 @@ describe('Test 3PPowerConsumption', () => {
       activePowerValue: 10,
       powerFactor1Value: 30,
       totalPowerValue: 20,
-      listConfigs: [1, 2, 3],
+      listConfigs: {
+        volt_1: 1,
+        volt_2: 2,
+        volt_3: 3,
+        current_1: 4,
+        current_2: 5,
+        current_3: 6,
+        active_power: 7,
+        power_factor_1: 8,
+        power_factor_2: 9,
+        power_factor_3: 10,
+        total_power: 11,
+      },
     };
     await act(async () => {
       tree = await renderer.create(wrapComponent(summaryDetail));
@@ -48,34 +73,16 @@ describe('Test 3PPowerConsumption', () => {
     );
     expect(listIndicator).not.toBeUndefined();
     const resultList = [
-      {
-        color: Colors.Red6,
-        standard: 'Voltage 1',
-        value: summaryDetail.volt1Value,
-        measure: '',
-        id: 1,
-      },
-      {
-        color: Colors.Blue10,
-        standard: 'Current 1',
-        value: summaryDetail.current1Value,
-        measure: '',
-        id: 4,
-      },
-      {
-        color: Colors.Orange,
-        standard: 'Active Power',
-        value: summaryDetail.activePowerValue,
-        measure: '',
-        id: 7,
-      },
-      {
-        color: Colors.Green6,
-        standard: 'Power Factor 1',
-        value: summaryDetail.powerFactor1Value,
-        measure: '',
-        id: 8,
-      },
+      { id: 1, color: '#F5222D', title: 'Voltage 1', measure: 'V' },
+      { id: 2, color: '#F5222D', title: 'Voltage 2', measure: 'V' },
+      { id: 3, color: '#F5222D', title: 'Voltage 3', measure: 'V' },
+      { id: 4, color: '#1890FF', title: 'Current 1', measure: 'A' },
+      { id: 5, color: '#1890FF', title: 'Current 2', measure: 'A' },
+      { id: 6, color: '#1890FF', title: 'Current 3', measure: 'A' },
+      { id: 7, color: '#F08229', title: 'Active Power', measure: 'kW' },
+      { id: 8, color: '#52C41A', title: 'Power Factor 1', measure: '' },
+      { id: 9, color: '#52C41A', title: 'Power Factor 2', measure: '' },
+      { id: 10, color: '#52C41A', title: 'Power Factor 3', measure: '' },
     ];
     expect(listIndicator.props.data).toEqual(resultList);
   });