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

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

@@ -199,4 +199,152 @@ describe('Test AddSubUnit', () => {
       visibilityTime: 1000,
     });
   });
+
+  test('test create Unit', async () => {
+    const response = {
+      success: true,
+      status: 200,
+      data: {
+        id: 2,
+      },
+    };
+    route.params = {
+      ...route.params,
+      location: 'Unit address',
+      isAddUnit: true,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+
+    const instance = tree.root;
+    const viewButtonBottom = await makeValidateData(instance);
+
+    await act(async () => {
+      await viewButtonBottom.props.onRightClick();
+    });
+    expect(axios.post).toHaveBeenCalled();
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+      screen: Routes.UnitDetail,
+      params: {
+        unitId: response.data.id,
+        routeName: Routes.DashboardStack,
+      },
+    });
+  });
+
+  test('test choose Location', async () => {
+    route.params = {
+      ...route.params,
+      location: '',
+      isAddUnit: true,
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+
+    const instance = tree.root;
+    const buttonChooseLocation = instance.find(
+      (el) => el.props.testID === TESTID.ADD_SUB_UNIT_BUTTON_CHOOSE_LOCATION
+    );
+    act(() => {
+      buttonChooseLocation.props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddLocationMaps);
+  });
+
+  test('test create Unit Fail', async () => {
+    const response = {
+      success: false,
+      status: 400,
+    };
+    route.params = {
+      ...route.params,
+      location: 'Unit address',
+      isAddUnit: true,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+
+    const instance = tree.root;
+    const viewButtonBottom = await makeValidateData(instance);
+
+    await act(async () => {
+      await viewButtonBottom.props.onRightClick();
+    });
+    expect(axios.post).toHaveBeenCalled();
+    expect(Toast.show).toHaveBeenCalledWith({
+      type: 'error',
+      position: 'bottom',
+      text1: getTranslate('en', 'text_create_unit_fail'),
+      visibilityTime: 1000,
+    });
+  });
+
+  test('test create sub-unit type AddHassiDevice', async () => {
+    const response = {
+      status: 200,
+      success: true,
+      data: {},
+    };
+    route.params = {
+      ...route.params,
+      addType: 'AddHassiDevice',
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const viewButtonBottom = await makeValidateData(instance);
+    await act(async () => {
+      await viewButtonBottom.props.onRightClick();
+    });
+    expect(axios.post).toHaveBeenCalled();
+    expect(mockedGoBack).toHaveBeenCalled();
+  });
+
+  test('test create sub-unit type AddNewGateway', async () => {
+    const response = {
+      status: 200,
+      success: true,
+      data: {},
+    };
+    route.params = {
+      ...route.params,
+      addType: 'AddNewGateway',
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const viewButtonBottom = await makeValidateData(instance);
+    await act(async () => {
+      await viewButtonBottom.props.onRightClick();
+    });
+    expect(axios.post).toHaveBeenCalled();
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddCommonSelectSubUnit, {
+      ...route.params,
+    });
+  });
 });

package/src/screens/Unit/Detail.js

@@ -2,6 +2,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { AppState, RefreshControl, View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useNetInfo } from '@react-native-community/netinfo';
 
 import styles from './styles';
 import AddMenu from './AddMenu';
@@ -26,7 +27,11 @@ import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
 import SubUnitAutomate from '../../commons/SubUnit/OneTap';
 import SubUnitFavorites from '../../commons/SubUnit/Favorites';
-import { AUTOMATE_TYPE } from '../../configs/Constants';
+import { AUTOMATE_TYPE, NOTIFICATION_TYPES } from '../../configs/Constants';
+import {
+  watchNotificationData,
+  unwatchNotificationData,
+} from '../../utils/Monitor';
 
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
@@ -43,6 +48,7 @@ const UnitDetail = ({ route }) => {
   const isFocused = useIsFocused();
   const { stateData, setAction } = useContext(SCContext);
   const { navigate } = useNavigation();
+  const user = useSCContextSelector((state) => state?.auth?.account?.user);
   const isLavidaSource = useSCContextSelector(
     (state) => state.app.isLavidaSource
   );
@@ -57,6 +63,7 @@ const UnitDetail = ({ route }) => {
     automates: [],
   });
   const [isGGHomeConnected, setIsGGHomeConnected] = useState(false);
+  const [isNetworkConnected, setIsNetworkConnected] = useState(true);
   const [station, setStation] = useState({});
   const [indexStation, setIndexStation] = useState(0);
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
@@ -68,6 +75,8 @@ const UnitDetail = ({ route }) => {
 
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
 
+  const netInfo = useNetInfo();
+
   const handleFullScreen = (data) => {
     setIsFullScreen(!isFullScreen);
     setDataFullScreen(data);
@@ -144,9 +153,13 @@ const UnitDetail = ({ route }) => {
     );
   }, [t, unitId]);
 
-  const onRefresh = useCallback(() => {
-    fetchDetails();
-  }, [fetchDetails]);
+  const onRefresh = useCallback(
+    (data = { content_code: NOTIFICATION_TYPES.NOTIFY_RENAME_UNIT }) => {
+      data.content_code === NOTIFICATION_TYPES.NOTIFY_RENAME_UNIT &&
+        fetchDetails();
+    },
+    [fetchDetails]
+  );
 
   const handleAppStateChange = useCallback(
     (nextAppState) => {
@@ -166,6 +179,10 @@ const UnitDetail = ({ route }) => {
     };
   }, [handleAppStateChange]);
 
+  useEffect(() => {
+    setIsNetworkConnected(netInfo.isConnected);
+  }, [netInfo.isConnected]);
+
   const handleGoogleHomeConnect = useCallback(
     async (options) => {
       let isConnected = await googleHomeConnect(options); // this may wrong if have multiple connection
@@ -272,6 +289,7 @@ const UnitDetail = ({ route }) => {
           isOwner={isOwner}
           favorites={favorites}
           wrapItemStyle={styles.wrapItemStyle}
+          isNetworkConnected={isNetworkConnected}
           isGGHomeConnected={isGGHomeConnected}
         />
       );
@@ -298,6 +316,7 @@ const UnitDetail = ({ route }) => {
         <ShortDetailSubUnit
           unit={unit}
           station={station}
+          isNetworkConnected={isNetworkConnected}
           isGGHomeConnected={isGGHomeConnected}
         />
       );
@@ -312,6 +331,11 @@ const UnitDetail = ({ route }) => {
     navigate(isLavidaSource ? Routes.SmartHomeDashboard : Routes.Dashboard);
   }, [isLavidaSource, navigate]);
 
+  useEffect(() => {
+    watchNotificationData(user, onRefresh);
+    return () => unwatchNotificationData(user);
+  }, [user, onRefresh]);
+
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}

package/src/screens/Unit/ManageUnit.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { View, TouchableOpacity, Image, Platform } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -21,6 +21,7 @@ import { IconOutline } from '@ant-design/icons-react-native';
 import styles from './ManageUnitStyles';
 import { useNavigation } from '@react-navigation/native';
 import { ModalCustom } from '../../commons/Modal';
+import { Icon } from '@ant-design/react-native';
 
 const ButtonWrapper = ({
   onPress,
@@ -29,17 +30,26 @@ const ButtonWrapper = ({
   value,
   valueColor,
   children,
+  icon,
 }) => {
   return (
     <TouchableOpacity
       onPress={onPress}
       testID={testId}
-      style={styles.buttonWrapper}
+      style={!icon ? styles.buttonWrapper : styles.buttonWrapperAvatar}
     >
       <View style={styles.buttonInfo}>
-        <Text type="H4" semibold>
-          {title}
-        </Text>
+        {!icon ? (
+          <Text type="H4" semibold>
+            {title}
+          </Text>
+        ) : (
+          (icon && <Image source={{ uri: icon }} style={styles.avatar} />) || (
+            <View style={styles.avatar}>
+              <Icon name={'user'} size={27} />
+            </View>
+          )
+        )}
         <View style={styles.buttonValue}>
           <Text
             type="Body"
@@ -66,15 +76,29 @@ const ManageUnit = ({ route }) => {
     name: unit.name,
     address: unit.address,
     background: unit.background,
+    icon: unit.icon,
   });
 
   const [unitName, setUnitName] = useState(unit.name);
-  const [imageUrl, setImageUrl] = useState('');
+  const [imageUrlBackground, setImageUrlBackground] = useState('');
+  const [imageUrlIcon, setImageUrlIcon] = useState('');
+  const [checkSelectImage, setCheckSelectImage] = useState('');
   const [showImagePicker, setShowImagePicker] = useState(false);
 
+  const onUpdateImage = useCallback(
+    async (data) => {
+      if (checkSelectImage === 'background') {
+        setImageUrlBackground(data);
+      } else {
+        setImageUrlIcon(data);
+      }
+    },
+    [checkSelectImage]
+  );
+
   const updateUnit = useCallback(
-    async (bodyData, headers) => {
-      const formData = createFormData(bodyData, ['background']);
+    async (bodyData, headers, dataInput) => {
+      const formData = createFormData(bodyData, [dataInput]);
 
       const { success, data } = await axiosPatch(
         API.UNIT.MANAGE_UNIT(unit.id),
@@ -110,20 +134,37 @@ const ManageUnit = ({ route }) => {
     setHideEdit(true);
   }, [unitName, setHideEdit, updateUnit]);
 
-  const handleChoosePhoto = useCallback(() => {
-    setShowImagePicker(true);
-  }, [setShowImagePicker]);
+  const handleChoosePhoto = useCallback(
+    (text) => {
+      setCheckSelectImage(text);
+      setShowImagePicker(true);
+    },
+    [setShowImagePicker]
+  );
 
   useEffect(() => {
-    if (imageUrl) {
+    if (imageUrlBackground) {
       updateUnit(
-        { background: imageUrl },
+        { background: imageUrlBackground },
         {
           headers: { 'Content-Type': 'multipart/form-data' },
-        }
+        },
+        'background'
       );
     }
-  }, [imageUrl, updateUnit]);
+  }, [imageUrlBackground, updateUnit]);
+
+  useEffect(() => {
+    if (imageUrlIcon) {
+      updateUnit(
+        { icon: imageUrlIcon },
+        {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        },
+        'icon'
+      );
+    }
+  }, [imageUrlIcon, updateUnit]);
 
   const [showRemove, setshowRemove, setHideRemove] = useBoolean();
   const goRemove = useCallback(async () => {
@@ -160,6 +201,12 @@ const ManageUnit = ({ route }) => {
     compressImageQuality: 0.8,
   };
 
+  const SensorNumbers = useMemo(() => {
+    const stations = unit?.stations || [];
+    return stations.filter((item) => !item.isFavorites && !item.isOneTap)
+      .length;
+  }, [unit.stations]);
+
   return (
     <>
       <WrapHeaderScrollable
@@ -169,6 +216,12 @@ const ManageUnit = ({ route }) => {
         <View style={styles.wraper}>
           {isOwner && (
             <>
+              <ButtonWrapper
+                onPress={() => handleChoosePhoto('avatar')}
+                value={t('icon_unit')}
+                icon={unitData.icon}
+                testID={TESTID.MANAGE_UNIT_CHANGE_PHOTO}
+              />
               <ButtonWrapper
                 onPress={setshowEdit}
                 testID={TESTID.MANAGE_UNIT_CHANGE_NAME}
@@ -187,10 +240,11 @@ const ManageUnit = ({ route }) => {
               <ButtonWrapper
                 onPress={goToManageSubUnit}
                 title={t('manage_sub_units')}
-                value={`${unit?.stations?.length} sub-units`}
+                value={`${SensorNumbers} sub-units`}
+                testID={TESTID.MANAGE_UNIT_GO_TO_SUBUNIT}
               />
               <ButtonWrapper
-                onPress={handleChoosePhoto}
+                onPress={() => handleChoosePhoto('background')}
                 title={t('unit_wallpaper')}
                 value={t('tap_to_change')}
                 valueColor={Colors.Orange}
@@ -213,7 +267,7 @@ const ManageUnit = ({ route }) => {
               <ImagePicker
                 showImagePicker={showImagePicker}
                 setShowImagePicker={setShowImagePicker}
-                setImageUrl={setImageUrl}
+                setImageUrl={onUpdateImage}
                 optionsCapture={options}
                 testID={TESTID.MANAGE_UNIT_IMAGE_PICKER}
               />
@@ -221,20 +275,22 @@ const ManageUnit = ({ route }) => {
           )}
         </View>
       </WrapHeaderScrollable>
-      <TouchableOpacity
-        style={styles.removeButton}
-        onPress={setshowRemove}
-        testID={TESTID.MANAGE_UNIT_SHOW_REMOVE}
-      >
-        <Text
-          type={'H4'}
-          semibold
-          color={Colors.Red}
-          style={styles.removeBorderBottom}
+      {!showEdit && (
+        <TouchableOpacity
+          style={styles.removeButton}
+          onPress={setshowRemove}
+          testID={TESTID.MANAGE_UNIT_SHOW_REMOVE}
         >
-          {t('remove_unit')}
-        </Text>
-      </TouchableOpacity>
+          <Text
+            type={'H4'}
+            semibold
+            color={Colors.Red}
+            style={styles.removeBorderBottom}
+          >
+            {t('remove_unit')}
+          </Text>
+        </TouchableOpacity>
+      )}
       <ModalCustom
         isVisible={showEdit}
         onBackButtonPress={setHideEdit}
@@ -250,7 +306,7 @@ const ManageUnit = ({ route }) => {
               </Text>
             </View>
             <_TextInput
-              defaultValue={unitName}
+              defaultValue={unitData?.name}
               onChange={(value) => setUnitName(value)}
               textInputStyle={styles.textInputStyle}
               wrapStyle={styles.textInputWrapStyle}

package/src/screens/Unit/ManageUnitStyles.js

@@ -16,6 +16,12 @@ export default StyleSheet.create({
     borderBottomWidth: 0.5,
     borderBottomColor: Colors.Gray6,
   },
+  buttonWrapperAvatar: {
+    paddingTop: 14,
+    paddingBottom: 24,
+    borderBottomWidth: 0.5,
+    borderBottomColor: Colors.Gray7,
+  },
   buttonInfo: {
     flex: 1,
     flexDirection: 'row',
@@ -29,6 +35,7 @@ export default StyleSheet.create({
   },
   value: {
     marginRight: 20,
+    fontSize: 14,
   },
   location: {
     marginTop: 16,
@@ -104,4 +111,17 @@ export default StyleSheet.create({
   textInputWrapStyle: {
     marginTop: 0,
   },
+  avatar: {
+    height: 50,
+    width: 50,
+    borderRadius: 25,
+    borderWidth: 0.5,
+    borderColor: Colors.Gray5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wrapAvatar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
 });

package/src/screens/Unit/SmartAccount.js

@@ -18,6 +18,7 @@ import { usePopover, useBoolean } from '../../hooks/Common';
 import { MenuActionMore, AlertAction } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useStateAlertRemove } from '../Unit/hook/useStateAlertRemove';
+import { ToastBottomHelper } from '../../utils/Utils';
 
 const ListSmartAccount = ({ route }) => {
   const { unitId } = route?.params || {};
@@ -76,8 +77,11 @@ const ListSmartAccount = ({ route }) => {
     const { success } = await axiosDelete(
       API.SMART_ACCOUNT.REMOVE_SMART_ACCOUNT(id)
     );
-    success && getAllSmartAccounts();
-  }, [getAllSmartAccounts, hideAlertAction]);
+    if (success) {
+      ToastBottomHelper.success(t('removed_successfully'));
+      getAllSmartAccounts();
+    }
+  }, [getAllSmartAccounts, hideAlertAction, t]);
 
   const listMenuItem = useMemo(() => {
     return [{ action: 'remove', text: t('remove_account') }];

package/src/screens/Unit/Summaries.js

@@ -34,8 +34,8 @@ const Summaries = memo(({ unit }) => {
   const goToSummary = useCallback(
     (summary) => {
       navigation.navigate(Routes.UnitSummary, {
-        summary,
-        unit,
+        summaryData: summary,
+        unitData: unit,
       });
     },
     [navigation, unit]

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

@@ -26,6 +26,16 @@ jest.mock('../../../iot/RemoteControl/GoogleHome', () => ({
 
 jest.mock('axios');
 
+jest.mock('@react-native-community/netinfo', () => {
+  return {
+    useNetInfo: () => {
+      return {
+        isConnected: true,
+      };
+    },
+  };
+});
+
 const wrapComponent = (route, unitData, account) => (
   <SCProvider initState={mockSCStore({})}>
     <UnitDetail

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

@@ -62,6 +62,16 @@ jest.mock('home-assistant-js-websocket', () => {
   };
 });
 
+jest.mock('@react-native-community/netinfo', () => {
+  return {
+    useNetInfo: () => {
+      return {
+        isConnected: true,
+      };
+    },
+  };
+});
+
 jest.mock('axios');
 
 describe('Test UnitDetail', () => {
@@ -452,7 +462,50 @@ describe('Test UnitDetail', () => {
     expect(fullView).toHaveLength(1);
     expect(fullView[0].props.isVisible).toEqual(false);
   });
+  test('onPress subunit camera devices', async () => {
+    const unitData = {
+      stations: [
+        {
+          camera_devices: [
+            {
+              configuration: {
+                id: 4,
+                name: 'Camera cửa nhà xe',
+                uri: 'rtsp://admin:hd543211@/ISAPI/Streaming/Channels/101/',
+                preview_uri:
+                  'rtsp://admin:hd543211@/ISAPI/Streaming/Channels/101/',
+                playback: 'rtsp://admin:hd543211@/Streaming/tracks/101/',
+              },
+              id: 41,
+              order: 1,
+              template: 'camera',
+              type: 'camera',
+            },
+          ],
+        },
+      ],
+    };
+
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ params: { ...route.params, unitData } }, account)
+      );
+    });
+    const instance = tree.root;
+    const CameraDeviceViews = instance.findAllByType(CameraDevice);
+    expect(CameraDeviceViews).toHaveLength(1);
+    const goDetailButton = tree.root.findAll(
+      (el) =>
+        el.props.testID === TESTID.SUB_UNIT_GO_DETAIL &&
+        el.type === TouchableOpacity
+    );
 
+    expect(goDetailButton).toHaveLength(2);
+    await act(async () => {
+      await goDetailButton[0].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalled();
+  });
   test('render subunit favorites', async () => {
     const unitData = {
       stations: [