@eohjsc/react-native-smart-city 0.2.92 → 0.2.93

package/src/screens/Sharing/__test__/SelectUser.test.js

@@ -11,7 +11,6 @@ import { API } from '../../../configs';
 import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { ToastBottomHelper } from '../../../utils/Utils';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -53,6 +52,7 @@ describe('test SelectUser container', () => {
   let route;
 
   beforeEach(() => {
+    axios.post.mockClear();
     route = {
       params: {
         unit: {
@@ -66,10 +66,6 @@ describe('test SelectUser container', () => {
     };
   });
 
-  afterEach(() => {
-    axios.post.mockClear();
-  });
-
   const findByTestId = (instance, id) => {
     return instance.find((el) => el.props.testID === id);
   };
@@ -158,8 +154,16 @@ describe('test SelectUser container', () => {
     expect(axios.post).not.toHaveBeenCalled();
   });
 
-  test('_TextInput onChange phone, validate and call api sharedPermission fail', async () => {
-    const response = {};
+  test('_TextInput onChange phone, validated and call api sharedPermission', async () => {
+    const response = {
+      status: 200,
+      data: {
+        user: {
+          id: 2,
+          name: 'user add',
+        },
+      },
+    };
     mockAxiosPost(response);
 
     await act(async () => {
@@ -190,78 +194,6 @@ describe('test SelectUser container', () => {
     });
 
     accountList = instance.findAllByType(AccountList);
-    expect(accountList).toHaveLength(0);
-  });
-
-  test('_TextInput onChange unitOwner phone, validate and call api sharedPermission', async () => {
-    const response = {
-      status: 400,
-      data: { non_field_errors: 'You cannot invite yourself' },
-    };
-    mockAxiosPost(response);
-
-    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
-
-    await act(async () => {
-      tree = create(wrapComponent(route));
-    });
-    const instance = tree.root;
-
-    const textInput = instance.findByType(_TextInput);
-    const button = instance.findByType(Button);
-
-    await act(async () => {
-      await textInput.props.onChange('0909123456');
-    });
-
-    await act(async () => {
-      await button.props.onPress();
-    });
-
-    expect(textInput.props.errorText).toEqual('');
-    expect(axios.post).toHaveBeenCalledWith(API.SHARE.SHARE(), {
-      phone: '0909123456',
-      email: '',
-      unit: 1,
-      permissions: { controlPermissions: {}, readPermissions: {} },
-    });
-
-    expect(spyToastError).toBeCalled();
-  });
-
-  test('_TextInput onChange phone, validate and call api not sharedPermission', async () => {
-    const response = {
-      status: 400,
-      data: { phone: '0909123456' },
-    };
-    mockAxiosPost(response);
-
-    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
-
-    await act(async () => {
-      tree = create(wrapComponent(route));
-    });
-    const instance = tree.root;
-
-    const textInput = instance.findByType(_TextInput);
-    const button = instance.findByType(Button);
-
-    await act(async () => {
-      await textInput.props.onChange('0909123456');
-    });
-
-    await act(async () => {
-      await button.props.onPress();
-    });
-
-    expect(textInput.props.errorText).toEqual('');
-    expect(axios.post).toHaveBeenCalledWith(API.SHARE.SHARE(), {
-      phone: '0909123456',
-      email: '',
-      unit: 1,
-      permissions: { controlPermissions: {}, readPermissions: {} },
-    });
-
-    expect(spyToastError).toBeCalled();
+    expect(accountList).toHaveLength(1);
   });
 });

package/src/screens/SmartIr/__test__/GroupButtonByType.test.js

@@ -5,6 +5,8 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
 import { ButtonsBottom } from '../components/GroupButtonByType/ButtonsBottom';
+import { TESTID } from '../../../configs/Constants';
+import TextInput from '../../../commons/Form/TextInput';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -42,6 +44,18 @@ describe('Test GroupButtonByType', () => {
     const instance = tree.root;
     const wrapHeaderScrollable = instance.findAllByType(WrapHeaderScrollable);
     expect(wrapHeaderScrollable).toHaveLength(1);
+
+    const ButtonBottom = instance.find(
+      (el) => el.props.testID === TESTID.GROUP_BUTTON_TYPE.BUTTON_BOTTOM
+    );
+
+    act(() => {
+      ButtonBottom.props.onPressLeft();
+    });
+    act(() => {
+      ButtonBottom.props.onPressRight();
+    });
+    expect(ButtonBottom).toBeDefined();
   });
   test('onPressLeft ButtonsBottom', () => {
     const route = {
@@ -77,4 +91,23 @@ describe('Test GroupButtonByType', () => {
       buttonsBottom[0].props.onPressRight();
     });
   });
+
+  test('onChange TextInputPassword', async () => {
+    const route = {
+      params: {
+        device_type: { id: 1, name: '', icon: '' },
+        brand: { id: 1, name: '' },
+      },
+    };
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+
+    const instance = tree.root;
+    const textInput = instance.findAllByType(TextInput);
+    await act(async () => {
+      await textInput[0].props.onChange();
+    });
+    expect(textInput).toHaveLength(1);
+  });
 });

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByType.js

@@ -13,6 +13,7 @@ import { ButtonsBottom } from './ButtonsBottom';
 import { Remote, SmartIr, Union } from '../../../../Images/SmartIr';
 
 import styles from './GroupButtonByTypeStyles';
+import { TESTID } from '../../../../configs/Constants';
 
 const GroupButtonByType = memo(({ route }) => {
   const t = useTranslations();
@@ -141,6 +142,7 @@ const GroupButtonByType = memo(({ route }) => {
             selectionColor={Colors.Primary}
           />
           <ButtonsBottom
+            testID={TESTID.GROUP_BUTTON_TYPE.BUTTON_BOTTOM}
             onPressLeft={cancelButton}
             onPressRight={ApplyButton}
             textLeft={t('cancel')}

package/src/screens/Unit/ChooseLocation.js

@@ -5,6 +5,7 @@ import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
 import MarkerGeolocation from '../../../assets/images/Map/MarkerGeolocation.svg';
 import BottomButtonView from '../../commons/BottomButtonView';
+import { FullLoading } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 navigator.geolocation = require('@react-native-community/geolocation');
@@ -27,6 +28,7 @@ const ChooseLocation = memo(({ route }) => {
   const { location, setAddress, setLocation } = route.params;
   const { goBack } = useNavigation();
   const [currentLocation, setCurrentLocation] = useState(location);
+  const [loading, setLoading] = useState(false);
   const mapRef = useRef(null);
 
   const onDone = useCallback(async () => {
@@ -34,6 +36,7 @@ const ChooseLocation = memo(({ route }) => {
       return;
     }
     const { latitude, longitude } = currentLocation;
+    setLoading(true);
     const { success, data } = await axiosGet(
       API.EXTERNAL.GOOGLE_MAP.GET_LOCATION_FROM_LAT_LNG,
       {
@@ -53,6 +56,7 @@ const ChooseLocation = memo(({ route }) => {
       });
       goBack();
     }
+    setLoading(false);
   }, [currentLocation, setAddress, setLocation, goBack]);
 
   const onRegionChange = useCallback(
@@ -89,6 +93,7 @@ const ChooseLocation = memo(({ route }) => {
         onPressMain={onDone}
         typeMain="primaryText"
       />
+      {loading && <FullLoading />}
     </View>
   );
 });

package/src/screens/Unit/Detail.js

@@ -1,4 +1,10 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  useRef,
+} from 'react';
 import { AppState, RefreshControl, View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -16,6 +22,7 @@ import {
   useIsOwnerOfUnit,
   usePopover,
 } from '../../hooks/Common';
+import { useFavorites } from './hook/useFavorites';
 import { scanBluetoothDevices } from '../../iot/RemoteControl/Bluetooth';
 import { googleHomeConnect } from '../../iot/RemoteControl/GoogleHome';
 import { axiosPost, fetchWithCache } from '../../utils/Apis/axios';
@@ -31,7 +38,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, NOTIFICATION_TYPES } from '../../configs/Constants';
+import {
+  AUTOMATE_TYPE,
+  NOTIFICATION_TYPES,
+  TESTID,
+} from '../../configs/Constants';
 import {
   watchNotificationData,
   unwatchNotificationData,
@@ -66,26 +77,27 @@ const UnitDetail = ({ route }) => {
   );
 
   const [unit, setUnit] = useState(unitData || { id: unitId });
-  const [appState, setAppState] = useState(AppState.currentState);
   const [listMenuItem, setListMenuItem] = useState([]);
   const [listStation, setListStation] = useState([]);
   const [listAutomate, setListAutomate] = useState([]);
-  const [favorites, setFavorites] = useState({
-    devices: [],
-    automates: [],
-  });
   const [isGGHomeConnected, setIsGGHomeConnected] = useState(false);
   const [station, setStation] = useState({});
   const [indexStation, setIndexStation] = useState(0);
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [dataFullScreen, setDataFullScreen] = useState();
+  const appState = useRef(AppState.currentState);
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
 
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
 
+  const { favoriteDevices, favoriteAutomates } = useFavorites(
+    unit.stations || [],
+    listAutomate
+  );
+
   const handleFullScreen = (data) => {
     setIsFullScreen(!isFullScreen);
     setDataFullScreen(data);
@@ -105,18 +117,6 @@ const UnitDetail = ({ route }) => {
         isFavorites: true,
         name: t('favorites'),
       });
-      let favoriteDevices = [];
-      rawUnitData.stations.forEach((stationItem) => {
-        if (stationItem.sensors) {
-          favoriteDevices = favoriteDevices.concat(
-            stationItem.sensors.filter((sensorItem) => sensorItem.is_favourite)
-          );
-        }
-      });
-      setFavorites((prevData) => ({
-        ...prevData,
-        devices: favoriteDevices,
-      }));
     },
     [t]
   );
@@ -153,10 +153,6 @@ const UnitDetail = ({ route }) => {
               type: AUTOMATE_TYPE.AUTOMATION,
             },
           ]);
-          setFavorites((prevData) => ({
-            ...prevData,
-            automates: data.filter((item) => item?.script?.is_star),
-          }));
         }
       }
     );
@@ -170,23 +166,21 @@ const UnitDetail = ({ route }) => {
     [fetchDetails]
   );
 
-  const handleAppStateChange = useCallback(
-    (nextAppState) => {
-      if (appState.match(/inactive|background/) && nextAppState === 'active') {
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
         fetchDetails();
       }
-      setAppState(nextAppState);
-    },
-    [appState, fetchDetails]
-  );
-
-  useEffect(() => {
-    AppState.addEventListener('change', handleAppStateChange);
+      appState.current = nextAppState;
+    });
 
     return () => {
-      AppState.removeEventListener('change', handleAppStateChange);
+      subscription.remove();
     };
-  }, [handleAppStateChange]);
+  }, [fetchDetails]);
 
   const handleGoogleHomeConnect = useCallback(
     async (options) => {
@@ -299,9 +293,10 @@ const UnitDetail = ({ route }) => {
     if (station?.isFavorites) {
       return (
         <SubUnitFavorites
-          unit={unit}
           isOwner={isOwner}
-          favorites={favorites}
+          unit={unit}
+          favoriteDevices={favoriteDevices}
+          favoriteAutomates={favoriteAutomates}
           wrapItemStyle={styles.wrapItemStyle}
           isGGHomeConnected={isGGHomeConnected}
         />
@@ -365,6 +360,7 @@ const UnitDetail = ({ route }) => {
       <View style={styles.container}>
         <Summaries unit={unit} />
         <NavBar
+          testID={TESTID.NAVBAR_ON_SNAP_ITEM}
           listStation={listStation}
           listMenuItem={listMenuItem}
           onSnapToItem={onSnapToItem}

package/src/screens/Unit/ManageUnit.js

@@ -39,25 +39,25 @@ const ButtonWrapper = ({
       style={styles.buttonWrapper}
     >
       <View style={styles.buttonInfo}>
-        {!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>
-          )
-        )}
+        <Text type="H4" semibold>
+          {title}
+        </Text>
         <View style={styles.buttonValue}>
-          <Text
-            type="Body"
-            color={valueColor || Colors.Gray7}
-            style={styles.value}
-          >
-            {value}
-          </Text>
+          {!icon ? (
+            <Text
+              type="Body"
+              color={valueColor || Colors.Gray7}
+              style={styles.value}
+            >
+              {value}
+            </Text>
+          ) : (
+            <Image source={{ uri: value }} style={styles.avatar} /> || (
+              <View style={styles.avatar}>
+                <Icon name={'user'} size={27} />
+              </View>
+            )
+          )}
           <IconOutline name="right" size={20} color={Colors.Gray7} />
         </View>
       </View>
@@ -218,8 +218,9 @@ const ManageUnit = ({ route }) => {
             <>
               <ButtonWrapper
                 onPress={() => handleChoosePhoto('avatar')}
-                value={t('icon_unit')}
-                icon={unitData.icon}
+                value={unitData.icon}
+                icon
+                title={t('icon_unit')}
                 testID={TESTID.MANAGE_UNIT_CHANGE_PHOTO}
               />
               <ButtonWrapper

package/src/screens/Unit/ManageUnitStyles.js

@@ -20,6 +20,7 @@ export default StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
   },
   buttonValue: {
     flex: 1,

package/src/screens/Unit/SelectAddress.js

@@ -9,6 +9,7 @@ import BottomButtonView from '../../commons/BottomButtonView';
 import SearchBarLocation from '../../commons/SearchLocation';
 import RowLocation from '../../commons/SearchLocation/RowLocation';
 import Text from '../../commons/Text';
+import { FullLoading } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 navigator.geolocation = require('@react-native-community/geolocation');
@@ -34,6 +35,7 @@ const SelectAddress = memo(({ route }) => {
   const [input, setInput] = useState('');
   const [searchData, setSearchData] = useState([]);
   const [searchedLocation, setSearchedLocation] = useState(null);
+  const [loading, setLoading] = useState(false);
   const mapRef = useRef(null);
 
   const onDone = useCallback(() => {
@@ -116,6 +118,7 @@ const SelectAddress = memo(({ route }) => {
       async (position) => {
         const currentLatitude = JSON.stringify(position.coords.latitude);
         const currentLongitude = JSON.stringify(position.coords.longitude);
+        setLoading(true);
         const { success, data } = await axiosGet(
           API.EXTERNAL.GOOGLE_MAP.GET_LOCATION_FROM_LAT_LNG,
           {
@@ -134,9 +137,11 @@ const SelectAddress = memo(({ route }) => {
             longitude: result.geometry.location.lng,
           });
         }
+        setLoading(false);
       },
-      (error) => {},
-      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
+      // eslint-disable-next-line promise/prefer-await-to-callbacks
+      (error) => {}
+      // { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } enable on emulator
     );
   }, []);
 
@@ -233,6 +238,7 @@ const SelectAddress = memo(({ route }) => {
         typeMain="primaryText"
         typeSecondary="primaryText"
       />
+      {loading && <FullLoading />}
     </View>
   );
 });

package/src/screens/Unit/Summaries.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState, useRef } from 'react';
 import { AppState, ScrollView } from 'react-native';
 import SummaryItem from '../../commons/SummaryItem';
 import Routes from '../../utils/Route';
@@ -8,12 +8,11 @@ import { API } from '../../configs';
 
 const Summaries = memo(({ unit }) => {
   const [unitSummaries, setUnitSummaries] = useState([]);
-  const [appState, setAppState] = useState(AppState.currentState);
   // eslint-disable-next-line no-unused-vars
   const [localState, _] = useState({});
   const isFocused = useIsFocused();
-
   const navigation = useNavigation();
+  const appState = useRef(AppState.currentState);
 
   const fetchUnitSummary = useCallback(async () => {
     if (!unit.id) {
@@ -55,23 +54,21 @@ const Summaries = memo(({ unit }) => {
     }
   }, [localState, fetchUnitSummary]);
 
-  const handleAppStateChange = useCallback(
-    (nextAppState) => {
-      if (appState.match(/inactive|background/) && nextAppState === 'active') {
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
         fetchUnitSummary();
       }
-      setAppState(nextAppState);
-    },
-    [appState, fetchUnitSummary]
-  );
-
-  useEffect(() => {
-    AppState.addEventListener('change', handleAppStateChange);
+      appState.current = nextAppState;
+    });
 
     return () => {
-      AppState.removeEventListener('change', handleAppStateChange);
+      subscription.remove();
     };
-  }, [handleAppStateChange]);
+  }, [fetchUnitSummary]);
 
   useEffect(() => {
     if (!isFocused) {

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

@@ -514,4 +514,29 @@ describe('Test UnitDetail', () => {
     const favorites = instance.findAllByType(SubUnitFavorites);
     expect(favorites).toHaveLength(1);
   });
+  test('render navbar', async () => {
+    const unitData = {
+      stations: [
+        {
+          isFavorites: true,
+          name: 'Favorites',
+        },
+      ],
+    };
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ params: { ...route.params, unitData } }, account)
+      );
+    });
+    const instance = tree.root;
+    const navBar = instance.find(
+      (el) => el.props.testID === TESTID.NAVBAR_ON_SNAP_ITEM
+    );
+
+    await act(() => {
+      navBar.props.onSnapToItem();
+    });
+
+    expect(navBar).toBeDefined();
+  });
 });

package/src/screens/Unit/components/__test__/Header.test.js

@@ -8,6 +8,7 @@ import { mockSCStore } from '../../../../context/mockStore';
 import Header from '../Header';
 import ImageButton from '../../../../commons/ImageButton';
 import Routes from '../../../../utils/Route';
+import { TouchableOpacity } from 'react-native';
 
 const wrapComponent = (title, goBack, dark, hideRight) => (
   <SCProvider initState={mockSCStore({})}>
@@ -15,6 +16,19 @@ const wrapComponent = (title, goBack, dark, hideRight) => (
   </SCProvider>
 );
 
+const mockedNavigate = jest.fn();
+const mockedGoBack = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+    useIsFocused: () => true,
+  };
+});
+
 describe('Test Header', () => {
   let tree;
   test('test hideModal', () => {
@@ -53,4 +67,22 @@ describe('Test Header', () => {
     });
     expect(popover.props.isVisible).toBe(false);
   });
+
+  test('test onpress touchableOpacity', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const touchableOpacity = instance.findAllByType(TouchableOpacity);
+
+    act(() => {
+      touchableOpacity[0].props.onPress();
+      touchableOpacity[1].props.onPress();
+      touchableOpacity[2].props.onPress();
+      touchableOpacity[3].props.onPress();
+    });
+    expect(touchableOpacity).toHaveLength(4);
+    expect(touchableOpacity).toBeDefined();
+    expect(mockedGoBack).toHaveBeenCalled();
+  });
 });

package/src/screens/Unit/hook/useFavorites.js

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { useSCContextSelector } from '../../../context';
+
+export const useFavorites = (stations, automatesData) => {
+  const favoriteDeviceIds = useSCContextSelector(
+    (state) => state.unit.favoriteDeviceIds
+  );
+  const starredScriptIds = useSCContextSelector(
+    (state) => state.automate.starredScriptIds
+  );
+
+  const favoriteDevices = useMemo(() => {
+    return []
+      .concat(...stations.map((station) => station.sensors || []))
+      .filter((device) => favoriteDeviceIds.includes(device.id));
+  }, [stations, favoriteDeviceIds]);
+
+  const favoriteAutomates = useMemo(() => {
+    return []
+      .concat(...automatesData.map((automateData) => automateData.data || []))
+      .filter((automate) => starredScriptIds.includes(automate?.script?.id));
+  }, [automatesData, starredScriptIds]);
+
+  return {
+    favoriteDevices,
+    favoriteAutomates,
+  };
+};

package/src/utils/Apis/axios.js

@@ -50,10 +50,11 @@ const parseErrorResponse = async (error) => {
     error,
     message,
     data,
+    resp_status: error?.response?.status,
   };
 };
 
-export async function axiosCache(URL) {
+export async function axiosCache(URL, resp_status) {
   const cacheKey = `@CACHE_REQUEST_${URL}`;
   const cachedData = await getData(cacheKey);
   if (!cachedData) {
@@ -64,6 +65,7 @@ export async function axiosCache(URL) {
     success: true,
     data: JSON.parse(cachedData),
     cache: true,
+    resp_status,
   };
 }
 
@@ -89,7 +91,10 @@ export async function axiosGet(URL, config = {}, cache = false) {
     if (cache) {
       // only network error or server error
       if (!error.response || error.response.status >= 500) {
-        return (await axiosCache(URL)) || (await parseErrorResponse(error));
+        return (
+          (await axiosCache(URL, error.response.status)) ||
+          (await parseErrorResponse(error))
+        );
       } else {
         await deleteData(cacheKey);
       }