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

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

@@ -0,0 +1,129 @@
+import axios from 'axios';
+import React from 'react';
+import { Platform, TextInput, TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
+
+import AddNewOneTap from '..';
+import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import Routes from '../../../utils/Route';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddNewOneTap route={route} />
+  </SCProvider>
+);
+jest.mock('axios');
+
+jest.mock('react-redux', () => {
+  return {
+    ...jest.requireActual('react-redux'),
+    useSelector: () => 'vi',
+  };
+});
+
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+  };
+});
+
+jest.mock('axios');
+let tree;
+
+describe('test AddNewOneTap', () => {
+  beforeEach(() => {
+    axios.post.mockClear();
+    mockedNavigate.mockClear();
+  });
+  test('create AddNewOneTap success', async () => {
+    Platform.OS = 'ios';
+    let route = {
+      params: { type: 'one_tap', unit: { id: 1 } },
+    };
+
+    const response = {
+      status: 200,
+      data: {
+        id: 1,
+        unit: 1,
+        type: 'one_tap',
+        weekday_repeat: [],
+        script: { id: 1, name: 'William Miller' },
+      },
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const inputName = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.NAME_YOUR_BUTTON && el.type === TextInput
+    );
+    expect(inputName).toHaveLength(1);
+
+    await act(async () => {
+      await inputName[0].props.onChangeText('Tap to up');
+    });
+
+    const item = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+
+    expect(item).toHaveLength(1);
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
+      havePermission: true,
+      id: 1,
+      type: 'one_tap',
+      name: 'Tap to up',
+      unit: {
+        id: 1,
+      },
+    });
+  });
+  test('create AddNewOneTap fail', async () => {
+    Platform.OS = 'android';
+    let route = {
+      params: { type: 'one_tap' },
+    };
+
+    const response = {
+      status: 400,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+
+    const item = tree.root.findAll(
+      (el) =>
+        el.props.testID === TESTID.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+
+    expect(item).toHaveLength(1);
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+    expect(mockedNavigate).not.toBeCalled();
+  });
+});

package/src/screens/AddNewOneTap/index.js

@@ -0,0 +1,80 @@
+import React, { memo, useCallback, useState } from 'react';
+import { ScrollView, SafeAreaView, Platform } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { API, Colors } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+import _TextInput from '../../commons/Form/TextInput';
+import styles from './AddNewOneTapStyles';
+import { HeaderCustom } from '../../commons/Header';
+import BottomButtonView from '../../commons/BottomButtonView';
+import Text from '../../commons/Text';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { axiosPost } from '../../utils/Apis/axios';
+import Routes from '../../utils/Route';
+
+const AddNewOneTap = memo(({ route }) => {
+  const { type, unit } = route.params;
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const [name, setName] = useState(t('tap_to_run'));
+
+  const handleContinue = useCallback(async () => {
+    const { success, data } = await axiosPost(API.AUTOMATE.CREATE_AUTOMATE(), {
+      unit: unit.id,
+      type: type,
+      name: name,
+    });
+    if (success) {
+      navigate(Routes.ScriptDetail, {
+        unit: unit,
+        id: data.id,
+        name: name,
+        type: type,
+        havePermission: true,
+      });
+    }
+  }, [type, name, unit, navigate]);
+
+  const onChangeName = useCallback((text) => {
+    setName(text);
+  }, []);
+
+  return (
+    <SafeAreaView
+      style={
+        Platform.OS === 'android'
+          ? styles.containerAndroid
+          : styles.containerIOS
+      }
+    >
+      <HeaderCustom isShowClose />
+      <ScrollView>
+        <Text
+          testID={TESTID.ADD_NEW_DEVICE_ADD}
+          semibold
+          size={20}
+          color={Colors.Gray9}
+          style={styles.textHeader}
+        >
+          {t('name_your_button')}
+        </Text>
+        <_TextInput
+          placeholder={t('name_your_button')}
+          wrapStyle={styles.noMarginTop}
+          onChange={onChangeName}
+          textInputStyle={styles.textInput}
+          value={name}
+          testID={TESTID.NAME_YOUR_BUTTON}
+        />
+      </ScrollView>
+      <BottomButtonView
+        style={styles.viewBottomFixed}
+        mainTitle={t('continue')}
+        onPressMain={handleContinue}
+      />
+    </SafeAreaView>
+  );
+});
+
+export default AddNewOneTap;

package/src/screens/AddNewScriptAction/AddNewScriptActionStyles.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  container: {
+    paddingBottom: 250,
+  },
+  title: {
+    marginVertical: 16,
+    marginLeft: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    margin: 16,
+  },
+  viewBottom: {
+    borderColor: Colors.Gray4,
+    paddingVertical: 24,
+    borderTopWidth: 1,
+    backgroundColor: Colors.White,
+  },
+  automate: { marginRight: 16, marginLeft: 16 },
+});

package/src/screens/AddNewScriptAction/index.js

@@ -0,0 +1,100 @@
+import React, { memo, useCallback, useContext } from 'react';
+import { View, ScrollView, TouchableOpacity } from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
+import Routes from '../../utils/Route';
+import { HeaderCustom } from '../../commons/Header';
+import Text from '../../commons/Text';
+import BottomButtonView from '../../commons/BottomButtonView';
+import ItemAutomate from '../../commons/Automate/ItemAutomate';
+import ItemScriptAction from '../../commons/Automate/ItemScriptAction';
+import ItemAddNewScriptAction from '../../commons/Automate/ItemAddNewScriptAction';
+
+import styles from './AddNewScriptActionStyles';
+import { Colors } from '../../configs';
+
+const AddNewScriptAction = memo(() => {
+  const t = useTranslations();
+  const { params = {} } = useRoute();
+  const { navigate } = useNavigation();
+  // eslint-disable-next-line no-unused-vars
+  const { type, name, unit } = params;
+
+  // eslint-disable-next-line no-unused-vars
+  const { stateData, setAction } = useContext(SCContext);
+
+  const handleOnEdit = useCallback(() => {
+    alert(t('feature_under_development'));
+  }, [t]);
+
+  const handleOnAddNew = useCallback(() => {
+    navigate(Routes.SelectDevice, {
+      automateId: null,
+      unit,
+      scriptName: name,
+    });
+  }, [navigate, name, unit]);
+
+  const handleOnDone = useCallback(() => {
+    alert(t('feature_under_development'));
+  }, [t]);
+
+  const handleGoToAutomate = useCallback(() => {
+    alert(t('feature_under_development'));
+  }, [t]);
+
+  const handleGoBack = useCallback(() => {
+    setAction(Action.LIST_ACTION, {});
+  }, [setAction]);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose onGoBack={handleGoBack} />
+      <ScrollView scrollEnabled={true} contentContainerStyle={styles.container}>
+        <Text type="H2" bold style={styles.title}>
+          {name}
+        </Text>
+
+        <View style={styles.row}>
+          <Text type="H3" bold>
+            {t('how_to_start')}
+          </Text>
+        </View>
+        <View style={styles.automate}>
+          <ItemAutomate type={type} />
+        </View>
+        <View style={styles.row}>
+          <Text type="H3" bold>
+            {t('actions_list')}
+          </Text>
+          <TouchableOpacity onPress={handleOnEdit}>
+            <Text type="Label" color={Colors.Primary}>
+              {t('edit')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+        {stateData?.listAction.map((item, index) => (
+          <ItemScriptAction order={index + 1} item={item} key={index} />
+        ))}
+        <ItemAddNewScriptAction
+          order={stateData?.listAction.length + 1}
+          title={t('add_new')}
+          onAddNew={handleOnAddNew}
+        />
+      </ScrollView>
+      <BottomButtonView
+        style={styles.viewBottom}
+        mainTitle={t('done')}
+        onPressMain={handleOnDone}
+        secondaryTitle={t('go_to_automate_scripts')}
+        typeSecondary="primaryUnderline"
+        onPressSecondary={handleGoToAutomate}
+      />
+    </View>
+  );
+});
+
+export default AddNewScriptAction;

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

package/src/screens/Device/__test__/detail.test.js

@@ -7,13 +7,15 @@ import { API } from '../../../configs';
 import { AlertSendConfirm } from '../../../commons/EmergencyButton/AlertSendConfirm';
 import { AlertSent } from '../../../commons/EmergencyButton/AlertSent';
 import { AlertAction, ButtonPopup, MenuActionMore } from '../../../commons';
-import { t } from 'i18n-js';
 import { TESTID } from '../../../configs/Constants';
 import Text from '../../../commons/Text';
 import { IconFill } from '@ant-design/icons-react-native';
 // import CurrentRainSensor from 'components/Device/RainningSensor/CurrentRainSensor';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import { ConnectedViewHeader } from '../../../commons/Device';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockedNavigate = jest.fn();
 const mockedDispatch = jest.fn();
@@ -66,6 +68,12 @@ const mockAxios = (
   });
 };
 
+const wrapComponent = (account, route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceDetail account={account} route={route} />
+  </SCProvider>
+);
+
 describe('test DeviceDetail', () => {
   let tree;
   let route;
@@ -205,7 +213,7 @@ describe('test DeviceDetail', () => {
     mockAxios(responseDisplay, responseDisplayValueV2, responseRemoteControl);
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     expect(axios.get).toHaveBeenCalledTimes(4);
@@ -265,7 +273,7 @@ describe('test DeviceDetail', () => {
 
   test('AlertSendConfirm onSendNowAlert', async () => {
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     const alertSendConfirm = instance.findByType(AlertSendConfirm);
@@ -300,7 +308,7 @@ describe('test DeviceDetail', () => {
 
   test('ButtonPopup onClick', async () => {
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     const buttonPopup = instance.find(
@@ -327,7 +335,7 @@ describe('test DeviceDetail', () => {
       await jest.runOnlyPendingTimers();
     });
     expect(buttonPopup.props.visible).toEqual(true);
-    expect(buttonPopup.props.mainTitle).toEqual(t('ok'));
+    expect(buttonPopup.props.mainTitle).toEqual(getTranslate('en', 'ok'));
     await act(async () => {
       await buttonPopup.props.onPressMain();
       await buttonPopup.props.onClose();
@@ -337,7 +345,7 @@ describe('test DeviceDetail', () => {
 
   test('ButtonPopup render', async () => {
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     const buttonPopupTitle = instance.find(
@@ -360,7 +368,7 @@ describe('test DeviceDetail', () => {
 
   test('ScrollView onRefresh', async () => {
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     const scrollView = instance.findByType(ScrollView);
@@ -369,7 +377,7 @@ describe('test DeviceDetail', () => {
     await act(async () => {
       refreshControl.props.onRefresh();
     });
-    expect(axios.get).toHaveBeenCalledTimes(8);
+    expect(axios.get).toHaveBeenCalledTimes(7);
   });
 
   test('Should render SensorDisplayItem', async () => {
@@ -500,14 +508,14 @@ describe('test DeviceDetail', () => {
     mockAxios(responseDisplay, responseDisplayValueV2);
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
 
     const instance = tree.root;
     const sensorDisplayItem = instance.findAll(
       (el) => el.props.testID === TESTID.SENSOR_DISPLAY_ITEM
     );
-    expect(sensorDisplayItem).toHaveLength(2);
+    expect(sensorDisplayItem).toHaveLength(4);
   });
 
   test('render CurrentRainSensor', async () => {
@@ -548,24 +556,24 @@ describe('test DeviceDetail', () => {
     mockAxios(responseDisplay, responseDisplayValueV2);
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
 
     const instance = tree.root;
     const sensorDisplayItem = instance.findAll(
       (el) => el.props.testID === TESTID.SENSOR_DISPLAY_ITEM
     );
-    expect(sensorDisplayItem).toHaveLength(4);
+    expect(sensorDisplayItem).toHaveLength(1);
 
     const currentRainSensor = instance.findAllByType(CurrentRainSensor);
-    expect(currentRainSensor).toHaveLength(0); // not crash app
+    expect(currentRainSensor).toHaveLength(1); // not crash app
   });
 
   test('not fetch value if not managed by backend', async () => {
     route.params.sensor.is_managed_by_backend = false;
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
 
     expect(axios.get).not.toBeCalledWith(API.SENSOR.DISPLAY_VALUES_V2(1));
@@ -612,7 +620,7 @@ describe('test DeviceDetail', () => {
     mockAxios(responseDisplay, responseDisplayValueV2);
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
 
     const instance = tree.root;
@@ -626,7 +634,7 @@ describe('test DeviceDetail', () => {
 
   test('HeaderDevice button more onClick', async () => {
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     const menu = instance.findByType(MenuActionMore);
@@ -648,7 +656,7 @@ describe('test DeviceDetail', () => {
     sensor.is_favourite = false;
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
 
@@ -677,7 +685,7 @@ describe('test DeviceDetail', () => {
     sensor.is_favourite = true;
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;