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

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);
@@ -358,4 +355,43 @@ describe('Test ScriptDetail', () => {
       'Light Value lower than 3'
     );
   });
+
+  test('Test render textCondition schedule repeat everyday', async () => {
+    route.params = {
+      ...route.params,
+      type: AUTOMATE_TYPE.SCHEDULE,
+      automate: {
+        repeat: 'every_day',
+        date_repeat: '2022-01-02',
+        time_repeat: '19:00:00',
+      },
+    };
+    await act(() => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const itemAutomate = instance.findByType(ItemAutomate);
+    expect(itemAutomate.props.textCondition).toEqual('Every day at 19:00');
+  });
+
+  test('Test render textCondition schedule repeat weekday', async () => {
+    route.params = {
+      ...route.params,
+      type: AUTOMATE_TYPE.SCHEDULE,
+      automate: {
+        repeat: 'every_week',
+        date_repeat: '2022-01-02',
+        time_repeat: '19:00:00',
+        weekday_repeat: ['1', '2', '4', '6'],
+      },
+    };
+    await act(() => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const itemAutomate = instance.findByType(ItemAutomate);
+    expect(itemAutomate.props.textCondition).toEqual(
+      'Mon, Tue, Thu, Sat at 19:00'
+    );
+  });
 });

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/Smart/__test__/index.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import Smart from '..';
+
+describe('Test Template screen', () => {
+  let tree;
+  it('Test render', async () => {
+    await act(async () => {
+      tree = await create(<Smart />);
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(1);
+  });
+});

package/src/screens/Smart/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { View } from 'react-native';
+
+const Smart = () => {
+  return <View />;
+};
+
+export default Smart;

package/src/screens/SubUnit/AddSubUnit.js

@@ -42,7 +42,6 @@ const AddSubUnit = ({ route }) => {
     setRoomName('');
     setWallpaper('');
     setImageUrl('');
-    awaitCreate.current = false;
   };
 
   const goDone = useCallback(async () => {
@@ -186,6 +185,7 @@ const AddSubUnit = ({ route }) => {
                 wrapStyle={styles.textInput}
                 selectionColor={Colors.Primary}
                 value={roomName}
+                maxLength={50}
               />
 
               {isAddUnit && (

package/src/screens/SubUnit/EditSubUnit.js

@@ -64,7 +64,10 @@ const EditSubUnit = ({ route }) => {
         navigation.pop(2);
         break;
       default:
-        navigation.pop(3);
+        navigation.navigate(Routes.UnitDetail, {
+          isEditSubUnit: true,
+          isAddSubUnit: false,
+        });
     }
   }, [navigation]);
 

package/src/screens/Template/Styles/indexStyles.js

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+    padding: 16,
+  },
+  wrapEmpty: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -100,
+  },
+  textEmpty1: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  textEmpty2: {
+    fontSize: 14,
+    fontWeight: '400',
+    color: Colors.Neutral.Neutral5,
+    marginTop: 7,
+  },
+  contentContainerStyle: {
+    flex: 1,
+  },
+  item: {
+    width: (Constants.width - 42) / 2,
+    height: 128,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: Colors.Neutral.Neutral3,
+    marginBottom: 16,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  oddItem: {
+    marginRight: 10,
+  },
+  nameItem: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  countItem: {
+    fontSize: 12,
+    fontWeight: 400,
+    color: Colors.Neutral.Neutral5,
+  },
+});

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import Template from '..';
+
+describe('Test Template screen', () => {
+  let tree;
+  it('Test render', async () => {
+    await act(async () => {
+      tree = await create(<Template />);
+    });
+    const instance = tree.root;
+    const FlatLists = instance.findAllByType(FlatList);
+    expect(FlatLists).toHaveLength(1);
+  });
+});

package/src/screens/Template/index.js

@@ -0,0 +1,84 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  View,
+  TouchableWithoutFeedback,
+  Keyboard,
+  FlatList,
+} from 'react-native';
+import { Label } from '../../commons/DevMode';
+import Search from '../../commons/DevMode/Search';
+import Text from '../../commons/Text';
+import t from '../../hooks/Common/useTranslations';
+import { convertToSlug } from '../../utils/Functions/Search';
+import styles from './Styles/indexStyles';
+
+const arrTemplates = [
+  {
+    id: 1,
+    name: 'Template name 1',
+    count: 2,
+  },
+  {
+    id: 2,
+    name: 'Template name 2',
+  },
+  {
+    id: 3,
+    name: 'Template name 3',
+  },
+];
+
+const Template = () => {
+  const [data, setData] = useState(arrTemplates);
+
+  const onSearch = useCallback((value) => {
+    if (value === '') {
+      setData(arrTemplates);
+      return;
+    }
+    const dataTemp = arrTemplates.filter((item) =>
+      convertToSlug(item?.name).includes(convertToSlug(value))
+    );
+    setData(dataTemp);
+  }, []);
+
+  const renderListEmptyComponent = useMemo(() => {
+    return (
+      <View style={styles.wrapEmpty}>
+        <Text style={styles.textEmpty1}>{t('no_template_yet')}</Text>
+        <Text style={styles.textEmpty2}>{t('add_your_template')}</Text>
+      </View>
+    );
+  }, []);
+
+  const renderItem = ({ item, index }) => {
+    return (
+      <View style={[styles.item, index % 2 === 0 && styles.oddItem]}>
+        <Text style={styles.nameItem}>{item?.name}</Text>
+        <Text style={styles.countItem}>{`${
+          item?.count > 0 ? item?.count : t('no')
+        } ${t('gateways').toLowerCase()}`}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      <View style={styles.wrap}>
+        <Label name={t('template')} />
+        <Search onSearch={onSearch} />
+        <FlatList
+          contentContainerStyle={styles.contentContainerStyle}
+          keyExtractor={(item) => item?.id}
+          data={data}
+          renderItem={renderItem}
+          extraData={data}
+          ListEmptyComponent={renderListEmptyComponent}
+          numColumns={2}
+        />
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default Template;

package/src/screens/Unit/Detail.js

@@ -33,7 +33,6 @@ import WrapParallaxScrollView from '../../commons/WrapParallaxScrollView';
 import { SCContext, useSCContextSelector } from '../../context';
 import { Action } from '../../context/actionType';
 import CameraDevice from '../../commons/CameraDevice';
-import { ModalFullVideo } from '../../commons/Modal';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
 import SubUnitAutomate from '../../commons/SubUnit/OneTap';
@@ -63,6 +62,7 @@ const UnitDetail = ({ route }) => {
     routeName,
     stationId,
     isAddSubUnit,
+    isEditSubUnit,
     isSuccessfullyConnected,
   } = route.params;
 
@@ -92,8 +92,6 @@ const UnitDetail = ({ route }) => {
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
   const [showPreventAccess, setShowPreventAccess, setHidePreventAccess] =
     useBoolean(false);
-  const [isFullScreen, setIsFullScreen] = useState(false);
-  const [dataFullScreen, setDataFullScreen] = useState();
   const appState = useRef(AppState.currentState);
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
@@ -105,15 +103,6 @@ const UnitDetail = ({ route }) => {
     listAutomate
   );
 
-  const handleFullScreen = (data) => {
-    setIsFullScreen(!isFullScreen);
-    setDataFullScreen(data);
-  };
-
-  const onClose = useCallback(() => {
-    setIsFullScreen(false);
-  }, []);
-
   const prepareData = useCallback(
     (rawUnitData) => {
       rawUnitData.stations.unshift({
@@ -217,8 +206,9 @@ const UnitDetail = ({ route }) => {
   }, [unit, indexStation]);
 
   useEffect(() => {
+    isEditSubUnit && setIndexStation(0);
     isOneTap && setIndexStation(1);
-  }, [isOneTap]);
+  }, [isEditSubUnit, isOneTap]);
 
   useEffect(() => {
     if (listMenuItem.length && isAddSubUnit) {
@@ -227,7 +217,7 @@ const UnitDetail = ({ route }) => {
   }, [listMenuItem.length, isAddSubUnit]);
 
   useEffect(() => {
-    if (listMenuItem.length && stationId) {
+    if (!isEditSubUnit && listMenuItem.length && stationId) {
       const getStationCurrent = listMenuItem.filter(
         (item) => item?.station.id === stationId
       );
@@ -262,13 +252,7 @@ const UnitDetail = ({ route }) => {
       );
     }
     if (station?.camera_devices) {
-      return (
-        <CameraDevice
-          station={station}
-          handleFullScreen={handleFullScreen}
-          goToPlayBack={goToPlayBack}
-        />
-      );
+      return <CameraDevice station={station} goToPlayBack={goToPlayBack} />;
     } else if (station?.isOneTap) {
       return (
         <SubUnitAutomate
@@ -333,6 +317,8 @@ const UnitDetail = ({ route }) => {
       onMore={showPopoverWithRef}
       hideRightPlus={!isOwner}
       onBack={(isSuccessfullyConnected && Dashboard) || (routeName && onBack)}
+      accessibilityLabel={TESTID.UNIT_DETAIL_PARALLAX_SCROLLVIEW}
+      idButtonMore={TESTID.UNIT_DETAIL_PARALLAX_BUTTON_MORE}
     >
       {renderCamera}
 
@@ -344,6 +330,7 @@ const UnitDetail = ({ route }) => {
           listMenuItem={listMenuItem}
           onSnapToItem={onSnapToItem}
           indexStation={indexStation}
+          idLabelScrollView={TESTID.NAV_LIST}
         />
         {renderDetailSubUnit()}
         {!!unit.can_add && unit.stations.length === 0 && (
@@ -364,12 +351,8 @@ const UnitDetail = ({ route }) => {
         isOwner={isOwner}
         childRef={childRef}
         showingPopover={showingPopover}
-      />
-      <ModalFullVideo
-        isVisible={isFullScreen}
-        data={dataFullScreen}
-        modalStyles={styles.modal}
-        onClose={onClose}
+        idLabelPopover={TESTID.UNIT_DETAIL_POPUP_MORE}
+        idLabelItem={TESTID.UNIT_DETAIL_POPUP_MORE_ITEM}
       />
       <PreventAccess
         visible={showPreventAccess}

package/src/screens/Unit/MoreMenu.js

@@ -5,7 +5,16 @@ import { useNavigation } from '@react-navigation/native';
 import { MenuActionMore } from '../../commons';
 
 const MoreMenu = memo(
-  ({ unit, isOwner, hidePopover, childRef, showingPopover }) => {
+  ({
+    unit,
+    isOwner,
+    hidePopover,
+    childRef,
+    showingPopover,
+    idLabelPopover,
+    idLabelScrollView,
+    idLabelItem,
+  }) => {
     const t = useTranslations();
     const navigation = useNavigation();
 
@@ -19,16 +28,19 @@ const MoreMenu = memo(
 
     const listMenuItem = useMemo(() => {
       const RouteManageUnit = {
+        id: 1,
         route: Routes.ManageUnit,
         text: t('manage_unit'),
         data: { unitId: unit.id, unit },
       };
       const RouteUnitMemberList = {
+        id: 2,
         route: Routes.UnitMemberList,
         text: t('members'),
         data: { unitId: unit.id, unit },
       };
       const ListSmartAccount = {
+        id: 3,
         route: Routes.ListSmartAccount,
         text: t('smart_account'),
         data: { unitId: unit.id, unit },
@@ -45,6 +57,9 @@ const MoreMenu = memo(
         listMenuItem={listMenuItem}
         childRef={childRef}
         onItemClick={onItemClick}
+        idLabelPopover={idLabelPopover}
+        idLabelScrollView={idLabelScrollView}
+        idLabelItem={idLabelItem}
       />
     );
   }

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/Station/__test__/index.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import Station from '..';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+const mockOnSnapToItem = jest.fn();
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Station
+      listStation={[{ id: 1, station: { id: 1 }, text: 'station1' }]}
+      onSnapToItem={mockOnSnapToItem}
+      indexStation={1}
+    />
+  </SCProvider>
+);
+
+describe('Test Station', async () => {
+  let tree;
+  let route = {
+    unitId: 1,
+    unitData: {
+      id: 1,
+    },
+    isOneTap: false,
+    routeName: 'Test',
+    stationId: 1,
+    isAddSubUnit: false,
+    isSuccessfullyConnected: false,
+  };
+  it('Test render', async () => {
+    await act(async () => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const FlatLists = instance.findAllByType(FlatList);
+    expect(FlatLists).toHaveLength(1);
+  });
+});

package/src/screens/Unit/Station/index.js

@@ -73,7 +73,6 @@ const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
         renderItem={renderItem}
         showsHorizontalScrollIndicator={false}
         scrollIndicatorInsets={{ right: 1 }}
-        testID={TESTID.NAV_LIST}
       />
     </View>
   );

package/src/screens/Unit/Summaries.js

@@ -6,6 +6,8 @@ import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { axiosGet } from '../../utils/Apis/axios';
 import { API } from '../../configs';
 import { useReceiveNotifications } from '../../hooks';
+import { TESTID } from '../../configs/Constants';
+import { useSCContextSelector } from '../../context';
 
 const Summaries = memo(({ unit }) => {
   const [unitSummaries, setUnitSummaries] = useState([]);
@@ -14,6 +16,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 +38,9 @@ const Summaries = memo(({ unit }) => {
 
   const goToSummary = useCallback(
     (summary) => {
+      if (popoverAnimating) {
+        return;
+      }
       navigation.navigate(Routes.UnitSummary, {
         summaryId: summary.id,
         unitId: unit.id,
@@ -40,7 +48,7 @@ const Summaries = memo(({ unit }) => {
         unitData: unit,
       });
     },
-    [navigation, unit]
+    [navigation, popoverAnimating, unit]
   );
 
   const continuousFetchSummary = useCallback(async () => {
@@ -101,7 +109,11 @@ const Summaries = memo(({ unit }) => {
   return (
     <>
       {!unitSummaries || !unitSummaries.length ? null : (
-        <ScrollView horizontal={true} scrollIndicatorInsets={{ right: 1 }}>
+        <ScrollView
+          horizontal={true}
+          scrollIndicatorInsets={{ right: 1 }}
+          accessibilityLabel={TESTID.UNIT_DETAIL_UNIT_SUMMARY_VIEW}
+        >
           {unitSummaries.map((item, index) => (
             <SummaryItem key={index} item={item} goToSummary={goToSummary} />
           ))}

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

@@ -12,7 +12,6 @@ import { TESTID } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import CameraDevice from '../../../commons/CameraDevice';
-import { ModalFullVideo } from '../../../commons/Modal';
 import SubUnitFavorites from '../../../commons/SubUnit/Favorites';
 import api from '../../../utils/Apis/axios';
 import PreventAccess from '../../../commons/PreventAccess';
@@ -352,11 +351,7 @@ describe('Test UnitDetail', () => {
         el.props.testID === TESTID.SUB_UNIT_FULL_CAMERA &&
         el.type === TouchableOpacity
     );
-
     expect(fullCamera).toHaveLength(0);
-    const fullView = instance.findAllByType(ModalFullVideo);
-    expect(fullView).toHaveLength(1);
-    expect(fullView[0].props.isVisible).toEqual(false);
   });
 
   test('onPress subunit camera devices', async () => {
@@ -438,6 +433,7 @@ describe('Test UnitDetail', () => {
     };
     route.params.isAddSubUnit = true;
     route.params.unitData = unitData;
+    route.params.isSuccessfullyConnected = false;
     await act(async () => {
       tree = await renderer.create(wrapComponent(route, account));
     });

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';