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

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

@@ -1,146 +0,0 @@
-import React, { memo, useEffect, useMemo, useState } from 'react';
-import {
-  View,
-  Text,
-  LayoutAnimation,
-  Platform,
-  UIManager,
-  TouchableOpacity,
-} from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
-import { Colors } from '../../../configs';
-import styles from './Styles/DeviceItemStyles';
-import FImage from '../../../commons/FImage';
-import { TitleCheckBox } from '.';
-import { CheckBoxCustom } from '.';
-import { AccessibilityLabel } from '../../../configs/Constants';
-
-const DeviceItem = ({
-  item = {},
-  isRenderSeparated,
-  onTickedChild,
-  onTickedDevice,
-  onTickedDeviceIcon,
-  isItemExpanded,
-  toggleItem,
-  idGroup,
-}) => {
-  const {
-    id = '',
-    name = '',
-    actions = [],
-    read_configs = [],
-    icon_kit = '',
-    isChecked,
-  } = item;
-  const [dataConfig, setDataConfig] = useState([
-    ...actions.map((i) => ({ ...i, isControl: true })),
-    ...read_configs.map((i) => ({ ...i, isConfig: true })),
-  ]);
-
-  const onPressItem = () => {
-    if (dataConfig.length > 0) {
-      toggleItem();
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    } else {
-      handleOnTickedDevice();
-    }
-  };
-
-  const handleOnTickedChild = (group, checked, childId) => {
-    const dataTemp = [...dataConfig];
-    const indexTemp = dataTemp.findIndex((i) => i.id === childId);
-    dataTemp.splice(indexTemp, 1, {
-      ...dataTemp[indexTemp],
-      isChecked: checked,
-    });
-    setDataConfig(dataTemp);
-    onTickedChild &&
-      onTickedChild(
-        group,
-        id,
-        childId,
-        checked,
-        Boolean(dataTemp[indexTemp]?.isConfig)
-      );
-  };
-
-  const isCheckedIcon = useMemo(() => {
-    return dataConfig.some((i) => i.isChecked);
-  }, [dataConfig]);
-
-  const handleOnTickedIcon = () => {
-    onTickedDeviceIcon && onTickedDeviceIcon(idGroup, id, isCheckedIcon);
-  };
-
-  const handleOnTickedDevice = () => {
-    onTickedDevice && onTickedDevice(idGroup, id, !isChecked);
-  };
-
-  useEffect(() => {
-    Platform.OS === 'android' &&
-      UIManager.setLayoutAnimationEnabledExperimental &&
-      UIManager.setLayoutAnimationEnabledExperimental(true);
-  }, []);
-
-  const renderData = useMemo(() => {
-    return dataConfig.map((i) => (
-      <TitleCheckBox
-        title={i.name}
-        wrapCheckBoxStyle={styles.wrapCheckBoxStyle}
-        onPress={handleOnTickedChild}
-        isChecked={i.isChecked}
-        id={i.id}
-        titleStyle={styles.titleStyle}
-        key={i.id}
-        idGroup={idGroup}
-        isConfig={i.isConfig}
-        isControl={i.isControl}
-        wrapStyle={styles.wrapStyleTitle}
-      />
-    ));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dataConfig]);
-
-  return (
-    <View style={[styles.wrap, !isRenderSeparated && styles.isRenderSeparated]}>
-      <TouchableOpacity onPress={handleOnTickedIcon}>
-        <FImage
-          source={{ uri: icon_kit }}
-          style={styles.viewLeft}
-          tintColor={isCheckedIcon ? Colors.Primary : Colors.Gray}
-        />
-      </TouchableOpacity>
-      <View style={styles.wrapRight}>
-        <View style={styles.viewRight}>
-          <Text
-            numberOfLines={1}
-            style={styles.text}
-            onPress={onPressItem}
-            accessibilityLabel={AccessibilityLabel.TEXT_SENSOR_ITEM}
-          >
-            {name}
-          </Text>
-          {dataConfig.length > 0 ? (
-            <IconOutline
-              onPress={onPressItem}
-              name={isItemExpanded ? 'up' : 'down'}
-              size={20}
-              color={Colors.Gray6}
-            />
-          ) : (
-            <CheckBoxCustom
-              isChecked={isChecked}
-              onPress={onPressItem}
-              wrapStyle={styles.checkBox}
-            />
-          )}
-        </View>
-        {isItemExpanded && <View style={styles.wrapExpand}>{renderData}</View>}
-        {isRenderSeparated && <View style={styles.viewSeparated} />}
-      </View>
-    </View>
-  );
-};
-
-export default memo(DeviceItem);

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import { create, act } from 'react-test-renderer';
-
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
-import DeviceItem from '../DeviceItem';
-import { Text } from 'react-native';
-import { AccessibilityLabel } from '../../../../configs/Constants';
-
-const mockOnTickedDevice = jest.fn();
-const mockOnTickedChild = jest.fn();
-const wrapComponent = (item) => (
-  <SCProvider initState={mockSCStore({})}>
-    <DeviceItem
-      item={item}
-      onTickedChild={mockOnTickedChild}
-      onTickedSensor={mockOnTickedDevice}
-      activeItemId={item.id}
-    />
-  </SCProvider>
-);
-
-describe('test DeviceTemplate', () => {
-  it('test DeviceTemplate', async () => {
-    const item = {
-      id: 1,
-      name: 'abc',
-      actions: [],
-      read_configs: [],
-      icon_kit: '',
-      isChecked: true,
-    };
-    let tree;
-    await act(async () => {
-      tree = await create(wrapComponent(item));
-    });
-    const instance = tree.root;
-    const onPressText = instance.find(
-      (el) =>
-        el.type === Text &&
-        el.props.accessibilityLabel === AccessibilityLabel.TEXT_SENSOR_ITEM
-    );
-    expect(onPressText).toBeDefined();
-    await act(async () => {
-      onPressText.props.onPress();
-    });
-  });
-});

package/src/screens/Sharing/SharingSelectPermission.js

@@ -1,409 +0,0 @@
-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 { DeviceItem, TitleCheckBox } from './Components';
-import styles from './Styles/SelectPermissionStyles';
-import { axiosGet, axiosPost } from '../../utils/Apis/axios';
-import { objectIds } from '../../utils/Utils';
-import Routes from '../../utils/Route';
-import { API, Colors } from '../../configs';
-import { AccessibilityLabel } from '../../configs/Constants';
-
-let dataStationTemp = [];
-
-const SharingSelectPermission = ({ route }) => {
-  const t = useTranslations();
-  const { unit, type = '', 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 [hasDataChecked, setHasDataChecked] = useState(false);
-  const [dataDeviceShared, setDataDeviceShared] = useState([]);
-
-  const isUpdateSharedDevice = useMemo(() => {
-    return type === 'update_shared';
-  }, [type]);
-
-  const onTickTitle = (idGroup, isChecked, id) => {
-    if (!idGroup) {
-      setIsTickAllDevices(isChecked);
-      const data = dataStations.map((i) => ({
-        ...i,
-        isChecked,
-      }));
-      for (let station in data) {
-        for (let item in data[station].devices) {
-          const itemTemp = data[station].devices[item];
-          data[station].devices[item] = {
-            ...itemTemp,
-            isChecked,
-            actions: itemTemp.actions.map((i) => ({
-              ...i,
-              isChecked,
-            })),
-            read_configs: itemTemp.read_configs.map((i) => ({
-              ...i,
-              isChecked,
-            })),
-          };
-        }
-      }
-      setDataStations(data);
-    } else {
-      const data = [...dataStationTemp];
-
-      const index = data.findIndex((item) => item.id === idGroup);
-
-      data[index] = {
-        ...data[index],
-        isChecked,
-        devices: data[index]?.devices.map((i) => ({
-          ...i,
-          isChecked,
-          actions: i.actions.map((j) => ({ ...j, isChecked })),
-          read_configs: i.read_configs.map((j) => ({ ...j, isChecked })),
-        })),
-      };
-      setDataStations(data);
-      setIsTickAllDevices(!data.some((item) => !item.isChecked));
-    }
-  };
-
-  const onTickedChild = (
-    idGroup,
-    deviceId,
-    childId,
-    isChecked,
-    isReadConfig
-  ) => {
-    let data = [...dataStationTemp];
-    const group = data.find((i) => i.id === idGroup);
-    const device = group.devices.find((i) => i.id === deviceId);
-    const child = device[`${isReadConfig ? 'read_configs' : 'actions'}`].find(
-      (i) => i.id === childId
-    );
-
-    child.isChecked = isChecked;
-    device.isChecked = !(
-      device.read_configs.some((i) => !i.isChecked) ||
-      device.actions.some((i) => !i.isChecked)
-    );
-    for (let station of data) {
-      if (station.devices.length) {
-        station.isChecked = station.devices.some(
-          (i) =>
-            i.read_configs.some((r) => r.isChecked) ||
-            i.actions.some((a) => a.isChecked)
-        );
-      }
-    }
-    setIsTickAllDevices(!dataStationTemp.some((i) => !i.isChecked));
-    dataStationTemp = data;
-    setDataStations(data);
-  };
-
-  const onTickedDevice = (idGroup, deviceId, isChecked) => {
-    let data = [...dataStationTemp];
-    const group = data.find((i) => i.id === idGroup);
-    const device = group.devices.find((i) => i.id === deviceId);
-
-    device.isChecked = isChecked;
-
-    for (let station of data) {
-      if (station.devices.length) {
-        station.isChecked = !station.devices.some((i) => !i.isChecked);
-      }
-    }
-    setIsTickAllDevices(!dataStationTemp.some((i) => !i.isChecked));
-    dataStationTemp = data;
-    setDataStations(data);
-  };
-
-  const onTickedDeviceIcon = (idGroup, deviceId, isChecked) => {
-    let data = [...dataStationTemp];
-    const group = data.find((i) => i.id === idGroup);
-    const device = group.devices.find((i) => i.id === deviceId);
-    const index = data.findIndex((item) => item.id === idGroup);
-
-    data[index] = {
-      ...data[index],
-      devices: data[index]?.devices.map((i) => {
-        if (i.id === device?.id) {
-          return {
-            ...i,
-            isChecked: !isChecked,
-            actions: i.actions.map((j) => ({ ...j, isChecked: !isChecked })),
-            read_configs: i.read_configs.map((j) => ({
-              ...j,
-              isChecked: !isChecked,
-            })),
-          };
-        }
-        return { ...i };
-      }),
-    };
-
-    data[index] = {
-      ...data[index],
-      isChecked:
-        !data[index]?.devices.length ===
-        !data[index]?.devices.filter((i) => i.isChecked).length,
-    };
-
-    setDataStations(data);
-  };
-
-  const toggleDeviceItem = (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 autoCheckedGroup = useCallback(async () => {
-    if (isUpdateSharedDevice) {
-      if (hasDataChecked) {
-        const { stationIds, deviceIds, actionIds, configIds } =
-          objectIds(dataDeviceShared);
-        for (let station in dataStations) {
-          for (let item in dataStations[station].devices) {
-            const itemTemp = dataStations[station].devices[item];
-            dataStations[station].devices[item] = {
-              ...itemTemp,
-              isChecked: deviceIds.includes(itemTemp?.id),
-              actions: itemTemp.actions.map((i) => {
-                return {
-                  ...i,
-                  isChecked: actionIds?.includes(i.id),
-                };
-              }),
-              read_configs: itemTemp.read_configs.map((i) => {
-                return {
-                  ...i,
-                  isChecked: configIds?.includes(i.id),
-                };
-              }),
-            };
-          }
-        }
-        const data = dataStations?.map((i) => {
-          const devices = i?.devices;
-          const devices_checked = i?.devices?.filter(
-            (device) => device?.isChecked
-          );
-          return {
-            ...i,
-            isChecked:
-              !devices.length === !devices_checked.length &&
-              stationIds.includes(i.id),
-          };
-        });
-        setDataStations(data);
-        setIsTickAllDevices(data?.length === stationIds?.length);
-        setHasDataChecked(false);
-      }
-    }
-  }, [dataDeviceShared, dataStations, hasDataChecked, isUpdateSharedDevice]);
-
-  const GroupDeviceItem = ({ item = {} }) => {
-    const { name = '', devices = [], isChecked, id = '' } = item;
-    return (
-      <View style={styles.viewGroup}>
-        <TitleCheckBox
-          title={name}
-          wrapCheckBoxStyle={styles.checkBoxTile}
-          onPress={onTickTitle}
-          titleStyle={styles.GroupDeviceItem}
-          isChecked={isChecked}
-          idGroup={id}
-        />
-        <View style={styles.wrapDevice}>
-          {devices?.map((i, index) => (
-            <DeviceItem
-              item={i}
-              key={i.id}
-              isRenderSeparated={index !== devices?.length - 1}
-              onTickedChild={onTickedChild}
-              onTickedDevice={onTickedDevice}
-              onTickedDeviceIcon={onTickedDeviceIcon}
-              isItemExpanded={expandedItemIds.includes(i.id)}
-              toggleItem={toggleDeviceItem(i)}
-              idGroup={id}
-            />
-          ))}
-        </View>
-      </View>
-    );
-  };
-
-  const onPressBottom = async () => {
-    let read_permissions = [],
-      control_permissions = [];
-    for (let station of dataStationTemp) {
-      for (let item of station.devices) {
-        let arrIdControlTemp = [],
-          arrIdReadTemp = [];
-
-        for (let i of item.actions) {
-          i.isChecked && arrIdControlTemp.push(i.id);
-        }
-        for (let i of item.read_configs) {
-          i.isChecked && arrIdReadTemp.push(i.id);
-        }
-
-        arrIdControlTemp.length &&
-          control_permissions.push({ id: item.id, values: arrIdControlTemp });
-
-        arrIdReadTemp.length &&
-          read_permissions.push({ id: item.id, values: arrIdReadTemp });
-
-        !arrIdControlTemp.length &&
-          !arrIdReadTemp.length &&
-          item.isChecked &&
-          read_permissions.push({ id: item.id, values: [] });
-      }
-    }
-    if (!read_permissions.length && !control_permissions.length) {
-      Alert.alert('', t('choose_at_least_one'));
-      return;
-    }
-    if (isUpdateSharedDevice) {
-      const phone =
-        member?.phone_number && member?.email
-          ? member?.phone_number
-          : member?.phone_number || '';
-      const email = member?.phone_number ? '' : member?.email || '';
-      const { success } = await axiosPost(API.SHARE.SHARE(), {
-        phone,
-        email,
-        unit: unit?.id,
-        permissions: { read_permissions, control_permissions },
-        is_remove_old_permission: true,
-      });
-      success && navigation.goBack();
-    } else {
-      navigation.navigate(Routes.SharingInviteMembers, {
-        unit,
-        permissions: { read_permissions, control_permissions },
-      });
-    }
-  };
-
-  const renderGroupItem = ({ item }) => (
-    <GroupDeviceItem key={item.id} item={item} />
-  );
-
-  const renderFlatList = useMemo(() => {
-    return (
-      <FlatList
-        keyExtractor={(item) => item.id}
-        extraData={dataStations}
-        data={dataStations}
-        renderItem={renderGroupItem}
-        ListHeaderComponent={
-          dataStations?.length > 0 ? (
-            <TitleCheckBox
-              title={t('text_all_devices')}
-              wrapStyle={styles.wrapAllDevices}
-              onPress={onTickTitle}
-              titleStyle={styles.textAllDevice}
-              isChecked={isTickAllDevices}
-            />
-          ) : (
-            <></>
-          )
-        }
-        scrollIndicatorInsets={{ right: 1 }}
-      />
-    );
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dataStations, isTickAllDevices, expandedItemIds]);
-
-  useEffect(() => {
-    autoCheckedGroup();
-  }, [autoCheckedGroup]);
-
-  const getShareUnitPermission = useCallback(async () => {
-    if (isUpdateSharedDevice && dataStations?.length > 0) {
-      const { success, data } = await axiosGet(
-        API.SHARE.UNIT_MEMBER_SHARE_DEVICE(unit?.id, member?.id)
-      );
-      if (success) {
-        setDataDeviceShared(data);
-        setHasDataChecked(true);
-      }
-    }
-  }, [dataStations?.length, isUpdateSharedDevice, member?.id, unit?.id]);
-
-  const getUnitPermission = useCallback(async () => {
-    const { success, data } = await axiosGet(
-      API.SHARE.UNIT_PERMISSIONS(unit?.id)
-    );
-    if (success) {
-      setDataStations(data);
-    }
-    setLoading(false);
-  }, [unit?.id]);
-
-  useEffect(() => {
-    (async () => {
-      if (!unit) {
-        return;
-      }
-      await getUnitPermission();
-      await getShareUnitPermission();
-    })();
-  }, [getShareUnitPermission, getUnitPermission, unit]);
-
-  useEffect(() => {
-    dataStationTemp = dataStations;
-  }, [dataStations]);
-
-  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={isUpdateSharedDevice ? t('done') : t('next')}
-          rightDisabled={false}
-          onRightClick={onPressBottom}
-        />
-      </View>
-    </View>
-  );
-};
-
-export default memo(SharingSelectPermission);