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

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);

package/src/screens/Sharing/SelectShareDevice.js

@@ -1,232 +1,15 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { View, FlatList, Alert, ActivityIndicator } from 'react-native';
+import React from 'react';
+import Routes from '../../utils/Route';
+import { ShareDeviceSelector } from './Components';
 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 } from '../../utils/Apis/axios';
-import Routes from '../../utils/Route';
-import { API, Colors } from '../../configs';
-import { AccessibilityLabel } from '../../configs/Constants';
-import CheckBoxSubUnit from './Components/CheckBoxSubUnit';
-import EndDevice from './Components/EndDevice';
 
 const SelectShareDevice = ({ route }) => {
   const { unit } = route.params;
-  const t = useTranslations();
   const navigation = useNavigation();
-  const [dataStations, setDataStations] = useState([]);
-  const [isTickAllDevices, setIsTickAllDevices] = useState(false);
-  const [expandedItemIds, setExpandedItemIds] = useState([]);
-  const [needRefresh, setNeedRefresh] = useState(false);
-  const [loading, setLoading] = useState(true);
-
-  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 GroupEndDevice = ({ item, indexSubUnit }) => {
-    const { name, devices, isChecked } = item;
-    return (
-      <View style={styles.viewGroup}>
-        <CheckBoxSubUnit
-          title={name}
-          item={item}
-          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 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 getUnitPermission = useCallback(async () => {
-    const { success, data } = await axiosGet(
-      API.SHARE.UNIT_PERMISSIONS(unit.id)
-    );
-    if (success) {
-      setDataStations(data);
-    }
-    setLoading(false);
-  }, [unit.id]);
-
-  useEffect(() => {
-    getUnitPermission();
-  }, [getUnitPermission, unit]);
-
-  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 });
-        }
+  const t = useTranslations();
 
-        if (
-          action_ids.length === 0 &&
-          config_ids.length === 0 &&
-          end_device.isChecked
-        ) {
-          read_permissions.push({ id: end_device.id, values: [] });
-        }
-      }
-    }
-    setLoading(false);
-    if (read_permissions.length === 0 && control_permissions.length === 0) {
-      Alert.alert('', t('choose_at_least_one'));
-      return;
-    }
+  const handleOnRightClick = ({ read_permissions, control_permissions }) => {
     navigation.navigate(Routes.SharingInviteMembers, {
       unit,
       permissions: { read_permissions, control_permissions },
@@ -234,39 +17,12 @@ const SelectShareDevice = ({ route }) => {
   };
 
   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
-          accessibilityLabelPrefix={
-            AccessibilityLabel.PREFIX.SHARING_SELECT_PERMISSION
-          }
-          leftTitle={t('cancel')}
-          onLeftClick={() => navigation.goBack()}
-          rightTitle={t('next')}
-          rightDisabled={false}
-          onRightClick={onPressBottom}
-        />
-      </View>
-    </View>
+    <ShareDeviceSelector
+      unitId={unit.id}
+      onRightClick={handleOnRightClick}
+      rightTitle={t('next')}
+    />
   );
 };
 
-export default memo(SelectShareDevice);
+export default SelectShareDevice;