@eohjsc/react-native-smart-city 0.2.98 → 0.2.99

package/README.md

@@ -1,19 +1,26 @@
 ## react-native-smart-city
 
 ## Getting started
+
 1. Install package dependencies:
-  - Using [Yarn](https://yarnpkg.com/): `yarn add react-native-reanimated@^1.10.1`
+
+- Using [Yarn](https://yarnpkg.com/): `yarn add react-native-reanimated@^1.10.1`
 
 2. Install:
-  - Using [npm](https://www.npmjs.com/#getting-started): `npm install @eohjsc/react-native-smart-city --save`
-  - Using [Yarn](https://yarnpkg.com/): `yarn add @eohjsc/react-native-smart-city`
+
+- Using [npm](https://www.npmjs.com/#getting-started): `npm install @eohjsc/react-native-smart-city --save`
+- Using [Yarn](https://yarnpkg.com/): `yarn add @eohjsc/react-native-smart-city`
 
 3. Compile application using react-native run-android
+
 ### Mostly automatic installation
+
 `$ react-native link @eohjsc/react-native-smart-city`
 
 ## Usage
+
 1. StackNavigator
+
 ```javascript
 import {
   UnitStack,
@@ -30,7 +37,7 @@ import {
 } from '@eohjsc/react-native-smart-city';
 import { createStackNavigator } from '@react-navigation/stack';
 
-// TODO: What to do with the module?   
+// TODO: What to do with the module?
 const Stack = createStackNavigator();
 
 const YourStack = () => {
@@ -84,7 +91,9 @@ const MainTab = () => {
   );
 };
 ```
+
 2. Use components
+
 ```javascript
 import React from 'react';
 import { View } from 'react-native';
@@ -93,13 +102,15 @@ import { MyPinnedSharedUnit, MyUnit } from '@eohjsc/react-native-smart-city';
 const MyScreen = () => {
   return (
     <View>
-        <MyUnit />
-        <MyPinnedSharedUnit />
+      <MyUnit />
+      <MyPinnedSharedUnit />
     </View>
   );
 };
 ```
+
 3. Trigger quick action
+
 ```javascript
 import React from 'react';
 import { View, Button } from 'react-native';
@@ -126,23 +137,33 @@ export const MyFunctionalComponent = () => {
     lg_actions: [],
     name: 'Garage Up',
   };
-  const handleQuickAction = async() => {
+  const handleQuickAction = async () => {
     const result = await sendRemoteCommand(sensor, action); // Action Garage Up
-    if (result){
-      console.log('Successful control')
-    }else {
-      console.log('Control failed')
+    if (result) {
+      console.log('Successful control');
+    } else {
+      console.log('Control failed');
     }
   };
   return (
     <View>
-      <Button onPress={handleQuickAction} title="Example trigger quick action control Garage Up" />
+      <Button
+        onPress={handleQuickAction}
+        title="Example trigger quick action control Garage Up"
+      />
     </View>
   );
 };
 ```
-- sendRemoteCommand user needs to `have permission to control the device`, you pass in the `sensor and action` to it and it will run after calling render.  
-- `sensor` is a device in your Unit and action is the `action` key of the device.. 
+
+- sendRemoteCommand user needs to `have permission to control the device`, you pass in the `sensor and action` to it and it will run after calling render.
+- `sensor` is a device in your Unit and action is the `action` key of the device..
 - You can take out the sensor and action from your Unit when calling the `API.UNIT.UNIT_DETAIL(unitId)` it will return all devices in 1 unit.
 - Or get sensor from `API.SENSOR.DISPLAY(sensor.id)` returns all actions of 1 device.
 - Refer YourProjectPath /node_modules/@eohjsc/react-native-smart-city/src/screens/Unit/Detail.js
+
+## Sync file to EoH source
+
+```
+  yarn install && yarn watch
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.98",
+  "version": "0.2.99",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -38,8 +38,8 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   }, [configValues, config, keep_track_config]);
 
   const doActionAndWatchConfig = useCallback(
-    (actionData, actionValue, actionName) => {
-      doAction(
+    async (actionData, actionValue, actionName) => {
+      await doAction(
         actionData,
         JSON.stringify({ temperature: actionValue }),
         actionName

package/src/commons/ActionGroup/OnOffSmartLock/OnOffSmartLock.js

@@ -17,7 +17,7 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
   const [isUnlock, setisUnlock] = useState(true);
   const [configValues] = useConfigGlobalState('configValues');
 
-  const handleActionSmartLock = useCallback(() => {
+  const handleActionSmartLock = useCallback(async () => {
     if (action_on_data && action_off_data) {
       if (isUnlock) {
         let actionName = `${
@@ -25,14 +25,14 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
         } ${actionGroup?.title?.toLowerCase()} lock`;
         actionName = actionName.replace(/\s+/g, ' ').trim();
         const dataLock = { door_lock: 0 };
-        doAction(action_on_data, JSON.stringify(dataLock), actionName);
+        await doAction(action_on_data, JSON.stringify(dataLock), actionName);
       } else {
         let actionName = `${
           sensor?.name
         } ${actionGroup?.title?.toLowerCase()} unlock`;
         actionName = actionName.replace(/\s+/g, ' ').trim();
         const dataUnlock = { door_lock: 1 };
-        doAction(action_off_data, JSON.stringify(dataUnlock), actionName);
+        await doAction(action_off_data, JSON.stringify(dataUnlock), actionName);
       }
       if (sensor?.is_managed_by_backend) {
         configuration.config &&

package/src/commons/ActionGroup/OnOffTemplate/OnOffSimpleTemplate.js

@@ -11,8 +11,6 @@ const OnOffSimpleTemplate = ({
   triggerAction,
   actionGroup,
   disabled,
-  valueOfSwitch,
-  checkValueOfSwitch,
 }) => {
   return (
     <View style={styles.wrap}>
@@ -26,7 +24,7 @@ const OnOffSimpleTemplate = ({
           thumbColor={isOn ? Colors.White : Colors.Gray6}
           ios_backgroundColor={Colors.Gray4}
           onValueChange={triggerAction}
-          value={checkValueOfSwitch ? !!isOn : valueOfSwitch}
+          value={!!isOn}
           disabled={disabled}
         />
       )}

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -1,19 +1,10 @@
-import React, {
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { DEVICE_TYPE } from '../../../configs/Constants';
 
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { useConfigGlobalState } from '../../../iot/states';
 import OnOffButtonTemplate from './OnOffButtonTemplate';
 import OnOffSimpleTemplate from './OnOffSimpleTemplate';
-import { SCContext } from '../../../context';
-import { Action } from '../../../context/actionType';
 
 const getComponent = (template) => {
   switch (template) {
@@ -30,13 +21,9 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
   const { action_data, action_on_data, action_off_data } = configuration;
   const [isOn, setIsOn] = useState(null);
-  const [valueOfSwitch, setValueOfSwitch] = useState(false);
-  const [checkValueOfSwitch, setCheckValueOfSwitch] = useState(true);
-  //checkValueOfSwitch to check the value real-time of Switch when re-entering the screen
 
   // eslint-disable-next-line no-unused-vars
   const [configValues, _] = useConfigGlobalState('configValues');
-  const { setAction } = useContext(SCContext);
 
   const actionName = useCallback(
     (text) => {
@@ -47,62 +34,48 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     },
     [actionGroup?.title, sensor?.name]
   );
-  const triggerAction = useCallback(() => {
-    if (actionGroup?.template === 'OnOffSimpleActionTemplate') {
-      setAction(Action.IS_FULL_LOADING, true);
-    }
-    setCheckValueOfSwitch(false);
+  const triggerAction = useCallback(async () => {
     switch (sensor?.device_type) {
       case DEVICE_TYPE.ZIGBEE:
         if (action_on_data && action_off_data) {
           if (isOn) {
-            doAction(
+            await doAction(
               action_off_data,
               JSON.stringify({ state: 0 }),
               actionName('off')
             );
           } else {
-            doAction(
+            await doAction(
               action_on_data,
               JSON.stringify({ state: 1 }),
               actionName('on')
             );
           }
         }
-        return;
+        break;
       default:
         if (action_data) {
           if (isOn) {
-            doAction(action_data, false);
+            await doAction(action_data, false);
           } else {
-            doAction(action_data, true);
+            await doAction(action_data, true);
           }
         }
         if (action_on_data && action_off_data) {
-          setValueOfSwitch(!isOn);
           if (isOn) {
-            doAction(action_off_data, null, actionName('off'));
+            await doAction(action_off_data, null, actionName('off'));
           } else {
-            doAction(action_on_data, null, actionName('on'));
-          }
-        }
-        if (sensor?.is_managed_by_backend) {
-          configuration?.config &&
-            sensor?.device_type !== 'GOOGLE_HOME' &&
-            watchMultiConfigs([configuration?.config]);
-          if (actionGroup?.template === 'OnOffSimpleActionTemplate') {
-            const cleanTimeout = setTimeout(() => {
-              setAction(Action.IS_FULL_LOADING, false);
-              clearTimeout(cleanTimeout);
-            }, 2000);
+            await doAction(action_on_data, null, actionName('on'));
           }
-        } else {
-          setValueOfSwitch(isOn);
         }
-        return;
+        break;
+    }
+    if (sensor?.is_managed_by_backend) {
+      configuration?.config &&
+        sensor?.device_type !== 'GOOGLE_HOME' &&
+        watchMultiConfigs([configuration?.config]);
     }
   }, [
-    actionGroup.template,
     actionName,
     action_data,
     action_off_data,
@@ -112,7 +85,6 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     isOn,
     sensor?.device_type,
     sensor?.is_managed_by_backend,
-    setAction,
   ]);
 
   useEffect(() => {
@@ -150,8 +122,6 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
         triggerAction={triggerAction}
         actionGroup={actionGroup}
         disabled={!action_data && !action_on_data && !action_off_data}
-        valueOfSwitch={valueOfSwitch}
-        checkValueOfSwitch={checkValueOfSwitch}
       />
     </>
   );

package/src/commons/ActionGroup/TwoButtonTemplate/index.js

@@ -28,12 +28,12 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     [actionGroup?.title, sensor?.name]
   );
 
-  const triggerAction1 = useCallback(() => {
+  const triggerAction1 = useCallback(async () => {
     if (button1?.action_on_data && button1?.action_off_data) {
       if (isOn) {
-        doAction(button1?.action_off_data, null, actionName('off'));
+        await doAction(button1?.action_off_data, null, actionName('off'));
       } else {
-        doAction(button1?.action_on_data, null, actionName('on'));
+        await doAction(button1?.action_on_data, null, actionName('on'));
       }
     }
     if (sensor?.is_managed_by_backend) {
@@ -51,12 +51,12 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     sensor?.device_type,
   ]);
 
-  const triggerAction2 = useCallback(() => {
+  const triggerAction2 = useCallback(async () => {
     if (button2?.action_on_data && button2?.action_off_data) {
       if (isStart) {
-        doAction(button2?.action_off_data, null, actionName('stop'));
+        await doAction(button2?.action_off_data, null, actionName('stop'));
       } else {
-        doAction(button2?.action_on_data, null, actionName('start'));
+        await doAction(button2?.action_on_data, null, actionName('start'));
       }
     }
     if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {

package/src/commons/FieldTemplate/ChooseUserField/ChooseFieldStyles.js

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    paddingTop: 30,
+  },
+  textHeadLine: {
+    fontSize: 16,
+    color: Colors.Gray9,
+    fontWeight: 'bold',
+  },
+  buttonValue: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  value: {
+    marginRight: 20,
+    fontSize: 14,
+    color: Colors.Gray8,
+  },
+});

package/src/commons/FieldTemplate/ChooseUserField/ChoosePopup.js

@@ -0,0 +1,96 @@
+import React, { useState, useCallback } from 'react';
+import { View, ScrollView, TouchableOpacity } from 'react-native';
+import { Colors } from '../../../configs';
+import { TESTID } from '../../../configs/Constants';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import BottomButtonView from '../../BottomButtonView';
+import { ModalCustom } from '../../Modal';
+import RadioCircle from '../../RadioCircle';
+import Text from '../../Text';
+
+import styles from './ChoosePopupStyles';
+
+const RowMember = ({ member, isSelected, onSelect }) => {
+  const handleOnPress = useCallback(() => {
+    onSelect(member);
+  }, [onSelect, member]);
+  return (
+    <TouchableOpacity
+      style={styles.row}
+      onPress={handleOnPress}
+      testID={TESTID.CHOOSE_ITEM}
+    >
+      <RadioCircle active={isSelected} />
+      <View style={styles.wrapText}>
+        <Text type="H4" color={Colors.Gray9}>
+          {member.name
+            ? member.name
+            : member.phone_number
+            ? member.phone_number
+            : member.email}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const ChoosePopup = ({ isVisible, title, onHide, members, onApply }) => {
+  const t = useTranslations();
+  const [selectedUsers, setSelectedUsers] = useState({});
+
+  const handleOnSelectUser = useCallback((user) => {
+    setSelectedUsers(user);
+  }, []);
+
+  const handleOnApply = useCallback(() => {
+    onApply(selectedUsers);
+    onHide();
+  }, [selectedUsers, onApply, onHide]);
+
+  const handleOnCancel = useCallback(() => {
+    onHide();
+  }, [onHide]);
+
+  return (
+    <ModalCustom
+      testID={TESTID.CHOOSE_POPUP}
+      isVisible={isVisible}
+      onBackButtonPress={handleOnCancel}
+      onBackdropPress={handleOnCancel}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+      animationIn={'zoomIn'}
+      animationOut={'zoomOut'}
+      style={styles.wrapPopup}
+    >
+      <View style={[styles.popup, styles.heigh50percent]}>
+        <Text type="H4" style={styles.title} bold>
+          {title}
+        </Text>
+        <View style={styles.separator} />
+        <ScrollView>
+          {members.map((member, index) => (
+            <RowMember
+              key={index}
+              member={member}
+              isSelected={selectedUsers.id === member.id}
+              onSelect={handleOnSelectUser}
+            />
+          ))}
+        </ScrollView>
+        <View style={styles.separator} />
+        <BottomButtonView
+          rowButton={true}
+          testIDPrefix={TESTID.CHOOSE_POPUP}
+          style={styles.bottomButtonView}
+          secondaryTitle={t('cancel')}
+          mainTitle={t('apply')}
+          onPressSecondary={handleOnCancel}
+          onPressMain={handleOnApply}
+        />
+      </View>
+    </ModalCustom>
+  );
+};
+
+export default ChoosePopup;

package/src/commons/FieldTemplate/ChooseUserField/ChoosePopupStyles.js

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+export default StyleSheet.create({
+  wrapPopup: {
+    marginHorizontal: 16,
+  },
+  popup: {
+    backgroundColor: Colors.White,
+    width: '100%',
+    height: (Constants.height * 80) / 100,
+    padding: 24,
+    paddingBottom: 100,
+    borderRadius: 10,
+  },
+  heigh50percent: {
+    height: (Constants.height * 50) / 100,
+  },
+  title: {
+    marginBottom: 16,
+  },
+  bottomButtonView: {
+    marginBottom: 24,
+  },
+  separator: {
+    height: 0.5,
+    backgroundColor: Colors.Gray4,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  wrapText: {
+    flex: 1,
+    paddingVertical: 8,
+    marginRight: 24,
+    marginLeft: 16,
+  },
+});

package/src/commons/FieldTemplate/ChooseUserField/__test__/index.test.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import axios from 'axios';
+import { act, create } from 'react-test-renderer';
+import { TESTID } from '../../../../configs/Constants';
+import { mockSCStore } from '../../../../context/mockStore';
+import { SCProvider } from '../../../../context';
+import ChooseUserField from '../index';
+import { TouchableOpacity } from 'react-native';
+import { ModalCustom } from '../../../Modal';
+
+jest.mock('axios');
+
+const wrapComponent = (
+  unit = { id: 1 },
+  dataItem = {
+    type: 'choose_user',
+    key: 'user_id',
+    action: {
+      type: 'action_zigbee',
+      id: 1,
+    },
+  },
+  index = 0,
+  setDataForm,
+  dataForm = [
+    {
+      type: 'choose_user',
+      key: 'user_id',
+      action: {
+        type: 'action_zigbee',
+        id: 1,
+      },
+    },
+  ]
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ChooseUserField
+      unit={unit}
+      dataItem={dataItem}
+      index={index}
+      setDataForm={jest.fn()}
+      dataForm={dataForm}
+    />
+  </SCProvider>
+);
+
+describe('Test ChooseUserField', () => {
+  let tree;
+
+  afterEach(() => {
+    axios.get.mockClear();
+  });
+
+  const onPressCancel = async (instance, popup) => {
+    const buttonCancel = instance.find(
+      (el) =>
+        el.props.testID ===
+          TESTID.CHOOSE_POPUP + TESTID.BOTTOM_VIEW_SECONDARY &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      await buttonCancel.props.onPress();
+    });
+    expect(popup.props.isVisible).toBeFalsy();
+  };
+
+  const onPressApply = async (instance, popup) => {
+    const buttonApply = instance.find(
+      (el) =>
+        el.props.testID === TESTID.CHOOSE_POPUP + TESTID.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      await buttonApply.props.onPress();
+    });
+    expect(popup.props.isVisible).toBeFalsy();
+  };
+
+  test('render ChooseUserField handleOnApply', async () => {
+    const response_unit_members = {
+      status: 200,
+      data: [{ id: 1, name: 'Ken' }],
+    };
+
+    axios.get.mockImplementation(() => {
+      return response_unit_members;
+    });
+    await act(async () => {
+      tree = create(wrapComponent());
+    });
+
+    const instance = tree.root;
+
+    const ChooseField = instance.find(
+      (item) =>
+        item.props.testID === TESTID.CHOOSE_FIELD &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      await ChooseField.props.onPress();
+    });
+
+    const popup = instance.find(
+      (item) =>
+        item.props.testID === TESTID.CHOOSE_POPUP && item.type === ModalCustom
+    );
+    expect(popup.props.isVisible).toBeTruthy();
+    await onPressCancel(instance, popup);
+    await onPressApply(instance, popup);
+  });
+});

package/src/commons/FieldTemplate/ChooseUserField/index.js

@@ -0,0 +1,62 @@
+import React, { memo, useEffect, useState } from 'react';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { TouchableOpacity, View } from 'react-native';
+
+import styles from './ChooseFieldStyles';
+import ChoosePopup from './ChoosePopup';
+import { useBoolean } from '../../../hooks/Common';
+import { axiosGet } from '../../../utils/Apis/axios';
+import { API, Colors } from '../../../configs';
+import { TESTID } from '../../../configs/Constants';
+import Text from '../../Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const ChooseUserField = ({ unit, dataItem, index, setDataForm, dataForm }) => {
+  const [showFilterPopup, setShowFilterPopup, setHideFilterPopup] =
+    useBoolean();
+  const [choose, setChoose] = useState({});
+  const [members, setMembers] = useState([]);
+  const t = useTranslations();
+  const fetchMembers = async () => {
+    const { success, data } = await axiosGet(API.SHARE.UNITS_MEMBERS(unit.id));
+    if (success) {
+      setMembers(data);
+    }
+  };
+
+  useEffect(() => {
+    if (!members.length) {
+      fetchMembers();
+      return;
+    }
+
+    dataItem.data = choose.id;
+    dataItem.valid = true;
+    dataItem[dataItem.action.type] = dataItem.action.id;
+    dataForm[index] = dataItem;
+    setDataForm([...dataForm]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [choose]);
+
+  return (
+    <View style={styles.wrapper}>
+      <Text style={styles.textHeadLine}>{t('choose_user')}</Text>
+      <TouchableOpacity
+        testID={TESTID.CHOOSE_FIELD}
+        style={styles.buttonValue}
+        onPress={setShowFilterPopup}
+      >
+        <Text style={styles.value}>{choose.name}</Text>
+        <IconOutline name="right" size={20} color={Colors.Gray8} />
+      </TouchableOpacity>
+      <ChoosePopup
+        isVisible={showFilterPopup}
+        onHide={setHideFilterPopup}
+        members={members}
+        title={t('choose_user')}
+        onApply={setChoose}
+      />
+    </View>
+  );
+};
+export default memo(ChooseUserField);