@eohjsc/react-native-smart-city 0.7.27 → 0.7.31

package/index.js

@@ -22,6 +22,7 @@ import { withRemoteControl } from './src/hoc';
 // import DevModeStack from './src/navigations/Main';
 import { SmartAccountStack } from './src/navigations/SmartAccountStack';
 import { AllGatewayStack } from './src/navigations/AllGatewayStack';
+import useInAppReview from './src/hooks/Review/useInAppReview';
 
 export {
   AddSubUnitStack,
@@ -50,4 +51,5 @@ export {
   // DevModeStack,
   SmartAccountStack,
   AllGatewayStack,
+  useInAppReview,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.27",
+  "version": "0.7.31",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -158,6 +158,7 @@
     "react-native-get-location": "^2.0.0",
     "react-native-image-crop-picker": "0.41.2",
     "react-native-image-resizer": "^1.4.5",
+    "react-native-in-app-review": "^4.4.2",
     "react-native-input-credit-card": "^0.5.5",
     "react-native-iphone-x-helper": "^1.2.1",
     "react-native-linear-gradient": "^2.5.6",

package/src/commons/Dashboard/MyDashboardDevice/__test__/index.test.js

@@ -1,4 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
+import mqtt from 'precompiled-mqtt/dist/mqtt.browser';
 import React, { useContext } from 'react';
 import renderer, { act } from 'react-test-renderer';
 
@@ -7,15 +8,28 @@ import { API } from '../../../../configs';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
+import {
+  watchMultiConfigs,
+  watchMultiDataChips,
+} from '../../../../iot/Monitor';
 import { Section } from '../../../Section';
 import ItemDevice from '../../../Device/ItemDevice';
 import { DeviceTemplate } from '../../../SubUnit/DeviceTemplate/DeviceTemplate';
+import { gatewayDataFactory } from '../../../../utils/FactoryGateway';
 import api from '../../../../utils/Apis/axios';
 import Routes from '../../../../utils/Route';
 import MyDashboardDevice from '..';
 
 const mock = new MockAdapter(api.axiosInstance);
 
+jest.mock('../../../../iot/Monitor', () => {
+  return {
+    ...jest.requireActual('../../../../iot/Monitor'),
+    watchMultiConfigs: jest.fn(),
+    watchMultiDataChips: jest.fn(),
+  };
+});
+
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
     <MyDashboardDevice refreshing={true} />
@@ -32,6 +46,7 @@ describe('Test MyDashboardDevice', () => {
         {
           id: 1,
           name: 'LED',
+          chip_id: 7689,
           is_managed_by_backend: true,
           device_type: '',
           station: {
@@ -45,6 +60,7 @@ describe('Test MyDashboardDevice', () => {
         {
           id: 2,
           name: 'Presence',
+          chip_id: 7690,
           is_managed_by_backend: true,
           device_type: '',
           station: {
@@ -62,6 +78,7 @@ describe('Test MyDashboardDevice', () => {
         {
           id: 3,
           name: 'Switch',
+          chip_id: 7691,
           is_managed_by_backend: false,
           device_type: 'GOOGLE_HOME',
           station: {
@@ -83,6 +100,8 @@ describe('Test MyDashboardDevice', () => {
       setAction: mockSetAction,
     });
     mockSetAction.mockClear();
+    watchMultiConfigs.mockClear();
+    watchMultiDataChips.mockClear();
   });
 
   it('Test dashboard no device', async () => {
@@ -168,4 +187,53 @@ describe('Test MyDashboardDevice', () => {
       data[0].devices
     );
   });
+
+  it('Test dashboard with devices connect mqtt, pusher', async () => {
+    jest.useFakeTimers();
+
+    mock.onGet(API.UNIT.MY_DASHBOARD_DEVICES()).reply(200, data);
+    mock.onGet(API.CHIP.JSON_CONFIGURATION).reply(200, [
+      gatewayDataFactory,
+      {
+        ...gatewayDataFactory,
+        code: 'xxx',
+        id: 7695,
+      },
+    ]);
+    mock.onGet(API.CHIP.SHARED_CONFIGURATION).reply(200, [
+      {
+        ...gatewayDataFactory,
+        id: 7690,
+      },
+      {
+        ...gatewayDataFactory,
+        id: 7696,
+      },
+    ]);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const devices = instance.findAllByType(ItemDevice);
+    expect(devices).toHaveLength(2);
+    const deviceTemplates = instance.findAllByType(DeviceTemplate);
+    expect(deviceTemplates).toHaveLength(1);
+
+    const client = mqtt.connect();
+    await act(async () => {
+      client.trigger('connect');
+    });
+    expect(client.subscribe).toHaveBeenCalledWith(
+      `eoh/chip/${gatewayDataFactory.code}/#`
+    );
+
+    await act(async () => {
+      jest.advanceTimersByTime(500);
+    });
+
+    expect(watchMultiConfigs).toHaveBeenCalledWith([1, 2]);
+    expect(watchMultiDataChips).toHaveBeenCalledWith([7690]);
+
+    jest.useRealTimers();
+  });
 });

package/src/commons/Dashboard/MyDashboardDevice/index.js

@@ -1,6 +1,3 @@
-import { API, Colors, Images } from '../../../configs';
-import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
-import { Image, FlatList, TouchableOpacity, View } from 'react-native';
 import React, {
   memo,
   useCallback,
@@ -9,19 +6,31 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { SCContext, useSCContextSelector } from '../../../context';
-import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
-import { useWatchConfigs } from '../../../hooks/IoT';
+import { Image, FlatList, TouchableOpacity, View } from 'react-native';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 
+import { API, Colors, Images } from '../../../configs';
+import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
+
+import { SCContext, useSCContextSelector } from '../../../context';
 import { Action } from '../../../context/actionType';
+
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { useWatchConfigs } from '../../../hooks/IoT';
+import useWatchSharedChips from '../../../hooks/IoT/useWatchSharedChips';
+import useChipJsonConfiguration, {
+  useConnectChipMqtt,
+} from '../../../hooks/useMqtt';
+
+import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
+import { keyExtractor } from '../../../utils/Utils';
 import Routes from '../../../utils/Route';
+
 import { Section } from '../../Section';
 import Text from '../../Text';
-import { keyExtractor } from '../../../utils/Utils';
 import ItemDevice from '../../Device/ItemDevice';
 import { DeviceTemplate } from '../../SubUnit/DeviceTemplate/DeviceTemplate';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
+
 import styles from './styles';
 
 const MyDashboardDevice = ({ refreshing }) => {
@@ -34,6 +43,22 @@ const MyDashboardDevice = ({ refreshing }) => {
   );
   const [myDashboardDevices, setMyDashboardDevices] = useState([]);
 
+  const listChipDashboard = useMemo(() => {
+    return myDashboardDevices.flatMap((dashboard) =>
+      dashboard.devices.map((device) => device.chip_id)
+    );
+  }, [myDashboardDevices]);
+
+  const { chips, isFetching } = useChipJsonConfiguration({
+    ready: !!listChipDashboard.length,
+  });
+
+  const listChipsMqtt = useMemo(() => {
+    return chips.filter((chip) => listChipDashboard.includes(chip.id));
+  }, [chips, listChipDashboard]);
+
+  const { mqttConfigs } = useConnectChipMqtt(listChipsMqtt);
+
   const configsNeedWatching = useMemo(() => {
     const configIds = [];
 
@@ -51,10 +76,20 @@ const MyDashboardDevice = ({ refreshing }) => {
         });
     });
 
-    return configIds;
-  }, [myDashboardDevices]);
+    return configIds.filter((id) => !mqttConfigs[id]);
+  }, [myDashboardDevices, mqttConfigs]);
+
+  useWatchConfigs(isFetching ? [] : configsNeedWatching);
+
+  const listSharedChips = useMemo(() => {
+    const chipMqttIds = listChipsMqtt.map((chip) => chip.id);
+    return listChipDashboard.filter((id) => !chipMqttIds.includes(id));
+  }, [listChipsMqtt, listChipDashboard]);
 
-  useWatchConfigs(configsNeedWatching);
+  useWatchSharedChips({
+    filterChipIds: listSharedChips,
+    ready: !!listSharedChips.length,
+  });
 
   const fetchMyDashboardDevices = useCallback(async () => {
     if (isNeedUpdateCache) {

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -1,8 +1,9 @@
 import MockAdapter from 'axios-mock-adapter';
+import mqtt from 'precompiled-mqtt/dist/mqtt.browser';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-
 import Carousel from 'react-native-new-snap-carousel';
+
 import MyUnit from '..';
 import { API } from '../../../../configs';
 import { AccessibilityLabel } from '../../../../configs/Constants';
@@ -10,6 +11,7 @@ import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import { flushPromises } from '../../../../screens/AllGateway/test-utils';
 import MyUnitDevice from '../../../../screens/Unit/components/MyUnitDevice';
+import { gatewayDataFactory } from '../../../../utils/FactoryGateway';
 import api from '../../../../utils/Apis/axios';
 import Routes from '../../../../utils/Route';
 
@@ -39,6 +41,7 @@ describe('Test MyUnit', () => {
           {
             id: 1,
             name: 'device',
+            chip_id: 7689,
             is_managed_by_backend: true,
             device_type: 'GOOGLE_HOME',
             station_name: 'name',
@@ -46,6 +49,7 @@ describe('Test MyUnit', () => {
           {
             id: 2,
             name: 'device',
+            chip_id: 7690,
             is_managed_by_backend: true,
             device_type: '',
             station_name: 'name',
@@ -65,6 +69,14 @@ describe('Test MyUnit', () => {
 
   beforeEach(async () => {
     mock.resetHistory();
+    mock.onGet(API.CHIP.JSON_CONFIGURATION).reply(200, [
+      gatewayDataFactory,
+      {
+        ...gatewayDataFactory,
+        code: 'xxx',
+        id: 7695,
+      },
+    ]);
   });
 
   const getElement = (instance) => {
@@ -99,6 +111,18 @@ describe('Test MyUnit', () => {
     const devices = instance.findAllByType(MyUnitDevice);
     expect(devices).toHaveLength(2);
 
+    const client = mqtt.connect();
+    await act(async () => {
+      client.trigger('connect');
+    });
+    expect(client.subscribe).toHaveBeenCalledWith(
+      `eoh/chip/${gatewayDataFactory.code}/#`
+    );
+
+    expect(mock.history.get).toHaveLength(2);
+    expect(mock.history.get[0].url).toEqual(API.UNIT_V2.MY_UNITS(1, 10));
+    expect(mock.history.get[1].url).toEqual(API.CHIP.JSON_CONFIGURATION);
+
     const button = instance.findByProps({
       accessibilityLabel: `${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-0`,
     });
@@ -109,8 +133,6 @@ describe('Test MyUnit', () => {
       params: { unitId: 1 },
       screen: Routes.UnitDetail,
     });
-    expect(mock.history.get).toHaveLength(1);
-    expect(mock.history.get[0].url).toEqual(API.UNIT_V2.MY_UNITS(1, 10));
   });
 
   it('Test isNeedUpdateCache = false', async () => {
@@ -140,8 +162,9 @@ describe('Test MyUnit', () => {
         wrapComponent({ app: { isNeedUpdateCache: false } }, false)
       );
     });
-    expect(mock.history.get).toHaveLength(1);
-    expect(mock.history.get[0].url).toEqual(API.UNIT_V2.MY_UNITS(1, 10));
+    expect(mock.history.get).toHaveLength(2);
+    expect(mock.history.get[0].url).toEqual(API.CHIP.JSON_CONFIGURATION);
+    expect(mock.history.get[1].url).toEqual(API.UNIT_V2.MY_UNITS(1, 10));
   });
 
   it('Test fetch unit data when snap to item', async () => {
@@ -170,24 +193,33 @@ describe('Test MyUnit', () => {
     await act(() => {
       carousel.props.onSnapToItem(4);
     });
-    expect(mock.history.get).toHaveLength(1);
-    expect(mock.history.get[0].url).toEqual(API.UNIT_V2.MY_UNITS(1, 10));
+    expect(
+      mock.history.get.filter((req) => req.url === API.UNIT_V2.MY_UNITS(1, 10))
+    ).toHaveLength(1);
     await act(() => {
       carousel.props.onSnapToItem(5);
     });
     await act(() => {
       carousel.props.onSnapToItem(6);
     });
-    expect(mock.history.get).toHaveLength(2);
-    expect(mock.history.get[1].url).toEqual(API.UNIT_V2.MY_UNITS(2, 10));
+    expect(
+      mock.history.get.filter((req) => req.url === API.UNIT_V2.MY_UNITS(1, 10))
+    ).toHaveLength(1);
+    expect(
+      mock.history.get.filter((req) => req.url === API.UNIT_V2.MY_UNITS(2, 10))
+    ).toHaveLength(1);
     await act(() => {
       carousel.props.onSnapToItem(4);
     });
     await act(() => {
       carousel.props.onSnapToItem(3);
     });
-    expect(mock.history.get).toHaveLength(3);
-    expect(mock.history.get[2].url).toEqual(API.UNIT_V2.MY_UNITS(1, 10));
+    expect(
+      mock.history.get.filter((req) => req.url === API.UNIT_V2.MY_UNITS(1, 10))
+    ).toHaveLength(2);
+    expect(
+      mock.history.get.filter((req) => req.url === API.UNIT_V2.MY_UNITS(2, 10))
+    ).toHaveLength(1);
   });
 
   it('Test navigation select unit', async () => {

package/src/commons/Dashboard/MyUnit/index.js

@@ -1,6 +1,3 @@
-import { API, Colors, Images, SCConfig } from '../../../configs';
-import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
-import { Dimensions, TouchableOpacity, View } from 'react-native';
 import React, {
   memo,
   useCallback,
@@ -10,30 +7,40 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { SCContext, useSCContextSelector } from '../../../context';
-import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
-import { useBluetoothConnection, useWatchConfigs } from '../../../hooks/IoT';
+import { Dimensions, TouchableOpacity, View } from 'react-native';
+import NetInfo from '@react-native-community/netinfo';
+import { BleManager } from 'react-native-ble-plx';
+import Carousel from 'react-native-new-snap-carousel';
 import {
   useFocusEffect,
   useIsFocused,
   useNavigation,
 } from '@react-navigation/native';
 
+import { API, Colors, Images, SCConfig } from '../../../configs';
+import { AccessibilityLabel, PAGE_SIZE } from '../../../configs/Constants';
+
+import { SCContext, useSCContextSelector } from '../../../context';
 import { Action } from '../../../context/actionType';
-import { BleManager } from 'react-native-ble-plx';
-import Carousel from 'react-native-new-snap-carousel';
-import FImage from '../../FImage';
-import SearchMenu from '../../../Images/Common/search-menu.svg';
-import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
-import NetInfo from '@react-native-community/netinfo';
-import { PAGE_SIZE } from '../../../configs/Constants';
+
+import { usePrevious } from '../../../hooks';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { useBluetoothConnection } from '../../../hooks/IoT';
+import useChipJsonConfiguration, {
+  useConnectChipMqtt,
+} from '../../../hooks/useMqtt';
+import { useUnitConnectRemoteDevices } from '../../../screens/Unit/hook/useUnitConnectRemoteDevices';
+
+import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
+
+import FImage from '../../FImage';
 import { Section } from '../../Section';
 import Text from '../../Text';
+import SearchMenu from '../../../Images/Common/search-menu.svg';
+import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
+
 import styles from './styles';
-import { usePrevious } from '../../../hooks';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { useUnitConnectRemoteDevices } from '../../../screens/Unit/hook/useUnitConnectRemoteDevices';
 
 let screenWidth = Dimensions.get('window').width;
 
@@ -137,24 +144,25 @@ const MyUnit = ({ refreshing }) => {
     }, [])
   );
 
-  useUnitConnectRemoteDevices(myUnits[slideIndex]);
+  const myUnitDetail = useMemo(
+    () => myUnits[slideIndex],
+    [myUnits, slideIndex]
+  );
 
-  const configsNeedWatching = useMemo(() => {
-    const configIds = [];
-    myUnits.forEach((unit) => {
-      (unit?.abstract_devices || []).forEach((device) => {
-        if (
-          device?.quick_action?.config_id &&
-          device?.device_type !== DEVICE_TYPE.GOOGLE_HOME
-        ) {
-          configIds.push(device.quick_action.config_id);
-        }
-      });
-    });
-    return configIds;
-  }, [myUnits]);
+  useUnitConnectRemoteDevices(myUnitDetail);
+
+  const { chips } = useChipJsonConfiguration({
+    dashboardId: myUnitDetail?.id,
+    ready: !!myUnitDetail?.id,
+  });
+
+  const listChipsMqtt = useMemo(() => {
+    const listChipUnit =
+      myUnitDetail?.abstract_devices.map((device) => device.chip_id) ?? [];
+    return chips.filter((chip) => listChipUnit.includes(chip.id));
+  }, [chips, myUnitDetail]);
 
-  useWatchConfigs(configsNeedWatching);
+  useConnectChipMqtt(listChipsMqtt);
 
   const goToDetail = useCallback(
     (item) => () => {

package/src/commons/ModalAlert/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+
+import { Colors } from '../../configs';
+import { ModalCustom } from '../Modal';
+import Text from '../Text';
+
+import styles from './styles';
+
+const ModalAlert = ({
+  isVisible,
+  title,
+  description,
+  leftText,
+  rightText,
+  leftColor = Colors.Gray7,
+  rightColor = Colors.Primary,
+  onLeft,
+  onRight,
+}) => {
+  return (
+    <ModalCustom isVisible={isVisible} style={styles.wrap}>
+      <View style={styles.wrapContent}>
+        <View style={styles.wrapText}>
+          <Text bold type={'H4'} style={styles.title}>
+            {title}
+          </Text>
+          <Text>{description}</Text>
+        </View>
+        <View style={styles.line} />
+        <View style={styles.wrapButton}>
+          <TouchableOpacity onPress={onLeft} style={styles.buttonStyle}>
+            <Text bold type={'H4'} color={leftColor}>
+              {leftText}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={onRight}
+            style={[styles.buttonStyle, styles.buttonRightStyle]}
+          >
+            <Text bold type={'H4'} color={rightColor}>
+              {rightText}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </ModalCustom>
+  );
+};
+
+export default ModalAlert;

package/src/commons/ModalAlert/styles.js

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.TextTransparent,
+    padding: 16,
+    margin: 0,
+  },
+  wrapContent: {
+    height: 186,
+    backgroundColor: Colors.White,
+    width: '100%',
+    borderRadius: 10,
+    justifyContent: 'center',
+  },
+  title: {
+    marginTop: 8,
+    marginBottom: 16,
+  },
+  wrapButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    marginTop: 24,
+  },
+  buttonStyle: {
+    flex: 1,
+    height: 42,
+    alignItems: 'center',
+    borderRadius: 30,
+    borderWidth: 0,
+  },
+  buttonRightStyle: {
+    marginLeft: 8,
+    borderWidth: 0,
+  },
+  line: {
+    borderTopWidth: 1,
+    borderTopColor: Colors.Neutral.Neutral3,
+    width: '90%',
+    alignSelf: 'center',
+  },
+  wrapText: {
+    paddingHorizontal: 24,
+    paddingVertical: 16,
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+});

package/src/commons/SubUnit/ShortDetail.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
+import FastImage from 'react-native-fast-image';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useDevicesStatus } from '../../hooks/Common';
@@ -12,9 +13,12 @@ import Text from '../Text';
 import ItemDevice from '../Device/ItemDevice';
 import ItemHanetDevice from '../Device/Hanet/ItemHanetDevice';
 import ItemAddNew from '../Device/ItemAddNew';
+import useChipJsonConfiguration, {
+  useConnectChipMqtt,
+} from '../../hooks/useMqtt';
+import useWatchSharedChips from '../../hooks/IoT/useWatchSharedChips';
 import { standardizeCameraScreenSize } from '../../utils/Utils';
 import Routes from '../../utils/Route';
-import FastImage from 'react-native-fast-image';
 import MediaPlayerDetail from '../MediaPlayerDetail';
 import { DeviceTemplate } from './DeviceTemplate/DeviceTemplate';
 
@@ -28,6 +32,17 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
 
   useDevicesStatus(unit, 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]);
+
+  const { mqttConfigs } = useConnectChipMqtt(listChipsMqtt);
+
   const configsNeedWatching = useMemo(() => {
     const configIds = (station?.devices || []).flatMap((device) => {
       const ids = [];
@@ -45,10 +60,11 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
       return ids;
     });
 
-    return configIds;
-  }, [station]);
+    return configIds.filter((id) => !mqttConfigs[id]);
+  }, [station, mqttConfigs]);
 
-  useWatchConfigs(configsNeedWatching);
+  useWatchConfigs(isFetching ? [] : configsNeedWatching);
+  useWatchSharedChips({ dashboardId: unit?.id });
 
   const goToPlayBack = useCallback(() => {
     navigate(Routes.PlaybackCamera, {