@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import AllCamera from '..';
+import { act, create } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { ModalFullVideo } from '../../../commons/Modal';
+import Carousel from 'react-native-snap-carousel';
+
+const arrCameras = [
+  {
+    id: 41,
+    order: 1,
+    template: 'camera',
+    type: 'camera',
+    configuration: {
+      id: 4,
+      name: 'Camera cửa nhà xe',
+      uri: 'rtsp://admin:hd543211@203.205.32.86:10555/ISAPI/Streaming/Channels/101/',
+      preview_uri:
+        'rtsp://admin:hd543211@203.205.32.86:10555/ISAPI/Streaming/Channels/101/',
+      playback:
+        'rtsp://admin:4tpg2SnnmChdh8TK@203.205.32.86:11024/Streaming/tracks/101/?starttime=20210901T110000Z',
+    },
+  },
+];
+
+const mockSetState = jest.fn();
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useState: (init) => [init, mockSetState],
+  };
+});
+
+jest.mock('@react-navigation/core', () => {
+  return {
+    ...jest.requireActual('@react-navigation/core'),
+    useRoute: jest.fn().mockReturnValue({
+      params: {
+        arrCameras: [
+          {
+            id: 41,
+            order: 1,
+            template: 'camera',
+            type: 'camera',
+            configuration: {
+              id: 4,
+              name: 'Camera cửa nhà xe',
+              uri: 'rtsp://admin:hd543211@203.205.32.86:10555/ISAPI/Streaming/Channels/101/',
+              preview_uri:
+                'rtsp://admin:hd543211@203.205.32.86:10555/ISAPI/Streaming/Channels/101/',
+              playback:
+                'rtsp://admin:4tpg2SnnmChdh8TK@203.205.32.86:11024/Streaming/tracks/101/?starttime=20210901T110000Z',
+            },
+          },
+        ],
+        thumbnail: {
+          uri: 'https://eoh-gateway-backend.eoh.io/image-asset.jpeg',
+        },
+      },
+    }),
+  };
+});
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <AllCamera />
+  </SCProvider>
+);
+
+describe('Test AllCamera screen', () => {
+  let tree;
+
+  beforeEach(() => {
+    mockSetState.mockClear();
+    jest.useFakeTimers();
+  });
+
+  it('Test render', async () => {
+    mockSetState.mockImplementation((init) => [init, mockSetState]);
+    mockSetState.mockImplementation((init) => [arrCameras, mockSetState]);
+    mockSetState.mockImplementation((init) => [init, mockSetState]);
+    mockSetState.mockImplementation((init) => [init, mockSetState]);
+    mockSetState.mockImplementation((init) => [init, mockSetState]);
+    mockSetState.mockImplementation((init) => [init, mockSetState]);
+    await act(() => {
+      tree = create(wrapComponent());
+    });
+    const instance = tree.root;
+    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(TouchableOpacities).toHaveLength(12);
+    const ModalFullVideos = instance.findAllByType(ModalFullVideo);
+    expect(ModalFullVideos).toHaveLength(1);
+    act(() => {
+      ModalFullVideos[0].props.onClose();
+    });
+    expect(mockSetState).toBeCalledWith(false);
+    const Carousels = instance.findAllByType(Carousel);
+    expect(Carousels).toHaveLength(1);
+  });
+});

package/src/screens/AllCamera/index.js

@@ -3,7 +3,7 @@ import { View, Text, TouchableOpacity, Platform, Image } from 'react-native';
 import { useRoute, useNavigation } from '@react-navigation/native';
 import { chunk } from 'lodash';
 import Carousel from 'react-native-snap-carousel';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Images, Colors } from '../../configs';
 import { useHiddenStatusBar } from '../../hooks/Common/useStatusBar';
@@ -15,6 +15,7 @@ import { ModalFullVideo } from '../../commons/Modal';
 import Routes from '../../utils/Route';
 
 const AllCamera = () => {
+  const t = useTranslations();
   const carouselRef = useRef();
   const { params = {} } = useRoute();
   const { arrCameras = [], thumbnail = '' } = params;

package/src/screens/Automate/Components/Loading.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View } from 'react-native';
+import ContentLoader, { Rect } from 'react-content-loader/native';
+import { Constants } from '../../../configs';
+
+const Loading = ({ style }) => (
+  <View style={style}>
+    <ContentLoader>
+      <Rect x="16" y="24" rx="10" ry="10" width={120} height="28" />
+      <Rect
+        x="16"
+        y="68"
+        rx="10"
+        ry="10"
+        width={(Constants.width - 40) / 2}
+        height="106"
+      />
+      <Rect
+        x={(Constants.width - 40) / 2 + 24}
+        y="68"
+        rx="10"
+        ry="10"
+        width={(Constants.width - 40) / 2}
+        height="106"
+      />
+      <Rect x="16" y="200" rx="10" ry="10" width={120} height="28" />
+      <Rect
+        x="16"
+        y="244"
+        rx="10"
+        ry="10"
+        width={(Constants.width - 40) / 2}
+        height="106"
+      />
+      <Rect
+        x={(Constants.width - 40) / 2 + 24}
+        y="244"
+        rx="10"
+        ry="10"
+        width={(Constants.width - 40) / 2}
+        height="106"
+      />
+      <Rect x="16" y="374" rx="10" ry="10" width={120} height="28" />
+      <Rect
+        x="16"
+        y="418"
+        rx="10"
+        ry="10"
+        width={(Constants.width - 40) / 2}
+        height="106"
+      />
+      <Rect
+        x={(Constants.width - 40) / 2 + 24}
+        y="418"
+        rx="10"
+        ry="10"
+        width={(Constants.width - 40) / 2}
+        height="106"
+      />
+    </ContentLoader>
+  </View>
+);
+
+export default Loading;

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

@@ -0,0 +1,64 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  buttonAdd: {
+    paddingRight: 16,
+  },
+  titleItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  contentContainerStyle: {
+    paddingLeft: 16,
+    paddingTop: 16,
+    paddingBottom: 80 + getBottomSpace(),
+  },
+  arrowRightButon: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  arrowRight: {
+    transform: [
+      {
+        rotate: '180deg',
+      },
+    ],
+    tintColor: Colors.Gray7,
+    width: 8,
+    height: 12,
+  },
+  wrapAutomateItem: {
+    backgroundColor: Colors.White,
+    height: 106,
+    width: (Constants.width - 40) / 2,
+    borderRadius: 8,
+    marginRight: 8,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 1.5,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 2,
+    marginVertical: 5,
+  },
+  wrapUniItem: {
+    marginBottom: 16,
+  },
+  contentContainerStyle2: {
+    paddingLeft: 2,
+  },
+  addNewItem: {
+    marginTop: 7,
+  },
+});

package/src/screens/Automate/__test__/Loading.test.js

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

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

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { FlatList } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import axios from 'axios';
+import Automate from '../';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import ItemOneTap from '../../../commons/SubUnit/OneTap/ItemOneTap';
+
+jest.mock('axios');
+const mockedNavigate = jest.fn();
+const mockSetState = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      setOptions: () => ({
+        headerRight: jest.fn(),
+      }),
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <Automate />
+  </SCProvider>
+);
+
+describe('Test Automate', () => {
+  let tree;
+
+  beforeEach(() => {
+    axios.get.mockClear();
+    mockedNavigate.mockClear();
+    mockSetState.mockClear();
+  });
+
+  it('Test success get Automate', async () => {
+    const response = {
+      status: 200,
+      data: [
+        {
+          type: 'MultiUnit',
+          automates: [
+            {
+              id: 1,
+              user: 2,
+              type: 'one_tap',
+              activate_at: '2021-09-17T05:30:00Z',
+              script: {
+                id: 1,
+                name: 'script',
+                icon: undefined,
+                icon_kit: undefined,
+              },
+            },
+          ],
+        },
+      ],
+    };
+    await axios.get.mockImplementation(async () => {
+      return response;
+    });
+
+    useState.mockImplementation(() => [false, mockSetState]);
+    useState.mockImplementation(() => [response.data, mockSetState]);
+
+    await act(() => {
+      tree = create(wrapComponent());
+    });
+    expect(mockSetState).toBeCalledWith(true);
+    const instance = tree.root;
+    const FlatLists = instance.findAllByType(FlatList);
+    expect(FlatLists).toHaveLength(2);
+    const ItemOneTaps = instance.findAllByType(ItemOneTap);
+    expect(ItemOneTaps).toHaveLength(1);
+    act(() => {
+      ItemOneTaps[0].props.onPressItem();
+    });
+    expect(mockedNavigate).toBeCalled();
+  });
+});

package/src/screens/Automate/index.js

@@ -0,0 +1,148 @@
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { View, TouchableOpacity, FlatList, Image } from 'react-native';
+import { IconFill } from '@ant-design/icons-react-native/es';
+import { useNavigation } from '@react-navigation/native';
+
+import styles from './Styles/indexStyles';
+import { API, Colors, Images } from '../../configs';
+import { axiosGet } from '../../utils/Apis/axios';
+import Text from '../../commons/Text';
+import ItemOneTap from '../../commons/SubUnit/OneTap/ItemOneTap';
+import Routes from '../../utils/Route';
+import Loading from './Components/Loading';
+import ItemAddNew from '../../commons/Device/ItemAddNew';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+const keyExtractor = (item) => item.id;
+const MULTI_UNIT = 'MultiUnit';
+
+const Automate = () => {
+  const t = useTranslations();
+  const { setOptions, navigate } = useNavigation();
+  const [automatesData, setAutomatesData] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const getAutomates = useCallback(async () => {
+    setIsLoading(true);
+    const { success, data } = await axiosGet(API.AUTOMATE.GET_AUTOMATES());
+    if (success && data && data.length) {
+      setAutomatesData(data);
+    }
+    const timeout = setTimeout(() => {
+      setIsLoading(false);
+      clearTimeout(timeout);
+    }, 1000);
+  }, []);
+
+  const onPressItem = (item) => () => {
+    navigate(Routes.UnitStack, {
+      screen: Routes.ScriptDetail,
+      params: {
+        id: item?.id,
+        name: item?.script?.name,
+        type: item?.type,
+        havePermission: true,
+        unit: {},
+      },
+    });
+  };
+
+  const handleOnAddNew = useCallback(() => {
+    alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const renderItemAutomate = useCallback(
+    ({ item }) => {
+      return (
+        <ItemOneTap
+          isOwner={true}
+          automate={item}
+          wrapSyles={styles.wrapAutomateItem}
+          onPressItem={onPressItem(item)}
+        />
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [automatesData]
+  );
+
+  const renderItem = useCallback(
+    ({ item = {} }) => {
+      const { type = '', unit_name = '', automates = [] } = item;
+      return (
+        <View style={styles.wrapUniItem}>
+          <View style={styles.titleItem}>
+            <Text type="H3" semibold>
+              {type === MULTI_UNIT ? 'Multi Units' : unit_name}
+            </Text>
+            <TouchableOpacity style={styles.arrowRightButon}>
+              <Image source={Images.arrowBack} style={styles.arrowRight} />
+            </TouchableOpacity>
+          </View>
+          <FlatList
+            horizontal
+            keyExtractor={keyExtractor}
+            data={automates}
+            renderItem={renderItemAutomate}
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.contentContainerStyle2}
+            ListFooterComponent={renderListFooterComponent}
+          />
+        </View>
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [automatesData]
+  );
+
+  const renderListFooterComponent = useMemo(
+    () => (
+      <ItemAddNew
+        title={t('add_new')}
+        onAddNew={handleOnAddNew}
+        wrapStyle={styles.addNewItem}
+      />
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  useLayoutEffect(() => {
+    setOptions({
+      headerRight: () => (
+        <TouchableOpacity style={styles.buttonAdd}>
+          <IconFill name={'plus-circle'} size={28} color={Colors.Orange} />
+        </TouchableOpacity>
+      ),
+    });
+  }, [setOptions]);
+
+  useEffect(() => {
+    getAutomates();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      {isLoading && <Loading />}
+      <FlatList
+        keyExtractor={keyExtractor}
+        data={automatesData}
+        extraData={automatesData}
+        renderItem={renderItem}
+        contentContainerStyle={styles.contentContainerStyle}
+        refreshing={false}
+        onRefresh={getAutomates}
+      />
+    </View>
+  );
+};
+
+export default Automate;

package/src/screens/Device/HeaderDevice/styles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { getStatusBarHeight } from '../../../configs/Constants';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 export default StyleSheet.create({
   wrap: {
@@ -9,7 +9,7 @@ export default StyleSheet.create({
     paddingLeft: 7,
     paddingRight: 10,
     paddingBottom: 6,
-    paddingTop: getStatusBarHeight(),
+    paddingTop: getStatusBarHeight() + 10,
   },
   button: {
     width: 35,