@eohjsc/react-native-smart-city 0.7.24 → 0.7.26

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 
-import FastImage from 'react-native-fast-image';
+import Carousel from 'react-native-new-snap-carousel';
 import MyUnit from '..';
 import { API } from '../../../../configs';
 import { AccessibilityLabel } from '../../../../configs/Constants';
@@ -12,13 +12,12 @@ import { flushPromises } from '../../../../screens/AllGateway/test-utils';
 import MyUnitDevice from '../../../../screens/Unit/components/MyUnitDevice';
 import api from '../../../../utils/Apis/axios';
 import Routes from '../../../../utils/Route';
-import { removeMultiple, STORAGE_KEY } from '../../../../utils/Storage';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const wrapComponent = (data = {}) => (
+const wrapComponent = (data = {}, refreshing = true) => (
   <SCProvider initState={mockSCStore(data)}>
-    <MyUnit refreshing={true} />
+    <MyUnit refreshing={refreshing} />
   </SCProvider>
 );
 
@@ -27,42 +26,45 @@ describe('Test MyUnit', () => {
   let stateData = {
     app: { isDeleteUnitSuccessFully: true, isNeedUpdateCache: true },
   };
-  let data = [
-    {
-      id: 1,
-      name: 'name',
-      background: 'background',
-      abstract_devices: [
-        {
-          id: 1,
-          name: 'device',
-          is_managed_by_backend: true,
-          device_type: 'GOOGLE_HOME',
-          station_name: 'name',
-        },
-        {
-          id: 2,
-          name: 'device',
-          is_managed_by_backend: true,
-          device_type: '',
-          station_name: 'name',
-          quick_action: {
-            config_id: 1,
+  let data = {
+    count: 2,
+    next: null,
+    previous: null,
+    results: [
+      {
+        id: 1,
+        name: 'name',
+        background: 'background',
+        abstract_devices: [
+          {
+            id: 1,
+            name: 'device',
+            is_managed_by_backend: true,
+            device_type: 'GOOGLE_HOME',
+            station_name: 'name',
           },
-        },
-      ],
-    },
-    {
-      id: 2,
-      name: 'name2',
-      background: 'background',
-    },
-  ];
+          {
+            id: 2,
+            name: 'device',
+            is_managed_by_backend: true,
+            device_type: '',
+            station_name: 'name',
+            quick_action: {
+              config_id: 1,
+            },
+          },
+        ],
+      },
+      {
+        id: 2,
+        name: 'name2',
+        background: 'background',
+      },
+    ],
+  };
 
   beforeEach(async () => {
     mock.resetHistory();
-    FastImage.preload.mockClear();
-    await removeMultiple([STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS]);
   });
 
   const getElement = (instance) => {
@@ -88,7 +90,7 @@ describe('Test MyUnit', () => {
   });
 
   it('MyUnit with unit', async () => {
-    mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, data);
+    mock.onGet(API.UNIT_V2.MY_UNITS(1, 10)).replyOnce(200, data);
     await act(async () => {
       tree = await renderer.create(wrapComponent(stateData));
     });
@@ -101,16 +103,18 @@ describe('Test MyUnit', () => {
       accessibilityLabel: `${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-0`,
     });
     await act(async () => {
-      await button.props.onPress(data[0]);
+      await button.props.onPress(data.results[0]);
     });
     expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
       params: { unitId: 1 },
       screen: Routes.UnitDetail,
     });
+    expect(mock.history.get).toHaveLength(1);
+    expect(mock.history.get[0].url).toEqual(API.UNIT_V2.MY_UNITS(1, 10));
   });
 
   it('Test isNeedUpdateCache = false', async () => {
-    mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, [data[1]]);
+    mock.onGet(API.UNIT_V2.MY_UNITS(1, 10)).replyOnce(200, data);
     await act(async () => {
       tree = await renderer.create(
         wrapComponent({ app: { isNeedUpdateCache: false } })
@@ -118,10 +122,10 @@ describe('Test MyUnit', () => {
     });
     const instance = tree.root;
     const button = instance.findByProps({
-      accessibilityLabel: `${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-0`,
+      accessibilityLabel: `${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-1`,
     });
     await act(async () => {
-      await button.props.onPress(data[1]);
+      await button.props.onPress(data.results[1]);
     });
     expect(global.mockedNavigate).toHaveBeenCalledWith('UnitStack', {
       params: { unitId: 2 },
@@ -129,18 +133,80 @@ describe('Test MyUnit', () => {
     });
   });
 
-  it('Test preload image', async () => {
-    mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, [data[1]]);
-    mock.onGet(API.UNIT.UNIT_DETAIL(2)).replyOnce(200, {
-      stations: [{ background: 'background' }],
+  it('Test fetch when refreshing = false', async () => {
+    mock.onGet(API.UNIT_V2.MY_UNITS(1, 10)).replyOnce(200, data);
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ app: { isNeedUpdateCache: false } }, false)
+      );
+    });
+    expect(mock.history.get).toHaveLength(1);
+    expect(mock.history.get[0].url).toEqual(API.UNIT_V2.MY_UNITS(1, 10));
+  });
+
+  it('Test fetch unit data when snap to item', async () => {
+    const base = data.results[0];
+    const extraIds = Array.from({ length: 9 }, (_, i) => i + 3);
+    const extraResults = extraIds.map((id) => ({
+      ...base,
+      id,
+    }));
+    mock.onGet(API.UNIT_V2.MY_UNITS(1, 10)).replyOnce(200, {
+      ...data,
+      count: 11,
+      results: [...data.results, ...extraResults],
     });
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ app: { isNeedUpdateCache: false } }, false)
+      );
+    });
+    const instance = tree.root;
+    const carousel = instance.findByType(Carousel);
+
+    await act(() => {
+      carousel.props.onSnapToItem(3);
+    });
+    await act(() => {
+      carousel.props.onSnapToItem(4);
+    });
+    expect(mock.history.get).toHaveLength(1);
+    expect(mock.history.get[0].url).toEqual(API.UNIT_V2.MY_UNITS(1, 10));
+    await act(() => {
+      carousel.props.onSnapToItem(5);
+    });
+    await act(() => {
+      carousel.props.onSnapToItem(6);
+    });
+    expect(mock.history.get).toHaveLength(2);
+    expect(mock.history.get[1].url).toEqual(API.UNIT_V2.MY_UNITS(2, 10));
+    await act(() => {
+      carousel.props.onSnapToItem(4);
+    });
+    await act(() => {
+      carousel.props.onSnapToItem(3);
+    });
+    expect(mock.history.get).toHaveLength(3);
+    expect(mock.history.get[2].url).toEqual(API.UNIT_V2.MY_UNITS(1, 10));
+  });
+
+  it('Test navigation select unit', async () => {
+    mock.onGet(API.UNIT_V2.MY_UNITS(1, 10)).replyOnce(200, data);
     await act(async () => {
       tree = await renderer.create(
         wrapComponent({ app: { isNeedUpdateCache: false } })
       );
     });
-    expect(FastImage.preload).toHaveBeenCalledWith([
-      { uri: 'background', priority: FastImage.priority.high },
-    ]);
+
+    const instance = tree.root;
+    const button = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.SELECT_UNIT,
+    });
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+      screen: Routes.GoToDetailUnit,
+    });
   });
 });

package/src/commons/Dashboard/MyUnit/index.js

@@ -23,13 +23,13 @@ import { Action } from '../../../context/actionType';
 import { BleManager } from 'react-native-ble-plx';
 import Carousel from 'react-native-new-snap-carousel';
 import FImage from '../../FImage';
+import SearchMenu from '../../../Images/Common/search-menu.svg';
 import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
 import NetInfo from '@react-native-community/netinfo';
+import { PAGE_SIZE } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
-import { STORAGE_KEY } from '../../../utils/Storage';
 import { Section } from '../../Section';
 import Text from '../../Text';
-import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
 import styles from './styles';
 import { usePrevious } from '../../../hooks';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
@@ -44,7 +44,9 @@ const MyUnit = ({ refreshing }) => {
   const t = useTranslations();
   const isFocused = useIsFocused();
   const navigation = useNavigation();
-  const [myUnits, setMyUnits] = useState([]);
+  const [page, setPage] = useState(1);
+  const [maxPageUnit, setMaxPageUnit] = useState(1);
+  const [unitsByPage, setUnitsByPage] = useState(() => new Map());
   const previousMyUnits = usePrevious(myUnits);
   const [slideIndex, setSlideIndex] = useState(0);
   const { setAction } = useContext(SCContext);
@@ -54,6 +56,10 @@ const MyUnit = ({ refreshing }) => {
   const isNeedUpdateCache = useSCContextSelector(
     (state) => state?.app?.isNeedUpdateCache
   );
+  const myUnits = useMemo(() => {
+    const pages = [...unitsByPage.keys()];
+    return pages.flatMap((p) => unitsByPage.get(p));
+  }, [unitsByPage]);
 
   const {
     permissionsRequested: bluetoothPermRequested,
@@ -64,25 +70,51 @@ const MyUnit = ({ refreshing }) => {
     !bluetoothPermRequested && requestBluetoothPerm();
   }, [bluetoothPermRequested, requestBluetoothPerm]);
 
-  const fetchMyUnitDashboard = useCallback(async () => {
+  const fetchMyUnitDashboard = useCallback(async (pageParam) => {
+    const handleSuccess = (data) => {
+      setUnitsByPage((prev) => {
+        const next = new Map(prev);
+        next.set(pageParam, data.results);
+        return next;
+      });
+      setMaxPageUnit(Math.ceil(data.count / PAGE_SIZE));
+    };
+
     if (isNeedUpdateCache) {
       setAction(Action.IS_CHECK_CLEAR_CACHE_UNITS, false);
-      const { success, data } = await axiosGet(API.UNIT.MY_UNITS(), {}, true);
-      if (success) {
-        setMyUnits(data);
-        setAction(Action.SET_MY_UNITS, data);
-      }
+      const { success, data } = await axiosGet(
+        API.UNIT_V2.MY_UNITS(pageParam, PAGE_SIZE),
+        {},
+        true
+      );
+      success && handleSuccess(data);
     } else {
-      await fetchWithCache(API.UNIT.MY_UNITS(), {}, (response) => {
-        const { success, data } = response;
-        if (success) {
-          setMyUnits(data);
-          setAction(Action.SET_MY_UNITS, data);
+      await fetchWithCache(
+        API.UNIT_V2.MY_UNITS(pageParam, PAGE_SIZE),
+        {},
+        (response) => {
+          const { success, data } = response;
+          success && handleSuccess(data);
         }
-      });
+      );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setMyUnits]);
+  }, []);
+
+  const onSnapToItem = useCallback(
+    (index) => {
+      const isUp = index > slideIndex;
+      const mid = page * PAGE_SIZE - PAGE_SIZE / 2;
+      if (isUp && index >= mid && page < maxPageUnit) {
+        setPage((prev) => prev + 1);
+      }
+      if (!isUp && index < mid && page > 1) {
+        setPage((prev) => prev - 1);
+      }
+      setSlideIndex(index);
+    },
+    [page, slideIndex, maxPageUnit]
+  );
 
   useFocusEffect(
     useCallback(() => {
@@ -136,6 +168,12 @@ const MyUnit = ({ refreshing }) => {
     [navigation]
   );
 
+  const goToSelectUnit = useCallback(() => {
+    navigation.navigate(Routes.UnitStack, {
+      screen: Routes.GoToDetailUnit,
+    });
+  }, [navigation]);
+
   const _renderItem = useCallback(
     ({ item, index }) => {
       const paddingLeft = index === 0 ? 0 : 8;
@@ -176,15 +214,15 @@ const MyUnit = ({ refreshing }) => {
   );
 
   useEffect(() => {
-    myUnits?.length &&
-      preloadImagesFromUnits(myUnits, STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS);
-  }, [myUnits]);
-
-  useEffect(() => {
+    let pageParam = page;
+    if (refreshing) {
+      pageParam = Math.floor(slideIndex / PAGE_SIZE) + 1;
+    }
     if (isFocused || refreshing) {
-      fetchMyUnitDashboard();
+      fetchMyUnitDashboard(pageParam);
     }
-  }, [fetchMyUnitDashboard, isFocused, refreshing]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchMyUnitDashboard, page, isFocused, refreshing]);
 
   useEffect(() => {
     if (isDeleteUnitSuccessFully || previousMyUnits?.length > myUnits?.length) {
@@ -201,9 +239,18 @@ const MyUnit = ({ refreshing }) => {
   return (
     <>
       <Section style={styles.boxTxtMyUnit}>
-        <Text style={styles.unitsHeading} type="H5" color={Colors.Gray8}>
-          {t('text_my_units')}
-        </Text>
+        <View style={styles.titleWrap}>
+          <Text style={styles.unitsHeading} type="H5" color={Colors.Gray8}>
+            {t('text_my_units')}
+          </Text>
+          <TouchableOpacity
+            onPress={goToSelectUnit}
+            style={styles.searchMenuButton}
+            accessibilityLabel={AccessibilityLabel.SELECT_UNIT}
+          >
+            <SearchMenu style={styles.searchMenuIcon} />
+          </TouchableOpacity>
+        </View>
         <View style={styles.container}>
           {myUnits.length ? (
             <Carousel
@@ -213,7 +260,7 @@ const MyUnit = ({ refreshing }) => {
               itemWidth={screenWidth - 32}
               renderItem={_renderItem}
               inactiveSlideScale={1}
-              onSnapToItem={setSlideIndex}
+              onSnapToItem={onSnapToItem}
             />
           ) : (
             <View>

package/src/commons/Dashboard/MyUnit/styles.js

@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 16,
     paddingBottom: 8,
-    paddingTop: 16,
+    paddingTop: 8,
   },
   container: {
     flex: 1,
@@ -52,10 +52,25 @@ const styles = StyleSheet.create({
     bottom: 16,
     left: 16,
   },
+  titleWrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
   btnItem: {
     height: 121,
     marginBottom: 16,
   },
+  searchMenuButton: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  searchMenuIcon: {
+    width: 22,
+    height: 22,
+  },
 });
 
 export default styles;

package/src/commons/DateTimeRangeChange/index.js

@@ -156,7 +156,7 @@ const styles = StyleSheet.create({
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: 16,
+    marginTop: 8,
   },
   spaceBetween: {
     justifyContent: 'space-between',

package/src/commons/Device/ItemDevice.js

@@ -18,7 +18,7 @@ import IconComponent from '../IconComponent';
 import ItemDeviceWrapper from './ItemDeviceWrapper';
 
 const ItemDevice = memo(
-  ({ description, title, sensor, unit, station, wrapStyle }) => {
+  ({ description, title, sensor, unit, station, goToDetail, wrapStyle }) => {
     const t = useTranslations();
     const navigation = useNavigation();
     const { is_managed_by_backend, device_type, icon_kit, icon, quick_action } =
@@ -44,6 +44,14 @@ const ItemDevice = memo(
       });
     }, [navigation, sensor, station, title, unit]);
 
+    const onPress = useCallback(() => {
+      if (goToDetail) {
+        goToDetail();
+      } else {
+        goToSensorDisplay();
+      }
+    }, [goToDetail, goToSensorDisplay]);
+
     const textConnected = useMemo(() => {
       if (is_managed_by_backend) {
         if (
@@ -80,10 +88,11 @@ const ItemDevice = memo(
         device={sensor}
         unit={unit}
         station={station}
+        goToDetail={goToDetail}
         wrapStyle={wrapStyle}
       >
         <View style={styles.boxIcon}>
-          <TouchableOpacity onPress={goToSensorDisplay}>
+          <TouchableOpacity onPress={onPress}>
             <IconComponent icon={icon_kit || icon} />
           </TouchableOpacity>
           {canRenderQuickAction && (
@@ -94,7 +103,7 @@ const ItemDevice = memo(
             />
           )}
         </View>
-        <TouchableOpacity onPress={goToSensorDisplay}>
+        <TouchableOpacity onPress={onPress}>
           <Text
             numberOfLines={1}
             semibold

package/src/commons/Device/ItemDeviceWrapper.js

@@ -17,7 +17,7 @@ import {
 } from '../../configs/Constants';
 
 const ItemDeviceWrapper = memo(
-  ({ device, unit, station, wrapStyle, children }) => {
+  ({ device, unit, station, goToDetail, wrapStyle, children }) => {
     const navigation = useNavigation();
 
     const {
@@ -42,6 +42,14 @@ const ItemDeviceWrapper = memo(
       });
     }, [navigation, device, station, unit]);
 
+    const onPress = useCallback(() => {
+      if (goToDetail) {
+        goToDetail();
+      } else {
+        goToSensorDisplay();
+      }
+    }, [goToDetail, goToSensorDisplay]);
+
     const borderColor = useMemo(() => {
       if (!!device && device?.is_managed_by_backend) {
         if (device?.device_type === DEVICE_TYPE.LG_THINQ) {
@@ -73,7 +81,7 @@ const ItemDeviceWrapper = memo(
 
     return (
       <TouchableWithoutFeedback
-        onPress={goToSensorDisplay}
+        onPress={onPress}
         accessibilityLabel={`${AccessibilityLabel.SENSOR_NAME}-${device?.id}`}
       >
         <View

package/src/commons/SelectUnit/index.js

@@ -1,12 +1,14 @@
 import { useNavigation } from '@react-navigation/native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
 
 import { API } from '../../configs';
 import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { axiosGet } from '../../utils/Apis/axios';
+import { convertToSlug } from '../../utils/Functions/Search';
 import Text from '../../commons/Text';
+import { Search } from '../../commons/DevMode';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import styles from './styles';
 import { HeaderCustom } from '../Header';
@@ -48,11 +50,20 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
   const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [search, setSearch] = useState('');
   const [units, setUnits] = useState([]);
 
+  const filterUnits = useMemo(() => {
+    setSelectedIndex(-1);
+    return units.filter((unit) => {
+      const text = convertToSlug(search);
+      return convertToSlug(unit.name).includes(text);
+    });
+  }, [units, search]);
+
   const onRightClick = useCallback(() => {
-    onPressNext(units[selectedIndex]);
-  }, [onPressNext, selectedIndex, units]);
+    onPressNext(filterUnits[selectedIndex]);
+  }, [onPressNext, selectedIndex, filterUnits]);
 
   useEffect(() => {
     (async () => {
@@ -66,6 +77,7 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
       }
     })();
   }, []);
+
   return (
     <View
       style={styles.container}
@@ -73,6 +85,7 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
     >
       <HeaderCustom title={title} isShowSeparator />
       <Text style={styles.subtitle}>{subTitle}</Text>
+      <Search onSearch={setSearch} />
       <View style={styles.contentContainer}>
         <ScrollView
           style={styles.scrollContainer}
@@ -80,13 +93,14 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
           scrollIndicatorInsets={{ right: 1 }}
         >
           <Section type={'border'}>
-            {units.map((item, index) => (
+            {filterUnits.map((item, index) => (
               <UnitItem
                 key={item?.id?.toString()}
                 item={item}
                 index={index}
                 setSelectedIndex={setSelectedIndex}
                 selectedIndex={selectedIndex}
+                accessibilityLabel={AccessibilityLabel.ITEM_UNIT}
               />
             ))}
           </Section>

package/src/commons/SelectUnit/styles.js

@@ -28,7 +28,6 @@ const styles = StyleSheet.create({
     lineHeight: 22,
     marginTop: 16,
     marginLeft: 16,
-    marginBottom: 16,
   },
   row: {
     flex: 1,

package/src/commons/SubUnit/DeviceTemplate/DeviceTemplate.js

@@ -3,14 +3,19 @@ import { getTemplate } from './';
 import ItemDeviceWrapper from '../../Device/ItemDeviceWrapper';
 
 export const DeviceTemplate = memo(
-  ({ device, stationItem, unit, station, key }) => {
+  ({ device, stationItem, unit, station, goToDetail }) => {
     const Template = getTemplate(stationItem);
     if (!Template) {
       return null;
     }
     return (
-      <ItemDeviceWrapper device={device} unit={unit} station={station}>
-        <Template.Display device={device} stationItem={stationItem} key={key} />
+      <ItemDeviceWrapper
+        device={device}
+        unit={unit}
+        station={station}
+        goToDetail={goToDetail}
+      >
+        <Template.Display device={device} stationItem={stationItem} />
       </ItemDeviceWrapper>
     );
   }

package/src/commons/Widgets/IFrame/IFrameStyles.js

@@ -34,5 +34,6 @@ export const styles = StyleSheet.create({
     width: '100%',
     display: 'flex',
     height: 200,
+    marginBottom: 16,
   },
 });

package/src/commons/Widgets/IFrameWithConfig/IFrameWithConfigStyles.js

@@ -5,5 +5,6 @@ export const styles = {
   wrapper: {
     width: '100%',
     display: 'flex',
+    marginBottom: 16,
   },
 };

package/src/configs/API.js

@@ -27,6 +27,9 @@ const API = {
     END_DEVICES_STATUS: (id) =>
       `/property_manager/units/${id}/end_devices_status/`,
     CHANGE_OWNER: (id) => `/property_manager/units/${id}/change_owner/`,
+    MY_DASHBOARD_DEVICES: () => '/property_manager/units/my_dashboard_devices/',
+    DASHBOARD_DEVICES: (id) =>
+      `/property_manager/units/${id}/dashboard_devices/`,
     FAVOURITE_DEVICES: (id) =>
       `/property_manager/units/${id}/favourite_devices/`,
     DEVICES_NOT_FAVORITES: (id) =>
@@ -38,6 +41,10 @@ const API = {
     STAR_AUTOMATE_SCRIPTS: (id) =>
       `/property_manager/units/${id}/star_automate_scripts/`,
   },
+  UNIT_V2: {
+    MY_UNITS: (page, pageSize) =>
+      `/property_manager/units_v2/my_with_devices/?page=${page}&page_size=${pageSize}`,
+  },
   SUB_UNIT: {
     END_DEVICES_STATUS: (stationId) =>
       `/property_manager/iot_dashboard/stations_v2/${stationId}/end_devices_status/`,
@@ -75,6 +82,10 @@ const API = {
     DISPLAY_ACTIONS: (id) => `/property_manager/devices/${id}/display_actions/`,
     CHANGE_SUB_UNIT: (unit_id, station_id, id) =>
       `/property_manager/${unit_id}/sub_units/${station_id}/devices/${id}/change_sub_unit/`,
+    ADD_TO_DASHBOARD: (id) =>
+      `/property_manager/devices/${id}/add_to_dashboard/`,
+    REMOVE_FROM_DASHBOARD: (id) =>
+      `/property_manager/devices/${id}/remove_from_dashboard/`,
     ADD_TO_FAVOURITES: (id) =>
       `/property_manager/devices/${id}/add_to_favourites/`,
     REMOVE_FROM_FAVOURITES: (id) =>