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

package/src/{commons/UnitSummary → screens/UnitSummary/components}/AirQuality/index.js

@@ -1,84 +1,76 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
 
-import { Colors } from '../../../configs';
-import { Section } from '../../../commons/index';
-import Text from '../../../commons/Text';
-import VisualChart from '../../../screens/Device/components/VisualChart';
-
-import SegmentedRoundDisplay from './SegmentedRoundDisplay';
-import { AccessibilityLabel } from '../../../configs/Constants';
 import styles from './styles';
 
+import { Section, Text } from '../../../../commons';
+import VisualChart from '../../../Device/components/VisualChart';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import { useWatchConfigs } from '../../../../hooks/IoT';
+import { Colors } from '../../../../configs';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+import SegmentedRoundChart from './SegmentedRoundChart';
+
 const AirQuality = memo(({ summaryDetail }) => {
   const t = useTranslations();
   const {
-    outdoor_pm10_id,
-    outdoor_pm2_5_id,
-    outdoor_co_id,
     outdoorColor,
     outdoorColorLight,
     outdoorStatus,
     outdoorIcon,
     advices,
+    listConfigs,
+    outdoor_pm2_5_color,
+    outdoor_pm10_color,
+    outdoor_co_color,
   } = summaryDetail;
-  const outdoorValues = [];
-  if (summaryDetail.outdoor_pm2_5_value !== null) {
-    outdoorValues.push({
-      id: '0',
-      title: 'PM2.5',
-      value:
-        summaryDetail.outdoor_pm2_5_value !== undefined
-          ? summaryDetail.outdoor_pm2_5_value
-          : t('loading'),
-      color: summaryDetail.outdoor_pm2_5_color,
-    });
-  }
-  if (summaryDetail.outdoor_pm10_value !== null) {
-    outdoorValues.push({
-      id: '1',
-      title: 'PM10',
-      value:
-        summaryDetail.outdoor_pm10_value !== undefined
-          ? summaryDetail.outdoor_pm10_value
-          : t('loading'),
-      color: summaryDetail.outdoor_pm10_color,
-    });
-  }
-  if (summaryDetail.outdoor_co_value !== null) {
-    outdoorValues.push({
-      id: '2',
-      title: 'CO',
-      value:
-        summaryDetail.outdoor_co_value !== undefined
-          ? summaryDetail.outdoor_co_value
-          : t('loading'),
-      color: summaryDetail.outdoor_co_color,
-    });
-  }
 
-  const showBoxHistory = useMemo(() => {
-    return outdoor_pm10_id || outdoor_pm2_5_id || outdoor_co_id ? true : false;
-  }, [outdoor_pm10_id, outdoor_pm2_5_id, outdoor_co_id]);
+  const { outdoor_co, outdoor_pm2_5, outdoor_pm10 } = listConfigs || {};
+  useWatchConfigs([outdoor_co, outdoor_pm2_5, outdoor_pm10]);
+  const [outdoor, setOutdoor] = useState();
+  const createDataItem = (id, color, title) => ({
+    id,
+    color,
+    title,
+  });
 
   const configs = useMemo(() => {
-    return [
-      { id: outdoor_pm2_5_id, title: 'PM2.5', color: 'red' },
-      { id: outdoor_pm10_id, title: 'PM10', color: 'blue' },
-      { id: outdoor_co_id, title: 'CO', color: 'orange' },
-    ];
-  }, [outdoor_pm10_id, outdoor_pm2_5_id, outdoor_co_id]);
+    const data = [];
+
+    if (outdoor_co) {
+      data.push(createDataItem(outdoor_co, outdoor_co_color, 'CO'));
+    }
+
+    if (outdoor_pm2_5) {
+      data.push(createDataItem(outdoor_pm2_5, outdoor_pm2_5_color, 'PM2.5'));
+    }
+
+    if (outdoor_pm10) {
+      data.push(createDataItem(outdoor_pm10, outdoor_pm10_color, 'PM10'));
+    }
+    setOutdoor(data[0] || {});
+    return data;
+  }, [
+    outdoor_co,
+    outdoor_co_color,
+    outdoor_pm10,
+    outdoor_pm10_color,
+    outdoor_pm2_5,
+    outdoor_pm2_5_color,
+  ]);
+
+  const showBoxHistory = useMemo(() => {
+    return !!configs.length;
+  }, [configs.length]);
 
-  const [indexOutdoor, setIndexOutdoor] = useState(0);
-  const onSelectOutdoor = useCallback((i) => {
-    setIndexOutdoor(i);
+  const onSelectOutdoor = useCallback((item) => {
+    setOutdoor(item);
   }, []);
 
   return (
     <View>
-      {!!outdoorValues.length && (
+      {!!configs.length && (
         <Section type={'border'} style={styles.boxOutdoor}>
           <Text semibold style={styles.textOutdoor}>
             {t('text_outdoor')}
@@ -101,8 +93,8 @@ const AirQuality = memo(({ summaryDetail }) => {
             </View>
           </View>
           <View style={styles.boxOutdoorValues}>
-            {outdoorValues.map((item, i) => {
-              let active = i === indexOutdoor;
+            {configs.map((item, i) => {
+              let active = item.id === outdoor?.id;
               const borderWidth = active ? 0 : 1;
               return (
                 <TouchableOpacity
@@ -117,7 +109,7 @@ const AirQuality = memo(({ summaryDetail }) => {
                     },
                   ]}
                   key={i}
-                  onPress={() => onSelectOutdoor(i)}
+                  onPress={() => onSelectOutdoor(item)}
                 >
                   <Text size={14} color={active ? Colors.White : Colors.Gray8}>
                     {item.title}
@@ -126,16 +118,8 @@ const AirQuality = memo(({ summaryDetail }) => {
               );
             })}
           </View>
-          <SegmentedRoundDisplay
-            filledArcColor={outdoorValues[indexOutdoor].color}
-            value={outdoorValues[indexOutdoor].value}
-            valueText={outdoorValues[indexOutdoor].value}
-            totalValue={500}
-            title={outdoorValues[indexOutdoor].title}
-            style={styles.segment}
-            textHeader={t('text_air_quality_index')}
-          />
-          {!!advices && !!advices.length && (
+          {<SegmentedRoundChart data={outdoor} />}
+          {!!advices?.length && (
             <View style={styles.boxHealth}>
               <IconOutline name="alert" size={20} style={styles.iconMargin} />
               <Text semibold color={Colors.Gray9} type="H4">

package/src/{commons/UnitSummary → screens/UnitSummary/components}/AirQuality/styles.js

@@ -1,6 +1,5 @@
 import { StyleSheet } from 'react-native';
-
-import { Colors } from '../../../configs';
+import { Colors } from '../../../../configs';
 
 export default StyleSheet.create({
   textIndoor: {

package/src/screens/UnitSummary/components/PowerConsumption/__test__/PowerConsumption.test.js

@@ -13,6 +13,17 @@ import { Today } from '../../../../../commons';
 
 const mock = new MockAdapter(api.axiosInstance);
 
+const mockedNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+    useFocusEffect: (func) => func(),
+  };
+});
 const wrapComponent = (summaryDetail) => (
   <SCProvider initState={mockSCStore({})}>
     <PowerConsumption summaryDetail={summaryDetail} />
@@ -29,7 +40,13 @@ describe('Test PowerConsumption', () => {
       activePowerValue: 10,
       powerFactorValue: 30,
       totalPowerValue: 20,
-      listConfigs: [1, 2, 3],
+      listConfigs: {
+        volt: 1,
+        current: 2,
+        active_power: 3,
+        power_factor: 4,
+        total_power: 5,
+      },
     };
     await act(async () => {
       tree = await renderer.create(wrapComponent(summaryDetail));
@@ -44,29 +61,25 @@ describe('Test PowerConsumption', () => {
     const resultList = [
       {
         color: Colors.Red6,
-        standard: 'Voltage',
-        value: summaryDetail.voltValue,
-        measure: '',
+        title: 'Voltage',
+        measure: 'V',
         id: 1,
       },
       {
         color: Colors.Blue10,
-        standard: 'Current',
-        value: summaryDetail.currentValue,
-        measure: '',
+        title: 'Current',
+        measure: 'A',
         id: 2,
       },
       {
         color: Colors.Orange,
-        standard: 'Active Power',
-        value: summaryDetail.activePowerValue,
-        measure: '',
+        title: 'Active Power',
+        measure: 'kW',
         id: 3,
       },
       {
         color: Colors.Green6,
-        standard: 'Power Factor',
-        value: summaryDetail.powerFactorValue,
+        title: 'Power Factor',
         measure: '',
         id: 4,
       },
@@ -127,14 +140,7 @@ describe('Test PowerConsumption', () => {
 
   it('render without value', async () => {
     const summaryDetail = {
-      listConfigs: {
-        active_power: 208,
-        current: 210,
-        freq: null,
-        power_factor: 229,
-        total_power: 207,
-        volt: 209,
-      },
+      listConfigs: {},
     };
 
     await act(async () => {

package/src/screens/UnitSummary/components/PowerConsumption/index.js

@@ -12,71 +12,14 @@ import HistoryChart from '../../../../commons/Device/HistoryChart';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import { axiosGet } from '../../../../utils/Apis/axios';
 import VisualChart from '../../../Device/components/VisualChart';
+import { useWatchConfigs } from '../../../../hooks/IoT';
 
 const PowerConsumption = memo(({ summaryDetail }) => {
   const t = useTranslations();
-  const {
-    voltValue,
-    currentValue,
-    activePowerValue,
-    powerFactorValue,
-    totalPowerValue,
-    listConfigs,
-  } = summaryDetail;
-
-  const showBoxHistory = useMemo(() => {
-    return !!listConfigs;
-  }, [listConfigs]);
-
-  const listIdsConfig = useMemo(() => {
-    return listConfigs;
-  }, [listConfigs]);
-
-  const voltItem = {
-    id: 1,
-    color: Colors.Red6,
-    standard: 'Voltage',
-    value: voltValue !== undefined ? voltValue : t('loading'),
-    measure: '',
-  };
-  const currentItem = {
-    id: 2,
-    color: Colors.Blue10,
-    standard: 'Current',
-    value: currentValue !== undefined ? currentValue : t('loading'),
-    measure: '',
-  };
-  const activeItem = {
-    id: 3,
-    color: Colors.Orange,
-    standard: 'Active Power',
-    value: activePowerValue !== undefined ? activePowerValue : t('loading'),
-    measure: '',
-  };
-  const powFactorItem = {
-    id: 4,
-    color: Colors.Green6,
-    standard: 'Power Factor',
-    value: powerFactorValue !== undefined ? powerFactorValue : t('loading'),
-    measure: '',
-  };
-  const totalPower = {
-    id: 5,
-    color: Colors.Green7,
-    standard: 'Total Power Consumption',
-    value: totalPowerValue !== undefined ? totalPowerValue : t('loading'),
-    measure: '',
-  };
-
-  const dataList = [];
-  voltValue !== undefined && dataList.push(voltItem);
-  currentValue !== undefined && dataList.push(currentItem);
-  activePowerValue !== undefined && dataList.push(activeItem);
-  powerFactorValue !== undefined && dataList.push(powFactorItem);
-
-  const dataTotal = [];
-  dataTotal.push(totalPower);
-
+  const { listConfigs } = summaryDetail;
+  const { volt, current, active_power, power_factor, total_power } =
+    listConfigs || {};
+  useWatchConfigs([volt, current, active_power, power_factor, total_power]);
   const [startDate, setStartDate] = useState(moment().subtract(6, 'days'));
   const [endDate, setEndDate] = useState(moment());
   const [groupBy, setGroupBy] = useState('date');
@@ -85,11 +28,61 @@ const PowerConsumption = memo(({ summaryDetail }) => {
     unit: 'kWh',
     price: '',
   });
+  const showBoxHistory = useMemo(() => {
+    return !!listConfigs;
+  }, [listConfigs]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const createDataItem = (id, color, title, measure) => ({
+    id,
+    color,
+    title,
+    measure,
+  });
+
+  const configs = useMemo(() => {
+    const data = [];
+
+    if (volt) {
+      data.push(createDataItem(volt, Colors.Red6, 'Voltage', 'V'));
+    }
+
+    if (current) {
+      data.push(createDataItem(current, Colors.Blue10, 'Current', 'A'));
+    }
+
+    if (active_power) {
+      data.push(
+        createDataItem(active_power, Colors.Orange, 'Active Power', 'kW')
+      );
+    }
+
+    if (power_factor) {
+      data.push(
+        createDataItem(power_factor, Colors.Green6, 'Power Factor', '')
+      );
+    }
+
+    return data;
+  }, [active_power, createDataItem, current, power_factor, volt]);
+
+  const dataTotal = useMemo(() => {
+    return total_power
+      ? [
+          createDataItem(
+            total_power,
+            Colors.Green7,
+            'Total Power Consumption',
+            'kWh'
+          ),
+        ]
+      : [];
+  }, [total_power]);
 
   useEffect(() => {
     const fetchData = async () => {
       let params = new URLSearchParams();
-      params.append('config', listConfigs.total_power);
+      params.append('config', total_power);
       params.append('group_by', groupBy);
       if (groupBy === 'date') {
         params.append('date_from', moment(startDate).format('YYYY-MM-DD'));
@@ -105,38 +98,17 @@ const PowerConsumption = memo(({ summaryDetail }) => {
         setData(data);
       }
     };
-    if (listConfigs?.total_power) {
+    if (total_power) {
       fetchData();
     }
-  }, [startDate, endDate, listConfigs?.total_power, groupBy]);
-
-  const configs = useMemo(() => {
-    return [
-      { id: listIdsConfig?.volt, title: 'Volt', color: 'red' },
-      {
-        id: listIdsConfig?.current,
-        title: 'Current',
-        color: 'blue',
-      },
-      {
-        id: listIdsConfig?.active_power,
-        title: 'Active Power',
-        color: 'orange',
-      },
-      {
-        id: listIdsConfig?.power_factor,
-        title: 'Power Factor',
-        color: 'green',
-      },
-    ];
-  }, [listIdsConfig]);
+  }, [startDate, endDate, total_power, groupBy]);
 
   return (
     <>
       <Section type={'border'}>
         <Today style={styles.textIndoor} />
         <ListQualityIndicator
-          data={dataList}
+          data={configs}
           style={styles.styleList}
           accessibilityLabel={AccessibilityLabel.LIST_QUALITY_INDICATOR_PC}
         />

package/src/screens/UnitSummary/components/RunningDevices/index.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import React, { memo, useCallback } from 'react';
+import { FlatList, StyleSheet } from 'react-native';
 import ItemDevice from '../../../../commons/Device/ItemDevice';
 import { useDevicesStatus } from '../../../../hooks/Common';
 import { useUnitConnectRemoteDevices } from '../../../Unit/hook/useUnitConnectRemoteDevices';
@@ -8,30 +8,34 @@ const RunningDevices = memo(({ unit, summaryDetail }) => {
   const { devices } = summaryDetail;
 
   useUnitConnectRemoteDevices(unit);
-
   useDevicesStatus(unit, devices);
 
+  const renderItem = useCallback(
+    ({ item, index }) => (
+      <ItemDevice
+        key={`sensor-${item.id}`}
+        id={item.id}
+        svgMain={item.icon || 'door'}
+        statusIcon={item.action && item.action.icon}
+        statusColor={item.action && item.action.color}
+        description={item.value}
+        title={item.name}
+        index={index}
+        sensor={item}
+        unit={unit}
+        station={item.station}
+      />
+    ),
+    [unit]
+  );
+
   return (
-    <View style={styles.container}>
-      {!!devices &&
-        devices.map((item, index) => {
-          return (
-            <ItemDevice
-              key={`sensor-${item.id}`}
-              id={item.id}
-              svgMain={item.icon || 'door'}
-              statusIcon={item.action && item.action.icon}
-              statusColor={item.action && item.action.color}
-              description={item.value}
-              title={item.name}
-              index={index}
-              sensor={item}
-              unit={unit}
-              station={item.station}
-            />
-          );
-        })}
-    </View>
+    <FlatList
+      data={devices}
+      renderItem={renderItem}
+      keyExtractor={(item) => `sensor-${item.id}`}
+      contentContainerStyle={styles.container}
+    />
   );
 });
 const styles = StyleSheet.create({

package/src/screens/UnitSummary/components/Temperature/ItemTemperature/index.js

@@ -1,28 +1,41 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import Text from '../../../../../commons/Text';
 import { Colors, Constants } from '../../../../../configs';
+import { useConfigGlobalState } from '../../../../../iot/states';
 
-const width_item = (Constants.width - 48) / 2;
+const ItemTemperature = memo(
+  ({ id, svgMain, title, des, measure, custom_get_value }) => {
+    const [configValues] = useConfigGlobalState('configValues');
+
+    const getValue = useMemo(() => {
+      if (custom_get_value) {
+        return custom_get_value[configValues?.[id]?.value] || '--';
+      } else if (configValues?.[id]?.value !== undefined) {
+        return `${configValues[id].value} ${measure}`;
+      } else {
+        return '--';
+      }
+    }, [configValues, custom_get_value, id, measure]);
+
+    return (
+      <View style={styles.container}>
+        <Text type="H4" color={Colors.Gray8} style={styles.textTitle}>
+          {title}
+        </Text>
+        <Text size={24} color={Colors.Gray9} style={styles.textValue}>
+          {getValue}
+        </Text>
+        <Text type="H4" color={Colors.Gray8}>
+          {des}
+        </Text>
+        <View style={styles.boxSvg}>{svgMain}</View>
+      </View>
+    );
+  }
+);
 
-const ItemTemperature = memo((props) => {
-  const { svgMain, title, des, value } = props;
-  return (
-    <View style={styles.container}>
-      <Text type="H4" color={Colors.Gray8} style={styles.textTitle}>
-        {title}
-      </Text>
-      <Text size={24} color={Colors.Gray9} style={styles.textValue}>
-        {value}
-      </Text>
-      <Text type="H4" color={Colors.Gray8}>
-        {des}
-      </Text>
-      <View style={styles.boxSvg}>{svgMain}</View>
-    </View>
-  );
-});
 export default ItemTemperature;
 
 const styles = StyleSheet.create({
@@ -36,7 +49,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.1,
     elevation: 5,
     backgroundColor: Colors.White,
-    width: width_item,
+    width: (Constants.width - 48) / 2,
     marginBottom: 16,
     borderRadius: 5,
   },