@eohjsc/react-native-smart-city 0.5.0 → 0.5.2-rc

package/src/screens/Sharing/UpdateShareDevice.js

@@ -0,0 +1,322 @@
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { View, FlatList, Alert, ActivityIndicator } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import ViewButtonBottom from '../../commons/ViewButtonBottom';
+import Text from '../../commons/Text';
+import styles from './Styles/SelectPermissionStyles';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import { objectIds } from '../../utils/Utils';
+import { API, Colors } from '../../configs';
+import { AccessibilityLabel } from '../../configs/Constants';
+import CheckBoxSubUnit from './Components/CheckBoxSubUnit';
+import EndDevice from './Components/EndDevice';
+
+const UpdateShareDevice = ({ route }) => {
+  const t = useTranslations();
+  const { unit, member } = route.params;
+  const navigation = useNavigation();
+  const [dataStations, setDataStations] = useState([]);
+  const [isTickAllDevices, setIsTickAllDevices] = useState(false);
+  const [expandedItemIds, setExpandedItemIds] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [needRefresh, setNeedRefresh] = useState(false);
+
+  const onTickAllDevices = (indexSubUnit, isChecked) => {
+    setIsTickAllDevices(isChecked);
+    const updatedDataStations = dataStations.map((station) => ({
+      ...station,
+      isChecked,
+      devices: station.devices.map((device) => ({
+        ...device,
+        isChecked,
+        actions: device.actions.map((action) => ({
+          ...action,
+          isChecked,
+        })),
+        read_configs: device.read_configs.map((config) => ({
+          ...config,
+          isChecked,
+        })),
+      })),
+    }));
+    setDataStations(updatedDataStations);
+  };
+
+  const onTickSubUnit = (indexSubUnit, isChecked) => {
+    dataStations[indexSubUnit] = {
+      ...dataStations[indexSubUnit],
+      isChecked,
+      devices: dataStations[indexSubUnit].devices.map((i) => ({
+        ...i,
+        isChecked,
+        actions: i.actions.map((j) => ({ ...j, isChecked })),
+        read_configs: i.read_configs.map((j) => ({ ...j, isChecked })),
+      })),
+    };
+    setDataStations(dataStations);
+    setIsTickAllDevices(!dataStations.some((object) => !object.isChecked));
+    setNeedRefresh(true);
+  };
+
+  const onTickEndDevice = (indexSubUnit, indexEndDevice, item, isChecked) => {
+    item.isChecked = isChecked;
+    item.actions = item.actions.map((j) => ({ ...j, isChecked }));
+    item.read_configs = item.read_configs.map((j) => ({ ...j, isChecked }));
+
+    dataStations[indexSubUnit].devices[indexEndDevice] = item;
+
+    dataStations[indexSubUnit] = {
+      ...dataStations[indexSubUnit],
+      isChecked:
+        dataStations[indexSubUnit].devices.length ===
+        dataStations[indexSubUnit].devices.filter((i) => i.isChecked).length,
+    };
+    setIsTickAllDevices(!dataStations.some((i) => !i.isChecked));
+    setDataStations(dataStations);
+    setNeedRefresh(true);
+  };
+
+  const onTickedChild = (
+    indexSubUnit,
+    indexEndDevice,
+    configId,
+    item,
+    isConfig,
+    isChecked
+  ) => {
+    const subUnit = dataStations[indexSubUnit];
+    const device = subUnit.devices[indexEndDevice];
+    const configs = item[`${isConfig ? 'read_configs' : 'actions'}`];
+    const child = configs.find((i) => i.id === configId);
+
+    child.isChecked = isChecked;
+    device.isChecked =
+      configs.length === configs.filter((i) => i.isChecked).length;
+
+    subUnit.isChecked =
+      subUnit.devices.length ===
+      subUnit.devices.filter((i) => i.isChecked).length;
+
+    setIsTickAllDevices(!dataStations.some((i) => !i.isChecked));
+    setDataStations(dataStations);
+    setNeedRefresh(true);
+  };
+  const toggleExpandEndDevice = (deviceItem) => () => {
+    setExpandedItemIds((ids) => {
+      const index = ids.indexOf(deviceItem.id);
+      if (index !== -1) {
+        return [...ids.slice(0, index), ...ids.slice(index + 1)];
+      } else {
+        return [...ids, deviceItem.id];
+      }
+    });
+  };
+
+  const expandEndDevice = (deviceItem) => () => {
+    if (!expandedItemIds.includes(deviceItem.id)) {
+      setExpandedItemIds((prev) => [...prev, deviceItem.id]);
+    }
+  };
+
+  const autoCheckedGroup = (stations, dataDeviceShared) => {
+    const { deviceIds, actionIds, configIds } = objectIds(dataDeviceShared);
+    const updatedStations = stations.map((station) => ({
+      ...station,
+      isChecked: station.devices.every((device) =>
+        deviceIds.includes(device.id)
+      ),
+      devices: station.devices.map((device) => ({
+        ...device,
+        isChecked: deviceIds.includes(device.id),
+        actions: device.actions.map((action) => ({
+          ...action,
+          isChecked: actionIds.includes(action.id),
+        })),
+        read_configs: device.read_configs.map((config) => ({
+          ...config,
+          isChecked: configIds.includes(config.id),
+        })),
+      })),
+    }));
+    setDataStations(updatedStations);
+    setIsTickAllDevices(
+      updatedStations.length ===
+        updatedStations.filter((i) => i.isChecked).length
+    );
+  };
+
+  const GroupEndDevice = ({ item, indexSubUnit }) => {
+    const { name, devices, isChecked } = item;
+    return (
+      <View style={styles.viewGroup}>
+        <CheckBoxSubUnit
+          title={name}
+          onPress={onTickSubUnit}
+          isChecked={isChecked}
+          indexSubUnit={indexSubUnit}
+        />
+        <View style={styles.wrapDevice}>
+          {devices.map((i, index) => (
+            <EndDevice
+              item={i}
+              key={i.id}
+              onTickedChild={onTickedChild}
+              onTickEndDevice={onTickEndDevice}
+              isItemExpanded={expandedItemIds.includes(i.id)}
+              toggleExpandEndDevice={toggleExpandEndDevice(i)}
+              expandEndDevice={expandEndDevice(i)}
+              indexSubUnit={indexSubUnit}
+              indexEndDevice={index}
+            />
+          ))}
+        </View>
+      </View>
+    );
+  };
+
+  const onPressBottom = async () => {
+    setLoading(true);
+    let read_permissions = [];
+    let control_permissions = [];
+
+    for (const station of dataStations) {
+      for (const end_device of station.devices) {
+        const action_ids = end_device.actions
+          .filter((action) => action.isChecked)
+          .map((action) => action.id);
+
+        const config_ids = end_device.read_configs
+          .filter((config) => config.isChecked)
+          .map((config) => config.id);
+
+        if (action_ids.length > 0) {
+          control_permissions.push({ id: end_device.id, values: action_ids });
+        }
+
+        if (config_ids.length > 0) {
+          read_permissions.push({ id: end_device.id, values: config_ids });
+        }
+
+        if (
+          action_ids.length === 0 &&
+          config_ids.length === 0 &&
+          end_device.isChecked
+        ) {
+          read_permissions.push({ id: end_device.id, values: [] });
+        }
+      }
+    }
+
+    if (!read_permissions.length && !control_permissions.length) {
+      setLoading(false);
+      Alert.alert('', t('choose_at_least_one'));
+      return;
+    }
+    let phone = '';
+    let email = '';
+    if (member.phone_number) {
+      phone = member.phone_number;
+      email = '';
+    } else if (member.email) {
+      phone = '';
+      email = member.email;
+    }
+    const { success } = await axiosPost(API.SHARE.SHARE(), {
+      phone,
+      email,
+      unit: unit.id,
+      permissions: { read_permissions, control_permissions },
+      is_remove_old_permission: true,
+    });
+    setLoading(false);
+    success && navigation.goBack();
+  };
+
+  const renderSubUnit = ({ item, index }) => (
+    <GroupEndDevice key={item.id} item={item} indexSubUnit={index} />
+  );
+
+  const renderFlatList = useMemo(() => {
+    setNeedRefresh(false);
+    return (
+      <FlatList
+        keyExtractor={(item) => item.id}
+        extraData={dataStations}
+        data={dataStations}
+        renderItem={renderSubUnit}
+        scrollIndicatorInsets={{ right: 1 }}
+        ListHeaderComponent={
+          <CheckBoxSubUnit
+            title={t('text_all_devices')}
+            onPress={onTickAllDevices}
+            isChecked={isTickAllDevices}
+          />
+        }
+      />
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataStations, isTickAllDevices, expandedItemIds, needRefresh]);
+
+  const getShareUnitPermission = useCallback(
+    async (stations) => {
+      const { success, data } = await axiosGet(
+        API.SHARE.UNIT_MEMBER_SHARE_DEVICE(unit.id, member.id)
+      );
+      if (success) {
+        autoCheckedGroup(stations, data);
+      }
+    },
+    [member.id, unit.id]
+  );
+
+  const getUnitPermission = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SHARE.UNIT_PERMISSIONS(unit.id)
+    );
+    if (success) {
+      setDataStations(data);
+      await getShareUnitPermission(data);
+    }
+    setLoading(false);
+  }, [getShareUnitPermission, unit.id]);
+
+  useEffect(() => {
+    getUnitPermission();
+  }, [getUnitPermission]);
+
+  return (
+    <View style={styles.wrap}>
+      <Text semibold style={styles.title}>
+        {t('select_device')}
+      </Text>
+      <Text style={styles.subtitle}>{t('sharing_select_devices_hint')}</Text>
+      <View style={styles.contentContainer}>
+        {loading ? (
+          <ActivityIndicator color={Colors.Primary} />
+        ) : dataStations.length > 0 ? (
+          renderFlatList
+        ) : (
+          <Text
+            style={styles.textNodata}
+            accessibilityLabel={AccessibilityLabel.TEXT_NO_DATA_STATIONS}
+          >
+            {t('no_data')}
+          </Text>
+        )}
+      </View>
+      <View style={styles.wrapViewButtonStyle}>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          onLeftClick={() => navigation.goBack()}
+          rightTitle={t('done')}
+          rightDisabled={false}
+          onRightClick={onPressBottom}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default memo(UpdateShareDevice);

package/src/screens/Sharing/__test__/SelectShareDevice.test.js

@@ -0,0 +1,215 @@
+import { act } from '@testing-library/react-hooks';
+import React from 'react';
+import { Alert } from 'react-native';
+import { create } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+import { ViewButtonBottom } from '../../../commons';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import API from '../../../configs/API';
+import api from '../../../utils/Apis/axios';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import SelectShareDevice from '../SelectShareDevice';
+import Routes from '../../../utils/Route';
+
+const mock = new MockAdapter(api.axiosInstance);
+jest.spyOn(Alert, 'alert').mockImplementation(() => {});
+const mockNavigate = jest.fn();
+const mockGoBack = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+      goBack: mockGoBack,
+    }),
+  };
+});
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectShareDevice route={route} />
+  </SCProvider>
+);
+
+describe('Test SelectShareDevice', () => {
+  let tree;
+  let route = {
+    params: {
+      unit: { id: 1, name: 'unit 1' },
+    },
+  };
+  let listDevices = [
+    {
+      id: 1,
+      name: 'Sub unit',
+      devices: [
+        {
+          id: 2,
+          actions: [{ id: 3, name: 'action 1' }],
+          read_configs: [{ id: 4, name: 'config 1' }],
+          name: 'child1',
+        },
+        {
+          id: 5,
+          actions: [{ id: 6, name: 'action 2' }],
+          read_configs: [{ id: 7, name: 'config 2' }],
+          name: 'child2',
+        },
+        {
+          id: 8,
+          actions: [],
+          read_configs: [],
+          name: 'child3',
+        },
+      ],
+    },
+  ];
+
+  afterEach(() => {
+    Alert.alert.mockReset();
+    mock.resetHistory();
+    mockNavigate.mockClear();
+    mockGoBack.mockClear();
+  });
+
+  const clickCheckBoxAllDevice = async (instance, statusCheckbox) => {
+    const checkBoxAllDevice = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.CHECK_BOX_CUSTOM}-undefined`
+    );
+    expect(checkBoxAllDevice.props.isChecked).toEqual(statusCheckbox);
+    await act(async () => {
+      await checkBoxAllDevice.props.onPress();
+    });
+  };
+
+  const clickCheckBoxSubUnit = async (instance, statusCheckbox) => {
+    const checkBoxSubunit = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.CHECK_BOX_CUSTOM}-0`
+    );
+    expect(checkBoxSubunit.props.isChecked).toEqual(statusCheckbox);
+    await act(async () => {
+      await checkBoxSubunit.props.onPress();
+    });
+  };
+
+  const clickCheckBoxConfig = async (instance, configId, statusCheckbox) => {
+    let checkBoxConfig = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.SHARE_DEVICE.CHECK_BOX_CONFIG}-${configId}`
+    );
+    expect(checkBoxConfig.props.isChecked).toEqual(statusCheckbox);
+    await act(async () => {
+      await checkBoxConfig.props.onPress();
+    });
+  };
+
+  const clickExpandEndDevice = async (instance, indexEndDevice, statusIcon) => {
+    const expandEndDevice = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.SHARE_DEVICE.EXPAND_END_DEVICE}-${indexEndDevice}`
+    );
+    expect(expandEndDevice.props.name).toEqual(statusIcon);
+    await act(async () => {
+      await expandEndDevice.props.onPress();
+    });
+  };
+
+  const clickNameEndDevice = async (instance, indexEndDevice) => {
+    const nameEndDevice = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        `${AccessibilityLabel.SHARE_DEVICE.CLICK_NAME_END_DEVICE}-${indexEndDevice}`
+    );
+    await act(async () => {
+      await nameEndDevice.props.onPress();
+    });
+  };
+
+  it('test user select share device', async () => {
+    mock.onGet(API.SHARE.UNIT_PERMISSIONS(1)).reply(200, listDevices);
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    let instance = tree.root;
+    await clickNameEndDevice(instance, 0); // click to select all configs in end device index 0
+    await clickNameEndDevice(instance, 0); // click again to remove all configs, and coverage expand end device
+    await clickCheckBoxConfig(instance, 3, false); // click to select action
+    await clickCheckBoxConfig(instance, 3, true); // click again to coverage case status reversal
+    await clickCheckBoxConfig(instance, 4, false); // click to select config
+    await clickCheckBoxConfig(instance, 4, true); // click again to coverage case status reversal
+    await clickExpandEndDevice(instance, 0, 'up');
+    await clickExpandEndDevice(instance, 0, 'down'); // click again to coverage case status reversal
+
+    await clickCheckBoxAllDevice(instance, false); // click to select all device
+    await clickCheckBoxSubUnit(instance, true); // click to remove all device in sub unit id 1
+    await clickNameEndDevice(instance, 1); // click to select all configs in end device index 1
+    await clickNameEndDevice(instance, 2); // click to select all configs in end device index 2
+
+    const ViewButtonBottomElement = instance.findAllByType(ViewButtonBottom);
+    await act(async () => {
+      ViewButtonBottomElement[0].props.onRightClick();
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.SharingInviteMembers, {
+      unit: { id: 1, name: 'unit 1' },
+      permissions: {
+        read_permissions: [
+          { id: 5, values: [7] },
+          { id: 8, values: [] },
+        ],
+        control_permissions: [{ id: 5, values: [6] }],
+      },
+    });
+  });
+
+  it('test no data, api get UNIT_PERMISSIONS false', async () => {
+    mock.onGet(API.SHARE.UNIT_PERMISSIONS(1)).reply(400);
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    let text = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.TEXT_NO_DATA_STATIONS
+    );
+    expect(text.props.children).toEqual('No data');
+  });
+
+  it('user not choose device click button back', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const ViewButtonBottomElement = instance.findAllByType(ViewButtonBottom);
+    expect(ViewButtonBottomElement).toHaveLength(1);
+
+    await act(async () => {
+      ViewButtonBottomElement[0].props.onLeftClick();
+    });
+    expect(mockGoBack).toBeCalled();
+  });
+
+  it('user not choose device click button next', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const ViewButtonBottomElement = instance.findAllByType(ViewButtonBottom);
+    expect(ViewButtonBottomElement).toHaveLength(1);
+    await act(async () => {
+      ViewButtonBottomElement[0].props.onRightClick();
+    });
+    expect(Alert.alert.mock.calls[0][1]).toEqual(
+      'Please choose at least one sensor.'
+    );
+  });
+});

package/src/screens/Sharing/__test__/UnitMemberList.test.js

@@ -71,7 +71,7 @@ describe('test MemberList', () => {
       await memberListButtons[1].props.onPress();
     });
     expect(mockedNavigate).toBeCalledWith(Routes.AddMemberStack, {
-      screen: Routes.SharingSelectPermission,
+      screen: Routes.SelectShareDevice,
       params: { unit: { id: 1 } },
     });
   });