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

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;

package/src/screens/Sharing/SelectUser.js

@@ -1,32 +1,32 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import { API, Colors, Theme } from '../../configs';
+import { Button, ViewButtonBottom } from '../../commons';
 import {
   Keyboard,
   StyleSheet,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import { getStatusBarHeight } from 'react-native-iphone-x-helper';
-
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { API, Colors, Theme } from '../../configs';
-import AccountList from '../../commons/Auth/AccountList';
-import _TextInput from '../../commons/Form/TextInput';
-import { ViewButtonBottom, Button } from '../../commons';
+import React, { useCallback, useMemo, useState } from 'react';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 import {
   isValidEmailAddress,
   isValidPhoneNumber,
 } from '../../utils/Validation';
-import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+
 import { AccessibilityLabel } from '../../configs/Constants';
+import AccountList from '../../commons/Auth/AccountList';
+import Routes from '../../utils/Route';
 import Text from '../../commons/Text';
 import { ToastBottomHelper } from '../../utils/Utils';
-import Routes from '../../utils/Route';
+import _TextInput from '../../commons/Form/TextInput';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const SharingInviteMembers = ({ route }) => {
   const t = useTranslations();
   const { goBack, navigate } = useNavigation();
-  const { unit, permissions } = route?.params || {};
+  const { unit, permissions } = route?.params;
   const [errorText, setErrorText] = useState('');
   const [content, setContent] = useState('');
   const [users, setUsers] = useState([]);

package/src/screens/Sharing/UpdateShareDevice.js

@@ -1,322 +1,66 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { View, FlatList, Alert, ActivityIndicator } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 
+import { API } from '../../configs';
+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, 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;
+  const t = useTranslations();
+  const [initialSelectedKeys, setInitialSelectedKeys] = useState([]);
+
+  const getInitialSelectedKeys = useCallback(
+    (sharedDevices) =>
+      sharedDevices.flatMap((subUnit) => [
+        `subUnit-${subUnit.id}`,
+        ...subUnit.devices.flatMap((device) => [
+          `device-${device.id}`,
+          ...device.actions.map((action) => `action-${action.id}`),
+          ...device.read_configs.map((config) => `config-${config.id}`),
+        ]),
+      ]),
+    []
+  );
 
-    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];
+  useEffect(() => {
+    const getShareUnitPermission = async () => {
+      const { success, data } = await axiosGet(
+        API.SHARE.UNIT_MEMBER_SHARE_DEVICE_V2(unit.id, member.id)
+      );
+      if (success) {
+        const selectedKeys = getInitialSelectedKeys(data);
+        setInitialSelectedKeys(selectedKeys);
       }
-    });
-  };
-
-  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: [] });
-        }
-      }
-    }
+    getShareUnitPermission();
+  }, [unit.id, member.id, getInitialSelectedKeys]);
 
-    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,
+  const handleOnRightClick = async ({
+    read_permissions,
+    control_permissions,
+  }) => {
+    const { success } = await axiosPost(API.SHARE.SHARE_V2(), {
+      user_ids: [member.id],
       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>
+    <ShareDeviceSelector
+      unitId={unit.id}
+      onRightClick={handleOnRightClick}
+      rightTitle={t('done')}
+      initialSelectedKeys={initialSelectedKeys}
+    />
   );
 };
 
-export default memo(UpdateShareDevice);
+export default UpdateShareDevice;