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

package/src/screens/AddNewAction/Device/__test__/index.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableWithoutFeedback } from 'react-native';
+
+import Device from '..';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+const wrapComponent = (svgMain, sensor, title, isSelectDevice, onPress) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Device
+      svgMain={svgMain}
+      title={title}
+      sensor={sensor}
+      isSelectDevice={isSelectDevice}
+      onPress={onPress}
+    />
+  </SCProvider>
+);
+
+describe('Test SelectDevice', () => {
+  let tree;
+
+  test('onPressDevice', () => {
+    const sensor = { id: 1, name: 'sensor', icon_kit: 'icon_kit' };
+    const mockFuntion = jest.fn();
+    act(() => {
+      tree = renderer.create(
+        wrapComponent(sensor.icon_kit, sensor, sensor.name, true, mockFuntion)
+      );
+    });
+
+    const instance = tree.root;
+    const touchableWithoutFeedback = instance.findByType(
+      TouchableWithoutFeedback
+    );
+    act(() => {
+      touchableWithoutFeedback.props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalledWith(sensor);
+  });
+});

package/src/screens/AddNewAction/Device/index.js

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import { Colors } from '../../../configs';
+import Text from '../../../commons/Text';
+import IconComponent from '../../../commons/IconComponent';
+import styles from './DeviceStyles';
+
+const Device = memo(({ svgMain, sensor, title, isSelectDevice, onPress }) => {
+  const isActive = isSelectDevice && styles.active;
+
+  const onPressDevice = () => {
+    onPress && onPress(sensor);
+  };
+
+  return (
+    <TouchableWithoutFeedback onPress={onPressDevice}>
+      <View style={[styles.container, isActive]}>
+        <View style={styles.boxIcon}>
+          <IconComponent
+            icon={svgMain}
+            iconKit={sensor.icon_kit}
+            style={styles.iconSensor}
+          />
+        </View>
+        <Text numberOfLines={1} semibold type="Body" color={Colors.Gray9}>
+          {title}
+        </Text>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+});
+
+export default Device;

package/src/screens/AddNewAction/SelectAction.js

@@ -0,0 +1,152 @@
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+  useContext,
+} from 'react';
+import { ScrollView, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
+import { HeaderCustom } from '../../commons/Header';
+import BottomButtonView from '../../commons/BottomButtonView';
+import Text from '../../commons/Text';
+import ActionTemplate from '../../commons/ActionTemplate';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import { API } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+import Routes from '../../utils/Route';
+import styles from './Styles/SelectActionStyles';
+import moment from 'moment';
+
+const SelectAction = memo(({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const { unit, device, stationName, automateId, scriptName } = route.params;
+  const { setAction } = useContext(SCContext);
+  const [data, setData] = useState([]);
+  const [actions, setActions] = useState({
+    name: '',
+    action: '',
+  });
+
+  const fetchData = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SENSOR.DISPLAY_ACTIONS(device.id),
+      {},
+      true
+    );
+    if (success) {
+      setData(data);
+    }
+  }, [device.id]);
+
+  const onSave = useCallback(async () => {
+    if (automateId) {
+      const { success } = await axiosPost(
+        API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
+        {
+          action: actions.action,
+        }
+      );
+      if (success) {
+        navigate(Routes.ScriptDetail, {
+          id: automateId,
+          name: scriptName,
+          havePermission: true,
+          unit,
+          dateNow: moment().valueOf(), // TODO will remove dateNow later
+        });
+      }
+    } else {
+      setAction(Action.LIST_ACTION, {
+        action: actions.action,
+        unit_name: unit.name,
+        action_name: actions.name,
+        sensor_name: device.name,
+        sensor_icon_kit: device.icon_kit,
+        station_name: stationName,
+      });
+      navigate(Routes.AddNewScriptAction, {
+        automateType: 'one-tap',
+        name: scriptName,
+        unit,
+      });
+    }
+  }, [
+    actions.action,
+    actions.name,
+    automateId,
+    device.icon_kit,
+    device.name,
+    navigate,
+    scriptName,
+    setAction,
+    stationName,
+    unit,
+  ]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleOnSelectAction = (action) => {
+    setActions({ ...action });
+  };
+
+  const RenderActionItem = ({ data }) => {
+    const actionTemplate = [];
+
+    data.forEach((item) => {
+      switch (item.template) {
+        case 'on_off_button_action_template':
+        case 'one_button_action_template':
+        case 'three_button_action_template':
+          actionTemplate.push(item);
+          break;
+      }
+    });
+
+    return (
+      <>
+        {actionTemplate.length > 0 && (
+          <ActionTemplate
+            action={actions}
+            data={actionTemplate}
+            onSelectAction={handleOnSelectAction}
+          />
+        )}
+      </>
+    );
+  };
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose />
+      <ScrollView
+        style={styles.wrap}
+        contentContainerStyle={styles.contentContainerStyle}
+      >
+        <Text bold type="H2" style={styles.title}>
+          {t('set_up {name}', {
+            name: device.name,
+          })}
+        </Text>
+
+        <RenderActionItem data={data} testID={TESTID.ACTION_ITEM} />
+      </ScrollView>
+
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={t('save')}
+        onPressMain={onSave}
+        typeMain={actions?.action ? 'primary' : 'disabled'}
+      />
+    </View>
+  );
+});
+
+export default SelectAction;

package/src/screens/AddNewAction/SelectDevice.js

@@ -0,0 +1,120 @@
+import React, { memo, useState, useEffect, useCallback } from 'react';
+import { ScrollView, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import Text from '../../commons/Text';
+import NavBar from '../../commons/NavBar';
+import { fetchWithCache } from '../../utils/Apis/axios';
+import { API } from '../../configs';
+import Device from './Device';
+import BottomButtonView from '../../commons/BottomButtonView';
+import { HeaderCustom } from '../../commons/Header';
+import Routes from '../../utils/Route';
+import styles from './Styles/SelectDeviceStyles';
+
+const SelectDevice = memo(({ route }) => {
+  const t = useTranslations();
+  const { unit, automateId, scriptName } = route.params;
+
+  const [listStation, setListStation] = useState([]);
+  const [listMenuItem, setListMenuItem] = useState([]);
+  const [indexStation, setIndexStation] = useState(0);
+  const [station, setStation] = useState([]);
+  const [selectedDevice, setSelectedDevice] = useState();
+  const { navigate } = useNavigation();
+
+  const onSnapToItem = useCallback(
+    (item, index) => {
+      setIndexStation(index);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [unit.id, indexStation]
+  );
+
+  const fetchDetails = useCallback(async () => {
+    await fetchWithCache(API.UNIT.DEVICE_CONTROL(unit.id), {}, (response) => {
+      const { success, data } = response;
+
+      if (success) {
+        const listMenu = data.map((item, index) => ({
+          text: item.name,
+          station: item,
+          index: index,
+        }));
+        setStation(data);
+        setListMenuItem(listMenu);
+        setListStation(listMenu.concat([{ text: '' }]));
+      }
+    });
+  }, [unit.id]);
+
+  useEffect(() => {
+    fetchDetails();
+  }, [fetchDetails]);
+
+  const onPressDevice = (sensor) => {
+    if (selectedDevice && selectedDevice.id === sensor.id) {
+      setSelectedDevice(false);
+    } else {
+      setSelectedDevice(sensor);
+    }
+  };
+
+  const onPressContinue = () => {
+    navigate(Routes.SelectAction, {
+      unit,
+      device: selectedDevice,
+      automateId: automateId,
+      stationName: station[indexStation]?.name,
+      scriptName,
+    });
+  };
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose />
+
+      <ScrollView
+        style={styles.wrap}
+        contentContainerStyle={styles.contentContainerStyle}
+      >
+        <Text bold type="H2" style={styles.title}>
+          {t('select_devices')}
+        </Text>
+
+        <NavBar
+          listStation={listStation}
+          listMenuItem={listMenuItem}
+          onSnapToItem={onSnapToItem}
+          indexStation={indexStation}
+          style={styles.navbar}
+        />
+
+        <View style={styles.boxDevices}>
+          {station[indexStation]?.sensors &&
+            station[indexStation].sensors.map((sensor) => (
+              <Device
+                svgMain={sensor.icon || 'sensor'}
+                title={sensor.name}
+                sensor={sensor}
+                isSelectDevice={
+                  selectedDevice && selectedDevice.id === sensor.id
+                }
+                onPress={onPressDevice}
+              />
+            ))}
+        </View>
+      </ScrollView>
+
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={t('continue')}
+        onPressMain={onPressContinue}
+        typeMain={selectedDevice ? 'primary' : 'disabled'}
+      />
+    </View>
+  );
+});
+
+export default SelectDevice;

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

@@ -0,0 +1,24 @@
+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,
+  },
+  title: {
+    marginHorizontal: 16,
+  },
+  contentContainerStyle: {
+    paddingBottom: getBottomSpace() + 100,
+  },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});

package/src/screens/AddNewAction/Styles/SelectDeviceStyles.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/__test__/SelectAction.test.js

@@ -0,0 +1,172 @@
+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 Routes from '../../../utils/Route';
+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 onSave no automateId', async () => {
+    route.params.automateId = null;
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const bottomButton = instance.findByType(BottomButtonView);
+    act(() => {
+      bottomButton.props.onPressMain();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddNewScriptAction, {
+      automateType: 'one-tap',
+      name: route.params.scriptName,
+      unit: route.params.unit,
+    });
+  });
+
+  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();
+  });
+});