@eohjsc/react-native-smart-city 0.2.59 → 0.2.63

package/src/commons/MediaPlayerDetail/Styles/MediaPlayerDetailStyles.js

@@ -69,7 +69,17 @@ export default StyleSheet.create({
     bottom: 0,
   },
   firstOpenCamera: {
-    zIndex: -10,
+    zIndex: -9999,
     position: 'absolute',
+    width: 1,
+    height: 1,
+  },
+  loading: {
+    position: 'absolute',
+    zIndex: 10,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 });

package/src/commons/MediaPlayerDetail/index.js

@@ -13,6 +13,7 @@ import {
   Text,
   TouchableOpacity,
   Platform,
+  ActivityIndicator,
 } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -46,9 +47,10 @@ const MediaPlayerDetail = ({
   );
   const t = useTranslations();
   const [paused, setPaused] = useState(isPaused);
+
   const onTapPause = useCallback(() => {
-    setPaused(false);
-  }, []);
+    !isFirstOpenCamera && setPaused(false);
+  }, [isFirstOpenCamera]);
 
   const onTapGoDetail = useCallback(() => {
     if (!paused) {
@@ -139,7 +141,7 @@ const MediaPlayerDetail = ({
       const to = setTimeout(() => {
         setAction(Action.IS_FIRST_OPEN_CAMERA, false);
         clearTimeout(to);
-      }, 500);
+      }, 1000);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFirstOpenCamera]);
@@ -147,7 +149,14 @@ const MediaPlayerDetail = ({
   const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
   return (
     <View style={[styles.wrap, wrapStyles]}>
-      {isFirstOpenCamera && Platform.OS === 'ios' && renderCamera}
+      {isFirstOpenCamera && Platform.OS === 'ios' && (
+        <>
+          {renderCamera}
+          <View style={styles.loading}>
+            <ActivityIndicator size={'small'} color={Colors.Primary} />
+          </View>
+        </>
+      )}
       <View style={[styles.loadingWrap]}>
         <Text style={styles.loadingText}>{t('loading')}</Text>
       </View>
@@ -172,7 +181,7 @@ const MediaPlayerDetail = ({
             />
           </View>
         ) : (
-          renderCamera
+          !isFirstOpenCamera && renderCamera
         )}
 
         <View style={styles.buttonView}>

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

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { Colors, Device } from '../../../configs';
 
 export default StyleSheet.create({
@@ -33,4 +33,23 @@ export default StyleSheet.create({
     alignItems: 'center',
     paddingBottom: 3,
   },
+  dropDown: {
+    width: 114,
+    height: 40,
+    borderRadius: 30,
+    backgroundColor: Colors.Gray3,
+  },
+  boxDropDown: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: Platform.select({
+      ios: 10,
+      android: 6,
+    }),
+  },
+  textDropDown: {
+    color: Colors.Primary,
+    marginRight: 10,
+  },
 });

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

@@ -4,7 +4,7 @@ import { TouchableOpacity } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { act, create } from 'react-test-renderer';
 import SubUnitAutomate from '..';
-import { TESTID } from '../../../../configs/Constants';
+import { AUTOMATE_TYPE, TESTID } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import Routes from '../../../../utils/Route';
@@ -37,18 +37,23 @@ jest.mock('axios');
 let tree;
 let data = {
   isOwner: true,
-  type: 'one_tap',
-  automates: [
+  listAutomate: [
     {
-      id: 1,
-      user: 6,
-      type: 'one_tap',
-      activate_at: '2021-09-17T05:30:00Z',
-      script: {
-        name: 'Joshua Ray',
-        icon: '',
-        icon_kit: '',
-      },
+      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_TYPE.ONE_TAP,
     },
   ],
 };
@@ -58,7 +63,7 @@ describe('test Item', () => {
     axios.post.mockClear();
     mockedNavigate.mockClear();
   });
-  test('render SubUnitAutomate isOwner', async () => {
+  test('render SubUnitAutomate isOwner and handleOnAddNew', async () => {
     const response = {
       status: 200,
     };
@@ -100,7 +105,7 @@ describe('test Item', () => {
       type: 'one_tap',
       unit: undefined,
       textCondition: null,
-      automate: data.automates[0],
+      automate: data.listAutomate[0].data[0],
     });
 
     const handleScriptAction = instance.findAll(
@@ -154,20 +159,26 @@ describe('test Item', () => {
   test('render SubUnitAutomate script value_change', async () => {
     data.isOwner = false;
     data.type = 'value_change';
-    data.automates = [
+    data.listAutomate = [
       {
-        id: 1,
-        user: 6,
-        type: 'value_change',
-        activate_at: null,
-        condition: '>',
-        config: 'Temperature',
-        value: 29,
-        script: {
-          name: 'Rain',
-          icon: '',
-          icon_kit: 'https://www.figma.com/',
-        },
+        text: AUTOMATE_TYPE.AUTOMATION,
+        type: AUTOMATE_TYPE.AUTOMATION,
+        data: [
+          {
+            id: 1,
+            user: 6,
+            type: 'value_change',
+            activate_at: null,
+            condition: '>',
+            config: 'Temperature',
+            value: 29,
+            script: {
+              name: 'Rain',
+              icon: '',
+              icon_kit: 'https://www.figma.com/',
+            },
+          },
+        ],
       },
     ];
     const response = {
@@ -197,30 +208,36 @@ describe('test Item', () => {
       type: 'value_change',
       unit: undefined,
       textCondition: 'Temperature higher than 29',
-      automate: data.automates[0],
+      automate: data.listAutomate[0].data[0],
     });
   });
-  test('render SubUnitAutomate script schedule', async () => {
+  test('render SubUnitAutomate script schedule and handleOnAddNew item automate', async () => {
     data.isOwner = false;
     data.type = 'schedule';
-    data.automates = [
+    data.listAutomate = [
       {
-        id: 1,
-        user: 6,
-        type: 'schedule',
-        activate_at: null,
-        script: {
-          name: 'Rain',
-          icon: '',
-          icon_kit: '',
-        },
+        text: AUTOMATE_TYPE.AUTOMATION,
+        type: AUTOMATE_TYPE.AUTOMATION,
+        data: [
+          {
+            id: 1,
+            user: 6,
+            type: 'schedule',
+            activate_at: null,
+            script: {
+              name: 'Rain',
+              icon: '',
+              icon_kit: '',
+            },
+          },
+        ],
       },
     ];
     const response = {
       status: 200,
     };
 
-    axios.post.mockImplementation(async () => {
+    await axios.post.mockImplementation(async () => {
       return response;
     });
 
@@ -228,10 +245,104 @@ describe('test Item', () => {
       tree = await create(wrapComponent(data));
     });
 
+    const instance = tree.root;
+    const item = instance.findAll(
+      (el) => el.props.testID === TESTID.PLUS && el.type === TouchableOpacity
+    );
+
+    expect(item).toHaveLength(1);
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddNewAutoSmart, {
+      type: AUTOMATE_TYPE.VALUE_CHANGE,
+      unit: undefined,
+    });
+    mockedNavigate.mockClear();
+
     const goDetail = tree.root.findAll(
       (el) =>
         el.props.testID === TESTID.GO_DETAIL && el.type === TouchableOpacity
     );
     expect(goDetail).toHaveLength(1);
   });
+
+  test('render click select option filter by automation', async () => {
+    data.isOwner = false;
+    data.type = 'schedule';
+    data.listAutomate = [
+      {
+        text: AUTOMATE_TYPE.SCENARIO,
+        type: AUTOMATE_TYPE.ONE_TAP,
+        data: [
+          {
+            id: 1,
+            user: 6,
+            type: 'one_tap',
+            activate_at: null,
+            script: {
+              name: 'One-tap',
+              icon: '',
+              icon_kit: '',
+            },
+          },
+        ],
+      },
+      {
+        text: AUTOMATE_TYPE.AUTOMATION,
+        type: AUTOMATE_TYPE.AUTOMATION,
+        data: [
+          {
+            id: 2,
+            user: 6,
+            type: 'schedule',
+            activate_at: null,
+            script: {
+              name: 'Rain',
+              icon: '',
+              icon_kit: '',
+            },
+          },
+        ],
+      },
+    ];
+    const response = {
+      status: 200,
+    };
+
+    await axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(data));
+    });
+
+    const instance = tree.root;
+    const menuDropDown = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SUB_UNIT_SELECT_AUTOMATE_TYPE &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await menuDropDown.props.onPress();
+    });
+
+    const menu = instance.find(
+      (el) => el.props.testID === TESTID.NAVBAR_MENU_ACTION_MORE
+    );
+
+    expect(menu.props.isVisible).toBeTruthy();
+
+    const automation = menu.props.listMenuItem[1];
+
+    await act(async () => {
+      await menu.props.onItemClick(automation, 1);
+    });
+
+    const text = instance.find(
+      (el) => el.props.testID === TESTID.SUB_UNIT_TEXT_DROPDOWN
+    );
+    expect(text.props.children).toEqual(AUTOMATE_TYPE.AUTOMATION);
+  });
 });

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

@@ -1,33 +1,75 @@
-import React from 'react';
-import { View } from 'react-native';
-import styles from './OneTapStyles.js';
-import { Section } from '../..';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { Icon } from '@ant-design/react-native';
 
+import { MenuActionMore, Section } from '../..';
 import ItemAddNew from '../../Device/ItemAddNew';
 import ItemOneTap from './ItemOneTap';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../utils/Route/index.js';
-import { AUTOMATE_TYPE } from '../../../configs/Constants';
+import { AUTOMATE_TYPE, TESTID } from '../../../configs/Constants';
+import { Colors } from '../../../configs/Colors.js';
+import usePopover from '../../../hooks/Common/usePopover.js';
+import Text from '../../Text/index.js';
+
+import styles from './OneTapStyles.js';
 
-const SubUnitAutomate = ({ isOwner, type, automates, unit, wrapItemStyle }) => {
+const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
+  const [automates, setAutomates] = useState(listAutomate[0]);
+  const [indexAutomate, setIndexAutomate] = useState(0);
   const handleOnAddNew = () => {
-    switch (type) {
+    switch (automates.type) {
       case AUTOMATE_TYPE.ONE_TAP:
-        navigate(Routes.AddNewOneTap, { type: type, unit });
+        navigate(Routes.AddNewOneTap, { type: AUTOMATE_TYPE.ONE_TAP, unit });
         break;
-      case AUTOMATE_TYPE.VALUE_CHANGE:
-        navigate(Routes.AddNewAutoSmart, { type, unit });
+      case AUTOMATE_TYPE.AUTOMATION:
+        navigate(Routes.AddNewAutoSmart, {
+          type: AUTOMATE_TYPE.VALUE_CHANGE,
+          unit,
+        });
         break;
     }
   };
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+
+  const refMenuAction = useRef();
+  const handleShowMenuAction = () => showPopoverWithRef(refMenuAction);
+
+  const onItemClick = useCallback((item, index) => {
+    setAutomates(item);
+    setIndexAutomate(index);
+  }, []);
+  useEffect(() => {
+    setAutomates(listAutomate[indexAutomate]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [listAutomate]);
+
   return (
     <Section style={styles.noShadow}>
+      <TouchableOpacity
+        style={styles.dropDown}
+        onPress={handleShowMenuAction}
+        ref={refMenuAction}
+        testID={TESTID.SUB_UNIT_SELECT_AUTOMATE_TYPE}
+      >
+        <View style={styles.boxDropDown}>
+          <Text
+            testID={TESTID.SUB_UNIT_TEXT_DROPDOWN}
+            style={styles.textDropDown}
+            semibold
+          >
+            {automates?.text}
+          </Text>
+          <Icon name={'caret-down'} size={14} style={{ color: Colors.Gray8 }} />
+        </View>
+      </TouchableOpacity>
       <View style={styles.boxDevices}>
-        {!!automates.length &&
-          automates.map((item) => (
+        {automates?.data &&
+          automates.data.map((item) => (
             <ItemOneTap isOwner={isOwner} automate={item} unit={unit} />
           ))}
         <ItemAddNew
@@ -36,6 +78,16 @@ const SubUnitAutomate = ({ isOwner, type, automates, unit, wrapItemStyle }) => {
           wrapStyle={wrapItemStyle}
         />
       </View>
+      <MenuActionMore
+        isVisible={showingPopover}
+        hideMore={hidePopover}
+        listMenuItem={listAutomate}
+        childRef={childRef}
+        onItemClick={onItemClick}
+        isTextCenter={false}
+        testID={TESTID.NAVBAR_MENU_ACTION_MORE}
+        wrapStyle={styles.wrapStyle}
+      />
     </Section>
   );
 };

package/src/commons/UnitSummary/AirQuality/index.js

@@ -63,6 +63,14 @@ const AirQuality = memo(({ summaryDetail }) => {
     return outdoor_pm10_id || outdoor_pm2_5_id || outdoor_co_id ? true : false;
   }, [outdoor_pm10_id, outdoor_pm2_5_id, outdoor_co_id]);
 
+  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 [indexOutdoor, setIndexOutdoor] = useState(0);
   const onSelectOutdoor = useCallback((i) => {
     setIndexOutdoor(i);
@@ -154,13 +162,7 @@ const AirQuality = memo(({ summaryDetail }) => {
       )}
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              { 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' },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </View>

package/src/commons/UnitSummary/ConfigHistoryChart.js

@@ -45,7 +45,8 @@ const ConfigHistoryChart = memo(({ configs }) => {
       }
     };
     fetchData();
-  }, [startDate, endDate, configs]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startDate, endDate]);
 
   if (!chartData.length) {
     return false;

package/src/configs/API.js

@@ -82,6 +82,9 @@ const API = {
       SCConfig.apiRoot + `/property_manager/sensors/${id}/`,
     REMOVE_SENSOR: (id) =>
       SCConfig.apiRoot + `/property_manager/sensors/${id}/`,
+    CHANGE_SUB_UNIT: (unit_id, station_id, id) =>
+      SCConfig.apiRoot +
+      `/property_manager/${unit_id}/sub_units/${station_id}/devices/${id}/change_sub_unit/`,
   },
   SHARED_SENSOR: {
     ACCESS: (id) =>

package/src/configs/Constants.js

@@ -93,6 +93,9 @@ export const AUTOMATE_TYPE = {
   SCHEDULE: 'schedule',
   ONE_TAP_ONLY: 'one_tap_only',
   AUTOMATE: 'automate',
+  AUTOMATION: 'automation',
+  ALL: 'all',
+  SCENARIO: 'scenario',
 };
 
 export const AUTOMATE_SELECT = {
@@ -138,6 +141,10 @@ export const TESTID = {
   DASHBOARD_VIEW_ALL_SHARED_UNITS: 'DASHBOARD_VIEW_ALL_SHARED_UNITS',
   DASHBOARD_HOME_SCROLL_VIEW: 'DASHBOARD_HOME_SCROLL_VIEW',
 
+  //SmartAccountItem
+  SMART_ACCOUNT_ITEM: 'SMART_ACCOUNT_ITEM',
+  SMART_ACCOUNT_ITEM_PRESSMORE: 'SMART_ACCOUNT_ITEM_PRESSMORE',
+
   // Login
   LOGIN_TITLE: 'LOGIN_TITLE',
   LOGIN_INPUT_PHONE_NUMBER: 'LOGIN_INPUT_PHONE_NUMBER',
@@ -179,6 +186,8 @@ export const TESTID = {
   SUB_UNIT_DEVICES: 'SUB_UNIT_DEVICES',
   SUB_UNIT_ICON_BARS: 'SUB_UNIT_ICON_BARS',
   SUB_UNIT_STATION: 'SUB_UNIT_STATION',
+  SUB_UNIT_SELECT_AUTOMATE_TYPE: 'SUB_UNIT_SELECT_AUTOMATE_TYPE',
+  SUB_UNIT_TEXT_DROPDOWN: 'SUB_UNIT_TEXT_DROPDOWN',
 
   // NavBar
   NAVBAR_ICON_BARS: 'NAVBAR_ICON_BARS',
@@ -573,9 +582,15 @@ export const TESTID = {
   HISTORY_BUTTON: 'HISTORY_BUTTON',
   HISTORY_CALENDAR: 'HISTORY_CALENDAR',
 
+  // DropDownPicker
+  DROP_DOWN_PICKER_ITEM: 'DROP_DOWN_PICKER_ITEM',
+
   // SelectAddress
   BUTTON_YOUR_LOCATION: 'BUTTON_YOUR_LOCATION',
   BUTTON_CHOOSE_ON_MAP: 'BUTTON_CHOOSE_ON_MAP',
+
+  // MoveToAnotherSubUnit
+  ROW_SUB_UNIT: 'ROW_SUB_UNIT',
 };
 
 export const NOTIFICATION_TYPES = {

package/src/iot/RemoteControl/Bluetooth.js

@@ -94,12 +94,13 @@ export const sendCommandOverBluetooth = async (sensor, action, data) => {
     device = getDeviceByName(bluetooth.address);
   }
 
-  await sendDataOverBluetooth(device, {
+  const result = await sendDataOverBluetooth(device, {
     type: 'command',
     command: action.key,
     password: bluetooth ? bluetooth.password : '',
     data,
   });
+  return result;
 };
 
 export const getDeviceByName = (name) => {
@@ -138,7 +139,7 @@ export const sendDataOverBluetooth = async (
 
   let connectedDevice = null;
   let fullDataDevice = null;
-
+  let result = false;
   try {
     connectedDevice = await device.connect();
     fullDataDevice =
@@ -149,16 +150,18 @@ export const sendDataOverBluetooth = async (
       base64.encode(JSON.stringify(data))
     );
     ToastBottomHelper.success(t('Command is sent to device via bluetooth'));
+    result = true;
   } catch (e) {
     ToastBottomHelper.error(t('Command is fail to send via bluetooth'));
     throw SEND_COMMAND_OVER_BLUETOOTH_FAIL;
   }
 
   if (keepConnect) {
-    return;
+    return result;
   }
 
   await device.cancelConnection();
+  return result;
 };
 
 export const isBluetoothEnabled = async () => {

package/src/iot/RemoteControl/GoogleHome.js

@@ -27,7 +27,7 @@ function numberType(value) {
 
 function textType(value, entityId) {
   const textMap = textMaps[entityId];
-  return textMap[value];
+  return textMap ? textMap[value] : '';
 }
 
 function keepValue(value) {
@@ -224,9 +224,12 @@ export async function sendCommandOverGoogleHome(sensor, action, data) {
     await connection.sendMessagePromise(message);
   }
 
-  await axiosPost(API.SENSOR.ACTIVITY_LOG(), {
+  const { success } = await axiosPost(API.SENSOR.ACTIVITY_LOG(), {
     action_id: action.id,
     message: 'Trigger by user action with google home',
   });
-  ToastBottomHelper.success(t('command_send_success_googlehome'));
+  if (success) {
+    ToastBottomHelper.success(t('command_send_success_googlehome'));
+  }
+  return success;
 }

package/src/iot/RemoteControl/Internet.js

@@ -19,4 +19,5 @@ export const sendCommandOverInternet = async (sensor, action, data, source) => {
   if (success) {
     ToastBottomHelper.success(t('Command is sent to device via internet'));
   }
+  return success;
 };

package/src/iot/RemoteControl/LG.js

@@ -167,11 +167,12 @@ export const sendCommandOverLGThinq = async (sensor, action, data) => {
       new_message[key] = new_property;
     }
 
-    await sendCommandOverInternet(
+    const result = await sendCommandOverInternet(
       sensor,
       action,
       JSON.stringify(new_message),
       'lg_thinq'
     );
+    return result;
   }
 };