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

package/src/screens/PlayBackCamera/index.js

@@ -13,13 +13,13 @@ import Text from '../../commons/Text';
 import Timer from './Timer';
 import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
 import MediaPlayerFull from '../../commons/MediaPlayerDetail/MediaPlayerFull';
-import { TESTID } from '../../configs/Constants';
+import { DATE_TIME_FORMAT, TESTID } from '../../configs/Constants';
 
-let dateTemp = moment().format('YYYY-MM-DD');
+let dateTemp = moment().format(DATE_TIME_FORMAT.YMD);
 let isFirstTime = true;
 
 const PlayBackCamera = () => {
-  const now = useMemo(() => moment().format('YYYY-MM-DD'), []);
+  const now = useMemo(() => moment().format(DATE_TIME_FORMAT.YMD), []);
   const hourTemp = useMemo(() => moment().format('HH:mm:ss'), []);
   const arrHourTemp = useMemo(() => hourTemp.split(':'), [hourTemp]);
   const t = useTranslations();
@@ -33,7 +33,8 @@ const PlayBackCamera = () => {
     s: arrHourTemp[2],
   });
   const [uri, setUri] = useState(item?.configuration?.uri);
-  const [paused, setPaused] = useState(true);
+  const [mainURI, setMainURI] = useState(uri);
+  const [paused, setPaused] = useState(false);
   const onOpenDateModal = useCallback(() => {
     setIsShowDate(true);
   }, []);
@@ -49,15 +50,19 @@ const PlayBackCamera = () => {
   }, [selected]);
 
   const onAddDate = useCallback(() => {
+    setPaused(true);
     if (selected !== now) {
-      const date = moment(selected).add(1, 'days').format('YYYY-MM-DD');
+      const date = moment(selected).add(1, 'days').format(DATE_TIME_FORMAT.YMD);
       setSelected(date);
       dateTemp = date;
     }
   }, [selected, now]);
 
   const onSubtractDate = useCallback(() => {
-    const date = moment(selected).subtract(1, 'days').format('YYYY-MM-DD');
+    setPaused(true);
+    const date = moment(selected)
+      .subtract(1, 'days')
+      .format(DATE_TIME_FORMAT.YMD);
     setSelected(date);
     dateTemp = date;
   }, [selected]);
@@ -72,6 +77,25 @@ const PlayBackCamera = () => {
     [item?.configuration?.time_zone]
   );
 
+  const onScrollEndDrag = useCallback(() => {
+    setMainURI(uri);
+    setPaused(false);
+  }, [uri]);
+
+  const onDayPress = useCallback((day) => {
+    setPaused(true);
+    setSelected(day.dateString);
+  }, []);
+
+  const onPressArrowLeft = useCallback((subtractMonth) => {
+    setPaused(true);
+    subtractMonth && subtractMonth();
+  }, []);
+
+  const onPressArrowRight = useCallback((addMonth) => {
+    addMonth && addMonth();
+  }, []);
+
   const onChangeValue = useCallback(
     (value, selectedTime) => {
       if (!isFirstTime) {
@@ -100,10 +124,6 @@ const PlayBackCamera = () => {
             }T${getHourWithTimeZone(h)}${m}${s}Z`
           );
         }
-        const to = setTimeout(() => {
-          setPaused(false);
-          clearTimeout(to);
-        }, 100);
       }
     },
     [
@@ -115,27 +135,37 @@ const PlayBackCamera = () => {
     ]
   );
 
+  const renderArrow = useCallback((direction) => {
+    return (
+      <Image
+        source={Images.arrowLeft}
+        style={[direction !== 'left' && styles.arrowRight]}
+      />
+    );
+  }, []);
+
   useEffect(() => {
-    setPaused(true);
-    const date = selected.split('-');
-    const playback = item?.configuration?.playback || '';
-    if (
-      selected === now &&
-      parseInt(moment().format('HH:mm:ss'), 10) <=
-        parseInt(`${hour.h}:${hour.m}:${hour.s}`, 10)
-    ) {
-      setUri(item?.configuration?.uri);
-    } else {
-      setUri(
-        `${playback.split('=')[0]}=${date[0]}${date[1]}${
-          date[2]
-        }T${getHourWithTimeZone(hour.h)}${hour.m}${hour.s}Z`
-      );
+    if (!isFirstTime) {
+      const date = selected.split('-');
+      const playback = item?.configuration?.playback || '';
+      if (
+        selected === now &&
+        parseInt(moment().format('HH:mm:ss'), 10) <=
+          parseInt(`${hour.h}:${hour.m}:${hour.s}`, 10)
+      ) {
+        setMainURI(item?.configuration?.uri);
+      } else {
+        setMainURI(
+          `${playback.split('=')[0]}=${date[0]}${date[1]}${
+            date[2]
+          }T${getHourWithTimeZone(hour.h)}${hour.m}${hour.s}Z`
+        );
+      }
+      const to = setTimeout(() => {
+        setPaused(false);
+        clearTimeout(to);
+      }, 100);
     }
-    const to = setTimeout(() => {
-      setPaused(false);
-      clearTimeout(to);
-    }, 100);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selected, getHourWithTimeZone]);
 
@@ -152,7 +182,7 @@ const PlayBackCamera = () => {
       clearTimeout(to);
     }, 2000);
     return () => {
-      dateTemp = moment().format('YYYY-MM-DD');
+      dateTemp = moment().format(DATE_TIME_FORMAT.YMD);
       isFirstTime = true;
     };
   }, []);
@@ -161,7 +191,7 @@ const PlayBackCamera = () => {
     <View style={styles.wrap}>
       <HeaderCustom title={t('video_detail')} />
       <MediaPlayerFull
-        uri={uri}
+        uri={mainURI}
         isPaused={paused}
         thumbnail={thumbnail}
         isShowFullScreenIcon
@@ -223,6 +253,7 @@ const PlayBackCamera = () => {
             indicatorHeight={40}
             onChangeValue={onChangeValue}
             selected={selected}
+            onScrollEndDrag={onScrollEndDrag}
           />
         </View>
       </View>
@@ -230,13 +261,10 @@ const PlayBackCamera = () => {
       <ModalCustom isVisible={isShowDate} style={styles.modal}>
         <View style={styles.wrapDate}>
           <Calendar
-            onDayPress={(day) => {
-              setSelected(day.dateString);
-            }}
-            maxDate={moment().format('YYYY-MM-DD')}
-            onMonthChange={(month) => {}}
-            onPressArrowLeft={(subtractMonth) => subtractMonth()}
-            onPressArrowRight={(addMonth) => addMonth()}
+            onDayPress={onDayPress}
+            maxDate={moment().format(DATE_TIME_FORMAT.YMD)}
+            onPressArrowLeft={onPressArrowLeft}
+            onPressArrowRight={onPressArrowRight}
             markedDates={{
               [selected]: {
                 selected: true,
@@ -246,14 +274,7 @@ const PlayBackCamera = () => {
               },
             }}
             enableSwipeMonths={true}
-            renderArrow={(direction) => {
-              if (direction === 'left') {
-                return <Image source={Images.arrowLeft} />;
-              }
-              return (
-                <Image source={Images.arrowLeft} style={styles.arrowRight} />
-              );
-            }}
+            renderArrow={renderArrow}
             headerStyle={styles.headerStyle}
           />
           <View style={styles.viewSeparated} />

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/Detail.js

@@ -291,6 +291,21 @@ const UnitDetail = ({ route }) => {
     navigate(isLavidaSource ? Routes.SmartHomeDashboard : Routes.Dashboard);
   }, [isLavidaSource, navigate]);
 
+  const renderCamera = useMemo(() => {
+    return (
+      isFirstOpenCamera &&
+      isIOS && (
+        <MediaPlayerDetail
+          uri={Constants.URL_STREAM_CAMERA_DEMO}
+          isPaused={false}
+          width={1}
+          height={1}
+          style={styles.fakeCamera}
+        />
+      )
+    );
+  }, [isFirstOpenCamera, isIOS]);
+
   useEffect(() => {
     watchNotificationData(user, onRefresh);
     return () => unwatchNotificationData(user);
@@ -319,16 +334,7 @@ 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 && isIOS && (
-        <MediaPlayerDetail
-          uri={Constants.URL_STREAM_CAMERA_DEMO}
-          isPaused={false}
-          width={1}
-          height={1}
-          style={styles.fakeCamera}
-        />
-      )}
+      {renderCamera}
 
       <View style={styles.container}>
         <Summaries unit={unit} />

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__/AutomateScript.test.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import { AUTOMATE_TYPE } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import AutomateScript from '../AutomateScript';
+
+const mockOnPress = jest.fn();
+
+const wrapComponent = (isSelected, automate = 'automate') => (
+  <SCProvider initState={mockSCStore({})}>
+    <AutomateScript
+      automate={automate}
+      onPress={mockOnPress}
+      isSelected={isSelected}
+    />
+  </SCProvider>
+);
+
+describe('test AutomateScript screen', () => {
+  let tree,
+    automate = { type: '' };
+  it('Test isSelected=false', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(false, automate));
+    });
+    const instance = tree.root;
+    const TouchableWithoutFeedbacks = instance.findAllByType(
+      TouchableWithoutFeedback
+    );
+    await TouchableWithoutFeedbacks[0].props.onPress();
+    expect(mockOnPress).toBeCalledWith(automate);
+  });
+
+  it('Test isSelected=true', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(true));
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views[0].props.style).toEqual([
+      {
+        padding: 12,
+        borderRadius: 10,
+        shadowColor: '#303133',
+        shadowOffset: {
+          height: 2,
+          width: 0,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 3,
+        elevation: 4,
+        width: 353,
+        height: 204.144578313253,
+        backgroundColor: '#FFFFFF',
+        justifyContent: 'space-between',
+        marginBottom: 8,
+      },
+      {
+        borderColor: '#00979D',
+        borderWidth: 2,
+      },
+    ]);
+  });
+
+  it('Test render VALUE_CHANGE', async () => {
+    automate = { ...automate, type: AUTOMATE_TYPE.VALUE_CHANGE };
+    await act(async () => {
+      tree = await create(wrapComponent(true, automate));
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(9);
+  });
+
+  it('Test render ONE_TAP', async () => {
+    automate = { ...automate, type: AUTOMATE_TYPE.ONE_TAP };
+    await act(async () => {
+      tree = await create(wrapComponent(true, automate));
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(9);
+  });
+
+  it('Test render EVENT', async () => {
+    automate = { ...automate, type: AUTOMATE_TYPE.EVENT };
+    await act(async () => {
+      tree = await create(wrapComponent(true, automate));
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(9);
+  });
+
+  it('Test render SCHEDULE', async () => {
+    automate = { ...automate, type: AUTOMATE_TYPE.SCHEDULE };
+    await act(async () => {
+      tree = await create(wrapComponent(true, automate));
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(9);
+  });
+
+  it('Test render with iconKit', async () => {
+    automate = { ...automate, script: { icon_kit: 'iconKit' } };
+    await act(async () => {
+      tree = await create(wrapComponent(true, automate));
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(10);
+  });
+});

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);
       })();