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

package/src/screens/AddNewScriptAction/index.js

@@ -1,9 +1,11 @@
-import React, { memo, useCallback, useState } from 'react';
+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 Route from '../../utils/Route';
+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';
@@ -19,21 +21,22 @@ const AddNewScriptAction = memo(() => {
   const { params = {} } = useRoute();
   const { navigate } = useNavigation();
   // eslint-disable-next-line no-unused-vars
-  const { automateType, name } = params;
+  const { type, name, unit } = params;
 
   // eslint-disable-next-line no-unused-vars
-  const [actions, setActions] = useState([]);
+  const { stateData, setAction } = useContext(SCContext);
 
   const handleOnEdit = useCallback(() => {
     alert(t('feature_under_development'));
   }, [t]);
 
   const handleOnAddNew = useCallback(() => {
-    navigate(Route.AddNewActionStack, {
-      screen: Route.SelectDevice,
-      params: { unitId: 5 },
+    navigate(Routes.SelectDevice, {
+      automateId: null,
+      unit,
+      scriptName: name,
     });
-  }, [navigate]);
+  }, [navigate, name, unit]);
 
   const handleOnDone = useCallback(() => {
     alert(t('feature_under_development'));
@@ -43,9 +46,13 @@ const AddNewScriptAction = memo(() => {
     alert(t('feature_under_development'));
   }, [t]);
 
+  const handleGoBack = useCallback(() => {
+    setAction(Action.LIST_ACTION, {});
+  }, [setAction]);
+
   return (
     <View style={styles.wrap}>
-      <HeaderCustom isShowClose />
+      <HeaderCustom isShowClose onGoBack={handleGoBack} />
       <ScrollView scrollEnabled={true} contentContainerStyle={styles.container}>
         <Text type="H2" bold style={styles.title}>
           {name}
@@ -56,8 +63,9 @@ const AddNewScriptAction = memo(() => {
             {t('how_to_start')}
           </Text>
         </View>
-        <ItemAutomate type={automateType} />
-
+        <View style={styles.automate}>
+          <ItemAutomate type={type} />
+        </View>
         <View style={styles.row}>
           <Text type="H3" bold>
             {t('actions_list')}
@@ -68,11 +76,11 @@ const AddNewScriptAction = memo(() => {
             </Text>
           </TouchableOpacity>
         </View>
-        {actions.map((item, index) => (
+        {stateData?.listAction.map((item, index) => (
           <ItemScriptAction order={index + 1} item={item} key={index} />
         ))}
         <ItemAddNewScriptAction
-          order={actions.length + 1}
+          order={stateData?.listAction.length + 1}
           title={t('add_new')}
           onAddNew={handleOnAddNew}
         />

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 { useTranslations } from '../../../hooks/Common/useTranslations';
 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,8 +68,13 @@ const mockAxios = (
   });
 };
 
+const wrapComponent = (account, route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceDetail account={account} route={route} />
+  </SCProvider>
+);
+
 describe('test DeviceDetail', () => {
-  const t = useTranslations();
   let tree;
   let route;
   let account;
@@ -206,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);
@@ -266,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);
@@ -301,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(
@@ -328,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();
@@ -338,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(
@@ -361,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);
@@ -370,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 () => {
@@ -501,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 () => {
@@ -549,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));
@@ -613,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;
@@ -627,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);
@@ -649,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;
 
@@ -678,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;
 

package/src/screens/Device/detail.js

@@ -107,7 +107,7 @@ const DeviceDetail = ({ account, route }) => {
   );
 
   const listMenuItem = useMemo(() => {
-    const menuItems = [];
+    const menuItems = [...listMenuItemDefault];
     if (
       display.items.some((i) => getActionComponent(i.configuration.template))
     ) {
@@ -132,17 +132,17 @@ const DeviceDetail = ({ account, route }) => {
       },
     });
     if (!isFavourite) {
-      menuItems.push({
+      menuItems.unshift({
         doAction: addToFavorites,
         text: t('add_to_favorites'),
       });
     } else {
-      menuItems.push({
+      menuItems.unshift({
         doAction: removeFromFavorites,
         text: t('remove_from_favorites'),
       });
     }
-    return [...listMenuItemDefault, ...menuItems];
+    return [...menuItems];
   }, [
     display.items,
     t,
@@ -567,6 +567,7 @@ const DeviceDetail = ({ account, route }) => {
         childRef={childRef}
         onItemClick={onItemMenuClicked}
         wrapStyle={styles.menuAction}
+        isTextCenter={false}
       />
     </View>
   );

package/src/screens/Device/hooks/useCountUp.js

@@ -16,6 +16,10 @@ export const useCountUp = (eventTime) => {
     };
   }, [eventTime]);
 
+  if (!eventTime) {
+    return {};
+  }
+
   const diffSeconds = currentTime.diff(eventTime, 'seconds');
   const seconds = diffSeconds > 0 ? diffSeconds % 60 : 0;
   const minutes = parseInt(diffSeconds / 60, 10) % 60;

package/src/screens/Device/styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { Colors, Device } from '../../configs';
 import { standardizeCameraScreenSize } from '../../utils/Utils';
 
@@ -67,6 +67,10 @@ export default StyleSheet.create({
     borderRadius: 10,
     borderBottomRightRadius: 10,
     borderBottomLeftRadius: 10,
+    marginTop: Platform.select({
+      ios: 0,
+      android: -25,
+    }),
   },
   wrapTemplate: {
     marginBottom: 20,

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { create } from 'react-test-renderer';
 import { act } from '@testing-library/react-hooks';
-import { TESTID } from 'configs/Constants';
+import { TESTID } from '../../../configs/Constants';
 import DeviceInfo from '../';
 import { View } from 'react-native';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('axios');
 
@@ -32,12 +34,19 @@ jest.mock('@react-navigation/core', () => {
     }),
   };
 });
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceInfo />
+  </SCProvider>
+);
+
 describe('Test DeviceInfo', () => {
   let tree;
 
   it('render DeviceInfo', async () => {
     await act(async () => {
-      tree = await create(<DeviceInfo />);
+      tree = await create(wrapComponent());
     });
     const instance = tree.root;
     const battety = instance.findAll(
@@ -55,6 +64,6 @@ describe('Test DeviceInfo', () => {
       (el) =>
         el.props.testID === TESTID.DEVICE_INFO_CHIP_INFO && el.type === View
     );
-    expect(chip.length).toEqual(1);
+    expect(chip.length).toEqual(5);
   });
 });

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

@@ -70,4 +70,15 @@ export default StyleSheet.create({
     alignItems: 'center',
     marginRight: -10,
   },
+  wrapChildModal: {
+    padding: 16,
+  },
+  messageDelete: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.Gray9,
+  },
+  textHighlight: {
+    fontWeight: 'bold',
+  },
 });

package/src/screens/EditActionsList/index.js

@@ -1,21 +1,32 @@
 import React, { useState, useCallback } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import DraggableFlatList from 'react-native-draggable-flatlist';
-import { useRoute } from '@react-navigation/core';
+import { useNavigation, useRoute } from '@react-navigation/core';
+import ParsedText from 'react-native-parsed-text';
 
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import Text from '../../commons/Text';
 import styles from './Styles/indexStyles';
-import { Colors } from '../../configs';
+import { API, Colors } from '../../configs';
 import FImage from '../../commons/FImage';
 import Rearrange from '../../../assets/images/Rearrange.svg';
 import Close from '../../../assets/images/Close.svg';
+import { axiosDelete, axiosPut } from '../../utils/Apis/axios';
+import { ModalBottom } from '../../commons/Modal';
+import { ToastBottomHelper } from '../../utils/Utils';
 
 const EditActionsList = () => {
   const t = useTranslations();
+  const { goBack } = useNavigation();
   const { params = {} } = useRoute();
-  const { data = [] } = params;
+  const { data = [], id, setData } = params;
+  const [itemRemove, setItemRemove] = useState({
+    id: '',
+    actionName: '',
+    stationName: '',
+  });
+  const [isVisible, setIsVisible] = useState(false);
   const [actionsList, setActionList] = useState(
     [...data].map((item) => {
       return {
@@ -26,28 +37,46 @@ const EditActionsList = () => {
   );
 
   const onPressCancel = useCallback(() => {
-    setActionList(
-      [...data].map((item) => {
-        return {
-          ...item,
-          key: `item-${item?.id}`,
-        };
-      })
-    );
+    goBack();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onPressSave = useCallback(() => {
-    // eslint-disable-next-line no-alert
-    alert(t('feature_under_development'));
+  const onPressSave = useCallback(async () => {
+    const { success } = await axiosPut(API.AUTOMATE.ORDER_SCRIPT_ACTION(id), {
+      id_script_actions: actionsList.map((i) => i.id),
+    });
+    if (success) {
+      setData && setData(actionsList);
+      ToastBottomHelper.success(t('text_done'));
+      goBack();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actionsList, id, setData]);
+
+  const onPressRemove = (item) => () => {
+    setIsVisible(true);
+    setItemRemove(item);
+  };
+
+  const onClose = useCallback(() => {
+    setIsVisible(false);
   }, []);
 
-  const onPressRemove = useCallback(() => {
-    // eslint-disable-next-line no-alert
-    alert(t('feature_under_development'));
+  const onRemove = useCallback(async () => {
+    const { success } = await axiosDelete(
+      API.AUTOMATE.DELETE_SCRIPT_ACTION(id, itemRemove.id)
+    );
+    if (success) {
+      ToastBottomHelper.success(t('removed_successfully'));
+      onClose();
+      const temp = [...actionsList];
+      const index = actionsList.findIndex((item) => item.id === itemRemove.id);
+      temp.splice(index, 1);
+      setActionList(temp);
+      setData && setData(temp);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [id, itemRemove, actionsList]);
 
   const renderItem = useCallback(({ item, index, drag }) => {
     return (
@@ -74,7 +103,14 @@ const EditActionsList = () => {
               {item?.action_name}
             </Text>
           </View>
-          <TouchableOpacity onPress={onPressRemove} style={styles.closeButton}>
+          <TouchableOpacity
+            onPress={onPressRemove({
+              id: item?.id,
+              actionName: item?.sensor_name,
+              stationName: item?.station_name,
+            })}
+            style={styles.closeButton}
+          >
             <Close />
           </TouchableOpacity>
         </View>
@@ -115,6 +151,34 @@ const EditActionsList = () => {
           </Text>
         </TouchableOpacity>
       </View>
+      <ModalBottom
+        isVisible={isVisible}
+        title={t('delette_action')}
+        onClose={onClose}
+        onRemove={onRemove}
+      >
+        <View style={styles.wrapChildModal}>
+          <ParsedText
+            style={styles.messageDelete}
+            parse={[
+              {
+                pattern: new RegExp(itemRemove?.actionName),
+                style: styles.textHighlight,
+              },
+              {
+                pattern: new RegExp(itemRemove?.stationName),
+                style: styles.textHighlight,
+              },
+            ]}
+            childrenProps={{ allowFontScaling: false }}
+          >
+            {t('message_delete_action', {
+              actionName: itemRemove?.actionName,
+              stationName: itemRemove?.stationName,
+            })}
+          </ParsedText>
+        </View>
+      </ModalBottom>
     </View>
   );
 };

package/src/screens/EmergencyContacts/__test__/EmergencyContactAddNew.test.js

@@ -2,11 +2,19 @@ import React from 'react';
 import { TextInput } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import { EmergencyContactsAddNew } from '../EmergencyContactsAddNew';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
 import axios from 'axios';
 import Toast from 'react-native-toast-message';
 import { ViewButtonBottom } from '../../../commons';
 import { TESTID } from '../../../configs/Constants';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <EmergencyContactsAddNew route={route} />
+  </SCProvider>
+);
 
 jest.mock('react-native-toast-message');
 
@@ -24,7 +32,6 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('test EmergencyContactAddNew', () => {
-  const t = useTranslations();
   let route;
   beforeEach(() => {
     route = {
@@ -43,16 +50,9 @@ describe('test EmergencyContactAddNew', () => {
 
   let tree;
 
-  test('render', async () => {
-    act(() => {
-      tree = create(<EmergencyContactsAddNew route={route} />);
-    });
-    expect(tree.toJSON()).toMatchSnapshot();
-  });
-
   test('onChangeNameText', async () => {
     act(() => {
-      tree = create(<EmergencyContactsAddNew route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const textInput = instance.find(
@@ -68,12 +68,11 @@ describe('test EmergencyContactAddNew', () => {
 
     expect(textInput.props.value).toBe('ABC');
     expect(viewButtonBottom.props.rightDisabled).toBeTruthy();
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onTextPhoneChange', async () => {
     act(() => {
-      tree = create(<EmergencyContactsAddNew route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const textInput = instance.find(
@@ -89,12 +88,11 @@ describe('test EmergencyContactAddNew', () => {
 
     expect(textInput.props.value).toBe('123');
     expect(viewButtonBottom.props.rightDisabled).toBeTruthy();
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onCancel', async () => {
     act(() => {
-      tree = create(<EmergencyContactsAddNew route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -104,7 +102,6 @@ describe('test EmergencyContactAddNew', () => {
     });
 
     expect(mockedGoBack).toHaveBeenCalledTimes(1);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onSave success', async () => {
@@ -117,7 +114,7 @@ describe('test EmergencyContactAddNew', () => {
     });
 
     await act(async () => {
-      tree = await create(<EmergencyContactsAddNew route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -127,7 +124,6 @@ describe('test EmergencyContactAddNew', () => {
     });
 
     expect(mockedGoBack).toHaveBeenCalledTimes(1);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onSave fail', async () => {
@@ -139,7 +135,7 @@ describe('test EmergencyContactAddNew', () => {
     });
 
     await act(async () => {
-      tree = await create(<EmergencyContactsAddNew route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -150,7 +146,7 @@ describe('test EmergencyContactAddNew', () => {
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
-      text1: t('create_contact_failed'),
+      text1: getTranslate('en', 'create_contact_failed'),
       visibilityTime: 1000,
     });
     expect(mockedGoBack).not.toHaveBeenCalled();