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

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,24 +103,17 @@ const UnitDetail = ({ route }) => {
     listAutomate
   );
 
-  const handleFullScreen = (data) => {
-    setIsFullScreen(!isFullScreen);
-    setDataFullScreen(data);
-  };
-
-  const onClose = useCallback(() => {
-    setIsFullScreen(false);
-  }, []);
-
   const prepareData = useCallback(
     (rawUnitData) => {
       rawUnitData.stations.unshift({
         isOneTap: true,
         name: t('smart'),
+        id: 'smart',
       });
       rawUnitData.stations.unshift({
         isFavorites: true,
         name: t('favorites'),
+        id: 'favorites',
       });
     },
     [t]
@@ -217,8 +208,9 @@ const UnitDetail = ({ route }) => {
   }, [unit, indexStation]);
 
   useEffect(() => {
+    isEditSubUnit && setIndexStation(0);
     isOneTap && setIndexStation(1);
-  }, [isOneTap]);
+  }, [isEditSubUnit, isOneTap]);
 
   useEffect(() => {
     if (listMenuItem.length && isAddSubUnit) {
@@ -227,7 +219,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 +254,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
@@ -318,7 +304,8 @@ const UnitDetail = ({ route }) => {
         clearTimeout(to);
       }, 3000);
     }
-  }, [isFirstOpenCamera, isIOS, setAction]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFirstOpenCamera, isIOS]);
 
   return (
     <WrapParallaxScrollView
@@ -333,6 +320,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 +333,9 @@ const UnitDetail = ({ route }) => {
           listMenuItem={listMenuItem}
           onSnapToItem={onSnapToItem}
           indexStation={indexStation}
+          idLabelScrollView={TESTID.NAV_LIST}
+          idLabelItem={TESTID.SUB_UNIT_NAME}
+          idLabelIconBars={TESTID.NAVBAR_ICON_BARS}
         />
         {renderDetailSubUnit()}
         {!!unit.can_add && unit.stations.length === 0 && (
@@ -364,12 +356,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/SelectAddToFavorites.js

@@ -21,6 +21,7 @@ import { SCContext } from '../../context';
 import { Action } from '../../context/actionType';
 import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 import { API, Colors } from '../../configs';
+import { TESTID } from '../../configs/Constants';
 import styles from './SelectAddToFavoritesStyles';
 
 const SelectAddToFavorites = memo(({ route }) => {
@@ -136,7 +137,12 @@ const SelectAddToFavorites = memo(({ route }) => {
 
   const rightComponent = useMemo(
     () => (
-      <TouchableOpacity style={styles.buttonClose} onPress={goBack}>
+      <TouchableOpacity
+        testID={TESTID.ICON_BACK}
+        accessibilityLabel={TESTID.ICON_BACK}
+        style={styles.buttonClose}
+        onPress={goBack}
+      >
         <Icon name={'close'} size={24} color={Colors.Black} />
       </TouchableOpacity>
     ),
@@ -151,6 +157,8 @@ const SelectAddToFavorites = memo(({ route }) => {
         style={styles.wrap}
         contentContainerStyle={styles.contentContainerStyle}
         scrollIndicatorInsets={{ right: 1 }}
+        testID={TESTID.LIST_FAVORITES}
+        idLabelScrollView={TESTID.LIST_FAVORITES}
       >
         <Text bold type="H2" style={styles.title}>
           {t('select_device')}
@@ -162,6 +170,8 @@ const SelectAddToFavorites = memo(({ route }) => {
             listMenuItem={listMenuItem}
             onSnapToItem={onSnapToItem}
             indexStation={indexStation}
+            idLabelItem={TESTID.SUB_UNIT_FAVORITES}
+            idLabelIconBars={TESTID.NAVBAR_ICON_BARS_ADD_FAVORITES}
             style={styles.navbar}
           />
         )}

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,7 @@ 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 }) => {
@@ -108,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/AutomateScript/index.js

@@ -9,7 +9,7 @@ import ValueChange from '../../../../../assets/images/ValueChange.svg';
 import Schedule from '../../../../../assets/images/Schedule.svg';
 import Event from '../../../../../assets/images/Event.svg';
 import styles from './styles';
-import { AUTOMATE_TYPE } from '../../../../configs/Constants';
+import { AUTOMATE_TYPE, TESTID } from '../../../../configs/Constants';
 import { Colors } from '../../../../configs';
 
 const AutomateScript = ({ automate, onPress, isSelected }) => {
@@ -36,7 +36,10 @@ const AutomateScript = ({ automate, onPress, isSelected }) => {
   };
 
   return (
-    <TouchableWithoutFeedback onPress={_onPress}>
+    <TouchableWithoutFeedback
+      onPress={_onPress}
+      accessibilityLabel={`${TESTID.TOUCHABLE_ACTION_ADD_ITEM_AUTOMATE_FAVORITE}-${automate.id}`}
+    >
       <View style={[styles.container, isSelected && styles.active]}>
         <View style={styles.boxIcon}>{displayIcon()}</View>
         <View>

package/src/utils/Converter/__test__/timer.test.js

@@ -0,0 +1,99 @@
+import { getDateData, getTitleFromTime, timeDifference } from '../time';
+
+describe('Test timer', () => {
+  let result;
+  it('Test timeDifference when elapsed < msPerMinute and symbol=false', async () => {
+    result = await timeDifference(
+      new Date('2022-08-01T03:24:01'),
+      new Date('2022-08-01T03:24:00')
+    );
+    expect(result).toBe('1 seconds ago');
+  });
+
+  it('Test timeDifference when elapsed < msPerMinute and symbol=true', async () => {
+    result = await timeDifference(
+      new Date('2022-08-01T03:24:01'),
+      new Date('2022-08-01T03:24:00'),
+      true
+    );
+    expect(result).toBe('1 secs ago');
+  });
+
+  it('Test timeDifference when elapsed < msPerHour and symbol=false', async () => {
+    result = await timeDifference(
+      new Date('2022-08-01T03:24:01'),
+      new Date('2022-08-01T03:00:00')
+    );
+    expect(result).toBe('24 minutes ago');
+  });
+
+  it('Test timeDifference when elapsed < msPerHour and symbol=true', async () => {
+    result = await timeDifference(
+      new Date('2022-08-01T03:24:01'),
+      new Date('2022-08-01T03:00:00'),
+      true
+    );
+    expect(result).toBe('24 mins ago');
+  });
+
+  it('Test timeDifference when elapsed < msPerDay and symbol=false', async () => {
+    result = await timeDifference(
+      new Date('2022-08-01T03:24:01'),
+      new Date('2022-08-01T02:00:00')
+    );
+    expect(result).toBe('1 hours ago');
+  });
+
+  it('Test timeDifference when elapsed < msPerMonthe', async () => {
+    result = await timeDifference(
+      new Date('2022-08-01T03:24:01'),
+      new Date('2022-07-31T02:00:00')
+    );
+    expect(result).toBe('1 days ago');
+  });
+
+  it('Test timeDifference when elapsed < msPerYear', async () => {
+    result = await timeDifference(
+      new Date('2022-08-01T03:24:01'),
+      new Date('2022-05-31T02:00:00')
+    );
+    expect(result).toBe('2 months ago');
+  });
+
+  it('Test timeDifference when elapsed > msPerYear', async () => {
+    result = await timeDifference(
+      new Date('2022-08-01T03:24:01'),
+      new Date('2021-05-31T02:00:00')
+    );
+    expect(result).toBe('1 years ago');
+  });
+
+  it('Test getTitleFromTime when time = current', async () => {
+    result = await getTitleFromTime(new Date(), new Date());
+    expect(result).toBe('Today');
+  });
+
+  it('Test getTitleFromTime when time > current', async () => {
+    result = await getTitleFromTime(
+      new Date('2022-05-31T02:00:00'),
+      new Date('2022-05-30T02:00:00')
+    );
+    expect(result).toBe('31/05/2022');
+  });
+
+  it('Test getTitleFromTime when time < current', async () => {
+    result = await getTitleFromTime(
+      new Date('2022-05-29T02:00:00'),
+      new Date('2022-05-30T02:00:00')
+    );
+    expect(result).toBe('Yesterday');
+  });
+
+  it('Test getDateData', async () => {
+    result = await getDateData(
+      new Date('2022-05-30T02:00:00'),
+      new Date('2022-06-30T02:00:00')
+    );
+    expect(result).toEqual([[], 0]);
+  });
+});

package/src/utils/Functions/Search.js

@@ -0,0 +1,17 @@
+export const formatVietnamese = (str) => {
+  str = str.toLowerCase();
+  str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, 'a');
+  str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, 'e');
+  str = str.replace(/ì|í|ị|ỉ|ĩ/g, 'i');
+  str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, 'o');
+  str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, 'u');
+  str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, 'y');
+  str = str.replace(/đ/g, 'd');
+  return str;
+};
+
+export const convertToSlug = (text) => {
+  text = text.substring(0, Math.max(80, text.length));
+  text = formatVietnamese(text);
+  return text.toLowerCase().replace(/[^\w ]+/g, '');
+};

package/src/utils/Functions/ShortEmail.js

@@ -0,0 +1,4 @@
+export const shortEmailName = (email) => {
+  const regex = '([^@]+)';
+  return email?.match(regex)[0] || '';
+};

package/src/utils/Functions/__test__/Search.test.js

@@ -0,0 +1,6 @@
+const { convertToSlug } = require('../Search');
+
+it('Test Search function', () => {
+  const data = convertToSlug('Bệnh viện');
+  expect(data).toEqual('benh vien');
+});

package/src/utils/Functions/__test__/ShortEmail.test.js

@@ -0,0 +1,6 @@
+import { shortEmailName } from '../ShortEmail';
+
+it('Test shortEmailName function', () => {
+  const data = shortEmailName('emailExample@gmail.com');
+  expect(data).toEqual('emailExample');
+});