@eohjsc/react-native-smart-city 0.3.71 → 0.3.72

package/src/screens/Unit/Detail.js

@@ -50,6 +50,144 @@ import {
 import PreventAccess from '../../commons/PreventAccess';
 import MediaPlayerDetail from '../../commons/MediaPlayerDetail';
 
+const SubUnitDetail = ({ station, isOwner, unit, listAutomate }) => {
+  const { navigate } = useNavigation();
+  const goToPlayBack = useCallback(
+    (item, thumbnail) => {
+      navigate(Routes.PlaybackCamera, { item, thumbnail });
+    },
+    [navigate]
+  );
+  const { favoriteDevices, favoriteAutomates } = useFavorites(
+    unit.stations || [],
+    listAutomate
+  );
+
+  if (!station) {
+    return null;
+  }
+
+  if (station.isFavorites) {
+    return (
+      <SubUnitFavorites
+        isOwner={isOwner}
+        unit={unit}
+        favoriteDevices={favoriteDevices}
+        favoriteAutomates={favoriteAutomates}
+        wrapItemStyle={styles.wrapItemStyle}
+      />
+    );
+  }
+  if (station.camera_devices) {
+    return <CameraDevice station={station} goToPlayBack={goToPlayBack} />;
+  }
+
+  if (station.isOneTap) {
+    return (
+      <SubUnitAutomate
+        isOwner={isOwner}
+        listAutomate={listAutomate}
+        unit={unit}
+        wrapItemStyle={styles.wrapItemStyle}
+      />
+    );
+  }
+  return <ShortDetailSubUnit unit={unit} station={station} isOwner={isOwner} />;
+};
+
+const SubUnitList = ({
+  unit,
+  listAutomate,
+  isOwner,
+  isOneTap,
+  stationId,
+  isAddSubUnit,
+  isEditSubUnit,
+}) => {
+  const t = useTranslations();
+
+  const [listMenuItem, setListMenuItem] = useState([]);
+  const [listStation, setListStation] = useState([]);
+  const [station, setStation] = useState({});
+  const [indexStation, setIndexStation] = useState(0);
+  const onSnapToItem = useCallback(
+    (item, index) => {
+      setStation(unit.stations[index]);
+      setIndexStation(index);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [unit, indexStation]
+  );
+
+  useEffect(() => {
+    isEditSubUnit && setIndexStation(0);
+    isOneTap && setIndexStation(1);
+  }, [isEditSubUnit, isOneTap]);
+
+  useEffect(() => {
+    if (listMenuItem.length && isAddSubUnit) {
+      setIndexStation(listMenuItem.length - 1);
+    }
+  }, [listMenuItem.length, isAddSubUnit]);
+
+  useEffect(() => {
+    if (!stationId) {
+      return;
+    }
+    for (let i = 0; i < listStation.length; i++) {
+      if (listStation[i]?.id === stationId) {
+        setIndexStation(i);
+        break;
+      }
+    }
+  }, [stationId, listStation]);
+
+  useEffect(() => {
+    if (unit.stations) {
+      let listMenu = unit.stations.map((item, index) => ({
+        text: item.name,
+        station: item,
+        id: item.id,
+      }));
+      setListMenuItem(listMenu);
+      setListStation(listMenu.concat([{ text: '' }]));
+    }
+  }, [unit.stations]);
+
+  useEffect(() => {
+    if (!unit?.stations || !unit.stations[indexStation]) {
+      return;
+    }
+    setStation(unit.stations[indexStation]);
+  }, [indexStation, unit.stations]);
+
+  return (
+    <View style={styles.container}>
+      <Summaries unit={unit} />
+      <NavBar
+        accessibilityLabel={AccessibilityLabel.NAVBAR_ON_SNAP_ITEM}
+        listStation={listStation}
+        listMenuItem={listMenuItem}
+        onSnapToItem={onSnapToItem}
+        indexStation={indexStation}
+        idLabelScrollView={AccessibilityLabel.NAV_LIST}
+        idLabelItem={AccessibilityLabel.SUB_UNIT_NAME}
+        idLabelIconBars={AccessibilityLabel.NAVBAR_ICON_BARS}
+      />
+      <SubUnitDetail
+        unit={unit}
+        station={station}
+        listAutomate={listAutomate}
+        isOwner={isOwner}
+      />
+      {!!unit.can_add && unit.stations.length === 0 && (
+        <View style={styles.canAdd}>
+          <Text style={styles.emptyUnit}>{t('text_no_sub_unit_yet')}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
   const { setAction } = useContext(SCContext);
@@ -58,8 +196,8 @@ const UnitDetail = ({ route }) => {
   const {
     unitId,
     unitData,
-    isOneTap,
     routeName,
+    isOneTap,
     stationId,
     isAddSubUnit,
     isEditSubUnit,
@@ -84,11 +222,7 @@ const UnitDetail = ({ route }) => {
   );
 
   const [unit, setUnit] = useState(unitData || { id: unitId });
-  const [listMenuItem, setListMenuItem] = useState([]);
-  const [listStation, setListStation] = useState([]);
   const [listAutomate, setListAutomate] = useState([]);
-  const [station, setStation] = useState({});
-  const [indexStation, setIndexStation] = useState(0);
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
   const [showPreventAccess, setShowPreventAccess, setHidePreventAccess] =
     useBoolean(false);
@@ -98,10 +232,6 @@ const UnitDetail = ({ route }) => {
     usePopover();
 
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
-  const { favoriteDevices, favoriteAutomates } = useFavorites(
-    unit.stations || [],
-    listAutomate
-  );
 
   const prepareData = useCallback(
     (rawUnitData) => {
@@ -200,83 +330,6 @@ const UnitDetail = ({ route }) => {
     }
   }, [fetchDetails, isFocused]);
 
-  useEffect(() => {
-    if (unit.stations) {
-      let listMenu = unit.stations.map((item, index) => ({
-        text: item.name,
-        station: item,
-        index: index,
-      }));
-      setStation(unit.stations[indexStation]);
-      setListMenuItem(listMenu);
-      setListStation(listMenu.concat([{ text: '' }]));
-    }
-  }, [unit, indexStation]);
-
-  useEffect(() => {
-    isEditSubUnit && setIndexStation(0);
-    isOneTap && setIndexStation(1);
-  }, [isEditSubUnit, isOneTap]);
-
-  useEffect(() => {
-    if (listMenuItem.length && isAddSubUnit) {
-      setIndexStation(listMenuItem.length - 1);
-    }
-  }, [listMenuItem.length, isAddSubUnit]);
-
-  useEffect(() => {
-    if (!isEditSubUnit && listMenuItem.length && stationId) {
-      const getStationCurrent = listMenuItem.filter(
-        (item) => item?.station.id === stationId
-      );
-      setIndexStation(getStationCurrent[0]?.index);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [listMenuItem.length, stationId]);
-
-  const onSnapToItem = useCallback(
-    (item, index) => {
-      setStation(unit.stations[index]);
-      setIndexStation(index);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [unit, indexStation]
-  );
-
-  const goToPlayBack = (item, thumbnail) => () => {
-    navigate(Routes.PlaybackCamera, { item, thumbnail });
-  };
-
-  const renderDetailSubUnit = () => {
-    if (station?.isFavorites) {
-      return (
-        <SubUnitFavorites
-          isOwner={isOwner}
-          unit={unit}
-          favoriteDevices={favoriteDevices}
-          favoriteAutomates={favoriteAutomates}
-          wrapItemStyle={styles.wrapItemStyle}
-        />
-      );
-    }
-    if (station?.camera_devices) {
-      return <CameraDevice station={station} goToPlayBack={goToPlayBack} />;
-    } else if (station?.isOneTap) {
-      return (
-        <SubUnitAutomate
-          isOwner={isOwner}
-          listAutomate={listAutomate}
-          unit={unit}
-          wrapItemStyle={styles.wrapItemStyle}
-        />
-      );
-    } else if (station) {
-      return (
-        <ShortDetailSubUnit unit={unit} station={station} isOwner={isOwner} />
-      );
-    }
-  };
-
   const onBack = useCallback(() => {
     navigate(isLavidaSource ? Routes.SmartHomeDashboard : routeName);
   }, [navigate, routeName, isLavidaSource]);
@@ -285,21 +338,6 @@ 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);
@@ -331,27 +369,25 @@ const UnitDetail = ({ route }) => {
       accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_PARALLAX_SCROLLVIEW}
       idButtonMore={AccessibilityLabel.UNIT_DETAIL_PARALLAX_BUTTON_MORE}
     >
-      {renderCamera}
-
-      <View style={styles.container}>
-        <Summaries unit={unit} />
-        <NavBar
-          accessibilityLabel={AccessibilityLabel.NAVBAR_ON_SNAP_ITEM}
-          listStation={listStation}
-          listMenuItem={listMenuItem}
-          onSnapToItem={onSnapToItem}
-          indexStation={indexStation}
-          idLabelScrollView={AccessibilityLabel.NAV_LIST}
-          idLabelItem={AccessibilityLabel.SUB_UNIT_NAME}
-          idLabelIconBars={AccessibilityLabel.NAVBAR_ICON_BARS}
+      {isFirstOpenCamera && isIOS && (
+        <MediaPlayerDetail
+          uri={Constants.URL_STREAM_CAMERA_DEMO}
+          isPaused={false}
+          width={1}
+          height={1}
+          style={styles.fakeCamera}
         />
-        {renderDetailSubUnit()}
-        {!!unit.can_add && unit.stations.length === 0 && (
-          <View style={styles.canAdd}>
-            <Text style={styles.emptyUnit}>{t('text_no_sub_unit_yet')}</Text>
-          </View>
-        )}
-      </View>
+      )}
+
+      <SubUnitList
+        unit={unit}
+        listAutomate={listAutomate}
+        isOwner={isOwner}
+        isOneTap={isOneTap}
+        stationId={stationId}
+        isAddSubUnit={isAddSubUnit}
+        isEditSubUnit={isEditSubUnit}
+      />
       <AddMenu
         unit={unit}
         afterItemClick={hidePopover}

package/src/screens/Unit/ManageUnit.js

@@ -23,7 +23,7 @@ const ManageUnit = ({ route }) => {
   const { unit } = route?.params || {};
   const navigation = useNavigation();
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
-  const [showEdit, setshowEdit, setHideEdit] = useBoolean();
+  const [showEdit, setShowEdit, setHideEdit] = useBoolean();
   const [unitData, setUnitData] = useState({
     name: unit.name,
     address: unit.address,
@@ -161,7 +161,7 @@ const ManageUnit = ({ route }) => {
         title={t('manage_unit')}
         styleScrollView={styles.scrollView}
       >
-        <View style={styles.wraper}>
+        <View style={styles.wrapper}>
           {isOwner && (
             <>
               <ButtonWrapper
@@ -172,7 +172,7 @@ const ManageUnit = ({ route }) => {
                 accessibilityLabel={AccessibilityLabel.MANAGE_UNIT_CHANGE_PHOTO}
               />
               <ButtonWrapper
-                onPress={setshowEdit}
+                onPress={setShowEdit}
                 accessibilityLabel={AccessibilityLabel.MANAGE_UNIT_CHANGE_NAME}
                 title={t('unit_name')}
                 value={unitData.name}

package/src/screens/Unit/ManageUnitStyles.js

@@ -6,7 +6,7 @@ export default StyleSheet.create({
   scrollView: {
     backgroundColor: Colors.White,
   },
-  wraper: {
+  wrapper: {
     flex: 1,
     marginHorizontal: 16,
   },

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

@@ -86,13 +86,15 @@ describe('Test UnitDetail', () => {
     jest.clearAllTimers();
     useIsFocused.mockImplementation(() => true);
     AsyncStorage.clear();
-    mock.resetHistory();
+    mock.reset();
+    mockedNavigate.mockReset();
   });
 
   it('render subunit camera devices', async () => {
     const unitData = {
       stations: [
         {
+          id: 'camera',
           camera_devices: [
             {
               configuration: {
@@ -121,7 +123,9 @@ describe('Test UnitDetail', () => {
     const instance = tree.root;
     const CameraDeviceViews = instance.findAllByType(CameraDevice);
     expect(CameraDeviceViews).toHaveLength(1);
-    await CameraDeviceViews[0].props.goToPlayBack()();
+    await act(async () => {
+      CameraDeviceViews[0].props.goToPlayBack();
+    });
     expect(mockedNavigate).toBeCalledWith(Routes.PlaybackCamera, {
       item: undefined,
       thumbnail: undefined,
@@ -166,8 +170,8 @@ describe('Test UnitDetail', () => {
       refreshControl.props.onRefresh();
     });
     const instance = tree.root;
-    const PreventAccesss = instance.findByType(PreventAccess);
-    expect(PreventAccesss).toBeDefined();
+    const preventAccesses = instance.findByType(PreventAccess);
+    expect(preventAccesses).toBeDefined();
   });
 
   it('display unit detail when cache not change', async () => {
@@ -212,8 +216,8 @@ describe('Test UnitDetail', () => {
       tree = await renderer.create(wrapComponent(route, account));
     });
     const instance = tree.root;
-    const PreventAccesss = instance.findByType(PreventAccess);
-    expect(PreventAccesss).toBeDefined();
+    const preventAccesses = instance.findByType(PreventAccess);
+    expect(preventAccesses).toBeDefined();
   });
 
   it('fetch unit detail error 404', async () => {
@@ -235,8 +239,8 @@ describe('Test UnitDetail', () => {
       tree = await renderer.create(wrapComponent(route, account));
     });
     const instance = tree.root;
-    const PreventAccesss = instance.findByType(PreventAccess);
-    expect(PreventAccesss).toBeDefined();
+    const preventAccesses = instance.findByType(PreventAccess);
+    expect(preventAccesses).toBeDefined();
   });
 
   it('fetch unit summary has data', async () => {
@@ -245,8 +249,8 @@ describe('Test UnitDetail', () => {
       tree = await renderer.create(wrapComponent(route, account));
     });
     const instance = tree.root;
-    const PreventAccesss = instance.findByType(PreventAccess);
-    expect(PreventAccesss).toBeDefined();
+    const preventAccesses = instance.findByType(PreventAccess);
+    expect(preventAccesses).toBeDefined();
   });
 
   it('not fetch unit summary if not focus', async () => {
@@ -256,8 +260,8 @@ describe('Test UnitDetail', () => {
       tree = await renderer.create(wrapComponent(route, account));
     });
     const instance = tree.root;
-    const PreventAccesss = instance.findByType(PreventAccess);
-    expect(PreventAccesss).toBeDefined();
+    const preventAccesses = instance.findByType(PreventAccess);
+    expect(preventAccesses).toBeDefined();
   });
 
   it('fetch unit detail when refresh', async () => {
@@ -399,6 +403,7 @@ describe('Test UnitDetail', () => {
     const unitData = {
       stations: [
         {
+          id: 'camera',
           camera_devices: [
             {
               configuration: {
@@ -418,24 +423,30 @@ describe('Test UnitDetail', () => {
         },
       ],
     };
+    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, unitData);
 
     await act(async () => {
       tree = await renderer.create(
-        wrapComponent({ params: { ...route.params, unitData } }, account)
+        wrapComponent(
+          { params: { ...route.params, stationId: 'camera' } },
+          account
+        )
       );
     });
     const instance = tree.root;
+
+    await act(async () => {});
     const CameraDeviceViews = instance.findAllByType(CameraDevice);
-    expect(CameraDeviceViews).toHaveLength(0);
+    expect(CameraDeviceViews).toHaveLength(1);
     const goDetailButton = tree.root.findAll(
       (el) =>
         el.props.accessibilityLabel === AccessibilityLabel.SUB_UNIT_GO_DETAIL &&
         el.type === TouchableOpacity
     );
 
-    expect(goDetailButton).toHaveLength(1);
+    expect(goDetailButton).toHaveLength(2);
     await act(async () => {
-      await goDetailButton[0].props.onPress();
+      await goDetailButton[1].props.onPress();
     });
     expect(mockedNavigate).toHaveBeenCalled();
   });
@@ -470,6 +481,11 @@ describe('Test UnitDetail', () => {
           isFavorites: true,
           name: 'Favorites',
         },
+        {
+          isOneTap: true,
+          name: 'Smart',
+          id: 'Smart',
+        },
       ],
     };
     route.params.isAddSubUnit = true;
@@ -507,10 +523,12 @@ describe('Test UnitDetail', () => {
     });
     jest.runAllTimers();
     const instance = tree.root;
-    const PreventAccesss = instance.findByType(PreventAccess);
-    expect(PreventAccesss).toBeDefined();
+    const preventAccess = instance.findByType(PreventAccess);
+    expect(preventAccess).toBeDefined();
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    await TouchableOpacities[0].props.onPress();
+    await act(async () => {
+      await TouchableOpacities[0].props.onPress();
+    });
     expect(mockedNavigate).toBeCalled();
   });
 
@@ -522,7 +540,9 @@ describe('Test UnitDetail', () => {
     });
     const instance = tree.root;
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    await TouchableOpacities[0].props.onPress();
+    await act(async () => {
+      await TouchableOpacities[0].props.onPress();
+    });
     expect(mockedNavigate).toBeCalled();
   });
 });

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

@@ -62,12 +62,16 @@ describe('Test Manage Unit', () => {
     mockNavigate.mockClear();
   });
 
-  const getElement = (instance) => {
+  const getElement = async (instance) => {
     const changeName = instance.findAll(
       (item) =>
         item.props.accessibilityLabel ===
         AccessibilityLabel.MANAGE_UNIT_CHANGE_NAME
     );
+
+    await act(async () => {
+      await changeName[0].props.onPress();
+    });
     const changeLocation = instance.findAll(
       (item) =>
         item.props.accessibilityLabel ===
@@ -93,11 +97,7 @@ describe('Test Manage Unit', () => {
         item.props.accessibilityLabel ===
         AccessibilityLabel.MANAGE_UNIT_MODAL_RENAME_INPUT_NAME
     );
-    const showRemove = instance.findAll(
-      (item) =>
-        item.props.accessibilityLabel ===
-        AccessibilityLabel.MANAGE_UNIT_SHOW_REMOVE
-    );
+
     return {
       changeName,
       changeLocation,
@@ -105,7 +105,6 @@ describe('Test Manage Unit', () => {
       imagePicker,
       modalRename,
       inputRename,
-      showRemove,
     };
   };
 
@@ -121,7 +120,7 @@ describe('Test Manage Unit', () => {
       changePhoto,
       imagePicker,
       modalRename,
-    } = getElement(instance);
+    } = await getElement(instance);
 
     expect(changeName[0]).toBeDefined();
     expect(changeLocation[0]).toBeDefined();
@@ -135,7 +134,7 @@ describe('Test Manage Unit', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const { changeName, inputRename } = getElement(instance);
+    const { changeName, inputRename } = await getElement(instance);
     await act(async () => {
       await changeName[0].props.onPress();
     });
@@ -160,7 +159,12 @@ describe('Test Manage Unit', () => {
     });
 
     const instance = tree.root;
-    const { showRemove } = getElement(instance);
+
+    const showRemove = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel ===
+        AccessibilityLabel.MANAGE_UNIT_SHOW_REMOVE
+    );
 
     await act(async () => {
       await showRemove[0].props.onPress();
@@ -178,23 +182,22 @@ describe('Test Manage Unit', () => {
     expect(mockedDispatch).not.toBeCalled();
   });
 
-  it('rename Unit sucess', async () => {
+  it('rename Unit success', async () => {
     const spyToast = jest.spyOn(ToastBottomHelper, 'success');
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
 
     const instance = tree.root;
-    const { changeName, inputRename } = getElement(instance);
 
-    await act(async () => {
-      await changeName[0].props.onPress();
-    });
+    const { inputRename } = await getElement(instance);
 
     const alertActions = instance.findAllByType(AlertAction);
     mock.onPatch(API.UNIT.MANAGE_UNIT(1)).reply(200, {});
     await act(async () => {
       await inputRename[0].props.onChange('input station');
+    });
+    await act(async () => {
       await alertActions[0].props.rightButtonClick();
     });
 

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

@@ -15,6 +15,13 @@ import {
 } from '../../../../configs/Constants';
 import { Colors } from '../../../../configs';
 
+const iconByType = {
+  [AUTOMATE_TYPE.ONE_TAP]: OneTap,
+  [AUTOMATE_TYPE.VALUE_CHANGE]: ValueChange,
+  [AUTOMATE_TYPE.EVENT]: Event,
+  [AUTOMATE_TYPE.SCHEDULE]: Schedule,
+};
+
 const AutomateScript = ({ automate, onPress, isSelected }) => {
   const t = useTranslations();
   const { script, type, author = '' } = automate;
@@ -27,15 +34,9 @@ const AutomateScript = ({ automate, onPress, isSelected }) => {
     const iconKit = script?.icon_kit;
     if (iconKit) {
       return <FImage source={{ uri: iconKit }} style={styles.iconSensor} />;
-    } else if (type === AUTOMATE_TYPE.ONE_TAP) {
-      return <OneTap />;
-    } else if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
-      return <ValueChange />;
-    } else if (type === AUTOMATE_TYPE.EVENT) {
-      return <Event />;
-    } else {
-      return <Schedule />;
     }
+    const Icon = iconByType[type] || Schedule;
+    return <Icon />;
   };
 
   return (

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

@@ -16,20 +16,7 @@ import { ModalCustom } from '../../../../commons/Modal';
 
 const { width: widthScreen } = Dimensions.get('window');
 
-const HeaderComponent = ({
-  hasBack,
-  leftComponent,
-  centerComponent,
-  rightComponent,
-  navigation,
-  title,
-  wrapStyle,
-  goBack,
-  dark,
-  hideRight,
-  fixedHeight, // when height of header is fixed
-  style,
-}) => {
+const HeaderComponent = ({ title, goBack, dark, hideRight, style }) => {
   const t = useTranslations();
   const popoverRef = useRef();
   const [menu, setMenu] = useState(false);