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

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
@@ -365,12 +349,6 @@ const UnitDetail = ({ route }) => {
         childRef={childRef}
         showingPopover={showingPopover}
       />
-      <ModalFullVideo
-        isVisible={isFullScreen}
-        data={dataFullScreen}
-        modalStyles={styles.modal}
-        onClose={onClose}
-      />
       <PreventAccess
         visible={showPreventAccess}
         hidePreventAccess={setHidePreventAccess}

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/__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/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');
+});

package/src/utils/I18n/translations/en.json

@@ -1002,5 +1002,15 @@
   "not_activated": "Not activated",
   "open": "Open",
   "close": "Close",
-  "create_contact_success": "Create contact success!"
+  "create_contact_success": "Create contact success!",
+  "templates": "Templates",
+  "template": "Template",
+  "gateways": "Gateways",
+  "help": "Help",
+  "about_us": "About us",
+  "exit_dev_mode": "Exit developer mode",
+  "developer_mode": "Developer Mode",
+  "what_are_you_looking_for": "What are you looking for?",
+  "no_template_yet": "No Template yet",
+  "add_your_template": "Add your template at web app"
 }

package/src/utils/I18n/translations/vi.json

@@ -1003,5 +1003,15 @@
   "not_activated": "Không kích hoạt",
   "open": "Mở",
   "close": "Đóng",
-  "create_contact_success": "Tạo liên hệ thành công!"
+  "create_contact_success": "Tạo liên hệ thành công!",
+  "templates": "Mẫu",
+  "template": "Mẫu",
+  "gateways": "Cổng vào",
+  "help": "Hỗ trợ",
+  "about_us": "Giới thiệu về chúng tôi",
+  "exit_dev_mode": "Thoát khỏi chế độ nhà phát triển",
+  "developer_mode": "Chế độ nhà phát triển",
+  "what_are_you_looking_for": "Bạn đang tìm kiếm cái gì?",
+  "no_template_yet": "Chưa có mẫu nào",
+  "add_your_template": "Thêm mẫu của bạn trên web"
 }

package/src/utils/Route/index.js

@@ -147,6 +147,12 @@ const Routes = {
   UnitMemberInformation: 'UnitMemberInformation',
   EnterPassword: 'EnterPassword',
   SelectAddToFavorites: 'SelectAddToFavorites',
+  Template: 'Template',
+  Gateway: 'Gateway',
+  Smart: 'Smart',
+  TemplateStack: 'TemplateStack',
+  GatewayStack: 'GatewayStack',
+  SmartStack: 'SmartStack',
 };
 
 export default Routes;

package/src/commons/Modal/ModalFullVideo.js

@@ -1,48 +0,0 @@
-import React, { useEffect } from 'react';
-import { View, TouchableOpacity, Image } from 'react-native';
-import { ModalCustom } from '../../commons/Modal';
-import MediaPlayerDetail from '../../commons/MediaPlayerDetail';
-import { Images } from '../../configs';
-import styles from './Styles/ModalFullVideoStyles';
-import { useHiddenStatusBar } from '../../hooks/Common/useStatusBar';
-
-const ModalFullVideo = ({
-  animationOut = 'fadeOut',
-  isVisible = false,
-  modalStyles,
-  data,
-  resizeMode = 'cover',
-  onClose,
-  uri,
-}) => {
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useHiddenStatusBar(isVisible);
-  }, [isVisible]);
-
-  return (
-    <ModalCustom
-      animationOut={animationOut}
-      isVisible={isVisible}
-      style={modalStyles}
-    >
-      <View style={styles.modalContent}>
-        <MediaPlayerDetail
-          uri={uri || data?.uri}
-          thumbnail={data?.thumbnail}
-          style={styles.camera}
-          wrapStyles={styles.wrapStyles}
-          resizeMode={resizeMode}
-          cameraName={data?.name}
-          isFullScreen={true}
-          isPaused={false}
-        />
-        <TouchableOpacity onPress={onClose} style={styles.buttonFullScreen}>
-          <Image source={Images.fullscreen} />
-        </TouchableOpacity>
-      </View>
-    </ModalCustom>
-  );
-};
-
-export default ModalFullVideo;

package/src/commons/Modal/Styles/ModalFullVideoStyles.js

@@ -1,26 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { normalize } from '../../../configs/Constants';
-
-export default StyleSheet.create({
-  modalContent: {
-    position: 'absolute',
-    zIndex: 10,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  buttonFullScreen: {
-    position: 'absolute',
-    zIndex: 10,
-    width: normalize(40),
-    height: normalize(40),
-    bottom: normalize(30),
-    left: normalize(20),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  wrapStyles: {
-    borderRadius: 0,
-  },
-});