@eohjsc/react-native-smart-city 0.3.32 → 0.3.33

package/src/screens/Sharing/SelectPermission.js

@@ -10,16 +10,16 @@ import {
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { API, Colors } from '../../configs';
 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 { object_Ids } from '../../utils/Utils';
-
 import Routes from '../../utils/Route';
-import { SensorItem, TitleCheckBox } from './Components';
-import styles from './Styles/SelectPermissionStyles';
 
+import { API, Colors } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
 
 let dataStationTemp = [];
@@ -30,7 +30,7 @@ const SelectPermission = ({ route }) => {
   const navigation = useNavigation();
   const [dataStations, setDataStations] = useState([]);
   const [isTickAllDevices, setIsTickAllDevices] = useState(false);
-  const [activeItemId, setActiveItemId] = useState(-1);
+  const [expandedItemIds, setExpandedItemIds] = useState([]);
   const [loading, setLoading] = useState(true);
   const [hasDataChecked, setHasDataChecked] = useState(false);
   const [dataDeviceShared, setDataDeviceShared] = useState([]);
@@ -47,9 +47,9 @@ const SelectPermission = ({ route }) => {
         isChecked,
       }));
       for (let station in data) {
-        for (let item in data[station].sensors) {
-          const itemTemp = data[station].sensors[item];
-          data[station].sensors[item] = {
+        for (let item in data[station].devices) {
+          const itemTemp = data[station].devices[item];
+          data[station].devices[item] = {
             ...itemTemp,
             isChecked,
             actions: itemTemp.actions.map((i) => ({
@@ -68,17 +68,11 @@ const SelectPermission = ({ route }) => {
       const data = [...dataStationTemp];
 
       const index = data.findIndex((item) => item.id === idGroup);
-      // Remove sensors when end_devices deloy production
+
       data[index] = {
         ...data[index],
         isChecked,
-        devices: data[index]?.sensors.map((i) => ({
-          ...i,
-          isChecked,
-          actions: i.actions.map((j) => ({ ...j, isChecked })),
-          read_configs: i.read_configs.map((j) => ({ ...j, isChecked })),
-        })),
-        sensors: data[index]?.sensors.map((i) => ({
+        devices: data[index]?.devices.map((i) => ({
           ...i,
           isChecked,
           actions: i.actions.map((j) => ({ ...j, isChecked })),
@@ -92,8 +86,8 @@ const SelectPermission = ({ route }) => {
 
   const stationCheck = (data) => {
     for (let station of data) {
-      if (station.sensors.length) {
-        station.isChecked = !station.sensors.some((i) => !i.isChecked);
+      if (station.devices.length) {
+        station.isChecked = !station.devices.some((i) => !i.isChecked);
       }
     }
     setIsTickAllDevices(!dataStationTemp.some((i) => !i.isChecked));
@@ -103,55 +97,66 @@ const SelectPermission = ({ route }) => {
 
   const onTickedChild = (
     idGroup,
-    sensorId,
+    deviceId,
     childId,
     isChecked,
     isReadConfig
   ) => {
     let data = [...dataStationTemp];
     const group = data.find((i) => i.id === idGroup);
-    const sensor = group.sensors.find((i) => i.id === sensorId);
-    const child = sensor[`${isReadConfig ? 'read_configs' : 'actions'}`].find(
+    const device = group.devices.find((i) => i.id === deviceId);
+    const child = device[`${isReadConfig ? 'read_configs' : 'actions'}`].find(
       (i) => i.id === childId
     );
 
     child.isChecked = isChecked;
-    sensor.isChecked = !(
-      sensor.read_configs.some((i) => !i.isChecked) ||
-      sensor.actions.some((i) => !i.isChecked)
+    device.isChecked = !(
+      device.read_configs.some((i) => !i.isChecked) ||
+      device.actions.some((i) => !i.isChecked)
     );
 
     stationCheck(data);
   };
 
-  const onTickedSensor = (idGroup, sensorId, isChecked) => {
+  const onTickedDevice = (idGroup, deviceId, isChecked) => {
     let data = [...dataStationTemp];
     const group = data.find((i) => i.id === idGroup);
-    const sensor = group.sensors.find((i) => i.id === sensorId);
+    const device = group.devices.find((i) => i.id === deviceId);
 
-    sensor.isChecked = isChecked;
+    device.isChecked = isChecked;
 
     stationCheck(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 = object_Ids(dataDeviceShared)?.stationIds;
-        const sensorIds = object_Ids(dataDeviceShared)?.sensorIds;
+        const deviceIds = object_Ids(dataDeviceShared)?.deviceIds;
         const actionIds = object_Ids(dataDeviceShared)?.actionIds;
         const configIds = object_Ids(dataDeviceShared)?.configIds;
-        const sensor_checked = [];
+        const device_checked = [];
         const action_checked = [];
         const config_checked = [];
         const action_temp = [];
         const config_temp = [];
         for (let station in dataStations) {
-          for (let item in dataStations[station].sensors) {
-            const itemTemp = dataStations[station].sensors[item];
-            dataStations[station].sensors[item] = {
+          for (let item in dataStations[station].devices) {
+            const itemTemp = dataStations[station].devices[item];
+            dataStations[station].devices[item] = {
               ...itemTemp,
-              isChecked: sensorIds.includes(itemTemp?.id),
+              isChecked: deviceIds.includes(itemTemp?.id),
               actions: itemTemp.actions.map((i) => {
                 if (actionIds?.includes(i.id)) {
                   action_checked.push(i);
@@ -173,8 +178,8 @@ const SelectPermission = ({ route }) => {
                 };
               }),
             };
-            if (dataStations[station].sensors[item]?.isChecked) {
-              sensor_checked.push(dataStations[station].sensors[item]);
+            if (dataStations[station].devices[item]?.isChecked) {
+              device_checked.push(dataStations[station].devices[item]);
             }
           }
         }
@@ -189,16 +194,16 @@ const SelectPermission = ({ route }) => {
             ...i,
             isChecked:
               check_action_config() &&
-              i?.sensors?.length === sensor_checked?.length &&
+              i?.devices?.length === device_checked?.length &&
               stationIds.includes(i.id),
           };
         });
-        const sensorIdsDefault = object_Ids(data)?.sensorIds;
+        const deviceIdsDefault = object_Ids(data)?.deviceIds;
         const stationIdsDefault = object_Ids(data)?.stationIds;
         setDataStations(data);
         setIsTickAllDevices(
           check_action_config() &&
-            sensorIdsDefault?.length === sensorIds?.length &&
+            deviceIdsDefault?.length === deviceIds?.length &&
             stationIdsDefault?.length === stationIds?.length
         );
         setHasDataChecked(false);
@@ -206,29 +211,28 @@ const SelectPermission = ({ route }) => {
     }
   }, [dataDeviceShared, dataStations, hasDataChecked, isUpdateSharedDevice]);
 
-  const GroupSenSorItem = ({ item = {} }) => {
-    const { name = '', sensors = [], isChecked, id = '' } = item;
+  const GroupDeviceItem = ({ item = {} }) => {
+    const { name = '', devices = [], isChecked, id = '' } = item;
     return (
       <View style={styles.viewGroup}>
         <TitleCheckBox
           title={name}
           wrapCheckBoxStyle={styles.checkBoxTile}
           onPress={onTickTitle}
-          titleStyle={styles.GroupSenSorItem}
+          titleStyle={styles.GroupDeviceItem}
           isChecked={isChecked}
           idGroup={id}
         />
-        <View style={styles.wrapSensor}>
-          {sensors?.map((i, index) => (
-            <SensorItem
+        <View style={styles.wrapDevice}>
+          {devices?.map((i, index) => (
+            <DeviceItem
               item={i}
               key={i.id}
-              isRenderSeparated={index !== sensors?.length - 1}
+              isRenderSeparated={index !== devices?.length - 1}
               onTickedChild={onTickedChild}
-              onTickedSensor={onTickedSensor}
-              titleGroup={name}
-              activeItemId={activeItemId}
-              setActiveItemId={setActiveItemId}
+              onTickedDevice={onTickedDevice}
+              isItemExpanded={expandedItemIds.includes(i.id)}
+              toggleItem={toggleDeviceItem(i)}
               idGroup={id}
             />
           ))}
@@ -241,7 +245,7 @@ const SelectPermission = ({ route }) => {
     let read_permissions = [],
       control_permissions = [];
     for (let station of dataStationTemp) {
-      for (let item of station.sensors) {
+      for (let item of station.devices) {
         let arrIdControlTemp = [],
           arrIdReadTemp = [];
 
@@ -252,21 +256,16 @@ const SelectPermission = ({ route }) => {
           i.isChecked && arrIdReadTemp.push(i.id);
         }
 
-        if (arrIdControlTemp.length) {
+        arrIdControlTemp.length &&
           control_permissions.push({ id: item.id, values: arrIdControlTemp });
-        }
 
-        if (arrIdReadTemp.length) {
+        arrIdReadTemp.length &&
           read_permissions.push({ id: item.id, values: arrIdReadTemp });
-        }
 
-        if (
-          !arrIdControlTemp.length &&
-          !arrIdReadTemp.length &&
-          item.isChecked
-        ) {
+        !arrIdControlTemp &&
+          !arrIdReadTemp &&
+          item.isChecked &&
           read_permissions.push({ id: item.id, values: [] });
-        }
       }
     }
     if (!read_permissions.length && !control_permissions.length) {
@@ -286,9 +285,7 @@ const SelectPermission = ({ route }) => {
         permissions: { read_permissions, control_permissions },
         is_remove_old_permission: true,
       });
-      if (success) {
-        navigation.goBack();
-      }
+      success && navigation.goBack();
     } else {
       navigation.navigate(Routes.SharingInviteMembers, {
         unit,
@@ -298,7 +295,7 @@ const SelectPermission = ({ route }) => {
   };
 
   const renderGroupItem = ({ item }) => (
-    <GroupSenSorItem key={item.id} item={item} />
+    <GroupDeviceItem key={item.id} item={item} />
   );
 
   const renderFlatList = useMemo(() => {
@@ -326,7 +323,7 @@ const SelectPermission = ({ route }) => {
     );
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dataStations, isTickAllDevices, activeItemId]);
+  }, [dataStations, isTickAllDevices, expandedItemIds]);
 
   useEffect(() => {
     autoCheckedGroup();
@@ -357,9 +354,7 @@ const SelectPermission = ({ route }) => {
       const { success, data } = await axiosGet(
         API.SHARE.UNIT_PERMISSIONS(unit.id)
       );
-      if (success) {
-        setDataStations(data);
-      }
+      success && setDataStations(data);
       setLoading(false);
     })();
   }, [dataStations?.length, isUpdateSharedDevice, member?.id, unit]);

package/src/screens/Sharing/Styles/SelectPermissionStyles.js

@@ -36,7 +36,7 @@ export default StyleSheet.create({
   checkBoxTile: {
     marginLeft: 5,
   },
-  wrapSensor: {
+  wrapDevice: {
     borderRadius: normalize(20),
     borderWidth: 1,
     borderColor: Colors.Gray4,
@@ -60,7 +60,7 @@ export default StyleSheet.create({
     fontFamily: FONT_PREFIX + '-' + 'Semibold',
     fontStyle: 'normal',
   },
-  GroupSenSorItem: {
+  GroupDeviceItem: {
     fontSize: 14,
     lineHeight: 22,
     fontWeight: '600',

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

@@ -5,7 +5,7 @@ import { create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 
 import SelectPermission from '../SelectPermission';
-import { SensorItem, TitleCheckBox } from '../Components';
+import { DeviceItem, TitleCheckBox } from '../Components';
 import { ViewButtonBottom } from '../../../commons';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
@@ -44,11 +44,11 @@ const wrapComponent = (route) => (
 describe('Test SelectPermission', () => {
   let tree;
   let route = { params: { unit: null } };
-  let listSensors = [
+  let listDevices = [
     {
       id: 204,
-      name: 'sensor',
-      sensors: [
+      name: 'device',
+      devices: [
         {
           id: 123,
           actions: [{ id: 136, name: 'action 1' }],
@@ -79,7 +79,7 @@ describe('Test SelectPermission', () => {
 
   function mocSetdata() {
     useState.mockImplementationOnce((init) => [
-      listSensors,
+      listDevices,
       mockSetDataStations,
     ]);
     useState.mockImplementationOnce((init) => [init, mockSetTickAllDevice]);
@@ -140,8 +140,8 @@ describe('Test SelectPermission', () => {
       {
         id: 204,
         isChecked: true,
-        name: 'sensor',
-        sensors: [
+        name: 'device',
+        devices: [
           {
             actions: [{ id: 136, isChecked: true, name: 'action 1' }],
             id: 123,
@@ -164,10 +164,10 @@ describe('Test SelectPermission', () => {
       tree = create(wrapComponent(route));
     });
     const instance = tree.root;
-    const SensorItemElement = instance.findAllByType(SensorItem);
-    expect(SensorItemElement).toHaveLength(1);
+    const DeviceItemElement = instance.findAllByType(DeviceItem);
+    expect(DeviceItemElement).toHaveLength(1);
     act(() => {
-      SensorItemElement[0].props.onTickedChild(204, 123, 137, true, true);
+      DeviceItemElement[0].props.onTickedChild(204, 123, 137, true, true);
     });
     expect(mockSetDataStations).toBeCalled();
   });
@@ -198,8 +198,8 @@ describe('Test SelectPermission', () => {
         {
           id: 204,
           isChecked: true,
-          name: 'sensor',
-          sensors: [
+          name: 'device',
+          devices: [
             {
               actions: [{ id: 136, isChecked: true, name: 'action 1' }],
               id: 123,

package/src/utils/Utils.js

@@ -110,24 +110,23 @@ export const removeFromString = (str, index) => {
 
 export const object_Ids = (data) => {
   let stationIds = [];
-  let sensorIds = [];
+  let deviceIds = [];
   let actionIds = [];
   let configIds = [];
   data?.forEach((station) => {
     stationIds.push(station?.id);
     //Todo change devices When production release end_devices
-    station?.sensors?.forEach((sensor) => {
-      sensorIds.push(sensor?.id);
-      sensor?.actions?.forEach((action) => {
+    station?.devices?.forEach((device) => {
+      deviceIds.push(device?.id);
+      device?.actions?.forEach((action) => {
         actionIds.push(action?.id);
       });
-      sensor?.read_configs?.forEach((config) => {
+      device?.read_configs?.forEach((config) => {
         configIds.push(config?.id);
       });
     });
   });
-  const listObject = { stationIds, sensorIds, actionIds, configIds } || {};
-  return listObject;
+  return { stationIds, deviceIds, actionIds, configIds } || {};
 };
 
 export const notImplemented = (t) => {