@eohjsc/react-native-smart-city 0.2.79 → 0.2.83

package/src/screens/AllCamera/index.js

@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { View, Text, TouchableOpacity, Platform, Image } from 'react-native';
 import { useRoute, useNavigation } from '@react-navigation/native';
 import { chunk } from 'lodash';
@@ -28,36 +34,51 @@ const AllCamera = () => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [dataFullScreen, setDataFullScreen] = useState();
 
-  const handleFullScreen = (data) => {
-    setIsFullScreen(!isFullScreen);
-    setDataFullScreen(data);
-  };
+  const handleFullScreen = useCallback(
+    (data) => {
+      setIsFullScreen(!isFullScreen);
+      setDataFullScreen(data);
+    },
+    [isFullScreen]
+  );
 
-  const onPressAmount = (value) => () => {
-    setAmount(value);
-    value === 1 && setActiveCamera(arrCameras[0]);
-    const dataTemp = [...arrCameras];
-    setData(value === 1 ? dataTemp : chunk(dataTemp, value));
-  };
+  const onPressAmount = useCallback(
+    (value) => () => {
+      setAmount(value);
+      value === 1 && setActiveCamera(arrCameras[0]);
+      const dataTemp = [...arrCameras];
+      setData(value === 1 ? dataTemp : chunk(dataTemp, value));
+      setCurrentPage(1);
+    },
+    [arrCameras]
+  );
 
-  const onPressNext = () =>
+  const onPressNext = useCallback(() => {
     currentPage !== data.length && carouselRef?.current?.snapToNext();
+  }, [currentPage, data.length]);
 
-  const onPressPrev = () =>
+  const onPressPrev = useCallback(() => {
     currentPage !== 1 && carouselRef?.current?.snapToPrev();
+  }, [currentPage]);
 
-  const onSnapToItem = (index) => {
-    setActiveCamera(data[index]);
-    setCurrentPage(index + 1);
-  };
+  const onSnapToItem = useCallback(
+    (index) => {
+      setActiveCamera(data[index]);
+      setCurrentPage(index + 1);
+    },
+    [data]
+  );
 
   const onClose = () => {
     setIsFullScreen(false);
   };
 
-  const goToPlayBack = (item, thumbnail) => () => {
-    navigate(Routes.PlaybackCamera, { item, thumbnail });
-  };
+  const goToPlayBack = useCallback(
+    (item, thumbnail) => () => {
+      navigate(Routes.PlaybackCamera, { item, thumbnail });
+    },
+    [navigate]
+  );
 
   const CameraItem = ({ item, width, height }) => {
     return (
@@ -82,7 +103,7 @@ const AllCamera = () => {
     );
   };
 
-  const renderItem = ({ item, index }) => {
+  const renderItem = ({ item }) => {
     return (
       <View style={styles.wrapItem}>
         {amount === 1 ? (
@@ -93,13 +114,13 @@ const AllCamera = () => {
               <CameraItem
                 key={item?.id}
                 item={item[0]}
-                width={188}
+                width={Constants.width / 2}
                 height={112}
               />
               <CameraItem
                 key={item?.id}
                 item={item[1]}
-                width={188}
+                width={Constants.width / 2}
                 height={112}
               />
             </View>
@@ -107,13 +128,13 @@ const AllCamera = () => {
               <CameraItem
                 key={item?.id}
                 item={item[2]}
-                width={188}
+                width={Constants.width / 2}
                 height={112}
               />
               <CameraItem
                 key={item?.id}
                 item={item[3]}
-                width={188}
+                width={Constants.width / 2}
                 height={112}
               />
             </View>
@@ -138,19 +159,23 @@ const AllCamera = () => {
 
   const renderCarousel = useMemo(() => {
     return (
-      <Carousel
-        ref={carouselRef}
-        data={data}
-        renderItem={renderItem}
-        sliderWidth={Constants.width}
-        itemWidth={Constants.width}
-        inactiveSlideScale={1}
-        onSnapToItem={onSnapToItem}
-        inactiveSlideOpacity={1}
-        extraData={data}
-        loop={false}
-        isForceIndex={Platform.OS === 'android'}
-      />
+      <View style={styles.wrapCarousel}>
+        <Carousel
+          ref={carouselRef}
+          data={data}
+          renderItem={renderItem}
+          sliderWidth={Constants.width}
+          itemWidth={Constants.width}
+          inactiveSlideScale={1}
+          onSnapToItem={onSnapToItem}
+          inactiveSlideOpacity={1}
+          extraData={data}
+          loop={false}
+          lockScrollWhileSnapping
+          isForceIndex={Platform.OS === 'android'}
+          removeClippedSubviews={false}
+        />
+      </View>
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
@@ -182,6 +207,17 @@ const AllCamera = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [amount]);
 
+  const renderName = useMemo(
+    () => (
+      <Text style={styles.cameraName}>
+        {amount === 1
+          ? activeCamera?.configuration?.name
+          : `${currentPage}/${data.length}`}
+      </Text>
+    ),
+    [activeCamera?.configuration?.name, amount, currentPage, data.length]
+  );
+
   useEffect(() => {
     const to = setTimeout(() => {
       carouselRef?.current?.snapToItem();
@@ -203,16 +239,12 @@ const AllCamera = () => {
             <TouchableOpacity style={styles.buttonNext} onPress={onPressPrev}>
               <Image source={Images.arrowLeft} />
             </TouchableOpacity>
-            <Text numberOfLines={1} style={styles.cameraName}>
-              {amount === 1
-                ? activeCamera?.configuration?.name
-                : `${currentPage}/${data.length}`}
-            </Text>
+            {renderName}
             <TouchableOpacity style={styles.buttonNext} onPress={onPressNext}>
               <Image source={Images.arrowLeft} style={styles.arrowRight} />
             </TouchableOpacity>
           </View>
-          <View style={styles.wrapCarousel}>{renderCarousel}</View>
+          {renderCarousel}
           {renderAmount}
         </View>
       </View>

package/src/screens/Device/EditDevice/__test__/EditDevice.test.js

@@ -90,7 +90,7 @@ describe('Test EditDevice', () => {
     await act(async () => {
       await alertAction.props.rightButtonClick();
     });
-    expect(axios.patch).toHaveBeenCalledWith(API.SENSOR.RENAME_SENSOR(1), {
+    expect(axios.patch).toHaveBeenCalledWith(API.SENSOR.SENSOR_DETAIL(1), {
       name: 'new_name',
     });
     expect(alertAction.props.visible).toBeFalsy();
@@ -119,7 +119,7 @@ describe('Test EditDevice', () => {
     await act(async () => {
       await alertAction.props.rightButtonClick();
     });
-    expect(axios.delete).toHaveBeenCalledWith(API.SENSOR.REMOVE_SENSOR(1));
+    expect(axios.delete).toHaveBeenCalledWith(API.SENSOR.SENSOR_DETAIL(1));
     expect(alertAction.props.visible).toBeFalsy();
     expect(mockPop).toHaveBeenCalled();
   });

package/src/screens/Device/EditDevice/index.js

@@ -29,7 +29,7 @@ const EditDevice = memo(() => {
     useEditDevice();
   const renameSensor = useCallback(async () => {
     const { success, data } = await axiosPatch(
-      API.SENSOR.RENAME_SENSOR(sensor?.id),
+      API.SENSOR.SENSOR_DETAIL(sensor?.id),
       {
         name: inputName,
       }
@@ -53,7 +53,7 @@ const EditDevice = memo(() => {
 
   const deleteSensor = useCallback(async () => {
     hideAlertAction();
-    const { success } = await axiosDelete(API.SENSOR.REMOVE_SENSOR(sensor?.id));
+    const { success } = await axiosDelete(API.SENSOR.SENSOR_DETAIL(sensor?.id));
 
     if (success) {
       navigation.pop(2);

package/src/screens/Device/__test__/detail.test.js

@@ -93,7 +93,7 @@ describe('test DeviceDetail', () => {
   beforeEach(() => {
     route = {
       params: {
-        unit: {
+        unitData: {
           id: 1,
           name: 'Unit name',
           address: '298 Dien Bien Phu',
@@ -105,10 +105,11 @@ describe('test DeviceDetail', () => {
           id: 2,
           name: 'Station name',
         },
-        sensor: {
+        sensorData: {
           id: 1,
           is_managed_by_backend: true,
           station: { id: 2, name: 'Station name' },
+          name: 'Sensor name',
         },
         title: 'Button',
       },
@@ -252,7 +253,9 @@ describe('test DeviceDetail', () => {
     });
     expect(axios.post).toHaveBeenCalledWith(API.SENSOR.QUICK_ACTION(1), {
       key: responseDisplay.data.items[1].configuration.configuration.action1,
+      data: null,
       source: 'internet',
+      action_name: undefined,
     });
 
     const button2 = instance.find(
@@ -263,7 +266,9 @@ describe('test DeviceDetail', () => {
     });
     expect(axios.post).toHaveBeenCalledWith(API.SENSOR.QUICK_ACTION(1), {
       key: responseDisplay.data.items[1].configuration.configuration.action2,
+      data: null,
       source: 'internet',
+      action_name: undefined,
     });
 
     const button3 = instance.find(
@@ -274,7 +279,9 @@ describe('test DeviceDetail', () => {
     });
     expect(axios.post).toHaveBeenCalledWith(API.SENSOR.QUICK_ACTION(1), {
       key: responseDisplay.data.items[1].configuration.configuration.action3,
+      data: null,
       source: 'internet',
+      action_name: undefined,
     });
   });
 
@@ -628,7 +635,7 @@ describe('test DeviceDetail', () => {
   });
 
   test('not fetch value if not managed by backend', async () => {
-    route.params.sensor.is_managed_by_backend = false;
+    route.params.sensorData.is_managed_by_backend = false;
 
     await act(async () => {
       tree = await create(wrapComponent(account, route));
@@ -638,7 +645,7 @@ describe('test DeviceDetail', () => {
   });
 
   test('render CurrentRainSensor but is other device', async () => {
-    route.params.sensor.is_other_device = true;
+    route.params.sensorData.is_other_device = true;
     route.params.isGGHomeConnected = true;
 
     const responseDisplay = {
@@ -708,9 +715,9 @@ describe('test DeviceDetail', () => {
   });
 
   test('Add device to Favourites', async () => {
-    const unit_id = route.params.unit.id;
+    const unit_id = route.params.unitData.id;
     const station_id = route.params.station.id;
-    const sensor = route.params.sensor;
+    const sensor = route.params.sensorData;
     sensor.is_favourite = false;
 
     await act(async () => {
@@ -736,9 +743,9 @@ describe('test DeviceDetail', () => {
   });
 
   test('Remove device from Favourites', async () => {
-    const unit_id = route.params.unit.id;
+    const unit_id = route.params.unitData.id;
     const station_id = route.params.station.id;
-    const sensor = route.params.sensor;
+    const sensor = route.params.sensorData;
     sensor.is_favourite = true;
 
     await act(async () => {
@@ -810,12 +817,12 @@ describe('test DeviceDetail', () => {
       await menu.props.onItemClick(gotoActivityLog);
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.ActivityLog, {
-      id: route.params.sensor.id,
+      id: route.params.sensorData.id,
       type: 'action',
-      share: route.params.unit,
+      share: route.params.unitData,
       filterEnabled: {
         date: true,
-        user: Boolean(route.params.unit.id),
+        user: Boolean(route.params.unitData.id),
       },
     });
   });

package/src/screens/Device/components/SensorConnectStatusViewHeader.js

@@ -3,7 +3,7 @@ import { ConnectedViewHeader, DisconnectedView } from '../../../commons/Device';
 import { DEVICE_TYPE } from '../../../configs/Constants';
 
 export const SensorConnectStatusViewHeader = (props) => {
-  if (!!props.sensor && !props.sensor.is_other_device) {
+  if (!!props.sensor && !props.sensor?.is_other_device) {
     if (props.connected) {
       return (
         <>
@@ -31,7 +31,7 @@ export const SensorConnectStatusViewHeader = (props) => {
       return <DisconnectedView sensor={props.sensor} />;
     }
   } else {
-    if (props.sensor.device_type === DEVICE_TYPE.LG_THINQ) {
+    if (props.sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
       return (
         <>
           <ConnectedViewHeader lastUpdated={props.lastUpdated} />

package/src/screens/Device/components/SensorDisplayItem.js

@@ -40,8 +40,8 @@ export const SensorDisplayItem = ({
   const t = useTranslations();
   const userId = useSCContextSelector((state) => state.auth.account.user.id);
   const doAction = useCallback(
-    (action, data) => {
-      sendRemoteCommand(sensor, action, data, userId);
+    (action, data, actionName) => {
+      sendRemoteCommand(sensor, action, data, userId, actionName);
     },
     [sensor, userId]
   );

package/src/screens/Device/detail.js

@@ -70,9 +70,13 @@ const DeviceDetail = ({ route }) => {
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
 
-  const { unit, sensor, isGGHomeConnected, station } = route.params;
-  const [isFavourite, setIsFavourite] = useState(sensor.is_favourite);
-  const { isOwner } = useIsOwnerOfUnit(unit.user_id);
+  const { unitData, unitId, sensorData, sensorId, isGGHomeConnected } =
+    route.params;
+  const [unit, setUnit] = useState(unitData || { id: unitId });
+  const [sensor, setSensor] = useState(sensorData || { id: sensorId });
+  const [station, setStation] = useState(sensor?.station);
+  const [isFavourite, setIsFavourite] = useState(sensor?.is_favourite);
+  const { isOwner } = useIsOwnerOfUnit(unit?.user_id);
   const [sensorName, setSensorName] = useState(sensor?.name);
   const [lockShowing, acquireLockShowing, releaseLockShowing] = useBoolean();
   const [showWindDirection, setShowWindDirection] = useState(false);
@@ -108,7 +112,7 @@ const DeviceDetail = ({ route }) => {
 
   const addToFavorites = useCallback(async () => {
     const { success } = await axiosPost(
-      API.SENSOR.ADD_TO_FAVOURITES(unit.id, sensor.station.id, sensor.id)
+      API.SENSOR.ADD_TO_FAVOURITES(unit?.id, sensor?.station?.id, sensor?.id)
     );
     if (success) {
       setIsFavourite(true);
@@ -117,7 +121,11 @@ const DeviceDetail = ({ route }) => {
 
   const removeFromFavorites = useCallback(async () => {
     const { success } = await axiosPost(
-      API.SENSOR.REMOVE_FROM_FAVOURITES(unit.id, sensor.station.id, sensor.id)
+      API.SENSOR.REMOVE_FROM_FAVOURITES(
+        unit?.id,
+        sensor?.station.id,
+        sensor?.id
+      )
     );
     if (success) {
       setIsFavourite(false);
@@ -129,9 +137,39 @@ const DeviceDetail = ({ route }) => {
   );
 
   const canManageSubUnit = useMemo(() => {
-    return currentUserId === unit.user_id;
+    return currentUserId === unit?.user_id;
   }, [currentUserId, unit]);
 
+  const fetchUnitDetail = useCallback(async () => {
+    const { success, data } = await axiosGet(API.UNIT.UNIT_DETAIL(unit?.id));
+    if (success) {
+      setUnit(data);
+    }
+  }, [unit?.id]);
+
+  useEffect(() => {
+    if (!unitData && unitId) {
+      fetchUnitDetail();
+    }
+  }, [fetchUnitDetail, unitData, unitId]);
+
+  const fetchSensorDetail = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SENSOR.SENSOR_DETAIL(sensor?.id)
+    );
+    if (success) {
+      setSensor(data);
+      setSensorName(data.name);
+      setStation(data.station);
+    }
+  }, [sensor?.id]);
+
+  useEffect(() => {
+    if (!sensorData && sensorId) {
+      fetchSensorDetail();
+    }
+  }, [fetchSensorDetail, sensorData, sensorId]);
+
   const fetchDataDeviceDetail = useCallback(async () => {
     if (!token) {
       return;
@@ -141,7 +179,7 @@ const DeviceDetail = ({ route }) => {
     }
 
     const displayResult = await axiosGet(
-      API.SENSOR.DISPLAY(sensor.id),
+      API.SENSOR.DISPLAY(sensor?.id),
       {},
       true
     );
@@ -168,7 +206,7 @@ const DeviceDetail = ({ route }) => {
     setLoading((preState) => ({ ...preState, displayTemplate: false }));
 
     const controlResult = await axiosGet(
-      API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor.id),
+      API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor?.id),
       {},
       true
     );
@@ -212,12 +250,12 @@ const DeviceDetail = ({ route }) => {
       menuItems.push({
         route: Routes.ActivityLog,
         data: {
-          id: sensor.id,
+          id: sensor?.id,
           type: 'action',
           share: unit,
           filterEnabled: {
             date: true,
-            user: Boolean(unit.id),
+            user: Boolean(unit?.id),
           },
         },
         text: t('activity_log'),
@@ -352,7 +390,7 @@ const DeviceDetail = ({ route }) => {
 
     const fetchValues = async () => {
       const { success, data } = await axiosGet(
-        API.SENSOR.DISPLAY_VALUES_V2(sensor.id),
+        API.SENSOR.DISPLAY_VALUES_V2(sensor?.id),
         {
           params: params,
         }
@@ -365,7 +403,7 @@ const DeviceDetail = ({ route }) => {
       }
       setLoading((preState) => ({ ...preState, isConnected: false }));
     };
-    if (sensor.is_managed_by_backend && !sensor.is_other_device) {
+    if (sensor?.is_managed_by_backend && !sensor?.is_other_device) {
       const updateInterval = setInterval(() => fetchValues(), 5000);
       fetchValues();
       return () => clearInterval(updateInterval);
@@ -405,12 +443,12 @@ const DeviceDetail = ({ route }) => {
     ).length > 0;
 
   const onSetupContacts = useCallback(() => {
-    const group = unit.group;
+    const group = unit?.group;
     navigation.navigate(Routes.EmergencyContactsStack, {
       screen: Routes.EmergencyContactsList,
-      params: { unitId: unit.id, group },
+      params: { unitId: unit?.id, group },
     });
-  }, [navigation, unit.group, unit.id]);
+  }, [navigation, unit?.group, unit?.id]);
 
   // replace isConnected=True to see template
   const renderSensorConnected = () => {
@@ -448,12 +486,12 @@ const DeviceDetail = ({ route }) => {
 
   const getDataFromLocal = async () => {
     const displayData = await getLocalData(
-      `@CACHE_REQUEST_${API.SENSOR.DISPLAY(sensor.id)}`
+      `@CACHE_REQUEST_${API.SENSOR.DISPLAY(sensor?.id)}`
     );
     displayData && setDisplay(JSON.parse(displayData));
 
     const controlOptionData = await getLocalData(
-      `@CACHE_REQUEST_${API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor.id)}`
+      `@CACHE_REQUEST_${API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor?.id)}`
     );
     controlOptionData && setControlOptions(JSON.parse(controlOptionData));
     setLoading((preState) => ({ ...preState, displayTemplate: false }));
@@ -557,7 +595,7 @@ const DeviceDetail = ({ route }) => {
           onSendNowAlert={onSendNowAlert}
           onHide={releaseLockShowing}
           unit={unit}
-          station={sensor.station}
+          station={sensor?.station}
         />
 
         <AlertSent
@@ -566,7 +604,7 @@ const DeviceDetail = ({ route }) => {
           onPressMain={onViewDetails}
           onHide={releaseLockShowing}
           unit={unit}
-          station={sensor.station}
+          station={sensor?.station}
         />
       </WrapHeaderScrollable>
       {isShowEmergencyResolve && (
@@ -605,7 +643,7 @@ const DeviceDetail = ({ route }) => {
             type="H4"
             style={styles.textName}
           >
-            {unit.name} - {sensor.station.name}
+            {unit?.name} - {sensor?.station?.name}
           </Text>
           <IconFill
             testID={TESTID.BUTTON_POPUP_RESOLVED_ICON}