@eohjsc/react-native-smart-city 0.7.25 → 0.7.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.25",
+  "version": "0.7.27",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/Images/Common/search-menu.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><g><path fill="#000000" d="M14.4,58.3L14.4,58.3h96.3h0.6v0c2.1,0.3,3.7,2.2,3.7,4.4c0,2.3-1.6,4.1-3.7,4.4v0H111l-0.4,0l-0.4,0H14.7l-0.4,0c-2.4,0-4.3-2-4.3-4.5C10,60.3,12,58.3,14.4,58.3z M14.4,106.9L14.4,106.9h96.3h0.6v0c2.1,0.3,3.7,2.2,3.7,4.4c0,2.3-1.6,4.1-3.7,4.4v0H111l-0.4,0l-0.4,0H14.7l-0.4,0c-2.4,0-4.3-2-4.3-4.5C10,108.9,12,106.9,14.4,106.9z M14.4,155.6L14.4,155.6l153.7,0h3.4h0.6v0c2.1,0.3,3.7,2.2,3.7,4.4c0,2.2-1.6,4.1-3.7,4.4v0h-0.3l-0.4,0l-0.4,0h-2.8l-153.6,0l-0.4,0c-2.4,0-4.3-2-4.3-4.5C10,157.6,12,155.6,14.4,155.6z M14.4,204.2L14.4,204.2l153.7,0h3.4h0.6v0c2.1,0.3,3.7,2.2,3.7,4.4s-1.6,4.1-3.7,4.4v0h-0.3l-0.4,0l-0.4,0h-2.8l-153.6,0l-0.4,0c-2.4,0-4.3-2-4.3-4.5C10,206.2,12,204.2,14.4,204.2z M176.2,42.9c14,0,26.8,5.7,35.9,14.9C221.3,67,227,79.7,227,93.7c0,14-5.7,26.8-14.9,35.9c-1.8,1.8-3.7,3.5-5.8,5l39,67.5c1.4,2.4,0.6,5.4-1.8,6.7c-2.4,1.4-5.4,0.6-6.7-1.8l-38.9-67.4c-6.6,3.1-13.9,4.8-21.7,4.8c-14,0-26.8-5.7-35.9-14.9c-9.2-9.2-14.9-21.9-14.9-35.9c0-14,5.7-26.8,14.9-35.9C149.4,48.6,162.1,42.9,176.2,42.9L176.2,42.9z M205.1,64.8c-7.4-7.4-17.7-12-28.9-12c-11.3,0-21.5,4.6-28.9,12c-7.4,7.4-12,17.6-12,28.9c0,11.3,4.6,21.5,12,28.9c7.4,7.4,17.6,12,28.9,12c11.3,0,21.5-4.6,28.9-12c7.4-7.4,12-17.6,12-28.9C217.1,82.4,212.5,72.2,205.1,64.8z"/></g></g>
+</svg>

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplateStyle.js

@@ -6,7 +6,8 @@ export default StyleSheet.create({
     width: 'auto',
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 20,
+    paddingHorizontal: 20,
+    paddingBottom: 20,
   },
   bigCircle: {
     backgroundColor: Colors.Gray2,

package/src/commons/ActionGroup/OneBigButtonTemplateStyle.js

@@ -6,9 +6,8 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     paddingHorizontal: 8,
-    paddingVertical: 16,
+    paddingBottom: 16,
     marginHorizontal: 16,
-    marginTop: 20,
   },
   bigCircle: {
     backgroundColor: Colors.Gray2,

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -3,7 +3,6 @@ import { Slider } from '@miblanchard/react-native-slider';
 
 import { View } from 'react-native';
 import styles from './SliderRangeTemplateStyles';
-import Text from '../Text';
 import { Colors } from '../../configs';
 import { useConfigGlobalState } from '../../iot/states';
 import { DEVICE_TYPE } from '../../configs/Constants';
@@ -11,7 +10,7 @@ import _TextInput from '../Form/TextInput';
 
 const SliderRangeTemplate = memo(
   ({ item, doAction, sensor, isWidgetOrder }) => {
-    const { configuration, label = 'Slider range' } = item;
+    const { configuration } = item;
     const [configValues] = useConfigGlobalState('configValues');
     const { config, min_value, max_value, action_data } = configuration;
     const [value, setValue] = useState();
@@ -84,7 +83,6 @@ const SliderRangeTemplate = memo(
       <View
         style={(isWidgetOrder && styles.wrapOrderItem) || styles.viewBrightness}
       >
-        <Text type="H4">{label}</Text>
         <View style={styles.wrap}>
           <Slider
             step={1}

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -47,7 +47,7 @@ const useNewMessage = (
 };
 
 const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
-  const { label, configuration } = item;
+  const { configuration } = item;
   const { action_data, from_config, to_config } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
   const [value, setValue] = useState();
@@ -140,9 +140,6 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
   );
   return (
     <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
-      <View>
-        <Text type="H4">{label}</Text>
-      </View>
       <ScrollView
         ref={scrollViewRef}
         onContentSizeChange={() =>

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -15,7 +15,7 @@ import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
   const t = useTranslations();
   const transY = useKeyboardAnimated();
-  const { label, configuration } = item;
+  const { configuration } = item;
   const { action_data, config } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
   const [value, setValue] = useState();
@@ -35,10 +35,6 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
 
   return (
     <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
-      <View>
-        <Text type="H4">{label}</Text>
-      </View>
-
       <View style={styles.iconAndText}>
         <Text style={styles.textValue} type="H4">
           {valueText}

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonDefaultStyles.js

@@ -6,7 +6,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
     padding: 16,
-    margin: 20,
+    marginHorizontal: 20,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     borderRadius: 10,

package/src/commons/ActionGroup/__test__/index.test.js

@@ -7,6 +7,7 @@ import {
 } from 'react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import renderer, { act } from 'react-test-renderer';
+import WebView from 'react-native-webview';
 
 import { Slider } from '@miblanchard/react-native-slider';
 import ActionGroup from '..';
@@ -606,4 +607,54 @@ describe('Test ActionGroup', () => {
     const elements = instance.findAllByType(SwitchButtonTemplate);
     expect(elements).toHaveLength(1);
   });
+
+  it('test render IframeWithConfig', async () => {
+    const actionItem = {
+      id: 1,
+      template: 'IFrameWithConfig',
+      label: 'LED',
+      configuration: {
+        url: 'http://localhost:3000/',
+        actions: [
+          {
+            action: 'action1-83cd1cf5d8f2',
+            name: 'Action 1',
+            action_data: {
+              id: 2,
+              name: 'Action 1',
+            },
+          },
+        ],
+      },
+    };
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = renderer.create(
+        wrapComponent(actionItem, mockDoAction, sensor)
+      );
+    });
+    const instance = wrapper.root;
+    const webview = instance.findByType(WebView);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'triggerAction',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+            data: { actionKey: 'action1-83cd1cf5d8f2' },
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+    expect(mockDoAction).toHaveBeenCalledTimes(1);
+    expect(mockDoAction).toHaveBeenCalledWith(
+      actionItem.configuration.actions[0].action_data,
+      undefined,
+      false,
+      undefined
+    );
+  });
 });

package/src/commons/ActionGroup/index.js

@@ -15,6 +15,8 @@ import TwoButtonTemplate from './TwoButtonTemplate';
 import SwitchButtonTemplate from './OnOffTemplate/SwitchButtonTemplate';
 import TextBoxTemplate from './TextBoxTemplate';
 import TerminalBoxTemplate from './TerminalBoxTemplate';
+import IFrameWithConfig from '../Widgets/IFrameWithConfig/IFrameWithConfig';
+import { WIDGET_TYPE } from '../../configs/Constants';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -52,6 +54,8 @@ export const getActionComponent = (template) => {
       return TextBoxTemplate;
     case 'TerminalBoxTemplate':
       return TerminalBoxTemplate;
+    case WIDGET_TYPE.iframeWithConfig:
+      return IFrameWithConfig;
     default:
       return null;
   }

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

@@ -17,8 +17,6 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import SharedUnit from '../../Unit/SharedUnit';
 import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
-import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
-import { STORAGE_KEY } from '../../../utils/Storage';
 import { SCContext, useSCContextSelector } from '../../../context';
 import { Action } from '../../../context/actionType';
 
@@ -63,14 +61,6 @@ const MyPinnedSharedUnit = ({ refreshing }) => {
     }
   }, [fetchSharedUnitDashboard, isFocused, refreshing]);
 
-  useEffect(() => {
-    sharedUnits?.length &&
-      preloadImagesFromUnits(
-        sharedUnits,
-        STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_SHARE_UNIT
-      );
-  }, [sharedUnits]);
-
   return (
     <>
       <Section>

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',