@eohjsc/react-native-smart-city 0.3.26 → 0.3.27

package/package.json

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

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -1,12 +1,17 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
 import MyUnit from '..';
+import MyUnitDevice from '../../../../screens/Unit/components/MyUnitDevice';
 import { TESTID } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
+import api from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
 
 const mockedNavigate = jest.fn();
-const mockUseIsFocused = jest.fn();
 const mockedDispatch = jest.fn();
 
 jest.mock('@react-navigation/native', () => {
@@ -15,9 +20,8 @@ jest.mock('@react-navigation/native', () => {
     useNavigation: () => ({
       navigate: mockedNavigate,
     }),
-    useIsFocused: () => ({
-      isFocused: mockUseIsFocused,
-    }),
+    useIsFocused: () => true,
+    useFocusEffect: jest.fn(),
   };
 });
 
@@ -34,6 +38,42 @@ const wrapComponent = () => (
 
 describe('Test MyUnit', () => {
   let tree;
+  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,
+          },
+        },
+      ],
+    },
+    {
+      id: 2,
+      name: 'name2',
+      background: 'background',
+    },
+  ];
+
+  beforeEach(() => {
+    mock.resetHistory();
+  });
+
   const getElement = (instance) => {
     const goToDetail = instance.findAll(
       (item) => item.props.testID === TESTID.MY_UNIT_GO_TO_DETAIL
@@ -44,7 +84,7 @@ describe('Test MyUnit', () => {
     return { goToDetail, textNoUnit };
   };
 
-  test('create MyUnit no Unit', async () => {
+  test('MyUnit no Unit', async () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent());
     });
@@ -52,4 +92,14 @@ describe('Test MyUnit', () => {
     const { textNoUnit } = getElement(instance);
     expect(textNoUnit[0]).toBeDefined();
   });
+
+  test('MyUnit with unit', async () => {
+    mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const devices = instance.findAllByType(MyUnitDevice);
+    expect(devices).toHaveLength(2);
+  });
 });

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

@@ -1,5 +1,18 @@
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+  useContext,
+  useMemo,
+} from 'react';
 import { View, Image, TouchableOpacity, Dimensions } from 'react-native';
+import {
+  useNavigation,
+  useIsFocused,
+  useFocusEffect,
+} from '@react-navigation/native';
+import NetInfo from '@react-native-community/netinfo';
 import { API, Colors, Images } from '../../../configs';
 import Text from '../../Text';
 import { fetchWithCache } from '../../../utils/Apis/axios';
@@ -7,10 +20,13 @@ import { fetchWithCache } from '../../../utils/Apis/axios';
 import styles from './styles';
 import { Section } from '../../Section';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { useNavigation, useIsFocused } from '@react-navigation/native';
+import { useUnitConnectRemoteDevices } from '../../../screens/Unit/hook/useUnitConnectRemoteDevices';
+import { useWatchConfigs } from '../../../hooks/IoT';
+import { SCContext } from '../../../context';
+import { Action } from '../../../context/actionType';
 
 import Carousel from 'react-native-snap-carousel';
-import { TESTID } from '../../../configs/Constants';
+import { TESTID, DEVICE_TYPE } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
 import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
 
@@ -20,21 +36,49 @@ const MyUnit = () => {
   const isFocused = useIsFocused();
   const navigation = useNavigation();
   const [myUnits, setMyUnits] = useState([]);
+  const [slideIndex, setSlideIndex] = useState(0);
+  const { setAction } = useContext(SCContext);
 
   const fetchMyUnitDashboard = useCallback(async () => {
     await fetchWithCache(API.UNIT.MY_UNITS(), {}, (response) => {
       const { success, data } = response;
-      if (success) {
-        setMyUnits(data);
-      }
+      success && setMyUnits(data);
     });
   }, [setMyUnits]);
 
   useEffect(() => {
-    if (isFocused) {
-      fetchMyUnitDashboard();
-    }
+    isFocused && fetchMyUnitDashboard();
   }, [fetchMyUnitDashboard, isFocused]);
+
+  useFocusEffect(
+    useCallback(() => {
+      const unsubscribe = NetInfo.addEventListener((state) => {
+        setAction(Action.SET_NETWORK_CONNECTED, state.isConnected);
+      });
+      return () => unsubscribe();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+  );
+
+  useUnitConnectRemoteDevices(myUnits[slideIndex]);
+
+  const configsNeedWatching = useMemo(() => {
+    const configIds = [];
+    myUnits.forEach((unit) => {
+      (unit?.abstract_devices || []).forEach((device) => {
+        if (
+          device?.quick_action?.config_id &&
+          device?.device_type !== DEVICE_TYPE.GOOGLE_HOME
+        ) {
+          configIds.push(device.quick_action.config_id);
+        }
+      });
+    });
+    return configIds;
+  }, [myUnits]);
+
+  useWatchConfigs(configsNeedWatching);
+
   const goToDetail = useCallback(
     (item) => {
       navigation.navigate(Routes.UnitStack, {
@@ -47,6 +91,7 @@ const MyUnit = () => {
     },
     [navigation]
   );
+
   const _renderItem = useCallback(
     ({ item, index }) => {
       const paddingLeft = index === 0 ? 0 : 8;
@@ -73,14 +118,15 @@ const MyUnit = () => {
             />
             <Text style={styles.title}>{item.name}</Text>
           </TouchableOpacity>
-          {item.abstract_sensors.map((sensor, indexSensor) => (
-            <MyUnitDevice key={indexSensor} sensor={sensor} unit={item} />
+          {(item?.abstract_devices || []).map((device, indexDevice) => (
+            <MyUnitDevice key={indexDevice} device={device} unit={item} />
           ))}
         </View>
       );
     },
     [myUnits.length, goToDetail]
   );
+
   return (
     <>
       <Section style={styles.boxTxtMyUnit}>
@@ -96,6 +142,7 @@ const MyUnit = () => {
               itemWidth={screenWidth - 32}
               renderItem={_renderItem}
               inactiveSlideScale={1}
+              onSnapToItem={setSlideIndex}
             />
           ) : (
             <View>

package/src/commons/MenuActionMore/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { TouchableOpacity, ScrollView } from 'react-native';
-import Popover from 'react-native-popover-view';
+import Popover from '../Popover';
 
 import styles from './MenuActionMoreStyles';
 import Text from '../Text';
@@ -12,7 +12,6 @@ const MenuActionMore = memo(
   ({
     isVisible,
     hideMore,
-    hideComplete,
     listMenuItem,
     childRef,
     onItemClick,
@@ -46,7 +45,6 @@ const MenuActionMore = memo(
         placement="bottom"
         from={childRef}
         onRequestClose={hideMore}
-        onCloseComplete={hideComplete}
         isVisible={isVisible}
         arrowStyle={styles.wrap}
       >

package/src/commons/Popover/index.js

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import Popover from 'react-native-popover-view';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
+
+const PopoverComponent = (props) => {
+  const { setAction } = useContext(SCContext);
+
+  const onCloseStart = () => {
+    setAction(Action.SET_POPOVER_ANIMATING, true);
+  };
+
+  const onCloseComplete = () => {
+    setAction(Action.SET_POPOVER_ANIMATING, false);
+  };
+
+  return (
+    <Popover
+      onCloseStart={onCloseStart}
+      onCloseComplete={onCloseComplete}
+      {...props}
+    />
+  );
+};
+
+export default PopoverComponent;

package/src/context/actionType.ts

@@ -23,6 +23,7 @@ export const Action = {
   NEED_UPDATE_VALUE_EVALUATIONS: 'NEED_UPDATE_VALUE_EVALUATIONS',
   ON_RECEIVE_NOTIFICATION: 'ON_RECEIVE_NOTIFICATION',
   SET_DEVICES_STATUS: 'SET_DEVICES_STATUS',
+  SET_POPOVER_ANIMATING: 'SET_POPOVER_ANIMATING',
 };
 
 export type AuthData = {
@@ -80,6 +81,7 @@ export type AppType = {
   isNetworkConnected: boolean;
   camera_opened: any[];
   notificationData: any;
+  popoverAnimating: boolean;
 };
 
 export type IoTType = {

package/src/context/reducer.ts

@@ -60,6 +60,7 @@ export const initialState = {
     isNetworkConnected: false,
     camera_opened: [],
     notificationData: null,
+    popoverAnimating: false,
   },
   iot: {
     googlehome: {
@@ -342,6 +343,15 @@ export const reducer = (currentState: ContextData, action: Action) => {
         },
       };
 
+    case Action.SET_POPOVER_ANIMATING:
+      return {
+        ...currentState,
+        app: {
+          ...currentState.app,
+          popoverAnimating: payload,
+        },
+      };
+
     default:
       return currentState;
   }

package/src/hooks/Common/useGGHomeDeviceConnected.js

@@ -1,11 +1,18 @@
 import { useSCContextSelector } from '../../context';
 
 const useGGHomeDeviceConnected = (device) => {
-  const { connections } = useSCContextSelector((state) => state.iot.googlehome);
+  const connections = useSCContextSelector(
+    (state) => state.iot.googlehome.connections
+  );
+  const isNetworkConnected = useSCContextSelector(
+    (state) => state.app.isNetworkConnected
+  );
 
-  const isConnecting = !!device?.chip_id && !(device.chip_id in connections);
+  const isConnecting =
+    isNetworkConnected && !!device?.chip_id && !(device.chip_id in connections);
 
   const isConnected =
+    isNetworkConnected &&
     !!device?.chip_id &&
     device.chip_id in connections &&
     !!connections[device.chip_id];

package/src/hooks/Common/usePopover.js

@@ -2,14 +2,12 @@ import { useCallback, useState, useRef } from 'react';
 
 const usePopover = () => {
   const [showingPopover, setShowingPopover] = useState(false);
-  const [hidingPopoverComplete, setHidingPopoverComplete] = useState(true);
   const childRef = useRef(null);
 
   const showPopoverWithRef = useCallback(
     (ref) => {
       childRef.current = ref.current;
       setShowingPopover(true);
-      setHidingPopoverComplete(false);
     },
     [childRef]
   );
@@ -19,17 +17,11 @@ const usePopover = () => {
     setShowingPopover(false);
   }, [childRef]);
 
-  const hidePopoverComplete = useCallback(() => {
-    setHidingPopoverComplete(true);
-  }, []);
-
   return {
     childRef,
     showingPopover,
     showPopoverWithRef,
     hidePopover,
-    hidingPopoverComplete,
-    hidePopoverComplete,
   };
 };
 

package/src/hooks/IoT/useGGHomeConnection.js

@@ -71,7 +71,6 @@ const useGGHomeConnection = () => {
         onReconnected
       );
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [connections, onEstablished, onDisconnected, onReconnected]
   );
 

package/src/navigations/UnitStack.js

@@ -93,7 +93,11 @@ export const UnitStack = memo((props) => {
       if (!id) {
         return;
       }
-      const { success, data } = await axiosGet(API.UNIT.FAVOURITE_DEVICES(id));
+      const { success, data } = await axiosGet(
+        API.UNIT.FAVOURITE_DEVICES(id),
+        {},
+        true
+      );
       success && setAction(Action.SET_FAVORITE_DEVICES, data);
     };
     fetchFavoriteDevices();
@@ -102,7 +106,11 @@ export const UnitStack = memo((props) => {
 
   useEffect(() => {
     const fetchStarredScripts = async () => {
-      const { success, data } = await axiosGet(API.AUTOMATE.STARRED_SCRIPTS());
+      const { success, data } = await axiosGet(
+        API.AUTOMATE.STARRED_SCRIPTS(),
+        {},
+        true
+      );
       success && setAction(Action.SET_STARRED_SCRIPTS, data);
     };
     fetchStarredScripts();

package/src/screens/ScriptDetail/__test__/index.test.js

@@ -103,7 +103,6 @@ describe('Test ScriptDetail', () => {
 
     await act(async () => {
       await menu.props.onItemClick(rename);
-      await menu.props.hideComplete();
     });
     expect(menu.props.isVisible).toBeFalsy();
     expect(alertAction.props.visible).toBeTruthy();
@@ -130,7 +129,6 @@ describe('Test ScriptDetail', () => {
 
     await act(async () => {
       await menu.props.onItemClick(rename);
-      await menu.props.hideComplete();
     });
     expect(menu.props.isVisible).toBeFalsy();
     expect(alertAction.props.visible).toBeTruthy();
@@ -154,7 +152,6 @@ describe('Test ScriptDetail', () => {
 
     await act(async () => {
       await menu.props.onItemClick(deleteItem);
-      await menu.props.hideComplete();
     });
     expect(alertAction.props.visible).toBeTruthy();
     mock.onDelete(API.AUTOMATE.SCRIPT(1)).reply(204);

package/src/screens/ScriptDetail/index.js

@@ -43,6 +43,7 @@ import { popAction } from '../../navigations/utils';
 import { TESTID } from '../../configs/Constants';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 import { REPEAT_OPTIONS } from '../SetSchedule/components/RepeatOptionsPopup';
+import { useSCContextSelector } from '../../context';
 
 const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
 
@@ -50,14 +51,8 @@ const ScriptDetail = ({ route }) => {
   const { navigate, goBack, dispatch } = useNavigation();
   const { params = {} } = route;
   const refMenuAction = useRef();
-  const {
-    childRef,
-    showingPopover,
-    showPopoverWithRef,
-    hidePopover,
-    hidingPopoverComplete,
-    hidePopoverComplete,
-  } = usePopover();
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
   const t = useTranslations();
   const {
     id,
@@ -84,6 +79,9 @@ const ScriptDetail = ({ route }) => {
   const [data, setData] = useState([]);
 
   const { isStarred, starScript, unstarScript } = useStarredScript(automate);
+  const popoverAnimating = useSCContextSelector(
+    (state) => state.app.popoverAnimating
+  );
 
   const [transY] = useKeyboardAnimated(-16);
   const animatedStyle = Platform.select({
@@ -483,7 +481,6 @@ const ScriptDetail = ({ route }) => {
       <MenuActionMore
         isVisible={showingPopover}
         hideMore={hidePopover}
-        hideComplete={hidePopoverComplete}
         listMenuItem={listMenuItem}
         childRef={childRef}
         onItemClick={onItemClick}
@@ -491,7 +488,7 @@ const ScriptDetail = ({ route }) => {
         wrapStyle={styles.wrapStyle}
       />
       <AlertAction
-        visible={stateAlertAction.visible && hidingPopoverComplete}
+        visible={stateAlertAction.visible && !popoverAnimating}
         hideModal={hideAlertAction}
         title={stateAlertAction.title}
         message={stateAlertAction.message}

package/src/screens/Unit/SmartAccount.js

@@ -14,11 +14,12 @@ import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
 import { axiosDelete, axiosGet } from '../../utils/Apis/axios';
 import { SmartAccountItem } from './SmartAccountItem';
-import { usePopover, useBoolean } from '../../hooks/Common';
+import { usePopover } from '../../hooks/Common';
 import { MenuActionMore, AlertAction, FullLoading } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useStateAlertRemove } from '../Unit/hook/useStateAlertRemove';
 import { ToastBottomHelper } from '../../utils/Utils';
+import { useSCContextSelector } from '../../context';
 
 const ListSmartAccount = ({ route }) => {
   const { unitId } = route?.params || {};
@@ -27,6 +28,9 @@ const ListSmartAccount = ({ route }) => {
   const smartAccountRef = useRef(null);
   const { navigate } = useNavigation();
   const [loadingRemoveItem, setLoadingRemoveItem] = useState(false);
+  const popoverAnimating = useSCContextSelector(
+    (state) => state.app.popoverAnimating
+  );
 
   const getAllSmartAccounts = useCallback(async () => {
     const { success, data: accountData } = await axiosGet(
@@ -39,7 +43,6 @@ const ListSmartAccount = ({ route }) => {
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
-  const [lockShowing, acquireLockShowing, releaseLockShowing] = useBoolean();
   const { stateAlertRemove, onShowRemoveAlert, hideAlertAction } =
     useStateAlertRemove();
 
@@ -62,11 +65,10 @@ const ListSmartAccount = ({ route }) => {
         return;
       }
       if (item.action === 'remove') {
-        acquireLockShowing();
         onShowRemoveAlert(smartAccountRef.current.brand)();
       }
     },
-    [acquireLockShowing, onShowRemoveAlert]
+    [onShowRemoveAlert]
   );
 
   const deleteSmartAccount = useCallback(async () => {
@@ -124,7 +126,7 @@ const ListSmartAccount = ({ route }) => {
           })}
         </View>
         <AlertAction
-          visible={stateAlertRemove.visible && !lockShowing}
+          visible={stateAlertRemove.visible && !popoverAnimating}
           hideModal={hideAlertAction}
           title={stateAlertRemove.title}
           message={stateAlertRemove.message}
@@ -142,7 +144,6 @@ const ListSmartAccount = ({ route }) => {
           listMenuItem={listMenuItem}
           childRef={childRef}
           onItemClick={onItemClick}
-          hideComplete={releaseLockShowing}
         />
       </WrapHeaderScrollable>
       {loadingRemoveItem && <FullLoading />}

package/src/screens/Unit/Summaries.js

@@ -6,6 +6,7 @@ import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { axiosGet } from '../../utils/Apis/axios';
 import { API } from '../../configs';
 import { useReceiveNotifications } from '../../hooks';
+import { useSCContextSelector } from '../../context';
 
 const Summaries = memo(({ unit }) => {
   const [unitSummaries, setUnitSummaries] = useState([]);
@@ -14,6 +15,9 @@ const Summaries = memo(({ unit }) => {
   const isFocused = useIsFocused();
   const navigation = useNavigation();
   const appState = useRef(AppState.currentState);
+  const popoverAnimating = useSCContextSelector(
+    (state) => state.app.popoverAnimating
+  );
 
   const fetchUnitSummary = useCallback(async () => {
     if (!unit.id) {
@@ -33,6 +37,9 @@ const Summaries = memo(({ unit }) => {
 
   const goToSummary = useCallback(
     (summary) => {
+      if (popoverAnimating) {
+        return;
+      }
       navigation.navigate(Routes.UnitSummary, {
         summaryId: summary.id,
         unitId: unit.id,
@@ -40,7 +47,7 @@ const Summaries = memo(({ unit }) => {
         unitData: unit,
       });
     },
-    [navigation, unit]
+    [navigation, popoverAnimating, unit]
   );
 
   const continuousFetchSummary = useCallback(async () => {

package/src/screens/Unit/components/Header/index.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { Dimensions, View, TouchableOpacity, StyleSheet } from 'react-native';
-import Popover from 'react-native-popover-view';
+import Popover from '../../../../commons/Popover';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 

package/src/screens/Unit/components/MyUnitDevice/index.js

@@ -1,15 +1,17 @@
 import React, { useState, useCallback } from 'react';
 import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import { useGGHomeDeviceConnected } from '../../../../hooks/Common';
 
 import ItemQuickAction from '../../../../commons/Action/ItemQuickAction';
 import Text from '../../../../commons/Text';
 import Routes from '../../../../utils/Route';
 import { Colors } from '../../../../configs';
 import FImage from '../../../../commons/FImage';
+import { DEVICE_TYPE } from '../../../../configs/Constants';
 
-const MyUnitDevice = ({ sensor, unit }) => {
-  const [status, setStatus] = useState(sensor.status);
+const MyUnitDevice = ({ device, unit }) => {
+  const [status, setStatus] = useState(device.status);
   const { navigate } = useNavigation();
 
   const goToSensorDisplay = useCallback(() => {
@@ -17,34 +19,49 @@ const MyUnitDevice = ({ sensor, unit }) => {
       screen: Routes.DeviceDetail,
       params: {
         unitData: unit,
-        sensorData: sensor,
+        sensorData: device,
       },
     });
-  }, [navigate, sensor, unit]);
+  }, [navigate, device, unit]);
+
+  const { isConnecting: isGGHomeConnecting } = useGGHomeDeviceConnected(device);
+
+  const canRenderQuickAction = (() => {
+    if (
+      !!device &&
+      !device?.is_managed_by_backend &&
+      device?.device_type === DEVICE_TYPE.GOOGLE_HOME
+    ) {
+      return !isGGHomeConnecting;
+    }
+    return true;
+  })();
 
   return (
     <View style={styles.item}>
       <TouchableOpacity style={styles.flex1} onPress={goToSensorDisplay}>
         <View style={styles.rowCenter}>
-          <FImage style={styles.image} source={{ uri: sensor?.icon_kit }} />
+          <FImage style={styles.image} source={{ uri: device?.icon_kit }} />
           <View style={styles.marginTop3}>
             <Text numberOfLines={1} semibold style={styles.nameDevice}>
-              {sensor.name}
+              {device.name}
             </Text>
             <View style={styles.roomDevice}>
               <Text numberOfLines={1} style={styles.roomDevicePart}>
-                {sensor.station_name}
+                {device.station_name}
                 {status ? ` - ${status}` : ''}
               </Text>
             </View>
           </View>
         </View>
       </TouchableOpacity>
-      <ItemQuickAction
-        sensor={sensor}
-        wrapperStyle={styles.iconCircle}
-        setStatus={setStatus}
-      />
+      {canRenderQuickAction && (
+        <ItemQuickAction
+          sensor={device}
+          wrapperStyle={styles.iconCircle}
+          setStatus={setStatus}
+        />
+      )}
     </View>
   );
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import Modal from 'react-native-modal';
-import Popover from 'react-native-popover-view';
+import Popover from '../../../../commons/Popover';
 
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';

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

@@ -26,7 +26,7 @@ describe('Test MyUnitDevice', () => {
 
   beforeEach(() => {
     props = {
-      sensor: {
+      device: {
         status: 'Ok',
         name: 'Test',
         station_name: '',
@@ -54,7 +54,7 @@ describe('Test MyUnitDevice', () => {
   });
 
   it('Test render without status', async () => {
-    props.sensor.status = undefined;
+    props.device.status = undefined;
     await act(() => {
       tree = create(wrapComponent(props));
     });

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

@@ -5,7 +5,9 @@ import { useGGHomeConnection } from '../../../hooks/IoT';
 import { useSCContextSelector } from '../../../context';
 
 export const useUnitConnectRemoteDevices = (unit) => {
-  const { isNetworkConnected } = useSCContextSelector((state) => state.app);
+  const isNetworkConnected = useSCContextSelector(
+    (state) => state.app.isNetworkConnected
+  );
 
   const { connectGoogleHome } = useGGHomeConnection();
 
@@ -21,15 +23,14 @@ export const useUnitConnectRemoteDevices = (unit) => {
   }, []);
 
   useEffect(() => {
-    if (unit.remote_control_options && unit.remote_control_options.bluetooth) {
+    if (unit?.remote_control_options?.bluetooth) {
       scanBluetoothDevices(unit.remote_control_options.bluetooth);
     }
   }, [unit]);
 
   useEffect(() => {
     if (
-      unit.remote_control_options &&
-      unit.remote_control_options.googlehome?.length &&
+      unit?.remote_control_options?.googlehome?.length &&
       isNetworkConnected
     ) {
       (async () => {
@@ -40,7 +41,7 @@ export const useUnitConnectRemoteDevices = (unit) => {
   }, [unit, isNetworkConnected]);
 
   useEffect(() => {
-    if (unit.remote_control_options && unit.remote_control_options.lg_thinq) {
+    if (unit?.remote_control_options?.lg_thinq) {
       (async () => {
         await handleLgThinqConnect(unit.remote_control_options.lg_thinq);
       })();

package/src/screens/Unit/components/MyUnit/index.js

@@ -1,136 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import {
-  View,
-  Image,
-  TouchableOpacity,
-  StyleSheet,
-  Dimensions,
-} from 'react-native';
-import Carousel from 'react-native-snap-carousel';
-import { useNavigation } from '@react-navigation/native';
-import { useTranslations } from '../../../../hooks/Common/useTranslations';
-
-import { Colors, Images } from '../../../../configs';
-import { TESTID } from '../../../../configs/Constants';
-import Text from '../../../../commons/Text';
-import MyUnitDevice from '../MyUnitDevice';
-import Routes from '../../../../utils/Route';
-import { colorOpacity } from '../../../../utils/Converter/color';
-
-let screenWidth = Dimensions.get('window').width;
-
-const MyUnit = ({ myUnits }) => {
-  const t = useTranslations();
-  const navigation = useNavigation();
-  const carouselItems = useMemo(() => myUnits, [myUnits]);
-  const goToDetail = useCallback(
-    (item) => {
-      navigation.navigate(Routes.UnitStack, {
-        screen: Routes.UnitDetail,
-        params: {
-          unitId: item.id,
-          unitData: item,
-        },
-      });
-    },
-    [navigation]
-  );
-  const _renderItem = useCallback(
-    ({ item, index }) => {
-      const paddingLeft = index === 0 ? 0 : 8;
-      const paddingRight = index === carouselItems.length - 1 ? 0 : 8;
-      return (
-        <View
-          style={{
-            paddingLeft: paddingLeft,
-            paddingRight: paddingRight,
-          }}
-        >
-          <TouchableOpacity
-            onPress={() => goToDetail(item)}
-            style={styles.btnItem}
-            activeOpacity={0.75}
-            testID={TESTID.MY_UNIT_GO_TO_DETAIL}
-          >
-            <View style={styles.overlay} />
-            <Image
-              style={styles.bgMyUnit}
-              source={{ uri: item.background }}
-              defaultSource={Images.BgUnit}
-              resizeMode="cover"
-            />
-            <Text style={styles.title}>{item.name}</Text>
-          </TouchableOpacity>
-          {item.abstract_sensors.map((sensor, indexSensor) => (
-            <MyUnitDevice key={indexSensor} sensor={sensor} />
-          ))}
-        </View>
-      );
-    },
-    [carouselItems.length, goToDetail]
-  );
-
-  return (
-    <View style={styles.container}>
-      {carouselItems.length ? (
-        <Carousel
-          layout={'default'}
-          data={carouselItems}
-          sliderWidth={screenWidth}
-          itemWidth={screenWidth - 32}
-          renderItem={_renderItem}
-          inactiveSlideScale={1}
-        />
-      ) : (
-        <View>
-          <Text testID={TESTID.MY_UNIT_NO_UNIT}>{t('text_no_units')}</Text>
-        </View>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.White,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingBottom: 16,
-  },
-  overlay: {
-    backgroundColor: colorOpacity(Colors.Black, 0.4),
-    zIndex: 2,
-    left: 0,
-    top: 0,
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    borderRadius: 10,
-  },
-  bgMyUnit: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-    width: '100%',
-    height: '100%',
-    borderRadius: 10,
-  },
-  title: {
-    position: 'absolute',
-    zIndex: 3,
-    fontWeight: 'bold',
-    fontSize: 20,
-    lineHeight: 28,
-    color: Colors.White,
-    bottom: 16,
-    left: 16,
-  },
-  btnItem: {
-    height: 121,
-    marginBottom: 16,
-  },
-});
-
-export default MyUnit;

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import Carousel from 'react-native-snap-carousel';
-import { act, create } from 'react-test-renderer';
-import MyUnit from '../MyUnit';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
-
-const wrapComponent = (units) => (
-  <SCProvider initState={mockSCStore({})}>
-    <MyUnit myUnits={units} />
-  </SCProvider>
-);
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-  };
-});
-
-describe('Test MyUnit', () => {
-  let tree;
-
-  it('render MyUnit carousel', async () => {
-    const units = [
-      { id: 1, name: '', abstract_sensors: [{ id: 1, name: '' }] },
-      { id: 2, name: '', abstract_sensors: [{ id: 1, name: '' }] },
-    ];
-    await act(() => {
-      tree = create(wrapComponent(units));
-    });
-    const instance = tree.root;
-    const carousel = instance.findAllByType(Carousel);
-    expect(carousel).toHaveLength(1);
-  });
-});