@eohjsc/react-native-smart-city 0.7.41 → 0.7.43

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

@@ -4,6 +4,10 @@ import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useDevicesStatus } from '../../../hooks/Common';
 import { useWatchConfigs } from '../../../hooks/IoT';
+import useChipJsonConfiguration, {
+  useConnectChipMqtt,
+} from '../../../hooks/useMqtt';
+import useWatchSharedChips from '../../../hooks/IoT/useWatchSharedChips';
 
 import { Section } from '../../Section';
 import ItemDevice from '../../Device/ItemDevice';
@@ -11,7 +15,6 @@ import ItemOneTap from '../OneTap/ItemOneTap';
 import ItemAddNew from '../../Device/ItemAddNew';
 import styles from './styles';
 import Routes from '../../../utils/Route';
-import { DEVICE_TYPE } from '../../../configs/Constants';
 
 const SubUnitFavorites = ({
   isOwner,
@@ -25,22 +28,44 @@ const SubUnitFavorites = ({
 
   useDevicesStatus(unit, favoriteDevices);
 
+  const favoriteChipIdsSet = useMemo(() => {
+    return new Set(favoriteDevices?.map((device) => device.chip_id));
+  }, [favoriteDevices]);
+
+  const { chips, isFetching } = useChipJsonConfiguration({
+    dashboardId: unit?.id,
+  });
+
+  const listChipsMqtt = useMemo(() => {
+    return chips.filter((chip) => favoriteChipIdsSet.has(chip.id));
+  }, [chips, favoriteChipIdsSet]);
+
+  const { mqttConfigs } = useConnectChipMqtt(listChipsMqtt);
+
   const configsNeedWatching = useMemo(() => {
     const configIds = [];
+
     favoriteDevices.forEach((device) => {
-      if (
-        device?.quick_action?.config_id &&
-        ![DEVICE_TYPE.GOOGLE_HOME, DEVICE_TYPE.LG_THINQ].includes(
-          device?.device_type
-        )
-      ) {
+      if (device?.quick_action?.config_id && device?.is_managed_by_backend) {
         configIds.push(device.quick_action.config_id);
       }
     });
-    return configIds;
-  }, [favoriteDevices]);
 
-  useWatchConfigs(configsNeedWatching);
+    return configIds.filter((id) => !mqttConfigs[id]);
+  }, [favoriteDevices, mqttConfigs]);
+
+  useWatchConfigs(isFetching ? [] : configsNeedWatching);
+
+  const listSharedChipIds = useMemo(() => {
+    const chipMqttIdsSet = new Set(listChipsMqtt.map((chip) => chip.id));
+    return [...favoriteChipIdsSet].filter((id) => !chipMqttIdsSet.has(id));
+  }, [listChipsMqtt, favoriteChipIdsSet]);
+
+  useWatchSharedChips({
+    dashboardId: unit?.id,
+    filterChipIds: listSharedChipIds,
+    ready: !!listSharedChipIds.length,
+  });
 
   const handleOnAddNew = () => {
     navigate(Routes.SelectAddToFavorites, {

package/src/commons/SubUnit/ShortDetail.js

@@ -32,14 +32,17 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
 
   useDevicesStatus(unit, station?.devices);
 
+  const stationChipIdsSet = useMemo(() => {
+    return new Set(station?.devices?.map((device) => device.chip_id));
+  }, [station?.devices]);
+
   const { chips, isFetching } = useChipJsonConfiguration({
     dashboardId: unit?.id,
   });
 
   const listChipsMqtt = useMemo(() => {
-    const stationChipIds = station?.devices?.map((device) => device.chip_id);
-    return chips?.filter((chip) => stationChipIds?.includes(chip.id));
-  }, [chips, station?.devices]);
+    return chips.filter((chip) => stationChipIdsSet.has(chip.id));
+  }, [chips, stationChipIdsSet]);
 
   const { mqttConfigs } = useConnectChipMqtt(listChipsMqtt);
 
@@ -64,7 +67,17 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
   }, [station, mqttConfigs]);
 
   useWatchConfigs(isFetching ? [] : configsNeedWatching);
-  useWatchSharedChips({ dashboardId: unit?.id });
+
+  const listSharedChipIds = useMemo(() => {
+    const chipMqttIdsSet = new Set(listChipsMqtt.map((chip) => chip.id));
+    return [...stationChipIdsSet].filter((id) => !chipMqttIdsSet.has(id));
+  }, [listChipsMqtt, stationChipIdsSet]);
+
+  useWatchSharedChips({
+    dashboardId: unit?.id,
+    filterChipIds: listSharedChipIds,
+    ready: !!listSharedChipIds.length,
+  });
 
   const goToPlayBack = useCallback(() => {
     navigate(Routes.PlaybackCamera, {

package/src/commons/SubUnit/__test__/Favorites.test.js

@@ -1,12 +1,21 @@
 import React from 'react';
+import MockAdapter from 'axios-mock-adapter';
 import { act, create } from 'react-test-renderer';
+import { API } from '../../../configs';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { watchMultiDataChips, watchMultiConfigs } from '../../../iot/Monitor';
+import api from '../../../utils/Apis/axios';
+import { gatewayDataFactory } from '../../../utils/FactoryGateway';
 import ItemAddNew from '../../Device/ItemAddNew';
 import ItemDevice from '../../Device/ItemDevice';
 import SubUnitFavorites from '../Favorites';
 import ItemOneTap from '../OneTap/ItemOneTap';
 
+const mockAxios = new MockAdapter(api.axiosInstance);
+
+jest.mock('../../../iot/Monitor');
+
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
     <SubUnitFavorites {...props} />
@@ -18,6 +27,7 @@ describe('test ShortDetail Subunit', () => {
   let props;
 
   beforeEach(() => {
+    jest.useFakeTimers();
     props = {
       unit: {
         address: null,
@@ -78,6 +88,8 @@ describe('test ShortDetail Subunit', () => {
       ],
       isGGHomeConnected: true,
     };
+    watchMultiConfigs.mockClear();
+    watchMultiDataChips.mockClear();
   });
 
   it('render SubUnitFavorites', async () => {
@@ -96,4 +108,82 @@ describe('test ShortDetail Subunit', () => {
       await itemAddNew[0].props.onAddNew();
     });
   });
+
+  it('render using mqtt call watch config and data chips', async () => {
+    mockAxios
+      .onGet(API.CHIP.JSON_CONFIGURATION)
+      .reply(200, [gatewayDataFactory]);
+    mockAxios
+      .onGet(API.CHIP.SHARED_CONFIGURATION)
+      .reply(200, [gatewayDataFactory, { ...gatewayDataFactory, id: 7690 }]);
+    props.favoriteDevices = [
+      {
+        action: {
+          color: '#00979D',
+          icon: 'caretup',
+          id: 1,
+          key: '',
+        },
+        action2: null,
+        chip_id: 7690,
+        description: null,
+        icon: '',
+        id: 1,
+        name: 'People Counting',
+        quick_action: { config_id: 128283 },
+        remote_control_options: {},
+        station: {},
+        status: null,
+        status2: null,
+        is_managed_by_backend: true,
+      },
+    ];
+
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    await act(async () => {
+      jest.runOnlyPendingTimers();
+    });
+    expect(watchMultiConfigs).toHaveBeenCalledWith([128283]);
+    expect(watchMultiDataChips).toHaveBeenCalledWith([7690]);
+  });
+
+  it('render using mqtt not call watch config and data chips', async () => {
+    mockAxios
+      .onGet(API.CHIP.JSON_CONFIGURATION)
+      .reply(200, [gatewayDataFactory]);
+    mockAxios.onGet(API.CHIP.SHARED_CONFIGURATION).reply(200, []);
+    props.favoriteDevices = [
+      {
+        action: {
+          color: '#00979D',
+          icon: 'caretup',
+          id: 1,
+          key: '',
+        },
+        action2: null,
+        chip_id: 7689,
+        description: null,
+        icon: '',
+        id: 1,
+        name: 'People Counting',
+        quick_action: { config_id: 128282 },
+        remote_control_options: {},
+        station: {},
+        status: null,
+        status2: null,
+        is_managed_by_backend: true,
+      },
+    ];
+
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    await act(async () => {
+      jest.runOnlyPendingTimers();
+    });
+    expect(watchMultiConfigs).not.toHaveBeenCalled();
+    expect(watchMultiDataChips).not.toHaveBeenCalled();
+  });
 });

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -7,7 +7,7 @@ import { API } from '../../../configs';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { watchMultiConfigs } from '../../../iot/Monitor';
+import { watchMultiDataChips, watchMultiConfigs } from '../../../iot/Monitor';
 import { keyPermission } from '../../../utils/Permission/common';
 import api from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
@@ -78,6 +78,7 @@ describe('test ShortDetail Subunit', () => {
       isGGHomeConnected: true,
     };
     watchMultiConfigs.mockClear();
+    watchMultiDataChips.mockClear();
   });
 
   it('render ShortDetail', async () => {
@@ -191,10 +192,51 @@ describe('test ShortDetail Subunit', () => {
     expect(watchMultiConfigs).toHaveBeenCalledWith([1]);
   });
 
-  it('render using mqtt not call watch config', async () => {
+  it('render using mqtt call watch config and data chips', async () => {
     mockAxios
       .onGet(API.CHIP.JSON_CONFIGURATION)
       .reply(200, [gatewayDataFactory]);
+    mockAxios
+      .onGet(API.CHIP.SHARED_CONFIGURATION)
+      .reply(200, [gatewayDataFactory, { ...gatewayDataFactory, id: 7690 }]);
+    props.station.devices = [
+      {
+        action: {
+          color: '#00979D',
+          icon: 'caretup',
+          id: 1,
+          key: '',
+        },
+        action2: null,
+        chip_id: 7690,
+        description: null,
+        icon: '',
+        id: 1,
+        name: 'People Counting',
+        quick_action: { config_id: 128283 },
+        remote_control_options: {},
+        station: {},
+        status: null,
+        status2: null,
+        is_managed_by_backend: true,
+      },
+    ];
+
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    await act(async () => {
+      jest.runOnlyPendingTimers();
+    });
+    expect(watchMultiConfigs).toHaveBeenCalledWith([128283]);
+    expect(watchMultiDataChips).toHaveBeenCalledWith([7690]);
+  });
+
+  it('render using mqtt not call watch config and data chips', async () => {
+    mockAxios
+      .onGet(API.CHIP.JSON_CONFIGURATION)
+      .reply(200, [gatewayDataFactory]);
+    mockAxios.onGet(API.CHIP.SHARED_CONFIGURATION).reply(200, []);
     props.station.devices = [
       {
         action: {
@@ -225,6 +267,7 @@ describe('test ShortDetail Subunit', () => {
       jest.runOnlyPendingTimers();
     });
     expect(watchMultiConfigs).not.toHaveBeenCalled();
+    expect(watchMultiDataChips).not.toHaveBeenCalled();
   });
 
   ['ConfigAndEvaluation', 'ConfigValue', 'EvaluationOverConfig'].forEach(

package/src/configs/AccessibilityLabel.js

@@ -138,6 +138,7 @@ export default {
   BOTTOM_BUTTON_RIGHT: 'BOTTOM_BUTTON_RIGHT',
   VIEW_BUTTON_BOTTOM_RIGHT_BUTTON: 'VIEW_BUTTON_BOTTOM_RIGHT_BUTTON',
   VIEW_BUTTON_BOTTOM_LEFT_BUTTON: 'VIEW_BUTTON_BOTTOM_LEFT_BUTTON',
+  TOUCHABLE_OPACITY: 'TOUCHABLE_OPACITY',
 
   // Smart parking drawer
   ROW_EXIT_SMARTPARKING_DRAWER: 'ROW_EXIT_SMARTPARKING_DRAWER',

package/src/hooks/IoT/__test__/useValueEvaluation.test.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react-hooks';
 import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import { API } from '../../../configs';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { useValueEvaluations } from '../index';
 import api from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
+import { useValueEvaluations } from '../index';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -35,13 +35,11 @@ describe('Test useValueEvaluation', () => {
   it('test unitId not null request success', async () => {
     mock.onGet(API.VALUE_EVALUATIONS()).replyOnce(200, {
       results: [],
-      next: 'link',
     });
-    mock.onGet(API.VALUE_EVALUATIONS()).replyOnce(200, {
-      results: [],
-    });
-    renderHook(() => useValueEvaluations(1), {
-      wrapper,
+    await act(async () => {
+      renderHook(() => useValueEvaluations(1), {
+        wrapper,
+      });
     });
     expect(mock.history.get.length).toBe(1);
   });
@@ -50,8 +48,10 @@ describe('Test useValueEvaluation', () => {
     mock.onGet(API.VALUE_EVALUATIONS()).replyOnce(400, {
       results: [],
     });
-    renderHook(() => useValueEvaluations(1), {
-      wrapper,
+    await act(async () => {
+      renderHook(() => useValueEvaluations(1), {
+        wrapper,
+      });
     });
     expect(mock.history.get.length).toBe(1);
   });

package/src/iot/UpdateStates.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
 
-import { getConfigGlobalState, setConfigGlobalState } from './states';
+import { setConfigGlobalState } from './states';
 
 const isNewer = (valueTime, valueMicro, currentTime, currentMicro) => {
   if (valueTime?.isAfter(currentTime)) {
@@ -40,21 +40,42 @@ export const updateGlobalValues = (data) => {
   });
 };
 
+let pending = {};
+let scheduled = false;
+
 export const updateGlobalValue = (configId, value) => {
-  const configValues = getConfigGlobalState('configValues');
-  const currentValue = configValues[configId];
-  if (
-    !isNewer(
-      value.last_updated,
-      value.last_updated_micro,
-      currentValue?.last_updated || moment(0),
-      currentValue?.last_updated_micro || 0
-    )
-  ) {
-    return;
+  pending[configId] = value;
+
+  if (!scheduled) {
+    scheduled = true;
+
+    requestAnimationFrame(() => {
+      setConfigGlobalState('configValues', (prev) => {
+        let changed = false;
+        const next = { ...prev };
+
+        Object.keys(pending).forEach((id) => {
+          const val = pending[id];
+          const cur = prev[id];
+
+          if (
+            isNewer(
+              val.last_updated,
+              val.last_updated_micro,
+              cur?.last_updated || moment(0),
+              cur?.last_updated_micro || 0
+            )
+          ) {
+            next[id] = val;
+            changed = true;
+          }
+        });
+
+        pending = {};
+        scheduled = false;
+
+        return changed ? next : prev;
+      });
+    });
   }
-  setConfigGlobalState('configValues', {
-    ...configValues,
-    [configId]: value,
-  });
 };

package/src/iot/mqtt.js

@@ -1,6 +1,6 @@
+import { Buffer } from 'buffer';
 import { getObject, storeObject } from '../utils/Storage';
 import { getLastUpdated, updateGlobalValue } from './UpdateStates';
-import { Buffer } from 'buffer';
 
 const struct = require('python-struct');
 
@@ -193,6 +193,19 @@ const convert_ai = (bytes_str, config_data = null) => {
   );
 };
 
+const power_factor_4q_fp_pf = (value) => {
+  let pfVal;
+  if (value > 1) {
+    pfVal = 2 - value;
+  } else if (value < -1) {
+    pfVal = -2 - value;
+  } else {
+    pfVal = value;
+  }
+
+  return pfVal;
+};
+
 const mappingTransformer = {
   int_all: int_all,
   float_abcd: float_abcd,
@@ -224,6 +237,10 @@ const mappingTransformer = {
   int_64_cdab: int_64_cdab,
 };
 
+const mappingValueConverter = {
+  power_factor_4q_fp_pf: power_factor_4q_fp_pf,
+};
+
 const extract_config_value = (register, value_bytes) => {
   const transformer = mappingTransformer[register?.transformer];
   if (!transformer) {
@@ -303,6 +320,13 @@ const get_offset_sample_value = async (value, config) => {
   return value;
 };
 
+const getValueConverter = (value, config) => {
+  const converter = mappingValueConverter[config?.value_converter];
+  return converter
+    ? Number(get_decimal_value(converter(value), config))
+    : value;
+};
+
 const check_filter = (value, config) => {
   if (!config?.active_filter) {
     return false;
@@ -333,6 +357,7 @@ const updateGlobalValueMqtt = async (config, value, time) => {
 
   value = get_scale_value(value, config);
   value = await get_offset_sample_value(value, config);
+  value = getValueConverter(value, config);
 
   if (check_filter(value, config)) {
     return;

package/src/navigations/UnitStack.js

@@ -11,7 +11,7 @@ import { SCContext } from '../context';
 import { Action } from '../context/actionType';
 import { useTranslations } from '../hooks/Common/useTranslations';
 import { unwatchAllConfigs } from '../iot/Monitor';
-import ActivityLogScreen from '../screens/ActivityLog';
+import ActivityLog from '../screens/ActivityLog';
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
@@ -350,7 +350,7 @@ export const UnitStack = memo((props) => {
       />
       <Stack.Screen
         name={Route.ActivityLog}
-        component={ActivityLogScreen}
+        component={ActivityLog}
         options={{
           headerShown: false,
         }}

package/src/screens/ActivityLog/ItemLog.js

@@ -1,10 +1,14 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { View, TouchableOpacity, Modal } from 'react-native';
 import moment from 'moment';
 import Text from '../../commons/Text';
 import t from '../../hooks/Common/useTranslations';
 import styles from './styles/itemLogStyles';
-import { AUTOMATE_TYPE, ACTIVITY_LOG_TYPES } from '../../configs/Constants';
+import {
+  AUTOMATE_TYPE,
+  ACTIVITY_LOG_TYPES,
+  AccessibilityLabel,
+} from '../../configs/Constants';
 
 const DetailEmergencyEventLog = ({ item }) => (
   <Text style={styles.text}>
@@ -20,34 +24,83 @@ const DetailEmergencyEventLog = ({ item }) => (
 );
 
 const DetailLog = ({ item }) => {
-  switch (item.content_code) {
+  const [showModal, setShowModal] = useState(false);
+  const { name, username, created_at, message, content_code, action_name } =
+    item;
+
+  const handlePress = useCallback(() => {
+    if (message) {
+      setShowModal(true);
+    }
+  }, [message]);
+
+  const handleClose = useCallback(() => {
+    setShowModal(false);
+  }, []);
+
+  switch (content_code) {
     case ACTIVITY_LOG_TYPES.AUTO_ACTIVATED:
       return <Text style={styles.text}>{t('auto_activated')}</Text>;
     case ACTIVITY_LOG_TYPES.ACTIVATED_BY:
       return (
         <Text style={styles.text}>
-          {item.action_name
-            ? `${item.action_name} ${t('by')} `
-            : `${t('activated_by')} `}
-          <Text style={styles.name}>{item.name || item.username}</Text>
+          {action_name ? `${action_name} ${t('by')} ` : `${t('activated_by')} `}
+          <Text style={styles.name}>{name || username}</Text>
         </Text>
       );
     case ACTIVITY_LOG_TYPES.SCRIPT_UPDATED_BY:
       return (
         <Text style={styles.text}>
           {`${t('script_updated_by')} `}
-          <Text style={styles.name}>{item.name || item.username}</Text>
+          <Text style={styles.name}>{name || username}</Text>
         </Text>
       );
     default:
       return (
-        <Text style={styles.text}>
-          {item.action_name
-            ? `${item.action_name} ${t('by')} `
-            : `${t('activated_by')} `}
-          <Text style={styles.name}>{item.name || item.username}</Text>
-          <Text style={styles.text}>{'\n' + item.message}</Text>
-        </Text>
+        <>
+          <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
+            <Text style={styles.text}>
+              {action_name
+                ? `${action_name} ${t('by')} `
+                : `${t('activated_by')} `}
+              <Text style={styles.name}>{name || username}</Text>
+            </Text>
+          </TouchableOpacity>
+          <Modal
+            visible={showModal}
+            transparent
+            animationType="fade"
+            onRequestClose={handleClose}
+            accessibilityLabel={AccessibilityLabel.MODAL_BUTTON_POPUP}
+          >
+            <TouchableOpacity
+              style={styles.modalOverlay}
+              activeOpacity={1}
+              onPress={handleClose}
+              accessibilityLabel={AccessibilityLabel.TOUCHABLE_OPACITY}
+            >
+              <View style={styles.modalContent}>
+                <Text style={styles.modalTitle}>{t('detail')}</Text>
+                <Text style={styles.modalMessage}>
+                  {action_name
+                    ? `${action_name} ${t('by')} `
+                    : `${t('activated_by')} `}
+                  <Text style={styles.name}>{name || username}</Text>
+                </Text>
+                <Text style={styles.modalMessage}>{message}</Text>
+                <Text style={styles.modalMessage}>
+                  {moment(created_at).format('DD/MM/YYYY HH:mm:ss')}
+                </Text>
+                <TouchableOpacity
+                  style={styles.modalCloseButton}
+                  onPress={handleClose}
+                >
+                  <Text style={styles.modalCloseText}>{t('close')}</Text>
+                </TouchableOpacity>
+              </View>
+            </TouchableOpacity>
+          </Modal>
+        </>
       );
   }
 };