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

package/src/screens/SubUnit/AddSubUnit.js

@@ -13,11 +13,14 @@ import _TextInput from '../../commons/Form/TextInput';
 import Text from '../../commons/Text';
 import { API, Colors } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
-import { useSCContextSelector } from '../../context';
 import useKeyboardShow from '../../hooks/Common/useKeyboardShow';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { replace } from '../../navigations/utils';
-import { axiosPost, createFormData } from '../../utils/Apis/axios';
+import {
+  axiosPost,
+  createFormData,
+  fetchWithCache,
+} from '../../utils/Apis/axios';
 import { useBackendPermission } from '../../utils/Permission/backend';
 import Routes from '../../utils/Route';
 import { ToastBottomHelper } from '../../utils/Utils';
@@ -29,7 +32,6 @@ const AddSubUnit = ({ route }) => {
   const { dismissKeyboard } = useKeyboardShow();
   const { navigate, goBack, dispatch } = useNavigation();
   const permissions = useBackendPermission();
-  const myUnits = useSCContextSelector((state) => state.myUnits);
 
   const {
     unit,
@@ -42,11 +44,15 @@ const AddSubUnit = ({ route }) => {
   const [wallpaper, setWallpaper] = useState('');
   const [imageUrl, setImageUrl] = useState('');
   const [showImagePicker, setShowImagePicker] = useState(false);
+  const [unitDetail, setUnitDetail] = useState({});
   let awaitCreate = useRef(false);
 
-  const unitChoose = useMemo(() => {
-    return myUnits?.find((item) => item?.id === unit?.id);
-  }, [myUnits, unit?.id]);
+  const fetchUnitDetail = useCallback(async () => {
+    await fetchWithCache(API.UNIT.UNIT_DETAIL(unit?.id), {}, (response) => {
+      const { success, data } = response;
+      success && setUnitDetail(data);
+    });
+  }, [unit?.id]);
 
   const cleanData = () => {
     setRoomName('');
@@ -133,7 +139,7 @@ const AddSubUnit = ({ route }) => {
         } else {
           awaitCreate.current = false;
           if (
-            unitChoose?.stations?.length >= permissions?.max_stations_per_unit
+            unitDetail?.stations?.length >= permissions?.max_stations_per_unit
           ) {
             ToastBottomHelper.error(
               t('reach_max_stations_per_unit', {
@@ -159,7 +165,7 @@ const AddSubUnit = ({ route }) => {
     goBack,
     navigate,
     route.params,
-    unitChoose?.stations?.length,
+    unitDetail?.stations?.length,
     permissions?.max_stations_per_unit,
   ]);
 
@@ -174,6 +180,10 @@ const AddSubUnit = ({ route }) => {
     }
   }, [imageUrl]);
 
+  useEffect(() => {
+    fetchUnitDetail();
+  }, [fetchUnitDetail]);
+
   const onChangeRoomName = useCallback(
     (value) => {
       setRoomName(value);

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -295,6 +295,11 @@ describe('Test AddSubUnit', () => {
       isInsideUnit: false,
     };
     const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, {
+      id: 1,
+      name: 'unit 1',
+      stations: [{ id: 1, name: 'station' }],
+    });
     mock.onPost(API.SUB_UNIT.CREATE_SUB_UNIT(1)).reply(400, {});
     await act(async () => {
       tree = await create(
@@ -308,9 +313,6 @@ describe('Test AddSubUnit', () => {
               },
             },
           },
-          myUnits: [
-            { id: 1, name: 'unit 1', stations: [{ id: 1, name: 'station' }] },
-          ],
         })
       );
     });

package/src/screens/Unit/GoToDetailUnit.js

@@ -0,0 +1,30 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback } from 'react';
+
+import Routes from '../../utils/Route';
+import SelectUnit from '../../commons/SelectUnit';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+const GoToDetailUnit = () => {
+  const t = useTranslations();
+  const navigation = useNavigation();
+
+  const goToDetail = useCallback(
+    (item) => {
+      navigation.navigate(Routes.UnitDetail, {
+        unitId: item.id,
+      });
+    },
+    [navigation]
+  );
+
+  return (
+    <SelectUnit
+      title={t('text_select_a_unit')}
+      subTitle={t('text_select_go_to_unit_detail')}
+      onPressNext={goToDetail}
+    />
+  );
+};
+
+export default GoToDetailUnit;

package/src/screens/Unit/__test__/GoToDetailUnit.test.js

@@ -0,0 +1,103 @@
+import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import GoToDetailUnit from '../GoToDetailUnit';
+import { Search } from '../../../commons/DevMode';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import Routes from '../../../utils/Route';
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <GoToDetailUnit />
+  </SCProvider>
+);
+
+const mock = new MockAdapter(api.axiosInstance);
+
+describe('Test GoToDetailUnit', () => {
+  let tree;
+  const data = [
+    {
+      id: 1,
+      name: 'Name 1',
+    },
+    {
+      id: 2,
+      name: 'Name 2',
+    },
+  ];
+
+  const mockedNavigate = useNavigation().navigate;
+  beforeEach(() => {
+    mockedNavigate.mockReset();
+    mock.resetHistory();
+  });
+
+  it('test render and navigate', async () => {
+    mock.onGet(API.SHARE.UNITS()).reply(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const unitItems = instance.findAllByProps({
+      accessibilityLabel: AccessibilityLabel.ITEM_UNIT,
+    });
+    expect(unitItems).toHaveLength(2);
+    const selectUnit = instance.findByProps({
+      accessibilityLabel: `${AccessibilityLabel.SELECT_UNIT_SELECT}-1`,
+    });
+    await act(async () => {
+      await selectUnit.props.onPress();
+    });
+    const rightClick = instance.findByProps({
+      accessibilityLabelPrefix: AccessibilityLabel.PREFIX.SELECT_UNIT,
+    });
+    await act(async () => {
+      await rightClick.props.onRightClick();
+    });
+
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitDetail, {
+      unitId: 1,
+    });
+  });
+
+  it('test filter unit by name', async () => {
+    mock.onGet(API.SHARE.UNITS()).reply(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const search = instance.findByType(Search);
+    await act(() => {
+      search.props.onSearch('Name 2');
+    });
+    const unitItems = instance.findAllByProps({
+      accessibilityLabel: AccessibilityLabel.ITEM_UNIT,
+    });
+    expect(unitItems).toHaveLength(1);
+    const selectUnit = instance.findByProps({
+      accessibilityLabel: `${AccessibilityLabel.SELECT_UNIT_SELECT}-2`,
+    });
+    await act(async () => {
+      await selectUnit.props.onPress();
+    });
+    const rightClick = instance.findByProps({
+      accessibilityLabelPrefix: AccessibilityLabel.PREFIX.SELECT_UNIT,
+    });
+    await act(async () => {
+      await rightClick.props.onRightClick();
+    });
+
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitDetail, {
+      unitId: 2,
+    });
+  });
+});

package/src/utils/I18n/translations/en.js

@@ -382,6 +382,7 @@ export default {
   select_a_sub_unit_want_add_device:
     'Select a sub-unit that you want to add this device in',
   text_select_a_unit_have_device: 'Select a unit that has this device',
+  text_select_go_to_unit_detail: 'Select a unit to view details',
   text_select_permissions: 'Select permissions',
   text_select_permissions_desc: 'Select permissions will be grant',
   text_read_config: 'Read configs',

package/src/utils/I18n/translations/vi.js

@@ -435,6 +435,7 @@ export default {
   text_select_a_gateway: 'Chọn một gateway',
   text_select_a_unit_desc: 'Chọn 1 địa điểm bạn muốn thêm thành viên',
   text_select_a_unit_have_device: 'Chọn một địa điểm có thiết bị này',
+  text_select_go_to_unit_detail: 'Chọn địa điểm để xem chi tiết',
   select_a_sub_unit_want_add_device:
     'Chọn một đơn vị con mà bạn muốn thêm thiết bị này vào',
   text_select_permissions: 'Chọn hành động',

package/src/utils/Route/index.js

@@ -49,6 +49,7 @@ const Routes = {
   Dashboard: 'Dashboard',
   Shared: 'Shared',
   UnitDetail: 'UnitDetail',
+  GoToDetailUnit: 'GoToDetailUnit',
   DrawerMain: 'DrawerMain',
   ConnectDevices: 'ConnectDevices',
   SharedStack: 'SharedStack',

package/src/utils/Storage.js

@@ -4,8 +4,6 @@ export const STORAGE_KEY = {
   FIREBASE_APP_CONFIG: 'app_config',
   FIREBASE_EXCHANGE_RATES: 'exchange_rates',
   FIREBASE_REVIEW_COMMENT_VIDEO: 'review_comment_video',
-  IS_FIRST_TIME_LOAD_MY_UNITS: 'IS_FIRST_TIME_LOAD_MY_UNITS',
-  IS_FIRST_TIME_LOAD_MY_SHARE_UNIT: 'IS_FIRST_TIME_LOAD_MY_SHARE_UNIT',
 };
 
 export const storeData = async (key, value) => {

package/src/utils/Utils.js

@@ -231,7 +231,8 @@ export const PIN_MAPPING = {
   },
 };
 
-export const keyExtractor = (item, index) => (item?.id || index).toString();
+export const keyExtractor = (item, index) =>
+  item?.id ? `id-${item.id}` : `index-${index}`;
 
 export default {
   validateEmail,

package/src/utils/Functions/preloadImages.js

@@ -1,38 +0,0 @@
-import FastImage from 'react-native-fast-image';
-import { API } from '../../configs';
-import { axiosGet } from '../Apis/axios';
-import { getData, STORAGE_KEY, storeData } from '../Storage';
-
-export const preloadImagesFromUnits = async (units, storeKey) => {
-  const isFirstTime = await getData(storeKey);
-  if (units?.length && !isFirstTime) {
-    await storeData(storeKey, 'true');
-    const results = await Promise.all(
-      units.map(async (item) => {
-        const unitId =
-          storeKey === STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS
-            ? item?.id
-            : item?.unit?.id;
-        if (unitId) {
-          const { success, data } = await axiosGet(
-            API.UNIT.UNIT_DETAIL(unitId),
-            {},
-            true
-          );
-          return success && data;
-        }
-      })
-    );
-
-    const icons = results
-      .map((item) => item?.stations?.map((i) => i?.background) || [])
-      .flat()
-      .filter(Boolean);
-    FastImage.preload(
-      icons.map((uri) => ({
-        uri,
-        priority: FastImage.priority.high,
-      }))
-    );
-  }
-};