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

package/src/screens/AddNewAutoSmart/index.js

@@ -1,46 +1,69 @@
-import React, { memo, useState } from 'react';
-import { Alert, View } from 'react-native';
+import React, { memo, useState, useCallback } from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import { HeaderCustom } from '../../commons/Header';
 import styles from './styles/AddNewAutoSmartStyles';
 import Text from '../../commons/Text';
 import BottomButtonView from '../../commons/BottomButtonView';
 import ItemAutomate from '../../commons/Automate/ItemAutomate';
-import { AUTOMATE_TYPE, TESTID } from '../../configs/Constants';
-
+import {
+  AUTOMATE_SELECT,
+  AUTOMATE_TYPE,
+  TESTID,
+} from '../../configs/Constants';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import Routes from '../../utils/Route';
 
 const AddNewAutoSmart = memo(({ route }) => {
   const t = useTranslations();
-  const { type } = route.params;
+  const { navigate, goBack } = useNavigation();
+  const { type, unit, isScript } = route.params;
   const typeAutoSmart = {
     automate: [
       {
         type: AUTOMATE_TYPE.ONE_TAP,
+        route: Routes.AddNewOneTap,
       },
       {
         type: AUTOMATE_TYPE.VALUE_CHANGE,
+        route: Routes.SelectSensorDevices,
+        data: {
+          title: AUTOMATE_SELECT.SELECT_SENSOR,
+        },
       },
       {
         type: AUTOMATE_TYPE.SCHEDULE,
+        route: Routes.SetSchedule,
       },
     ],
     value_change: [
       {
         type: AUTOMATE_TYPE.VALUE_CHANGE,
+        route: Routes.SelectSensorDevices,
+        data: {
+          title: AUTOMATE_SELECT.SELECT_SENSOR,
+        },
       },
       {
         type: AUTOMATE_TYPE.SCHEDULE,
+        route: Routes.SetSchedule,
       },
     ],
   };
-
-  // eslint-disable-next-line no-alert
-  const onPress = () => {
-    Alert.alert(t('feature_under_development'));
-  };
-
-  const [selectedIndex, setSelectedIndex] = useState(-1);
   const [data] = useState(typeAutoSmart[type]);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const handleOnContinue = useCallback(() => {
+    const automate = data[selectedIndex];
+    if (automate?.route) {
+      navigate(automate.route, {
+        type: automate.type,
+        unit: unit,
+        ...(automate.data || {}),
+        isScript,
+      });
+    }
+  }, [navigate, selectedIndex, data, unit, isScript]);
 
   const handleSelectIndex = (index) => {
     if (index !== selectedIndex) {
@@ -50,9 +73,14 @@ const AddNewAutoSmart = memo(({ route }) => {
     }
   };
 
+  const onClose = useCallback(() => {
+    isScript ? goBack() : alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isScript]);
+
   return (
     <View style={styles.wrap}>
-      <HeaderCustom isShowClose />
+      <HeaderCustom isShowClose onClose={onClose} />
       <View style={styles.container}>
         <Text semibold type={'H2'} style={styles.titleCreate}>
           {t('create_smart')}
@@ -73,7 +101,7 @@ const AddNewAutoSmart = memo(({ route }) => {
       </View>
       <BottomButtonView
         testIDPrefix={TESTID.PREFIX.BUTTON_ADD_AUTO_SMART}
-        onPressMain={onPress}
+        onPressMain={handleOnContinue}
         style={styles.bottomButton}
         mainTitle={t('continue')}
         typeMain={selectedIndex === -1 ? 'disabled' : 'primary'}

package/src/screens/AddNewOneTap/AddNewOneTapStyles.js

@@ -35,9 +35,10 @@ export default StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
-    paddingBottom: getBottomSpace() > 0 ? getBottomSpace() : 24,
-    paddingTop: 16,
+    paddingBottom: getBottomSpace() > 0 ? getBottomSpace() : 32,
+    paddingTop: 24,
     backgroundColor: Colors.White,
-    marginHorizontal: 16,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
   },
 });

package/src/screens/AddNewOneTap/__test__/AddNewOneTap.test.js

@@ -94,6 +94,7 @@ describe('test AddNewOneTap', () => {
       unit: {
         id: 1,
       },
+      isCreateScriptSuccess: true,
     });
   });
   test('create AddNewOneTap fail', async () => {

package/src/screens/AddNewOneTap/index.js

@@ -14,16 +14,17 @@ import { axiosPost } from '../../utils/Apis/axios';
 import Routes from '../../utils/Route';
 
 const AddNewOneTap = memo(({ route }) => {
-  const { type, unit } = route.params;
+  const { type, unit, automateData = {} } = route.params;
   const t = useTranslations();
   const { navigate } = useNavigation();
-  const [name, setName] = useState(t('tap_to_run'));
+  const [name, setName] = useState('');
 
   const handleContinue = useCallback(async () => {
     const { success, data } = await axiosPost(API.AUTOMATE.CREATE_AUTOMATE(), {
       unit: unit.id,
       type: type,
       name: name,
+      ...automateData,
     });
     if (success) {
       navigate(Routes.ScriptDetail, {
@@ -32,9 +33,10 @@ const AddNewOneTap = memo(({ route }) => {
         name: name,
         type: type,
         havePermission: true,
+        isCreateScriptSuccess: true,
       });
     }
-  }, [type, name, unit, navigate]);
+  }, [type, name, unit, automateData, navigate]);
 
   const onChangeName = useCallback((text) => {
     setName(text);
@@ -70,8 +72,9 @@ const AddNewOneTap = memo(({ route }) => {
       </ScrollView>
       <BottomButtonView
         style={styles.viewBottomFixed}
-        mainTitle={t('continue')}
+        mainTitle={t('save')}
         onPressMain={handleContinue}
+        typeMain={name !== '' ? 'primary' : 'disabled'}
       />
     </SafeAreaView>
   );

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