@eohjsc/react-native-smart-city 0.3.92 → 0.3.93

package/src/screens/Device/detail.js

@@ -25,7 +25,7 @@ import {
 } from './hooks/useEmergencyButton';
 import { useFavoriteDevice } from './hooks/useFavoriteDevice';
 import { usePopover } from '../../hooks/Common';
-import { useConfigGlobalState } from '../../iot/states';
+import { setConfigGlobalState, getConfigGlobalState } from '../../iot/states';
 import { useIsOwnerOfUnit, useBoolean } from '../../hooks/Common';
 import {
   useBluetoothConnection,
@@ -58,17 +58,24 @@ import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
 import { axiosGet } from '../../utils/Apis/axios';
 import { notImplemented } from '../../utils/Utils';
 import { useReceiveNotifications } from '../../hooks';
+import useChipJsonConfiguration, {
+  useConnectChipMqtt,
+} from '../../hooks/useMqtt';
+import { realWatchMultiConfigs } from '../../iot/Monitor';
 
 const DeviceDetail = ({ route }) => {
+  const configIdsTemp = useRef([]);
+
   const t = useTranslations();
   const navigation = useNavigation();
   const token = useSCContextSelector((state) => state.auth.account.token);
-  const { isLockWhenPickColor } = useSCContextSelector((state) => state.app);
+  const { isLockWhenPickColor, appState } = useSCContextSelector(
+    (state) => state.app
+  );
+
   const { setAction } = useContext(SCContext);
   const [offsetTitle, setOffsetTitle] = useState(1);
   const [display, setDisplay] = useState({ items: [] });
-  // eslint-disable-next-line no-unused-vars
-  const [configValues, setConfigValues] = useConfigGlobalState('configValues');
   const [displayValuesData, setDisplayValuesData] = useState({
     isConnected: false,
     lastUpdated: null,
@@ -140,7 +147,14 @@ const DeviceDetail = ({ route }) => {
 
   useDisconnectedDevice(sensorName, isDeviceHasBle, serverDown);
 
-  useDeviceWatchConfigControl(sensor, display);
+  const { chips } = useChipJsonConfiguration(unit?.id);
+
+  const chipFiltered = useMemo(() => {
+    return chips?.filter((item) => item?.id === sensor?.chip_id);
+  }, [chips, sensor?.chip_id]);
+
+  const { mqttConfigs } = useConnectChipMqtt(chipFiltered);
+  useDeviceWatchConfigControl(sensor, display, mqttConfigs);
 
   const isShowSetupEmergencyContact = useMemo(
     () =>
@@ -150,7 +164,6 @@ const DeviceDetail = ({ route }) => {
       ).length > 0,
     [display.items]
   );
-
   const isShowSetUpSmartLock = useMemo(
     () =>
       display.items.filter(
@@ -488,20 +501,32 @@ const DeviceDetail = ({ route }) => {
       const configIds = [];
 
       display.items.map((item) => {
-        if (item.type !== 'value') {
+        if (!item.configuration) {
           return;
         }
-
-        if (!item.configuration) {
+        if (!['action', 'value'].includes(item.type)) {
           return;
         }
-
-        item.configuration.configs.map((config) => {
-          if (!configIds.includes(config.id)) {
-            configIds.push(config.id);
+        if (item.type === 'action') {
+          if (
+            [
+              'on_off_button_action_template',
+              'one_button_action_template',
+            ].includes(item.configuration.template)
+          ) {
+            !configIds.includes(item.configuration.configuration.config) &&
+              configIds.push(item.configuration.configuration.config);
           }
-        });
+        }
+        if (item.type === 'value') {
+          item.configuration.configs.map((config) => {
+            if (!configIds.includes(config.id)) {
+              configIds.push(config.id);
+            }
+          });
+        }
       });
+      configIdsTemp.current = configIds;
 
       configIds.map((id) => {
         params.append('config', id);
@@ -546,23 +571,28 @@ const DeviceDetail = ({ route }) => {
               lastUpdated: lastUpdated,
             };
           });
-          setConfigValues((prev) => {
-            let hasValueChange = false;
-            data.configs.map((config) => {
-              if (prev[config.id]?.value !== config.value) {
-                hasValueChange = true;
-                prev[config.id] = { ...prev[config.id], value: config.value };
-              }
-              setEvaluate((prevE) => ({
-                ...prevE,
-                [config?.id]: config?.evaluate,
-              }));
-            });
-            if (hasValueChange) {
-              return { ...prev };
+          const configsData = data.configs.filter(
+            (id) => !mqttConfigs.includes(id)
+          );
+          let configValues = getConfigGlobalState('configValues');
+          let hasValueChange = false;
+          configsData.map((config) => {
+            if (configValues[config.id]?.value !== config.value) {
+              hasValueChange = true;
+              configValues[config.id] = {
+                ...configValues[config.id],
+                value: config.value,
+              };
             }
-            return prev;
+            setEvaluate((prev) => ({
+              ...prev,
+              [config?.id]: config?.evaluate,
+            }));
           });
+          if (hasValueChange) {
+            configValues = { ...configValues };
+          }
+          setConfigGlobalState('configValues', { ...configValues });
         } else if (resp_status >= 500) {
           setServerDown(true);
         }
@@ -580,7 +610,7 @@ const DeviceDetail = ({ route }) => {
           setLoading((preState) => ({ ...preState, isConnected: false }));
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sensor, display, isNetworkConnected])
+    }, [display.items, isNetworkConnected, sensor, mqttConfigs])
   );
 
   const isShowEmergencyResolve =
@@ -687,6 +717,10 @@ const DeviceDetail = ({ route }) => {
     SCConfig.setCurrentSensorDisplay(sensor);
   }, [sensor]);
 
+  useEffect(() => {
+    appState === 'active' && realWatchMultiConfigs(configIdsTemp.current);
+  }, [appState]);
+
   const shouldRender =
     loading.displayTemplate === false &&
     loading.isConnected === false &&

package/src/screens/Device/hooks/useDeviceWatchConfigControl.js

@@ -3,7 +3,7 @@ import { DEVICE_TYPE } from '../../../configs/Constants';
 import { getConfigControlFromDeviceDisplay } from '../utils';
 import { useWatchConfigs } from '../../../hooks/IoT';
 
-export const useDeviceWatchConfigControl = (device, display) => {
+export const useDeviceWatchConfigControl = (device, display, mqttConfigs) => {
   const configsNeedWatching = useMemo(() => {
     if (
       !device?.is_managed_by_backend ||
@@ -13,8 +13,18 @@ export const useDeviceWatchConfigControl = (device, display) => {
     ) {
       return [];
     }
-    return getConfigControlFromDeviceDisplay(display);
-  }, [device, display]);
+
+    const configsControl = getConfigControlFromDeviceDisplay(display);
+    if (mqttConfigs?.length) {
+      return configsControl.filter((id) => !mqttConfigs.includes(id));
+    }
+    return configsControl;
+  }, [
+    mqttConfigs,
+    device?.device_type,
+    device?.is_managed_by_backend,
+    display,
+  ]);
 
   useWatchConfigs(configsNeedWatching);
 };

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { useRoute } from '@react-navigation/native';
 import { act, create } from 'react-test-renderer';
@@ -11,21 +11,14 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
 import api from '../../../utils/Apis/axios';
 import { API } from '../../../configs';
+import BottomButtonView from '../../../commons/BottomButtonView';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockSetState = jest.fn();
 const mockDispatch = jest.fn();
 const mockGoBack = jest.fn();
 const mockNavigate = jest.fn();
 
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
-
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -48,7 +41,6 @@ describe('Test Select unit screen', () => {
   let tree;
 
   beforeEach(() => {
-    mockSetState.mockClear();
     mockNavigate.mockClear();
   });
 
@@ -74,18 +66,21 @@ describe('Test Select unit screen', () => {
       ],
     };
     mock.onGet(API.AUTOMATE.GET_ALL_UNITS()).reply(200, response.data);
-    useState.mockImplementation((init) => [response.data, mockSetState]);
+
     await act(async () => {
       tree = await create(wrapComponent());
     });
     const instance = tree.root;
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    const bottomButtonView = instance.findByType(BottomButtonView);
+
+    expect(bottomButtonView.props.typeMain).toEqual('disabled');
     expect(TouchableOpacities).toHaveLength(4);
     await act(async () => {
       await TouchableOpacities[1].props.onPress();
       await TouchableOpacities[2].props.onPress(response.data[0]);
     });
-    expect(mockSetState).toBeCalledWith(response.data[0]);
+    expect(bottomButtonView.props.typeMain).toEqual('primary');
   });
 
   it('Test SelectUnit getAllUnits fail', async () => {
@@ -106,7 +101,7 @@ describe('Test Select unit screen', () => {
 
     const instance = tree.root;
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(4);
+    expect(TouchableOpacities).toHaveLength(3);
     await act(async () => {
       await TouchableOpacities[1].props.onPress();
       await TouchableOpacities[2].props.onPress();

package/src/screens/SmartAccount/__test__/SmartAccount.test.js

@@ -64,7 +64,8 @@ describe('Test SmartAccount', () => {
     const touchableOpacity = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.LOGIN_SMART_ACCOUNT && el.type === TouchableOpacity
+          `${AccessibilityLabel.LOGIN_SMART_ACCOUNT}${AccessibilityLabel.BOTTOM_VIEW_MAIN}` &&
+        el.type === TouchableOpacity
     );
     await act(async () => {
       touchableOpacity.props.onPress();
@@ -103,7 +104,8 @@ describe('Test SmartAccount', () => {
     const touchableOpacity = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.LOGIN_SMART_ACCOUNT && el.type === TouchableOpacity
+          `${AccessibilityLabel.LOGIN_SMART_ACCOUNT}${AccessibilityLabel.BOTTOM_VIEW_MAIN}` &&
+        el.type === TouchableOpacity
     );
     await act(async () => {
       await touchableOpacity.props.onPress();
@@ -156,7 +158,8 @@ describe('Test SmartAccount', () => {
     const touchableOpacity = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.LOGIN_SMART_ACCOUNT && el.type === TouchableOpacity
+          `${AccessibilityLabel.LOGIN_SMART_ACCOUNT}${AccessibilityLabel.BOTTOM_VIEW_MAIN}` &&
+        el.type === TouchableOpacity
     );
     await act(async () => {
       await touchableOpacity.props.onPress();
@@ -206,7 +209,8 @@ describe('Test SmartAccount', () => {
     const touchableOpacity = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.LOGIN_SMART_ACCOUNT && el.type === TouchableOpacity
+          `${AccessibilityLabel.LOGIN_SMART_ACCOUNT}${AccessibilityLabel.BOTTOM_VIEW_MAIN}` &&
+        el.type === TouchableOpacity
     );
     await act(async () => {
       await touchableOpacity.props.onPress();

package/src/screens/SmartAccount/index.js

@@ -13,7 +13,7 @@ import TextInput from '../../commons/Form/TextInput';
 import _TextInputPassword from '../../commons/Form/TextInputPassword';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
-import { Button } from '../../commons';
+import BottomButtonView from '../../commons/BottomButtonView';
 import { isValidPhoneNumberOrEmailAddress } from '../../utils/Validation';
 import { ToastBottomHelper } from '../../utils/Utils';
 import Routes from '../../utils/Route';
@@ -158,14 +158,13 @@ const SmartAccount = ({ route }) => {
           }
         />
       </ScrollView>
-      <View style={[styles.buttonWrap]}>
-        <Button
-          type="primary"
-          title={t('save')}
-          onPress={validate}
-          accessibilityLabel={AccessibilityLabel.LOGIN_SMART_ACCOUNT}
-        />
-      </View>
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={t('save')}
+        onPressMain={validate}
+        typeMain={'primary'}
+        accessibilityLabelPrefix={AccessibilityLabel.LOGIN_SMART_ACCOUNT}
+      />
     </View>
   );
 };

package/src/screens/SmartAccount/style.js

@@ -47,13 +47,6 @@ export default StyleSheet.create({
     paddingHorizontal: 0,
     paddingLeft: 0,
   },
-  buttonWrap: {
-    marginHorizontal: 20,
-    flexDirection: 'row',
-    marginTop: 40,
-    position: 'absolute',
-    bottom: 32,
-  },
   borderLogo: {
     borderColor: Colors.Primary,
     borderWidth: 1,
@@ -67,4 +60,12 @@ export default StyleSheet.create({
     ...borderCommonStyle,
     borderBottomColor: Colors.Red,
   },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
 });

package/src/screens/Unit/Detail.js

@@ -2,11 +2,10 @@ import React, {
   useCallback,
   useEffect,
   useState,
-  useRef,
   useContext,
   useMemo,
 } from 'react';
-import { AppState, RefreshControl, View, Platform } from 'react-native';
+import { RefreshControl, View, Platform } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -219,7 +218,7 @@ const UnitDetail = ({ route }) => {
     isSuccessfullyConnected ? RouterHardware(Routes.Dashboard) : goBack
   );
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
-  const { isLavidaSource, isFirstOpenCamera } = useSCContextSelector(
+  const { isLavidaSource, isFirstOpenCamera, appState } = useSCContextSelector(
     (state) => state.app
   );
 
@@ -228,7 +227,6 @@ const UnitDetail = ({ route }) => {
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
   const [showPreventAccess, setShowPreventAccess, setHidePreventAccess] =
     useBoolean(false);
-  const appState = useRef(AppState.currentState);
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
@@ -306,21 +304,8 @@ const UnitDetail = ({ route }) => {
   );
 
   useEffect(() => {
-    const handler = (nextAppState) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        fetchDetails();
-      }
-      appState.current = nextAppState;
-    };
-    const subscription = AppState.addEventListener('change', handler);
-
-    return () => {
-      subscription?.remove();
-    };
-  }, [fetchDetails]);
+    appState === 'active' && fetchDetails();
+  }, [appState, fetchDetails]);
 
   useValueEvaluations(unitId);
 

package/src/screens/Unit/Summaries.js

@@ -1,5 +1,5 @@
-import React, { memo, useCallback, useEffect, useState, useRef } from 'react';
-import { AppState, ScrollView } from 'react-native';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
 import SummaryItem from '../../commons/SummaryItem';
 import Routes from '../../utils/Route';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
@@ -7,6 +7,7 @@ import { axiosGet } from '../../utils/Apis/axios';
 import { API } from '../../configs';
 import { useReceiveNotifications } from '../../hooks';
 import { AccessibilityLabel } from '../../configs/Constants';
+import { useSCContextSelector } from '../../context';
 
 let timeoutId;
 
@@ -14,7 +15,7 @@ const Summaries = memo(({ unit }) => {
   const [unitSummaries, setUnitSummaries] = useState([]);
   const isFocused = useIsFocused();
   const navigation = useNavigation();
-  const appState = useRef(AppState.currentState);
+  const appState = useSCContextSelector((state) => state.app.appState);
 
   const fetchUnitSummary = useCallback(async () => {
     if (!unit.id) {
@@ -59,20 +60,8 @@ const Summaries = memo(({ unit }) => {
   }, [fetchUnitSummary]);
 
   useEffect(() => {
-    const subscription = AppState.addEventListener('change', (nextAppState) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        fetchUnitSummary();
-      }
-      appState.current = nextAppState;
-    });
-
-    return () => {
-      subscription?.remove();
-    };
-  }, [fetchUnitSummary]);
+    appState === 'active' && fetchUnitSummary();
+  }, [appState, fetchUnitSummary]);
 
   useEffect(() => {
     if (!isFocused) {

package/src/screens/Unit/__test__/Summaries.test.js

@@ -104,10 +104,10 @@ describe('Test Summaries', () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent(props));
     });
-    expect(mock.history.get).toHaveLength(1);
+    expect(mock.history.get).toHaveLength(2);
     await act(async () => {
       jest.runOnlyPendingTimers();
     });
-    expect(mock.history.get).toHaveLength(2);
+    expect(mock.history.get).toHaveLength(3);
   });
 });