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

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -16,11 +16,13 @@ import Routes from '../../../../utils/Route';
 import api from '../../../../utils/Apis/axios';
 import { API } from '../../../../configs';
 import { useNavigation } from '@react-navigation/native';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+import { getTranslate } from '../../../../utils/I18n';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const wrapComponent = (data) => (
-  <SCProvider initState={mockSCStore({})}>
+const wrapComponent = (data, storeData = {}) => (
+  <SCProvider initState={mockSCStore(storeData)}>
     <SubUnitAutomate {...data} />
   </SCProvider>
 );
@@ -33,34 +35,36 @@ jest.mock('react-redux', () => {
 });
 
 let tree;
-let data = {
-  isOwner: true,
-  listAutomate: [
-    {
-      text: 'Scenario',
-      data: [
-        {
-          id: 1,
-          user: 6,
-          type: 'one_tap',
-          activate_at: '2021-09-17T05:30:00Z',
-          script: {
-            name: 'Joshua Ray',
-            icon: '',
-            icon_kit: '',
-          },
-        },
-      ],
-      type: AUTOMATE_TABS.SCENARIO,
-    },
-  ],
-};
+let data;
 
 describe('test Item', () => {
   const mockedNavigate = useNavigation().navigate;
   beforeEach(() => {
     mockedNavigate.mockClear();
+    data = {
+      isOwner: true,
+      listAutomate: [
+        {
+          text: 'Scenario',
+          data: [
+            {
+              id: 1,
+              user: 6,
+              type: 'one_tap',
+              activate_at: '2021-09-17T05:30:00Z',
+              script: {
+                name: 'Joshua Ray',
+                icon: '',
+                icon_kit: '',
+              },
+            },
+          ],
+          type: AUTOMATE_TABS.SCENARIO,
+        },
+      ],
+    };
   });
+
   it('render SubUnitAutomate isOwner and handleOnAddNew', async () => {
     await act(async () => {
       tree = await create(wrapComponent(data));
@@ -78,7 +82,7 @@ describe('test Item', () => {
     await act(async () => {
       await item[0].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddNewOneTap, {
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScenarioName, {
       automate: {
         type: 'one_tap',
         unit: undefined,
@@ -97,13 +101,8 @@ describe('test Item', () => {
       await goDetail[0].props.onPress();
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
-      havePermission: true,
       id: 1,
-      name: 'Joshua Ray',
-      type: 'one_tap',
-      unit: undefined,
-      textCondition: null,
-      automate: data.listAutomate[0].data[0],
+      preAutomate: data.listAutomate[0].data[0],
     });
 
     const handleScriptAction = instance.findAll(
@@ -189,15 +188,11 @@ describe('test Item', () => {
       await goDetail[0].props.onPress();
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
-      havePermission: false,
       id: 1,
-      name: 'Rain',
-      type: 'value_change',
-      unit: undefined,
-      textCondition: 'Temperature higher than 29',
-      automate: data.listAutomate[0].data[0],
+      preAutomate: data.listAutomate[0].data[0],
     });
   });
+
   it('render SubUnitAutomate script schedule and handleOnAddNew item automate', async () => {
     data.isOwner = false;
     data.type = 'schedule';
@@ -237,8 +232,8 @@ describe('test Item', () => {
     await act(async () => {
       await item[0].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddNewAutoSmart, {
-      automate: { type: AUTOMATE_TYPE.VALUE_CHANGE, unit: undefined },
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddAutomationTypeSmart, {
+      automate: { unit: undefined },
       closeScreen: undefined,
     });
     mockedNavigate.mockClear();
@@ -251,6 +246,46 @@ describe('test Item', () => {
     expect(goDetail).toHaveLength(1);
   });
 
+  it('add new automate when reach maximum', async () => {
+    data.isOwner = false;
+    data.type = 'schedule';
+    data.unit = { id: 1 };
+
+    await act(async () => {
+      tree = await create(
+        wrapComponent(data, {
+          auth: {
+            account: {
+              user: {
+                permissions: {
+                  max_automations_per_unit: 0,
+                },
+              },
+            },
+          },
+        })
+      );
+    });
+
+    const instance = tree.root;
+    const item = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SUB_UNIT_ADD_DEVICE &&
+        el.type === TouchableWithoutFeedback
+    );
+
+    expect(item).toHaveLength(1);
+    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+    expect(mockedNavigate).not.toBeCalled();
+    expect(spyToastError).toBeCalledWith(
+      getTranslate('en', 'reach_max_automations_per_unit')
+    );
+  });
+
   it('render click select option by automation', async () => {
     await act(async () => {
       tree = await create(wrapComponent(data));

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

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 import { Section } from '../..';
@@ -15,17 +21,32 @@ import {
 import Text from '../../Text/index.js';
 
 import styles from './OneTapStyles.js';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import { useBackendPermission } from '../../../utils/Permission/backend';
 
 const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const [automates, setAutomates] = useState(listAutomate[0]);
   const [indexAutomate, setIndexAutomate] = useState(0);
+  const permissions = useBackendPermission();
   const { name: currentScreen } = useRoute();
+
+  const totalAutomates = useMemo(
+    () => listAutomate.reduce((acc, item) => item.data.length + acc, 0),
+    [listAutomate]
+  );
+
   const handleOnAddNew = () => {
+    if (unit?.id) {
+      if (permissions.max_automations_per_unit <= totalAutomates) {
+        ToastBottomHelper.error(t('reach_max_automations_per_unit'));
+        return;
+      }
+    }
     switch (automates.type) {
       case AUTOMATE_TABS.SCENARIO:
-        navigate(Routes.AddNewOneTap, {
+        navigate(Routes.ScenarioName, {
           automate: {
             type: AUTOMATE_TYPE.ONE_TAP,
             unit: unit?.id,
@@ -34,9 +55,8 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
         });
         break;
       case AUTOMATE_TABS.AUTOMATION:
-        navigate(Routes.AddNewAutoSmart, {
+        navigate(Routes.AddAutomationTypeSmart, {
           automate: {
-            type: AUTOMATE_TYPE.VALUE_CHANGE,
             unit: unit?.id,
           },
           closeScreen: currentScreen,

package/src/commons/ViewButtonBottom/index.js

@@ -1,10 +1,17 @@
-import React, { useMemo } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import React, { useMemo, useEffect, useState } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+  Platform,
+  Easing,
+} from 'react-native';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { AccessibilityLabel } from '../../configs/Constants';
 import withPreventDoubleClick from '../WithPreventDoubleClick';
+import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 
 const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
 
@@ -23,15 +30,34 @@ const ViewButtonBottom = ({
   styleButtonRight,
   accessibilityLabelPrefix = '',
   isPreventDoubleTouch = false,
+  wrapStyle,
+  disableKeyBoardAnimated = false,
 }) => {
   const useTwoButton = leftTitle && rightTitle;
+  const transY = useKeyboardAnimated();
+  const [keyboardAnim] = useState(new Animated.Value(0));
 
   const RightButtonView = useMemo(() => {
     return isPreventDoubleTouch ? PreventDoubleTouch : TouchableOpacity;
   }, [isPreventDoubleTouch]);
 
+  useEffect(() => {
+    Animated.timing(keyboardAnim, {
+      toValue: transY,
+      duration: Platform.OS === 'ios' ? 220 : 0,
+      easing: Easing.linear(),
+      useNativeDriver: false,
+    }).start();
+  }, [keyboardAnim, transY]);
+
   return (
-    <View style={styles.container}>
+    <Animated.View
+      style={[
+        styles.container,
+        wrapStyle,
+        !disableKeyBoardAnimated && { bottom: keyboardAnim },
+      ]}
+    >
       {leftTitle && (
         <TouchableOpacity
           style={[
@@ -76,7 +102,7 @@ const ViewButtonBottom = ({
           </Text>
         </RightButtonView>
       )}
-    </View>
+    </Animated.View>
   );
 };
 
@@ -85,6 +111,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     paddingHorizontal: 16,
+    position: 'absolute',
+    bottom: 0,
   },
   button: {
     paddingVertical: 24,

package/src/configs/API.js

@@ -35,6 +35,8 @@ const API = {
       `/property_manager/units/${id}/star_automate_scripts/`,
   },
   SUB_UNIT: {
+    END_DEVICES_STATUS: (stationId) =>
+      `/property_manager/iot_dashboard/stations_v2/${stationId}/end_devices_status/`,
     REMOVE_SUB_UNIT: (unitId, id) =>
       `/property_manager/${unitId}/sub_units/${id}/`,
     CREATE_SUB_UNIT: (unitId) => `/property_manager/${unitId}/sub_units/`,
@@ -49,6 +51,7 @@ const API = {
       ACCEPT_NEW_DEVICE: (id) =>
         `/iot/modules/zigbee/chips/${id}/device_permit_to_join/`,
     },
+    JSON_CONFIGURATION: '/chip_manager/chips/json_configuration/',
   },
   DEVICE: {
     SENSOR_DETAIL: (id) => `/property_manager/devices/${id}/`,
@@ -212,6 +215,7 @@ const API = {
     },
     GATEWAY: {
       LIST: () => '/chip_manager/developer_mode_chips/',
+      COUNT: () => '/chip_manager/developer_mode_chips/count/',
       DETAIL: (id) => `/chip_manager/developer_mode_chips/${id}/`,
       REBOOT: (id) => `/chip_manager/developer_mode_chips/${id}/reboot_chip/`,
     },

package/src/configs/AccessibilityLabel.js

@@ -238,6 +238,7 @@ export default {
   BUTTON_EDIT_SCRIPT_ACTION: 'BUTTON_EDIT_SCRIPT_ACTION',
   BUTTON_ADD_SCRIPT_ACTION: 'BUTTON_ADD_SCRIPT_ACTION',
   ICON_CLOSE: 'ICON_CLOSE',
+  ICON_MORE: 'ICON_MORE',
   ICON_ARROW_RIGHT: 'ICON_ARROW_RIGHT',
 
   // Parking input maunaly spot

package/src/configs/BLE.js

@@ -6,4 +6,5 @@ export default {
   BLE_RESPONSE_OK: 'OK',
   BLE_RESPONSE_FAILED: 'FAILED',
   BLE_LISTER_RESPONSE_CONTROL: 'LISTER_RESPONSE_CONTROL',
+  BLE_REQUEST_ONE_TIME_CODE: 'cf153c1f-bc0d-11ed-afa1-0242ac120002',
 };

package/src/context/actionType.ts

@@ -36,11 +36,11 @@ export const Action = {
   IS_CHECK_CLEAR_CACHE_UNITS: 'IS_CHECK_CLEAR_CACHE_UNITS',
   DELETE_UNIT_SUCCESSFULLY: 'DELETE_UNIT_SUCCESSFULLY',
   RESET_DELETE_UNIT_ACTION: 'RESET_DELETE_UNIT_ACTION',
-  // NOTE: DEV MODE
   SET_WIDGET_DRAGGING: 'SET_WIDGET_DRAGGING',
   SET_IS_EDITING_TEMPLATE: 'SET_IS_EDITING_TEMPLATE',
   SET_IS_IN_EDIT_TEMPLATE_SCREEN: 'SET_IS_IN_EDIT_TEMPLATE_SCREEN',
   LOGOUT: 'LOGOUT',
+  SET_APP_STATE_CHANGE: 'SET_APP_STATE_CHANGE',
 };
 
 export type AuthData = {
@@ -101,6 +101,7 @@ export type AppType = {
   isLockWhenPickColor: boolean;
   isNeedUpdateCache: boolean;
   isDeleteUnitSuccessFully: boolean;
+  appState: string;
 };
 
 export type IoTType = {

package/src/context/mockStore.ts

@@ -92,6 +92,7 @@ export const mockSCStore = (data: ContextData): ContextData => {
       isConnectWifiGateway: false,
       isNetworkConnected: true,
       isLockWhenPickColor: false,
+      appState: 'active',
       ...data.app,
     },
     unit: {

package/src/context/reducer.ts

@@ -16,6 +16,7 @@ import {
 } from './actionType';
 import _ from 'lodash';
 import { STORAGE_KEY, removeMultiple } from '../utils/Storage.js';
+import { AppState } from 'react-native';
 
 export type ContextData = {
   auth: AuthData;
@@ -71,6 +72,7 @@ export const initialState = {
     isEmergencyPopupScreen: false,
     isNeedUpdateCache: false,
     isDeleteUnitSuccessFully: false,
+    appState: AppState.currentState,
   },
   iot: {
     bluetooth: {
@@ -394,7 +396,7 @@ export const reducer = (currentState: ContextData, action: Action) => {
           ...currentState.iot,
           internet: {
             ...currentState.iot.internet,
-            statuses: newStatuses,
+            statuses: JSON.parse(JSON.stringify(newStatuses)),
           },
         },
       };
@@ -527,6 +529,15 @@ export const reducer = (currentState: ContextData, action: Action) => {
         },
       };
 
+    case Action.SET_APP_STATE_CHANGE:
+      return {
+        ...currentState,
+        app: {
+          ...currentState.app,
+          appState: payload,
+        },
+      };
+
     default:
       return currentState;
   }

package/src/hooks/Explore/useKeyboardAnimated.js

@@ -18,11 +18,17 @@ const useKeyboardAnimated = (tabHeight = 0) => {
   );
 
   useEffect(() => {
-    Keyboard.addListener('keyboard' + action + 'Hide', _keyboardWillHide);
-    Keyboard.addListener('keyboard' + action + 'Show', _keyboardWillShow);
+    const keyboardDidHide = Keyboard.addListener(
+      'keyboard' + action + 'Hide',
+      _keyboardWillHide
+    );
+    const keyboardDidShow = Keyboard.addListener(
+      'keyboard' + action + 'Show',
+      _keyboardWillShow
+    );
     return () => {
-      Keyboard.removeListener('keyboard' + action + 'Show', _keyboardWillShow);
-      Keyboard.removeListener('keyboard' + action + 'Hide', _keyboardWillHide);
+      keyboardDidHide?.remove();
+      keyboardDidShow?.remove();
     };
   }, [_keyboardWillHide, _keyboardWillShow, tabHeight]);
 

package/src/hooks/IoT/useBluetoothConnection.js

@@ -1,5 +1,5 @@
-import { useContext, useCallback, useRef, useEffect, useMemo } from 'react';
-import { AppState, Platform } from 'react-native';
+import { useContext, useCallback, useEffect, useMemo } from 'react';
+import { Platform } from 'react-native';
 import { getSystemVersion } from 'react-native-device-info';
 
 import { SCContext, useSCContextSelector } from '../../context';
@@ -20,7 +20,7 @@ const permissions = [
 // NOTE: fnCallback is used for Lavida when found device
 const useBluetoothConnection = (fnCallback) => {
   const t = useTranslations();
-  const appState = useRef(AppState.currentState);
+  const appState = useSCContextSelector((state) => state.app.appState);
 
   const { setAction } = useContext(SCContext);
   const isEnabled = useSCContextSelector((state) => state.bluetooth.isEnabled);
@@ -51,33 +51,21 @@ const useBluetoothConnection = (fnCallback) => {
     [onDeviceFound]
   );
 
-  useEffect(() => {
-    const subscription = AppState.addEventListener(
-      'change',
-      async (nextAppState) => {
-        if (
-          appState.current.match(/inactive|background/) &&
-          nextAppState === 'active'
-        ) {
-          const results = await Permissions.checkMultiple(permissions);
-          const granted = Object.values(results).every((result) =>
-            [
-              Permissions.RESULTS.GRANTED,
-              Permissions.RESULTS.UNAVAILABLE,
-            ].includes(result)
-          );
-          setAction(Action.SET_BLUETOOTH_PERM_GRANTED, granted);
-        }
-        appState.current = nextAppState;
-      }
+  const requestPermission = useCallback(async () => {
+    const results = await Permissions.checkMultiple(permissions);
+    const granted = Object.values(results).every((result) =>
+      [Permissions.RESULTS.GRANTED, Permissions.RESULTS.UNAVAILABLE].includes(
+        result
+      )
     );
-
-    return () => {
-      subscription?.remove();
-    };
+    setAction(Action.SET_BLUETOOTH_PERM_GRANTED, granted);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    appState === 'active' && requestPermission();
+  }, [appState, requestPermission]);
+
   const requestPerm = useCallback(async () => {
     let results = await Permissions.requestMultiple(permissions);
     const blocked = Object.values(results).some(

package/src/hooks/useMqtt.js

@@ -0,0 +1,95 @@
+import mqtt from 'precompiled-mqtt/dist/mqtt.browser';
+import { useState, useEffect, useMemo, useRef } from 'react';
+
+import API from '../configs/API';
+import { axiosGet } from '../utils/Apis/axios';
+import { handleMqttMessage } from '../iot/mqtt';
+
+const useChipJsonConfiguration = (dashboardId) => {
+  const [chips, setChips] = useState([]);
+  // get chip data
+  useEffect(() => {
+    const getGateways = async () => {
+      const { success, data } = await axiosGet(API.CHIP.JSON_CONFIGURATION, {
+        params: {
+          unit: dashboardId,
+        },
+      });
+      if (success) {
+        setChips(data);
+      }
+    };
+    getGateways();
+  }, [dashboardId]);
+
+  return {
+    chips,
+  };
+};
+
+const connectChipMqtt = (chip) => {
+  const configById = {};
+  const { code, mqtt_server } = chip;
+  const { host, websocket_port } = mqtt_server;
+
+  const client = mqtt.connect(`wss://${host}:${websocket_port}`, {
+    username: code,
+    password: code,
+  });
+
+  (chip?.sensors).forEach((sensor) => {
+    (sensor?.configs).forEach((config) => {
+      configById[config.id] = config;
+    });
+  });
+
+  client.on('connect', () => {
+    client.subscribe(`eoh/chip/${code}/#`);
+  });
+  client.on('message', (topic, payload, packet) => {
+    const payloadObject = JSON.parse(payload.toString());
+    handleMqttMessage(topic, payloadObject, code, chip, configById);
+  });
+
+  return client;
+};
+
+export const useConnectChipMqtt = (chips) => {
+  const mqttChips = useMemo(
+    () => chips.filter((chip) => chip?.mqtt_server?.allow_frontend_connect),
+    [chips]
+  );
+
+  const mqttConfigs = useMemo(() => {
+    let configById = {};
+
+    mqttChips.forEach((chip) => {
+      chip?.sensors.forEach((sensor) => {
+        sensor?.configs.forEach((config) => {
+          configById[config.id] = config;
+        });
+      });
+    });
+
+    return configById;
+  }, [mqttChips]);
+
+  const mqttClientsRef = useRef([]);
+  useEffect(() => {
+    mqttChips.forEach((chip) => {
+      const client = connectChipMqtt(chip);
+      mqttClientsRef.current.push(client);
+    });
+
+    return () => {
+      mqttClientsRef.current.forEach((client) => {
+        client && client.end();
+      });
+      mqttClientsRef.current = [];
+    };
+  }, [mqttChips]);
+
+  return { mqttConfigs };
+};
+
+export default useChipJsonConfiguration;

package/src/iot/Monitor.js

@@ -70,7 +70,8 @@ let waitWatchConfigTimerId = null;
 let waitWatchConfigIds = [];
 
 export const watchMultiConfigs = async (configIds) => {
-  waitWatchConfigIds = waitWatchConfigIds.concat(configIds);
+  const uniqueConfigIds = [...new Set(configIds)]?.filter(Boolean);
+  waitWatchConfigIds = waitWatchConfigIds.concat(uniqueConfigIds);
   if (!waitWatchConfigTimerId) {
     waitWatchConfigTimerId = setTimeout(async () => {
       await realWatchMultiConfigs(waitWatchConfigIds);