@eohjsc/react-native-smart-city 0.5.5 → 0.5.7-rc1

package/src/screens/Automate/AddNewAction/Styles/SetupSensorStyles.js

@@ -9,11 +9,12 @@ export default StyleSheet.create({
   conditionActive: {
     color: Colors.Black,
   },
+  inputValue: { marginBottom: 10 },
   numberInput: {
     borderRadius: 5,
     borderWidth: 1,
-    borderColor: Colors.Black,
     height: 38,
+    marginTop: 10,
   },
   boxDevices: {
     flexWrap: 'wrap',
@@ -37,10 +38,9 @@ export default StyleSheet.create({
   },
   modalContent: {
     paddingHorizontal: 16,
-    paddingTop: 16,
+    paddingVertical: 16,
     backgroundColor: Colors.White,
     width: '100%',
     borderRadius: 10,
-    paddingBottom: 16,
   },
 });

package/src/screens/Automate/AddNewAction/__test__/SetupConfigCondition.test.js

@@ -121,15 +121,9 @@ describe('Test SetupConfigCondition', () => {
 
     const gridItems = instance.findAllByType(GridItem);
 
-    expect(gridItems[0].findByType(Text).props.children).toEqual(
-      'Case 1 (2 >= "config name" < 1)'
-    );
-    expect(gridItems[1].findByType(Text).props.children).toEqual(
-      'Case 2 (2 >= "config name" < 1)'
-    );
-    expect(gridItems[2].findByType(Text).props.children).toEqual(
-      'Case 3 (2 >= "config name" < 1)'
-    );
+    expect(gridItems[0].findByType(Text).props.children).toEqual('Case 1');
+    expect(gridItems[1].findByType(Text).props.children).toEqual('Case 2');
+    expect(gridItems[2].findByType(Text).props.children).toEqual('Case 3');
   });
 
   it('render boolean value evaluation', async () => {
@@ -152,12 +146,8 @@ describe('Test SetupConfigCondition', () => {
 
     const gridItems = instance.findAllByType(GridItem);
     expect(gridItems).toHaveLength(3);
-    expect(gridItems[0].findByType(Text).props.children).toEqual(
-      'Case Off  ("config name" = 0)'
-    );
-    expect(gridItems[1].findByType(Text).props.children).toEqual(
-      'Case On  ("config name" = 1)'
-    );
+    expect(gridItems[0].findByType(Text).props.children).toEqual('Case Off');
+    expect(gridItems[1].findByType(Text).props.children).toEqual('Case On');
     expect(gridItems[2].findByType(Text).props.children).toEqual(
       'Customize conditions'
     );
@@ -284,11 +274,14 @@ describe('Test SetupConfigCondition', () => {
     if (message === null) {
       expect(mockNavigate).toBeCalled();
     } else {
-      expect(spyToastError).toBeCalledWith(message);
+      expect(spyToastError).toBeCalledWith(message, '', 3000);
     }
   };
 
   it('Test render when have input not number', async () => {
-    await testConditionValue('abc', 'Please enter a number');
+    await testConditionValue(
+      'abc',
+      'Please enter a number and select a condition'
+    );
   });
 });

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

@@ -11,12 +11,12 @@ export default StyleSheet.create({
   },
   wrapContent: {
     flex: 1,
-    paddingHorizontal: 16,
+    paddingHorizontal: 20,
   },
   wrapItem: {
     flexDirection: 'row',
     height: 100,
-    marginBottom: 16,
+    marginBottom: 20,
   },
   isDragging: {
     borderBottomWidth: 1,
@@ -32,7 +32,6 @@ export default StyleSheet.create({
     borderColor: Colors.Gray4,
   },
   rightItem: {
-    position: 'relative',
     flex: 1,
     marginLeft: 4,
     borderRadius: 4,
@@ -62,7 +61,7 @@ export default StyleSheet.create({
     flex: 1,
   },
   containerStyle: {
-    marginVertical: 16,
+    marginVertical: 20,
   },
   wrapBottom: {
     height: 80,
@@ -96,7 +95,34 @@ export default StyleSheet.create({
     flexDirection: 'row',
     width: '45%',
   },
-  paddingRight4: {
-    paddingRight: 4,
+  popoverStyle: {
+    width: '100%',
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+  },
+  modalHeader: {
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  inputNumber: {
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderStyle: 'solid',
+    borderRadius: 10,
+    marginBottom: 10,
+  },
+  textTitle: {
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderStyle: 'solid',
+    borderRadius: 10,
+  },
+  textMessage: {
+    height: 200,
+    textAlignVertical: 'top',
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderStyle: 'solid',
+    borderRadius: 10,
   },
 });

package/src/screens/Automate/EditActionsList/UpdateActionScript.js

@@ -0,0 +1,141 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import NewActionWrapper from '../AddNewAction/NewActionWrapper';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { axiosGet, axiosPut } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import Routes from '../../../utils/Route';
+import RenderActionItem from '../AddNewAction/RenderActionItem';
+import { useBackendPermission } from '../../../utils/Permission/backend';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+
+const UpdateActionScript = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const {
+    unitId,
+    device,
+    automateId,
+    numberActionAdded,
+    scriptItemId,
+    closeScreen,
+  } = route.params;
+  const permissions = useBackendPermission();
+  const { max_actions_per_automation } = permissions || {};
+  const [data, setData] = useState([]);
+  const [actions, setActions] = useState([]);
+  const [processing, setProcessing] = useState(false);
+
+  const numberActionCanAdd = useMemo(() => {
+    return max_actions_per_automation - numberActionAdded;
+  }, [max_actions_per_automation, numberActionAdded]);
+
+  const fetchData = useCallback(async () => {
+    const { success, data: automateData } = await axiosGet(
+      API.DEVICE.DISPLAY_ACTIONS(device.id)
+    );
+
+    success && setData(automateData);
+  }, [device.id]);
+
+  const onSave = useCallback(async () => {
+    if (actions.length > numberActionCanAdd) {
+      ToastBottomHelper.error(
+        `${t('you_can_only_add_more', { number: numberActionCanAdd })} ${t(
+          numberActionCanAdd > 1 ? 'actions' : 'action'
+        )}`,
+        null,
+        3000
+      );
+      return;
+    }
+    setProcessing(true);
+    let list_action = [...actions];
+    list_action = list_action.map((item) => ({
+      action: item.action,
+      data: item.data,
+    }));
+    const { success } = await axiosPut(
+      API.AUTOMATE.UPDATE_SCRIPT_ACTION(automateId),
+      {
+        id: scriptItemId,
+        list_action,
+        unit: unitId,
+      }
+    );
+
+    if (success) {
+      const { success: success1, data: automateData } = await axiosGet(
+        API.AUTOMATE.SCRIPT_ITEMS(automateId)
+      );
+      setProcessing(false);
+      if (success1) {
+        ToastBottomHelper.success(t('update_successfully'));
+        navigate(Routes.EditActionsList, {
+          data: automateData.script_items,
+          id: automateId,
+          unitId: unitId,
+        });
+      }
+    } else {
+      setProcessing(false);
+    }
+  }, [
+    actions,
+    numberActionCanAdd,
+    automateId,
+    scriptItemId,
+    unitId,
+    t,
+    navigate,
+  ]);
+
+  const handleOnSelectAction = (action) => {
+    setActions((prevActions) => {
+      const index = prevActions.findIndex(
+        (item) => item.index === action.index
+      );
+      if (index !== -1) {
+        const newActions = [...prevActions];
+        newActions[index] = action;
+        return newActions;
+      } else {
+        return [...prevActions, action];
+      }
+    });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return (
+    <NewActionWrapper
+      closeScreen={closeScreen}
+      canNext={actions.length}
+      onNext={onSave}
+      nextTitle={t('update_now')}
+      name={t('choose_action')}
+      accessibilityLabel={AccessibilityLabel.BUTTON_UPDATE_SCRIPT_ITEM}
+      showLoading={processing}
+    >
+      <View>
+        {!!data.length &&
+          data.map((item, index) => (
+            <RenderActionItem
+              key={`action_item_${index}`}
+              device={device}
+              item={item}
+              index={index}
+              handleOnSelectAction={handleOnSelectAction}
+              t={t}
+            />
+          ))}
+      </View>
+    </NewActionWrapper>
+  );
+};
+export default UpdateActionScript;

package/src/screens/Automate/EditActionsList/UpdateDelayScript.js

@@ -0,0 +1,94 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import _TextInput from '../../../commons/Form/TextInput';
+import styles from './Styles/indexStyles';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { View } from 'react-native';
+import { axiosPut } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import BottomButtonView from '../../../commons/BottomButtonView';
+
+const UpdateDelayScript = ({
+  automateId,
+  scriptItemId,
+  delay_script,
+  t,
+  onClosePopup,
+  actionsList,
+  setActionList,
+  updateIndex,
+  setNeedRefresh,
+}) => {
+  const { delay } = delay_script;
+  const [newValue, setNewValue] = useState(String(delay));
+
+  const onPressSave = useCallback(async () => {
+    const { success } = await axiosPut(
+      API.AUTOMATE.UPDATE_SCRIPT_DELAY(automateId),
+      {
+        id: scriptItemId,
+        delay: newValue,
+      }
+    );
+    if (success) {
+      actionsList[updateIndex].delay_script.delay = newValue;
+      setActionList(actionsList);
+      onClosePopup();
+      ToastBottomHelper.success(t('update_successfully'));
+      setNeedRefresh((prev) => !prev);
+    }
+  }, [
+    actionsList,
+    automateId,
+    newValue,
+    onClosePopup,
+    scriptItemId,
+    setActionList,
+    setNeedRefresh,
+    t,
+    updateIndex,
+  ]);
+
+  const onChangeDelay = (value) => {
+    setNewValue(value);
+  };
+  const canSave = useMemo(() => {
+    const value = parseInt(newValue, 10);
+    if (
+      !Number.isInteger(value) ||
+      value === delay ||
+      value <= 0 ||
+      value > 3600
+    ) {
+      return false;
+    }
+    return true;
+  }, [delay, newValue]);
+  return (
+    <>
+      <_TextInput
+        label={t('update_waiting_time')}
+        placeholder={t('maximum_3600_seconds')}
+        keyboardType="numeric"
+        textInputStyle={styles.inputNumber}
+        value={newValue}
+        onChange={onChangeDelay}
+        maxLength={4}
+        accessibilityLabel={AccessibilityLabel.AUTOMATE_INPUT_DELAY}
+        autoFocus
+      />
+
+      <View style={styles.wrapBottom}>
+        <BottomButtonView
+          disableKeyBoardAnimated
+          mainTitle={t('update_now')}
+          onPressMain={onPressSave}
+          typeMain={canSave ? 'primary' : 'disabled'}
+          accessibilityLabel={AccessibilityLabel.BUTTON_SAVE_EDIT_ACTION_LIST}
+        />
+      </View>
+    </>
+  );
+};
+
+export default UpdateDelayScript;

package/src/screens/Automate/EditActionsList/UpdateNotifyScript.js

@@ -0,0 +1,115 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import _TextInput from '../../../commons/Form/TextInput';
+import styles from './Styles/indexStyles';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { Keyboard, TouchableWithoutFeedback, View } from 'react-native';
+import { axiosPut } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import BottomButtonView from '../../../commons/BottomButtonView';
+
+const UpdateNotifyScript = ({
+  unitId,
+  automateId,
+  scriptItemId,
+  notify_script,
+  t,
+  onClosePopup,
+  actionsList,
+  setActionList,
+  updateIndex,
+  setNeedRefresh,
+}) => {
+  const { title, message } = notify_script;
+  const [newValue, setNewValue] = useState({
+    newTitle: title,
+    newMessage: message,
+  });
+
+  const onPressSave = useCallback(async () => {
+    const { success } = await axiosPut(
+      API.AUTOMATE.UPDATE_SCRIPT_NOTIFY(automateId),
+      {
+        id: scriptItemId,
+        unit: unitId,
+        title: newValue.newTitle,
+        message: newValue.newMessage,
+      }
+    );
+    if (success) {
+      actionsList[updateIndex].notify_script = {
+        title: newValue.newTitle,
+        message: newValue.newMessage,
+      };
+      setActionList(actionsList);
+      onClosePopup();
+      ToastBottomHelper.success(t('update_successfully'));
+      setNeedRefresh((prev) => !prev);
+    }
+  }, [
+    actionsList,
+    automateId,
+    newValue.newMessage,
+    newValue.newTitle,
+    onClosePopup,
+    scriptItemId,
+    setActionList,
+    setNeedRefresh,
+    t,
+    unitId,
+    updateIndex,
+  ]);
+
+  const onChangeTitle = (value) => {
+    setNewValue((prev) => ({ ...prev, newTitle: value }));
+  };
+
+  const onChangeMessage = (value) => {
+    setNewValue((prev) => ({ ...prev, newMessage: value }));
+  };
+
+  const canSave = useMemo(() => {
+    const { newMessage, newTitle } = newValue;
+    if (newMessage === message && newTitle === title) {
+      return false;
+    }
+    return !!newMessage && !!newTitle;
+  }, [message, newValue, title]);
+
+  return (
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+      <View>
+        <_TextInput
+          label={t('update_title_notification')}
+          placeholder={t('title_notification')}
+          onChange={onChangeTitle}
+          textInputStyle={styles.textTitle}
+          value={newValue.newTitle}
+          accessibilityLabel={AccessibilityLabel.AUTOMATE_TITLE_NOTIFY}
+          autoFocus
+        />
+        <_TextInput
+          label={t('update_message_notification')}
+          placeholder={t('message_notification')}
+          onChange={onChangeMessage}
+          textInputStyle={styles.textMessage}
+          value={newValue.newMessage}
+          accessibilityLabel={AccessibilityLabel.AUTOMATE_MESSAGE_NOTIFY}
+          multiline={true}
+          maxLength={255}
+        />
+        <View style={styles.wrapBottom}>
+          <BottomButtonView
+            mainTitle={t('update_now')}
+            onPressMain={onPressSave}
+            typeMain={canSave ? 'primary' : 'disabled'}
+            accessibilityLabel={AccessibilityLabel.BUTTON_SAVE_EDIT_ACTION_LIST}
+            disableKeyBoardAnimated
+          />
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default UpdateNotifyScript;

package/src/screens/Automate/EditActionsList/__tests__/UpdateActionScript.test.js

@@ -0,0 +1,174 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import API from '../../../../configs/API';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+
+import api from '../../../../utils/Apis/axios';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+import UpdateActionScript from '../UpdateActionScript';
+import { TouchableOpacity } from 'react-native';
+import { useRoute } from '@react-navigation/native';
+
+const mock = new MockAdapter(api.axiosInstance);
+const mockedNavigate = jest.fn();
+const mockedDispatch = jest.fn();
+const mockedGoBack = jest.fn();
+const mockedPermission = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      dispatch: mockedDispatch,
+      goBack: mockedGoBack,
+    }),
+    useRoute: jest.fn(),
+  };
+});
+jest.mock('../../../../utils/Permission/backend', () => ({
+  useBackendPermission: () => ({
+    max_actions_per_automation: 1,
+  }),
+}));
+
+let response = [
+  {
+    template: 'on_off_button_action_template',
+    title: 'title',
+    configuration: {
+      text_on: 'text_on',
+      text_off: 'text_off',
+      action_on: 'action_on',
+      action_off: 'action_off',
+    },
+  },
+  {
+    template: 'one_button_action_template',
+    configuration: { text: 'text', action: 'action' },
+  },
+];
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <UpdateActionScript route={route} />
+  </SCProvider>
+);
+
+describe('Test UpdateActionScript', () => {
+  let tree;
+  let route = {
+    params: {
+      unitId: 1,
+      automateId: 1,
+      scriptItemId: 1,
+      numberActionAdded: 0,
+      device: { id: 1 },
+    },
+  };
+  beforeEach(() => {
+    useRoute.mockReturnValue({
+      params: {},
+    });
+    mockedNavigate.mockClear();
+    mockedPermission.mockClear();
+  });
+
+  it('test update action script', async () => {
+    mock.onGet(API.DEVICE.DISPLAY_ACTIONS(1)).reply(200, response);
+    mock.onPut(API.AUTOMATE.UPDATE_SCRIPT_ACTION(1)).reply(200);
+    mock.onGet(API.AUTOMATE.SCRIPT_ITEMS(1)).reply(200, { script_items: [] });
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const buttonOn = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.ON_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      buttonOn[0].props.onPress();
+    });
+    const buttonSave = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.BUTTON_UPDATE_SCRIPT_ITEM
+    );
+    await act(async () => {
+      buttonSave.props.onNext();
+    });
+    expect(mockedNavigate).toHaveBeenCalled();
+  });
+
+  it('test update action script fail', async () => {
+    mock.onGet(API.DEVICE.DISPLAY_ACTIONS(1)).reply(200, response);
+    mock.onPut(API.AUTOMATE.UPDATE_SCRIPT_ACTION(1)).reply(400);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const buttonOn = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.ON_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      buttonOn[0].props.onPress();
+    });
+    const buttonSave = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.BUTTON_UPDATE_SCRIPT_ITEM
+    );
+    await act(async () => {
+      buttonSave.props.onNext();
+    });
+    expect(mockedNavigate).not.toHaveBeenCalled();
+  });
+
+  it('test can not update because adding too many times allowed', async () => {
+    mock.onGet(API.DEVICE.DISPLAY_ACTIONS(1)).reply(200, response);
+    const spyToast = jest.spyOn(ToastBottomHelper, 'error');
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const buttonOn = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.ON_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      buttonOn[0].props.onPress();
+    });
+    const buttonOff = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.OFF_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      buttonOff[0].props.onPress();
+    });
+    const buttonOne = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.ONE_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      buttonOne[0].props.onPress();
+    });
+    const buttonSave = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.BUTTON_UPDATE_SCRIPT_ITEM
+    );
+    await act(async () => {
+      buttonSave.props.onNext();
+    });
+    expect(spyToast).toBeCalled();
+  });
+});