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

package/src/screens/AddNewAction/SetupSensor.js

@@ -0,0 +1,221 @@
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
+import { View, TouchableOpacity, Image } from 'react-native';
+import { Icon } from '@ant-design/react-native';
+import { useNavigation, useRoute } from '@react-navigation/native';
+
+import styles from './Styles/SetupSensorStyles';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import { Colors, Images } from '../../configs';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { ModalCustom } from '../../commons/Modal';
+import Text from '../../commons/Text';
+import BottomButtonView from '../../commons/BottomButtonView';
+import { HorizontalPicker } from '../../commons';
+import { popAction } from '../../navigations/utils';
+import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
+
+const CONDITION_TYPES = {
+  IS: 'IS',
+  IS_BELOW: 'IS_BELOW',
+  IS_ABOVE: 'IS_ABOVE',
+};
+
+const SetUpSensor = () => {
+  const t = useTranslations();
+  const modalData = useMemo(
+    () => [
+      {
+        title: `${t('is_below')} (<)`,
+        type: CONDITION_TYPES.IS_BELOW,
+        conditionValue: '<',
+      },
+      {
+        title: `${t('is')} (=)`,
+        type: CONDITION_TYPES.IS,
+        conditionValue: '=',
+      },
+      {
+        title: `${t('is_above')} (>)`,
+        type: CONDITION_TYPES.IS_ABOVE,
+        conditionValue: '>',
+      },
+    ],
+    [t]
+  );
+
+  const { goBack, dispatch } = useNavigation();
+  const { params = {} } = useRoute();
+  const { item, sensorData, setSensorData } = params;
+  const isHasLimit = useMemo(() => !!item?.range_max, [item]);
+  const [isShowModal, setIsShowModal] = useState(false);
+  const [itemActiveModal, setItemActiveModal] = useState(modalData[0]);
+  const [value, setValue] = useState(parseFloat(item?.value || 0));
+  const [minimum] = useState(isHasLimit ? parseInt(item?.range_min) : 0);
+  const [maximum, setMaximum] = useState(
+    value === 0
+      ? 100
+      : isHasLimit
+      ? (parseInt(item?.range_max) - minimum) * 10 + minimum
+      : (parseInt(item?.value) + 20 - minimum) * 10 + minimum
+  );
+
+  const onOpenModal = useCallback(() => {
+    setIsShowModal(true);
+  }, []);
+
+  const onCloseModal = useCallback(() => {
+    setIsShowModal(false);
+  }, []);
+
+  const onChooseCondition = (item) => () => {
+    setItemActiveModal(item);
+    onCloseModal();
+  };
+
+  const handleClose = useCallback(() => {
+    dispatch(popAction(4));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onChangeValue = useCallback(
+    (value) => {
+      setValue(
+        (parseFloat(value / 128) + parseFloat(minimum)).toFixed(
+          item?.decimal_behind || 1
+        )
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value]
+  );
+
+  const onSave = useCallback(() => {
+    const dataTemp = [...sensorData];
+    const index = dataTemp.findIndex((i) => i?.id === item?.id);
+    dataTemp.splice(index, 1, { ...item, ...itemActiveModal, value });
+    setSensorData(dataTemp);
+    goBack();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [itemActiveModal, value, item, sensorData]);
+
+  const rightComponent = useMemo(
+    () => (
+      <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
+        <Icon name={'close'} size={24} color={Colors.Black} />
+      </TouchableOpacity>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const renderScroll = useMemo(() => {
+    return (
+      <HorizontalPicker
+        minimum={minimum}
+        maximum={maximum}
+        segmentSpacing={8}
+        segmentWidth={8}
+        step={10}
+        normalHeight={4}
+        normalWidth={4}
+        stepHeight={12}
+        stepWidth={12}
+        stepColor={Colors.Gray6}
+        normalColor={Colors.Gray6}
+        onChangeValue={onChangeValue}
+        value={value - minimum}
+      />
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [minimum, maximum, value]);
+
+  useEffect(() => {
+    if (!isHasLimit && maximum - 150 <= value * 10) {
+      setMaximum(maximum + 200);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  useEffect(() => {
+    if (item?.title) {
+      const itemTemp = modalData.find((i) => i.title === item.title);
+      itemTemp && setItemActiveModal(itemTemp);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [item]);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useStatusBarPreview(
+      isShowModal ? Colors.BlackTransparent4 : Colors.TextTransparent
+    );
+  }, [isShowModal]);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('set_up {name}', { name: item?.name })}
+        headerAniStyle={styles.headerAniStyle}
+        rightComponent={rightComponent}
+      >
+        <TouchableOpacity
+          onPress={onOpenModal}
+          style={[styles.itemCondition, styles.shadowView]}
+        >
+          <Text type="Body" color={Colors.Gray7}>
+            {t('condition')}
+          </Text>
+          <Text
+            type="H4"
+            semibold
+            style={styles.desciption}
+          >{`${item?.name} ${itemActiveModal.title}`}</Text>
+          <Image source={Images.arrowBack} style={styles.arrowRight} />
+        </TouchableOpacity>
+        <Text type="Body" color={Colors.Gray7} style={styles.setANumber}>
+          {t('set_a_number')}
+        </Text>
+        <View style={[styles.flexRow, styles.center]}>
+          <View>
+            <Text style={styles.value}>{value}</Text>
+            <View style={styles.underline} />
+          </View>
+          <Text type="H2" style={styles.unit}>
+            {item?.unit}
+          </Text>
+        </View>
+        {renderScroll}
+      </WrapHeaderScrollable>
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={t('save')}
+        onPressMain={onSave}
+        typeMain={'primary'}
+      />
+      <ModalCustom
+        onBackdropPress={onCloseModal}
+        isVisible={isShowModal}
+        style={styles.modal}
+      >
+        <View style={styles.modalContent}>
+          {modalData.map((i, index) => (
+            <>
+              <TouchableOpacity
+                onPress={onChooseCondition(i)}
+                key={index}
+                style={styles.itemModal}
+              >
+                <Text type="H4">{`${item?.name} ${i.title}`}</Text>
+              </TouchableOpacity>
+              {index !== modalData.length - 1 && (
+                <View style={styles.separated} />
+              )}
+            </>
+          ))}
+        </View>
+      </ModalCustom>
+    </View>
+  );
+};
+
+export default SetUpSensor;

package/src/screens/AddNewAction/Styles/SelectActionStyles.js

@@ -0,0 +1,62 @@
+import { StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors, Constants, Theme } from '../../../configs';
+
+export default StyleSheet.create({
+  ...Theme,
+  title: {
+    marginHorizontal: 16,
+  },
+  contentContainerStyle: {
+    paddingBottom: getBottomSpace() + 100,
+  },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+  wrapCondition: {
+    marginHorizontal: 16,
+    borderRadius: 8,
+    padding: 10,
+  },
+  wrapItem: {
+    marginTop: 32,
+  },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+  closeButton: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  titleStyle: {
+    fontSize: 14,
+    color: Colors.Gray9,
+    fontWeight: '400',
+  },
+  description: {
+    textAlign: 'center',
+    marginTop: 4,
+  },
+  arrowRight: {
+    position: 'absolute',
+    right: 10,
+    top: '55%',
+    transform: [{ rotate: '180deg' }],
+    tintColor: Colors.Gray7,
+    width: 7,
+    height: 11,
+  },
+  wrapStyleCheckBox: {
+    marginLeft: 3,
+  },
+  container: {
+    height: Constants.height,
+  },
+});

package/src/screens/AddNewAction/Styles/SelectSensorDevicesStyles.js

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  contentContainerStyle: {
+    paddingBottom: getBottomSpace() + 100,
+  },
+  navbar: {
+    paddingTop: 16,
+  },
+  title: {
+    marginHorizontal: 16,
+  },
+  boxDevices: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    marginTop: 22,
+    justifyContent: 'space-between',
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});

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

@@ -0,0 +1,76 @@
+import { StyleSheet } from 'react-native';
+import { Theme, Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  ...Theme,
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+  closeButton: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modal: {
+    margin: 0,
+    padding: 0,
+  },
+  modalContent: {
+    borderRadius: 8,
+    backgroundColor: Colors.White,
+    marginHorizontal: 24,
+  },
+  itemModal: {
+    padding: 16,
+  },
+  separated: {
+    height: 1,
+    backgroundColor: Colors.Gray4,
+    marginHorizontal: 16,
+  },
+  itemCondition: {
+    padding: 10,
+    marginTop: 32,
+    marginHorizontal: 16,
+    borderRadius: 8,
+  },
+  desciption: {
+    marginTop: 4,
+  },
+  setANumber: {
+    marginVertical: 28,
+    marginHorizontal: 16,
+  },
+  value: {
+    fontSize: 48,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginLeft: 15,
+  },
+  unit: {
+    marginTop: -30,
+  },
+  underline: {
+    width: '90%',
+    height: 1,
+    backgroundColor: Colors.Black,
+    marginLeft: 15,
+  },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+  arrowRight: {
+    position: 'absolute',
+    right: 10,
+    top: '55%',
+    transform: [{ rotate: '180deg' }],
+    tintColor: Colors.Gray7,
+    width: 7,
+    height: 11,
+  },
+});

package/src/screens/AddNewAction/__test__/SelectAction.test.js

@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import renderer, { act } from 'react-test-renderer';
+import axios from 'axios';
+
+import SelectAction from '../SelectAction';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { TESTID } from '../../../configs/Constants';
+import ActionTemplate from '../../../commons/ActionTemplate';
+
+jest.mock('axios');
+
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+  };
+});
+
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectAction route={route} />
+  </SCProvider>
+);
+
+describe('Test SelectAction', () => {
+  let tree;
+  let route = {
+    params: {
+      unit: { id: 1, name: 'Unit test' },
+      device: { id: 1, name: 'Device test' },
+      stationName: 'stationName',
+      automateId: 1,
+      scriptName: 'scriptName test',
+    },
+  };
+
+  beforeEach(() => {
+    axios.get.mockClear();
+  });
+
+  test('test onSave have automateId', async () => {
+    const response = {
+      status: 200,
+      success: true,
+    };
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const bottomButton = instance.findByType(BottomButtonView);
+    await act(async () => {
+      bottomButton.props.onPressMain();
+    });
+    expect(axios.post).toHaveBeenCalled();
+    expect(mockedNavigate).toHaveBeenCalled();
+  });
+
+  test('test fetchData', async () => {
+    const response = {
+      status: 200,
+      success: true,
+      data: [
+        { template: 'on_off_button_action_template' },
+        { template: 'one_button_action_template' },
+        { template: 'three_button_action_template' },
+      ],
+    };
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    expect(axios.get).toHaveBeenCalled();
+
+    expect(mockSetState).toHaveBeenCalledWith(response.data);
+  });
+
+  test('test RenderActionItem', async () => {
+    const data = [
+      {
+        title: '',
+        template: 'three_button_action_template',
+        configuration: {
+          action1: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          action2: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          action3: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          icon1: 'up',
+          icon2: 'stop',
+          icon3: 'down',
+          text1: 'OPEN',
+          text2: 'STOP',
+          text3: 'CLOSE',
+          text_lock: 'Door lock',
+          is_display_lock: true,
+        },
+      },
+      {
+        title: '',
+        template: 'on_off_button_action_template',
+        configuration: {
+          action_off: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          icon_off: 'poweroff',
+          text_off: 'OFF',
+          action_on: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          icon_on: 'poweroff',
+          text_on: 'ON',
+          config: 941,
+        },
+      },
+      {
+        title: '',
+        template: 'one_button_action_template',
+        configuration: {
+          action: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          icon: 'up',
+          text: 'UP',
+        },
+      },
+    ];
+    useState.mockImplementationOnce((init) => [data, mockSetState]);
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const renderActionItem = instance.findAll(
+      (el) => el.props.testID === TESTID.ACTION_ITEM
+    );
+    const actionTemplate = instance.findByType(ActionTemplate);
+
+    expect(renderActionItem[0].props.data.length).toBe(3);
+    expect(actionTemplate).toBeDefined();
+  });
+});