@eohjsc/react-native-smart-city 0.3.4 → 0.3.7

package/src/screens/SubUnit/hooks/__test__/useManageSubUnit.test.js

@@ -1,11 +1,9 @@
 import { act, renderHook } from '@testing-library/react-hooks';
-import MockAdapter from 'axios-mock-adapter';
 import useManageSubUnit from '../useManageSubUnit';
+import axios from 'axios';
 import API from '../../../../configs/API';
-import api from '../../../../utils/Apis/axios';
 
 const mockRoute = jest.fn();
-const mock = new MockAdapter(api.axiosInstance);
 
 jest.mock('react', () => {
   return {
@@ -25,64 +23,63 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+jest.mock('axios');
+
 describe('Test Manage Access', () => {
+  afterEach(() => {
+    axios.get.mockClear();
+  });
   const unit = { id: 1, name: 'unit name' };
 
   it('Test init', () => {
     const { result } = renderHook(() => useManageSubUnit(unit));
-    expect(result.current.stations).toEqual([]);
+    expect(result.current.station).toEqual([]);
     expect(result.current.isLoading).toBeFalsy();
     expect(result.current.isRefreshing).toBeFalsy();
   });
 
   it('Test onRefresh', () => {
     const { result } = renderHook(() => useManageSubUnit(unit));
-    mock.onGet(API.UNIT.UNIT_DETAIL(unit?.id)).reply(200, [
-      {
-        id: 1,
-        name: 'unit 1',
-        stations: [
-          {
-            id: 1,
-            name: 'station 1',
-            sensors: [
-              {
-                id: 1,
-                icon: '',
-                action: { icon: '', color: '' },
-                name: 'sensor name',
-                value: '',
-              },
-            ],
-          },
-          {
-            id: 2,
-            name: 'station 2',
-            sensors: [
-              {
-                id: 1,
-                icon: '',
-                action: { icon: '', color: '' },
-                name: 'sensor name',
-                value: '',
-              },
-            ],
-          },
-        ],
-      },
-    ]);
-    act(() => {
-      result.current.onRefresh();
-    });
-    expect(result.current.isRefreshing).toBeFalsy();
-  });
-
-  it('Test get unit failure', () => {
-    const { result } = renderHook(() => useManageSubUnit(unit));
-    mock.onGet(API.UNIT.UNIT_DETAIL(unit?.id)).reply(400);
+    axios.get.mockImplementation(() => ({
+      status: 200,
+      data: [
+        {
+          id: 1,
+          name: 'unit 1',
+          stations: [
+            {
+              id: 1,
+              name: 'station 1',
+              sensors: [
+                {
+                  id: 1,
+                  icon: '',
+                  action: { icon: '', color: '' },
+                  name: 'sensor name',
+                  value: '',
+                },
+              ],
+            },
+            {
+              id: 2,
+              name: 'station 2',
+              sensors: [
+                {
+                  id: 1,
+                  icon: '',
+                  action: { icon: '', color: '' },
+                  name: 'sensor name',
+                  value: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    }));
     act(() => {
       result.current.onRefresh();
     });
-    expect(result.current.isRefreshing).toBeFalsy();
+    expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(unit?.id), {});
   });
 });

package/src/screens/SubUnit/hooks/useManageSubUnit.js

@@ -3,11 +3,11 @@ import { axiosGet } from '../../../utils/Apis/axios';
 import API from '../../../configs/API';
 
 export default (unit) => {
-  const [stations, setStations] = useState([]);
+  const [station, setStation] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isRefresh, setRefresh] = useState(false);
 
-  const fetchData = useCallback(async () => {
+  const fetchData = useCallback(async (unit) => {
     setIsLoading(true);
     const { success, data } = await axiosGet(
       API.UNIT.UNIT_DETAIL(unit?.id),
@@ -15,19 +15,19 @@ export default (unit) => {
       true
     );
     if (success) {
-      setStations(data?.stations);
+      setStation(data?.stations);
     }
     setIsLoading(false);
-  }, [unit]);
+  }, []);
 
   const onRefresh = useCallback(async () => {
     setRefresh(true);
-    await fetchData();
+    await fetchData(unit);
     setRefresh(false);
-  }, [fetchData]);
+  }, [unit, fetchData]);
 
   return {
-    stations,
+    station,
     isRefresh,
     onRefresh,
     isLoading,

package/src/screens/SyncLGDevice/AddLGDevice.js

@@ -99,7 +99,6 @@ const AddLGDevice = memo(({ route }) => {
       <ScrollView
         style={styles.scrollContainer}
         showsVerticalScrollIndicator={false}
-        scrollIndicatorInsets={{ right: 1 }}
       >
         <Section type={'border'}>
           <GroupCheckBox

package/src/screens/SyncLGDevice/__test__/AddLGDevice.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
+import axios from 'axios';
 import AddLGDevice from '../AddLGDevice';
 import API from '../../../configs/API';
 import GroupCheckBox from '../../../commons/GroupCheckBox';
@@ -11,9 +11,8 @@ import { ToastBottomHelper } from '../../../utils/Utils';
 import Routes from '../../../utils/Route';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import api from '../../../utils/Apis/axios';
 
-const mock = new MockAdapter(api.axiosInstance);
+jest.mock('axios');
 
 const mockedNavigate = jest.fn();
 const mockedGoBack = jest.fn();
@@ -53,7 +52,11 @@ describe('Test Add LG Device', () => {
         backend_url: 'https://doamin.com',
       },
     };
-    mock.resetHistory();
+  });
+
+  afterEach(() => {
+    axios.get.mockClear();
+    axios.post.mockClear();
   });
 
   const getText = (instance, id) => {
@@ -88,11 +91,16 @@ describe('Test Add LG Device', () => {
         stations: [{ id: 2, name: 'Station name' }],
       },
     };
-    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, response.data);
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
+    expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(1), {});
+
     const groupCheckBox = instance.findByType(GroupCheckBox);
     expect(groupCheckBox.props.data).toEqual([
       { id: 2, name: 'Station name', title: 'Station name' },
@@ -100,19 +108,21 @@ describe('Test Add LG Device', () => {
   });
 
   test('fetchDetails fail', async () => {
-    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(400);
+    const response = {
+      data: {},
+    };
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
+    expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(1), {});
+
     const groupCheckBox = instance.findByType(GroupCheckBox);
-    expect(groupCheckBox.props.data).toEqual([
-      {
-        id: 2,
-        name: 'Station name',
-        title: 'Station name',
-      },
-    ]);
+    expect(groupCheckBox.props.data).toEqual([]);
   });
 
   test('ViewButtonBottom', async () => {
@@ -151,7 +161,7 @@ describe('Test Add LG Device', () => {
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).toHaveBeenCalled();
+    expect(mockedNavigate).not.toHaveBeenCalled();
   });
 
   test('ViewButtonBottom onRightClick with stationId', async () => {
@@ -163,7 +173,9 @@ describe('Test Add LG Device', () => {
         stations: [{ id: 2, name: 'Station name' }],
       },
     };
-    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, response.data);
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
 
     const responseToken = {
       status: 200,
@@ -171,9 +183,20 @@ describe('Test Add LG Device', () => {
         access_token: 'ACCESS_TOKEN',
       },
     };
-    mock.onPost(API.IOT.LG.GET_TOKEN()).reply(200, responseToken.data);
-    mock.onPost(API.IOT.LG.SYNC_DEVICE()).reply(200, {});
+    axios.post.mockImplementationOnce(async () => {
+      return responseToken;
+    });
+
+    const responseSync = {
+      status: 200,
+      data: {},
+    };
+    axios.post.mockImplementationOnce(async () => {
+      return responseSync;
+    });
+
     const spyToastSuccess = jest.spyOn(ToastBottomHelper, 'success');
+
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -187,6 +210,10 @@ describe('Test Add LG Device', () => {
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
+
+    expect(axios.get).toHaveBeenCalledTimes(1);
+    expect(axios.post).toHaveBeenCalledTimes(2);
+    expect(spyToastSuccess).toBeCalled();
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
 
     spyToastSuccess.mockReset();
@@ -202,8 +229,27 @@ describe('Test Add LG Device', () => {
         stations: [{ id: 2, name: 'Station name' }],
       },
     };
-    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, response.data);
-    mock.onPost(API.IOT.LG.GET_TOKEN()).reply(200, response.data);
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+
+    const responseToken = {
+      status: 200,
+      data: {
+        access_token: 'ACCESS_TOKEN',
+      },
+    };
+    axios.post.mockImplementationOnce(async () => {
+      return responseToken;
+    });
+
+    const responseSync = {
+      data: {},
+    };
+    axios.post.mockImplementationOnce(async () => {
+      return responseSync;
+    });
+
     const spyToastSuccess = jest.spyOn(ToastBottomHelper, 'success');
     const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
 
@@ -220,9 +266,13 @@ describe('Test Add LG Device', () => {
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
+
+    expect(axios.get).toHaveBeenCalledTimes(1);
+    expect(axios.post).toHaveBeenCalledTimes(2);
     expect(spyToastSuccess).not.toBeCalled();
     expect(spyToastError).toBeCalled();
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
+
     spyToastSuccess.mockReset();
     spyToastSuccess.mockRestore();
   });
@@ -236,7 +286,10 @@ describe('Test Add LG Device', () => {
         stations: [{ id: 2, name: 'Station name' }],
       },
     };
-    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, response.data);
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+
     const responseToken = {
       status: 200,
       data: {
@@ -247,7 +300,10 @@ describe('Test Add LG Device', () => {
         },
       },
     };
-    mock.onPost(API.IOT.LG.GET_TOKEN()).reply(200, responseToken.data);
+    axios.post.mockImplementationOnce(async () => {
+      return responseToken;
+    });
+
     const spyToastSuccess = jest.spyOn(ToastBottomHelper, 'success');
     const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
 
@@ -265,6 +321,8 @@ describe('Test Add LG Device', () => {
       viewButtonBottom.props.onRightClick();
     });
 
+    expect(axios.get).toHaveBeenCalledTimes(1);
+    expect(axios.post).toHaveBeenCalledTimes(1); // called once
     expect(spyToastSuccess).not.toBeCalled();
     expect(spyToastError).toBeCalled();
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
@@ -282,7 +340,16 @@ describe('Test Add LG Device', () => {
         stations: [{ id: 2, name: 'Station name' }],
       },
     };
-    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, response.data);
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+
+    const responseToken = {
+      data: {},
+    };
+    axios.post.mockImplementationOnce(async () => {
+      return responseToken;
+    });
 
     const spyToastSuccess = jest.spyOn(ToastBottomHelper, 'success');
     const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
@@ -301,6 +368,8 @@ describe('Test Add LG Device', () => {
       viewButtonBottom.props.onRightClick();
     });
 
+    expect(axios.get).toHaveBeenCalledTimes(1);
+    expect(axios.post).toHaveBeenCalledTimes(1); // called once
     expect(spyToastSuccess).not.toBeCalled();
     expect(spyToastError).toBeCalled();
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);

package/src/screens/TDSGuide/index.js

@@ -13,10 +13,7 @@ const TDSGuide = memo(() => {
 
   return (
     <View style={styles.container}>
-      <ScrollView
-        style={styles.paddingHorizontal16}
-        scrollIndicatorInsets={{ right: 1 }}
-      >
+      <ScrollView style={styles.paddingHorizontal16}>
         <Text
           type="H3"
           semibold

package/src/screens/UVIndexGuide/index.js

@@ -73,7 +73,7 @@ const UVIndexGuide = memo(() => {
   const onPress = useCallback((item) => {}, []);
   return (
     <SafeAreaView style={styles.container}>
-      <ScrollView style={styles.container} scrollIndicatorInsets={{ right: 1 }}>
+      <ScrollView style={styles.container}>
         {titles.map((item, index) => {
           const { title, des } = item;
           return (

package/src/screens/Unit/ChooseLocation.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { memo, useCallback, useRef, useState } from 'react';
 import { View } from 'react-native';
 import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
@@ -7,17 +8,24 @@ import BottomButtonView from '../../commons/BottomButtonView';
 import { FullLoading } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
+navigator.geolocation = require('@react-native-community/geolocation');
+
 import styles from './ChooseLocationStyles';
 import { API } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
 import { SCConfig } from '../../configs';
-import { MAP_INITIAL_REGION, EOH_LOCATION } from '../../configs/Constants';
 
-navigator.geolocation = require('@react-native-community/geolocation');
+const initialRegion = {
+  latitudeDelta: 0.0922,
+  longitudeDelta: 0.0421,
+};
+
+const DEFAULT_LATITUDE = 10.7974046; // EoH center
+const DEFAULT_LONGITUDE = 106.7035663;
 
 const ChooseLocation = memo(({ route }) => {
   const t = useTranslations();
-  const { location, setAddress, setLocation } = route.params || {};
+  const { location, setAddress, setLocation } = route.params;
   const { goBack } = useNavigation();
   const [currentLocation, setCurrentLocation] = useState(location);
   const [loading, setLoading] = useState(false);
@@ -68,10 +76,9 @@ const ChooseLocation = memo(({ route }) => {
         provider={PROVIDER_GOOGLE}
         style={styles.mapView}
         initialRegion={{
-          latitude: location?.latitude || EOH_LOCATION.LAT,
-          longitude: location?.longitude || EOH_LOCATION.LNG,
-          latitudeDelta: MAP_INITIAL_REGION.LAT,
-          longitudeDelta: MAP_INITIAL_REGION.LNG,
+          ...initialRegion,
+          latitude: location?.latitude || DEFAULT_LATITUDE,
+          longitude: location?.longitude || DEFAULT_LONGITUDE,
         }}
         followUserLocation={true}
         onRegionChangeComplete={onRegionChange}

package/src/screens/Unit/Detail.js

@@ -1,15 +1,14 @@
 import React, {
   useCallback,
+  useContext,
   useEffect,
   useState,
   useRef,
-  useContext,
 } from 'react';
 import { AppState, RefreshControl, View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { VLCPlayer } from 'react-native-vlc-media-player';
-
 import { useTranslations } from '../../hooks/Common/useTranslations';
+
 import styles from './styles';
 import AddMenu from './AddMenu';
 import MoreMenu from './MoreMenu';
@@ -24,8 +23,10 @@ import {
   usePopover,
 } from '../../hooks/Common';
 import { useFavorites } from './hook/useFavorites';
-import { useUnitConnectRemoteDevices } from './hook/useUnitConnectRemoteDevices';
-import { fetchWithCache, axiosGet } from '../../utils/Apis/axios';
+import { scanBluetoothDevices } from '../../iot/RemoteControl/Bluetooth';
+import { googleHomeConnect } from '../../iot/RemoteControl/GoogleHome';
+import { axiosPost, fetchWithCache, axiosGet } from '../../utils/Apis/axios';
+import { lgThinqConnect } from '../../iot/RemoteControl/LG';
 import ShortDetailSubUnit from '../../commons/SubUnit/ShortDetail';
 import NavBar from '../../commons/NavBar';
 import WrapParallaxScrollView from '../../commons/WrapParallaxScrollView';
@@ -50,7 +51,6 @@ import PreventAccess from '../../commons/PreventAccess';
 
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
-  const { setAction } = useContext(SCContext);
 
   const {
     unitId,
@@ -63,6 +63,7 @@ const UnitDetail = ({ route }) => {
   } = route.params;
 
   const isFocused = useIsFocused();
+  const { stateData, setAction } = useContext(SCContext);
   const { navigate, goBack } = useNavigation();
   const RouterHardware = useCallback(
     (routeHardware) => () => {
@@ -75,14 +76,15 @@ const UnitDetail = ({ route }) => {
     isSuccessfullyConnected ? RouterHardware(Routes.Dashboard) : goBack
   );
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
-  const { isLavidaSource, isFirstOpenCamera } = useSCContextSelector(
-    (state) => state.app
+  const isLavidaSource = useSCContextSelector(
+    (state) => state.app.isLavidaSource
   );
 
   const [unit, setUnit] = useState(unitData || { id: unitId });
   const [listMenuItem, setListMenuItem] = useState([]);
   const [listStation, setListStation] = useState([]);
   const [listAutomate, setListAutomate] = useState([]);
+  const [isGGHomeConnected, setIsGGHomeConnected] = useState(false);
   const [station, setStation] = useState({});
   const [indexStation, setIndexStation] = useState(0);
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
@@ -189,7 +191,61 @@ const UnitDetail = ({ route }) => {
     };
   }, [fetchDetails]);
 
-  useUnitConnectRemoteDevices(unit);
+  const handleGoogleHomeConnect = useCallback(
+    async (options) => {
+      let isConnected = await googleHomeConnect(options); // this may wrong if have multiple connection
+      setIsGGHomeConnected(isConnected);
+      let chipId = options[0].chip_id;
+      if (!isConnected) {
+        setAction(Action.LIST_DEVICE_TYPES, {
+          chipId: chipId,
+          sentEmail: true,
+        });
+        await axiosPost(API.GOOGLE_HOME.CHECK_SEND_EMAIL(), {
+          chip_id: chipId,
+          is_connected: false,
+        });
+      } else if (isConnected && stateData?.listDevice[chipId]?.sentEmail) {
+        setAction(Action.LIST_DEVICE_TYPES, {
+          chipId: chipId,
+          sentEmail: false,
+        });
+        await axiosPost(API.GOOGLE_HOME.CHECK_SEND_EMAIL(), {
+          chip_id: chipId,
+          is_connected: true,
+        });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  let isCalled = false;
+
+  const handleLgThinqConnect = useCallback(async (options) => {
+    if (isCalled) {
+      return;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    isCalled = true;
+    await lgThinqConnect(options);
+  }, []);
+
+  useEffect(() => {
+    if (unit.remote_control_options) {
+      if (unit.remote_control_options.bluetooth) {
+        scanBluetoothDevices(unit.remote_control_options.bluetooth);
+      }
+      if (unit.remote_control_options.googlehome?.length) {
+        handleGoogleHomeConnect(unit.remote_control_options.googlehome);
+      }
+      if (unit.remote_control_options.lg_thinq) {
+        (async () => {
+          await handleLgThinqConnect(unit.remote_control_options.lg_thinq);
+        })();
+      }
+    }
+  }, [handleGoogleHomeConnect, handleLgThinqConnect, unit]);
 
   useEffect(() => {
     if (isFocused) {
@@ -208,7 +264,7 @@ const UnitDetail = ({ route }) => {
       setListMenuItem(listMenu);
       setListStation(listMenu.concat([{ text: '' }]));
     }
-  }, [unit, indexStation]);
+  }, [unit, indexStation, isGGHomeConnected]);
 
   useEffect(() => {
     isOneTap && setIndexStation(1);
@@ -252,6 +308,7 @@ const UnitDetail = ({ route }) => {
           favoriteDevices={favoriteDevices}
           favoriteAutomates={favoriteAutomates}
           wrapItemStyle={styles.wrapItemStyle}
+          isGGHomeConnected={isGGHomeConnected}
         />
       );
     }
@@ -273,7 +330,13 @@ const UnitDetail = ({ route }) => {
         />
       );
     } else if (station) {
-      return <ShortDetailSubUnit unit={unit} station={station} />;
+      return (
+        <ShortDetailSubUnit
+          unit={unit}
+          station={station}
+          isGGHomeConnected={isGGHomeConnected}
+        />
+      );
     }
   };
 
@@ -290,15 +353,6 @@ const UnitDetail = ({ route }) => {
     return () => unwatchNotificationData(user);
   }, [user, onRefresh]);
 
-  useEffect(() => {
-    if (isFirstOpenCamera) {
-      const to = setTimeout(() => {
-        setAction(Action.IS_FIRST_OPEN_CAMERA, false);
-        clearTimeout(to);
-      }, 5000);
-    }
-  }, [isFirstOpenCamera, setAction]);
-
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}
@@ -313,16 +367,6 @@ const UnitDetail = ({ route }) => {
       hideRightPlus={!isOwner}
       onBack={(isSuccessfullyConnected && Dashboard) || (routeName && onBack)}
     >
-      {/* NOTE: This is a trick to fix camera not full screen on first open app */}
-      {isFirstOpenCamera && (
-        <VLCPlayer
-          source={{
-            uri: 'rtsp://admin:Eoh@2020@101.99.33.220:30554/main',
-          }}
-          style={styles.camera}
-        />
-      )}
-
       <View style={styles.container}>
         <Summaries unit={unit} />
         <NavBar
@@ -339,6 +383,7 @@ const UnitDetail = ({ route }) => {
           </View>
         )}
       </View>
+
       <AddMenu
         unit={unit}
         afterItemClick={hidePopover}

package/src/screens/Unit/ManageUnit.js

@@ -105,7 +105,6 @@ const ManageUnit = ({ route }) => {
         formData,
         headers
       );
-
       if (success) {
         setUnitData({ ...data });
         ToastBottomHelper.success(t('unit_updated_successfully'));