@eohjsc/react-native-smart-city 0.2.61 → 0.2.65

package/src/commons/Device/HistoryChart.js

@@ -156,7 +156,8 @@ const HistoryChart = memo(
         return null;
       }
       const sum = datas[0].data.reduce((a, b) => a + b.y, 0);
-      return sum * price;
+      const roundedSum = sum * price;
+      return roundedSum.toFixed();
     }, [configuration, datas, chartConfig]);
 
     const renderChart = useCallback(() => {

package/src/commons/Device/HorizontalBarChart.js

@@ -5,6 +5,7 @@ import { isEmpty } from 'lodash';
 
 import { Colors } from '../../configs';
 import { getMaxValueIndex } from '../../utils/chartHelper/getMaxValueIndex';
+import { arePropsEqual } from '../../utils/Utils';
 
 const HorizontalBarChart = memo(({ datas, config }) => {
   const [chartOptions, setChartOptions] = useState({
@@ -145,7 +146,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
       />
     </View>
   );
-});
+}, arePropsEqual);
 
 export default HorizontalBarChart;
 

package/src/commons/Device/LinearChart.js

@@ -3,6 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import HighchartsReactNative from '@highcharts/highcharts-react-native';
 import moment from 'moment';
 import { Colors } from '../../configs';
+import { arePropsEqual } from '../../utils/Utils';
 
 const convertData = (data = []) => {
   let arr = [];
@@ -56,6 +57,32 @@ const chartOptions = {
     },
     minRange: 3600 * 24 * 1000,
   },
+  plotOptions: {
+    series: {
+      events: {
+        legendItemClick: function () {
+          const { index, visible } = this;
+          const isHiding = (serie, i) => {
+            if (i === index) {
+              return visible;
+            }
+            return !serie.visible;
+          };
+          if (this.chart.series.every(isHiding)) {
+            this.chart.yAxis[0].update({
+              min: 0,
+              max: 100,
+            });
+          } else {
+            this.chart.yAxis[0].update({
+              min: undefined,
+              max: undefined,
+            });
+          }
+        },
+      },
+    },
+  },
 };
 
 function LinearChart({ datas }) {
@@ -93,7 +120,7 @@ function LinearChart({ datas }) {
   );
 }
 
-export default memo(LinearChart);
+export default memo(LinearChart, arePropsEqual);
 
 const styles = StyleSheet.create({
   container: {

package/src/commons/Form/CurrencyInput.js

@@ -136,6 +136,7 @@ const CurrencyInput = ({
           placeholder={placeholder}
           onSubmitEditing={onSubmitEditing}
           style={styles.input}
+          maxLength={10}
         />
         <Text
           semibold

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/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',

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

@@ -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;
   }
 };

package/src/iot/RemoteControl/index.js

@@ -10,18 +10,24 @@ import { sendCommandOverLGThinq } from './LG';
 
 export const sendRemoteCommand = async (sensor, action, data) => {
   // No action, raise not authorized
+  let result = false;
   if (!action) {
     ToastBottomHelper.error(
       t('your_account_has_not_been_authorized_to_control')
     );
-    return;
+    return result;
   }
   if (action.command_prefer_over_bluetooth) {
     try {
-      await sendCommandOverBluetooth(sensor, action, data);
+      result = await sendCommandOverBluetooth(sensor, action, data);
     } catch (err) {
       if (err === SEND_COMMAND_OVER_BLUETOOTH_FAIL) {
-        await sendCommandOverInternet(sensor, action, data, 'bluetooth');
+        result = await sendCommandOverInternet(
+          sensor,
+          action,
+          data,
+          'bluetooth'
+        );
       } else {
         throw err;
       }
@@ -29,14 +35,15 @@ export const sendRemoteCommand = async (sensor, action, data) => {
   }
 
   if (action.command_prefer_over_internet) {
-    await sendCommandOverInternet(sensor, action, data, 'internet');
+    result = await sendCommandOverInternet(sensor, action, data, 'internet');
   }
 
   if (action.command_prefer_over_googlehome) {
-    await sendCommandOverGoogleHome(sensor, action, data);
+    result = await sendCommandOverGoogleHome(sensor, action, data);
   }
 
   if (action.command_prefer_over_lg) {
-    await sendCommandOverLGThinq(sensor, action, data);
+    result = await sendCommandOverLGThinq(sensor, action, data);
   }
+  return result;
 };

package/src/navigations/SharedStack.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import { TouchableOpacity, StyleSheet } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { Icon } from '@ant-design/react-native';
 import { useTranslations } from '../hooks/Common/useTranslations';
 
@@ -12,7 +12,8 @@ import Routes from '../utils/Route';
 const Stack = createStackNavigator();
 const SharedStack = memo(() => {
   const t = useTranslations();
-  const navigation = useNavigation();
+  const { toggleDrawer, goBack } = useNavigation();
+  const { params } = useRoute();
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -23,9 +24,12 @@ const SharedStack = memo(() => {
           headerLeft: () => (
             <TouchableOpacity
               style={styles.btnMenu}
-              onPress={() => navigation.toggleDrawer()}
+              onPress={() => (params?.isMainSource ? toggleDrawer() : goBack())}
             >
-              <Icon name={'menu'} color={Colors.Black} />
+              <Icon
+                name={params?.isMainSource ? 'menu' : 'arrow-left'}
+                color={Colors.Black}
+              />
             </TouchableOpacity>
           ),
           headerTitleAlign: 'left',