@eohjsc/react-native-smart-city 0.7.21 → 0.7.23

package/src/screens/Sharing/Components/SubUnitTreeView.js

@@ -0,0 +1,68 @@
+import {
+  AccessibilityLabel,
+  Constants,
+  normalize,
+} from '../../../configs/Constants';
+import { FlatList, Text, View } from 'react-native';
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import SubUnitItem from './SubUnitItem';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const SubUnitTreeNode = ({ dataNode, render }) => {
+  return (
+    <View>
+      {render &&
+        render({
+          item: dataNode,
+          childrenRender: (dataNode?.children || []).map((child) => (
+            <SubUnitTreeNode key={child.key} dataNode={child} render={render} />
+          )),
+        })}
+    </View>
+  );
+};
+
+const SubUnitTreeView = ({ data, render, selectedKeys, onSelect }) => {
+  const t = useTranslations();
+  const { key, children: subUnitsData } = data[0];
+  return (
+    <View>
+      <FlatList
+        data={subUnitsData}
+        renderItem={({ item }) => (
+          <SubUnitTreeNode dataNode={item} render={render} />
+        )}
+        extraData={subUnitsData}
+        keyExtractor={(item) => item.key}
+        ListHeaderComponent={
+          subUnitsData.length && (
+            <SubUnitItem
+              isChecked={selectedKeys.includes(key)}
+              item={data[0]}
+              onSelect={onSelect}
+            />
+          )
+        }
+        ListEmptyComponent={() => (
+          <Text
+            style={styles.textNodata}
+            accessibilityLabel={AccessibilityLabel.TEXT_NO_DATA_STATIONS}
+          >
+            {t('no_data')}
+          </Text>
+        )}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  textNodata: {
+    alignSelf: 'center',
+    marginTop: normalize(Constants.height * 0.3),
+  },
+});
+
+export default SubUnitTreeView;

package/src/screens/Sharing/Components/TitleCheckBox.js

@@ -1,51 +1,33 @@
-import React, { useEffect, useState } from 'react';
-import { View, Text } from 'react-native';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import { CheckBoxCustom } from '.';
-import t from '../../../hooks/Common/useTranslations';
-import styles from './Styles/TitleCheckBoxStyles';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Text } from '../../../commons';
+import { View } from 'react-native';
 
-const TitleCheckBox = ({
-  isChecked = false,
-  onPress,
-  title = '',
-  id,
-  wrapCheckBoxStyle,
-  wrapStyle,
-  titleStyle,
-  idGroup,
-  isConfig,
-  isControl,
-}) => {
-  const [checked, setChecked] = useState(isChecked);
+const TitleCheckBox = ({ isChecked, item, onSelect, checkBoxStyle }) => {
+  const { label, key } = item;
   const handleOnPress = () => {
-    setChecked(!checked);
-    onPress && onPress(idGroup, !checked, id);
+    onSelect(item, !isChecked);
   };
-
-  useEffect(() => {
-    isChecked !== checked && setChecked(isChecked);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isChecked]);
-
   return (
-    <View style={[styles.wrap, wrapStyle]}>
-      <View style={styles.wrapRow}>
-        <CheckBoxCustom
-          isChecked={checked}
-          onPress={handleOnPress}
-          wrapStyle={wrapCheckBoxStyle}
-          id={idGroup}
-        />
-        <Text onPress={handleOnPress} style={[styles.title, titleStyle]}>
-          {title}
-        </Text>
-      </View>
-      <View>
-        {isControl && <Text>{t('can_control')}</Text>}
-        {isConfig && <Text>{t('view_only')}</Text>}
-      </View>
+    <View style={styles.wrapRow}>
+      <CheckBoxCustom
+        isChecked={isChecked}
+        onPress={handleOnPress}
+        wrapStyle={checkBoxStyle}
+        accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.CHECK_BOX_CUSTOM}-${key}`}
+      />
+      <Text onPress={handleOnPress}>{label}</Text>
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  wrapRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
 export default TitleCheckBox;

package/src/screens/Sharing/Components/__test__/ItemChangeRole.test.js

@@ -1,15 +1,15 @@
-import React from 'react';
-import { create, act } from 'react-test-renderer';
+import { act, create } from 'react-test-renderer';
 
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
 import ItemChangeRole from '../ItemChangeRole';
+import React from 'react';
+import { SCProvider } from '../../../../context';
 import { TouchableOpacity } from 'react-native';
+import { mockSCStore } from '../../../../context/mockStore';
 
 const mockOnPress = jest.fn();
-const wrapComponent = () => (
+const wrapComponent = (disabled) => (
   <SCProvider initState={mockSCStore({})}>
-    <ItemChangeRole onPress={mockOnPress} />
+    <ItemChangeRole onPress={mockOnPress} disabled={disabled} />
   </SCProvider>
 );
 
@@ -17,7 +17,7 @@ describe('test ItemChangeRole', () => {
   it('test ItemChangeRole', async () => {
     let tree;
     await act(async () => {
-      tree = await create(wrapComponent());
+      tree = await create(wrapComponent(true));
     });
     const instance = tree.root;
     const touchableOpacity = instance.findAllByType(TouchableOpacity);

package/src/screens/Sharing/Components/__test__/ShareDeviceSelector.test.js

@@ -0,0 +1,298 @@
+import API from '../../../../configs/API';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+import { Alert } from 'react-native';
+import ConfigItem from '../ConfigItem';
+import DeviceItem from '../DeviceItem';
+import { IconOutline } from '@ant-design/icons-react-native';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import { SCProvider } from '../../../../context';
+import ShareDeviceSelector from '../ShareDeviceSelector';
+import SubUnitItem from '../SubUnitItem';
+import SubUnitTreeView from '../SubUnitTreeView';
+import { ViewButtonBottom } from '../../../../commons';
+import { act } from '@testing-library/react-hooks';
+import api from '../../../../utils/Apis/axios';
+import { create } from 'react-test-renderer';
+import { mockSCStore } from '../../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
+
+jest.spyOn(Alert, 'alert').mockImplementation(() => {});
+const mock = new MockAdapter(api.axiosInstance);
+const mockOnRightClick = jest.fn();
+
+const wrapComponent = (unitId, initKeys = undefined) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ShareDeviceSelector
+      unitId={unitId}
+      onRightClick={mockOnRightClick}
+      rightTitle={'done'}
+      initialSelectedKeys={initKeys}
+    />
+  </SCProvider>
+);
+describe('test ShareDeviceSelector', () => {
+  const unitId = 1;
+  let listDevices = [];
+  let tree;
+  beforeEach(() => {
+    mockOnRightClick.mockClear();
+    Alert.alert.mockClear();
+    listDevices = [
+      {
+        id: 1,
+        name: 'Sub unit 1',
+        devices: [
+          {
+            id: 1,
+            icon_kit: 'https://xxx.png',
+            actions: [{ id: 1, name: 'action 1' }],
+            read_configs: [{ id: 1, name: 'config 1' }],
+            name: 'child1',
+          },
+          {
+            id: 2,
+            actions: [{ id: 2, name: 'action 2' }],
+            read_configs: [{ id: 2, name: 'config 2' }],
+            name: 'child2',
+          },
+          {
+            id: 3,
+            actions: [],
+            read_configs: [],
+            name: 'child3',
+          },
+        ],
+      },
+      {
+        id: 2,
+        name: 'Sub unit 2',
+        devices: [
+          {
+            id: 4,
+            icon: 'acb.png',
+            actions: [{ id: 3, name: 'action 3' }],
+            read_configs: [{ id: 3, name: 'config 3' }],
+            name: 'child1',
+          },
+        ],
+      },
+    ];
+  });
+
+  const clickChooseAllDevices = async (instance, status) => {
+    const chooseAllDevices = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.CHECK_BOX_CUSTOM}-all`
+    );
+    await act(async () => {
+      chooseAllDevices.props.onPress();
+    });
+    expect(chooseAllDevices.props.isChecked).toEqual(status);
+  };
+  const clickChooseDevice = async (instance, deviceId, status) => {
+    const chooseDevice = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.SHARE_DEVICE.NAME_END_DEVICE}-device-${deviceId}`
+    );
+    await act(async () => {
+      chooseDevice.props.onPress();
+    });
+    const iconCheck = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.SHARE_DEVICE.ICON_CHECK}-device-${deviceId}` &&
+        el.type === IconOutline
+    );
+    expect(iconCheck).toHaveLength(status ? 1 : 0);
+  };
+  const clickChooseConfig = async (instance, configId, status) => {
+    const chooseConfig = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.CHECK_BOX_CUSTOM}-config-${configId}`
+    );
+    await act(async () => {
+      chooseConfig.props.onPress();
+    });
+    expect(chooseConfig.props.isChecked).toEqual(status);
+  };
+  const clickChooseAction = async (instance, actionId, status) => {
+    const chooseAction = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.CHECK_BOX_CUSTOM}-action-${actionId}`
+    );
+    await act(async () => {
+      chooseAction.props.onPress();
+    });
+    expect(chooseAction.props.isChecked).toEqual(status);
+  };
+  const clickExpandDevice = async (instance, deviceId, status) => {
+    const expandDevice = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.SHARE_DEVICE.EXPAND_END_DEVICE}-device-${deviceId}`
+    );
+    await act(async () => {
+      expandDevice.props.onPress();
+    });
+    expect(expandDevice.props.name).toEqual(status);
+  };
+  const clickSubmitSharePermission = async (instance, dataSubmit = null) => {
+    const submitSharePermission = instance.findByType(ViewButtonBottom);
+    await act(async () => {
+      submitSharePermission.props.onRightClick();
+    });
+    if (!dataSubmit) {
+      expect(mockOnRightClick).not.toHaveBeenCalled();
+      expect(Alert.alert.mock.calls[0][1]).toEqual(
+        'Please choose at least one device.'
+      );
+      return;
+    }
+    expect(mockOnRightClick).toHaveBeenCalledTimes(1);
+    expect(mockOnRightClick).toHaveBeenCalledWith(dataSubmit);
+  };
+  test('render all devices', async () => {
+    mock.onGet(API.SHARE.UNIT_PERMISSIONS_v2(unitId)).reply(200, listDevices);
+    await act(async () => {
+      tree = await create(wrapComponent(unitId));
+    });
+
+    const instance = tree.root;
+    expect(instance.findAllByType(ShareDeviceSelector)).toHaveLength(1);
+    expect(instance.findAllByType(ViewButtonBottom)).toHaveLength(1);
+    expect(instance.findAllByType(SubUnitTreeView)).toHaveLength(1);
+    await clickChooseAllDevices(instance, true);
+    await clickExpandDevice(instance, 1, 'up');
+    await clickExpandDevice(instance, 2, 'up');
+    await clickExpandDevice(instance, 4, 'up');
+    expect(instance.findAllByType(SubUnitItem)).toHaveLength(3); //All + 2 subunits
+    expect(instance.findAllByType(DeviceItem)).toHaveLength(4);
+    expect(instance.findAllByType(ConfigItem)).toHaveLength(6);
+    const dataSubmit = {
+      read_permissions: [
+        { id: 1, values: [1] },
+        { id: 2, values: [2] },
+        { id: 3, values: [] },
+        { id: 4, values: [3] },
+      ],
+      control_permissions: [
+        { id: 1, values: [1] },
+        { id: 2, values: [2] },
+        { id: 4, values: [3] },
+      ],
+    };
+    await clickSubmitSharePermission(instance, dataSubmit);
+  });
+  test('render empty subunit', async () => {
+    mock.onGet(API.SHARE.UNIT_PERMISSIONS_v2(unitId)).reply(200, []);
+    await act(async () => {
+      tree = await create(wrapComponent(unitId));
+    });
+    const instance = tree.root;
+    const noDataText = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.TEXT_NO_DATA_STATIONS
+    );
+    expect(noDataText).toBeDefined();
+    expect(instance.findAllByType(SubUnitItem)).toHaveLength(0);
+    expect(instance.findAllByType(DeviceItem)).toHaveLength(0);
+    expect(instance.findAllByType(ConfigItem)).toHaveLength(0);
+    await clickSubmitSharePermission(instance);
+  });
+  test('click choose end device and config', async () => {
+    mock.onGet(API.SHARE.UNIT_PERMISSIONS_v2(unitId)).reply(200, listDevices);
+    await act(async () => {
+      tree = await create(wrapComponent(unitId));
+    });
+    const instance = tree.root;
+    expect(instance.findAllByType(SubUnitItem)).toHaveLength(3); //All + 2 subunits
+    expect(instance.findAllByType(DeviceItem)).toHaveLength(4);
+    await clickChooseDevice(instance, 1, true);
+    await clickExpandDevice(instance, 1, 'up');
+    expect(instance.findAllByType(ConfigItem)).toHaveLength(2);
+    const dataSubmit = {
+      read_permissions: [{ id: 1, values: [1] }],
+      control_permissions: [{ id: 1, values: [1] }],
+    };
+    await clickSubmitSharePermission(instance, dataSubmit);
+  });
+  test('render with init keys and go back', async () => {
+    mock.onGet(API.SHARE.UNIT_PERMISSIONS_v2(unitId)).reply(200, listDevices);
+    await act(async () => {
+      tree = await create(wrapComponent(unitId, ['config-3', 'action-3']));
+    });
+    const instance = tree.root;
+    expect(instance.findAllByType(SubUnitItem)).toHaveLength(3); //All + 2 subunits
+    expect(instance.findAllByType(DeviceItem)).toHaveLength(4);
+    const iconCheck = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.SHARE_DEVICE.ICON_CHECK}-device-4` &&
+        el.type === IconOutline
+    );
+    expect(iconCheck).toHaveLength(1);
+    await clickExpandDevice(instance, 4, 'up');
+    const config = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.CHECK_BOX_CUSTOM}-config-3`
+    );
+    const action = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.CHECK_BOX_CUSTOM}-action-3`
+    );
+    expect(config.props.isChecked).toEqual(true);
+    expect(action.props.isChecked).toEqual(true);
+    await clickChooseDevice(instance, 4, false);
+
+    const mockGoBack = useNavigation().goBack;
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    await act(() => {
+      viewButtonBottom.props.onLeftClick();
+    });
+    expect(mockGoBack).toHaveBeenCalledTimes(1);
+  });
+  test('test 1 config id in 2 device', async () => {
+    listDevices[0].devices[1].actions.push({ id: 3, name: 'action-3' });
+    mock.onGet(API.SHARE.UNIT_PERMISSIONS_v2(unitId)).reply(200, listDevices);
+    await act(async () => {
+      tree = await create(wrapComponent(unitId));
+    });
+    const instance = tree.root;
+    expect(instance.findAllByType(SubUnitItem)).toHaveLength(3); //All + 2 subunits
+    expect(instance.findAllByType(DeviceItem)).toHaveLength(4);
+
+    await clickExpandDevice(instance, 1, 'up');
+    await clickChooseConfig(instance, 1, true);
+    await clickChooseAction(instance, 1, true);
+
+    await clickExpandDevice(instance, 2, 'up');
+    await clickExpandDevice(instance, 4, 'up');
+
+    const actions = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.CHECK_BOX_CUSTOM}-action-3`
+    );
+    expect(actions).toHaveLength(2);
+    await act(async () => {
+      actions[0].props.onPress();
+    });
+    expect(actions[0].props.isChecked).toEqual(true);
+
+    const dataSubmit = {
+      read_permissions: [{ id: 1, values: [1] }],
+      control_permissions: [
+        { id: 1, values: [1] },
+        { id: 4, values: [3] },
+      ],
+    };
+    await clickSubmitSharePermission(instance, dataSubmit);
+  });
+});

package/src/screens/Sharing/Components/index.js

@@ -1,4 +1,17 @@
 import CheckBoxCustom from './CheckBoxCustom';
+import ConfigItem from './ConfigItem';
+import DeviceItem from './DeviceItem';
+import ShareDeviceSelector from './ShareDeviceSelector';
+import SubUnitItem from './SubUnitItem';
+import SubUnitTreeView from './SubUnitTreeView';
 import TitleCheckBox from './TitleCheckBox';
 
-export { CheckBoxCustom, TitleCheckBox };
+export {
+  CheckBoxCustom,
+  TitleCheckBox,
+  ConfigItem,
+  DeviceItem,
+  SubUnitItem,
+  SubUnitTreeView,
+  ShareDeviceSelector,
+};

package/src/screens/Sharing/InfoMemberUnit.js

@@ -1,32 +1,32 @@
-import React, { useState, useCallback, useEffect, memo, useMemo } from 'react';
-import { View, ActivityIndicator, Image, TouchableOpacity } from 'react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import { API, Colors, Images, SCConfig } from '../../configs';
+import { ActivityIndicator, Image, TouchableOpacity, View } from 'react-native';
+import { AlertAction, ViewButtonBottom } from '../../commons';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useDataMember, useStateAlertAction } from './hooks';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+
+import { AccessibilityLabel } from '../../configs/Constants';
 import { CircleView } from '../../commons/CircleView';
-import Text from '../../commons/Text';
-import { shortEmailName } from '../../utils/Utils';
-import { Colors, Images, API, SCConfig } from '../../configs';
 import { HeaderCustom } from '../../commons/Header';
-import RowMemberInfo from '../GuestInfo/components/RowGuestInfo';
-import { useIsOwnerOfUnit } from '../../hooks/Common';
-import { axiosGet } from '../../utils/Apis/axios';
-import { AlertAction, ViewButtonBottom } from '../../commons';
-import { useStateAlertAction, useDataMember } from './hooks';
 import ItemChangeRole from './Components/ItemChangeRole';
 import MemberSvg from '../../Images/Common/member.svg';
+import ModalPopupCT from '../../commons/ModalPopupCT';
 import OwnerSvg from '../../Images/Common/owner.svg';
-import styles from './Styles/inforMemberUnitStyles';
-import { useNavigation, useIsFocused } from '@react-navigation/native';
 import Routes from '../../utils/Route';
-import { AccessibilityLabel } from '../../configs/Constants';
-import ModalPopupCT from '../../commons/ModalPopupCT';
+import RowMemberInfo from '../GuestInfo/components/RowGuestInfo';
+import Text from '../../commons/Text';
+import { axiosGet } from '../../utils/Apis/axios';
+import { shortEmailName } from '../../utils/Utils';
+import styles from './Styles/inforMemberUnitStyles';
+import { useIsOwnerOfUnit } from '../../hooks/Common';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const InfoMemberUnit = memo(({ route }) => {
   const t = useTranslations();
-  const { member, unit } = route?.params ||
-    {} || {
-      member: {},
-      unit: {},
-    };
+  const { member, unit } = route?.params || {
+    member: {},
+    unit: {},
+  };
   const { navigate } = useNavigation();
   const [isLoading, setIsLoading] = useState(true);
   const [isShowWarning, setIsShowWarning] = useState(false);