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

package/src/screens/AddCommon/__test__/SelectUnit.test.js

@@ -6,6 +6,8 @@ import axios from 'axios';
 import AddCommonSelectUnit from '../SelectUnit';
 import Text from '../../../commons/Text';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('axios');
 
@@ -21,6 +23,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddCommonSelectUnit route={route} />
+  </SCProvider>
+);
+
 describe('Test SelectUnit container', () => {
   beforeEach(() => {
     mockedNavigate.mockClear();
@@ -29,17 +37,17 @@ describe('Test SelectUnit container', () => {
   let tree;
   const list_type = ['AddSubUnit', 'AddDevice', 'AddMember', 'AddLGDevice', ''];
   const result = [
-    'Thêm khu vực',
-    'Thêm thiết bị',
-    'Chọn một địa điểm',
-    'Chọn một địa điểm',
-    'Thêm khu vực',
+    'Add new sub-unit',
+    'Add new device',
+    'Select a unit',
+    'Select a unit',
+    'Add new sub-unit',
   ];
   list_type.forEach(function (type, i) {
     test(`create SelectUnit ${type} container`, () => {
       const route = { params: { addType: type } };
       act(() => {
-        tree = renderer.create(<AddCommonSelectUnit route={route} />);
+        tree = renderer.create(wrapComponent(route));
       });
       const instance = tree.root;
       const button = instance.findAllByType(TouchableOpacity);
@@ -76,7 +84,7 @@ describe('Test SelectUnit container', () => {
       });
 
       await act(async () => {
-        tree = renderer.create(<AddCommonSelectUnit route={route} />);
+        tree = renderer.create(wrapComponent(route));
       });
 
       const instance = tree.root;
@@ -149,7 +157,7 @@ describe('test single SelectUnit', () => {
     });
 
     await act(async () => {
-      tree = renderer.create(<AddCommonSelectUnit route={route} />);
+      tree = renderer.create(wrapComponent(route));
     });
 
     const instance = tree.root;
@@ -190,7 +198,7 @@ describe('test single SelectUnit', () => {
     });
 
     await act(async () => {
-      tree = renderer.create(<AddCommonSelectUnit route={route} />);
+      tree = renderer.create(wrapComponent(route));
     });
 
     const instance = tree.root;
@@ -209,7 +217,7 @@ describe('test single SelectUnit', () => {
   test('click goBack', async () => {
     const route = { params: { addType: 'AddSubUnit' } };
     await act(async () => {
-      tree = renderer.create(<AddCommonSelectUnit route={route} />);
+      tree = renderer.create(wrapComponent(route));
     });
 
     const instance = tree.root;

package/src/screens/AddLocationMaps/index.js

@@ -3,7 +3,7 @@ import { View, StyleSheet } from 'react-native';
 import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -17,6 +17,7 @@ const initialRegion = {
 };
 
 const AddLocationMaps = memo(() => {
+  const t = useTranslations();
   const { goBack } = useNavigation();
   const [color, setColor] = useState(Colors.Black);
   useEffect(() => {

package/src/screens/AddNewAction/Components/LoadingSelectAction.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View } from 'react-native';
+import ContentLoader, { Rect } from 'react-content-loader/native';
+import { Constants } from '../../../configs';
+
+const LoadingSelectAction = ({ style }) => (
+  <View style={style}>
+    <ContentLoader>
+      <Rect x="16" y="40" rx="10" ry="10" width={120} height="20" />
+      <Rect
+        x="16"
+        y="76"
+        rx="10"
+        ry="10"
+        width={Constants.width - 32}
+        height="70"
+      />
+      <Rect x="16" y="178" rx="10" ry="10" width={120} height="20" />
+      <Rect
+        x="16"
+        y="214"
+        rx="10"
+        ry="10"
+        width={Constants.width - 32}
+        height="70"
+      />
+      <Rect x="16" y="316" rx="10" ry="10" width={120} height="20" />
+      <Rect
+        x="16"
+        y="352"
+        rx="10"
+        ry="10"
+        width={Constants.width - 32}
+        height="70"
+      />
+    </ContentLoader>
+  </View>
+);
+
+export default LoadingSelectAction;

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

@@ -0,0 +1,3 @@
+import LoadingSelectAction from './LoadingSelectAction';
+
+export { LoadingSelectAction };

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

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 16;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+const heightItem = (widthItem / 166) * 96;
+
+export default StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 4,
+    width: widthItem,
+    height: heightItem,
+    backgroundColor: Colors.White,
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  active: {
+    borderColor: Colors.Primary,
+    borderWidth: 2,
+  },
+  boxIcon: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  lineHeight22: {
+    lineHeight: 22,
+  },
+  iconSensor: {
+    width: 40,
+    height: 40,
+    resizeMode: 'contain',
+  },
+});

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,237 @@
+import React, { memo, useCallback, useEffect, useState, useMemo } from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { Icon } from '@ant-design/react-native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import BottomButtonView from '../../commons/BottomButtonView';
+import Text from '../../commons/Text';
+import ActionTemplate from '../../commons/ActionTemplate';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import { API, Images } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+import Routes from '../../utils/Route';
+import styles from './Styles/SelectActionStyles';
+import moment from 'moment';
+import { Colors } from '../../configs';
+import { TitleCheckBox } from '../Sharing/Components';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import { popAction } from '../../navigations/utils';
+import { LoadingSelectAction } from './Components';
+
+const SelectAction = memo(({ route }) => {
+  const t = useTranslations();
+  const { navigate, dispatch } = useNavigation();
+  const {
+    unit,
+    device,
+    automateId,
+    scriptName,
+    isScript = false,
+    type,
+  } = route.params;
+  const [data, setData] = useState([]);
+  const [actions, setActions] = useState({
+    name: '',
+    action: '',
+  });
+  const [sensorData, setSensorData] = useState([]);
+  const [checkedItem, setCheckedItem] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    const { success, data } = await axiosGet(
+      isScript
+        ? API.AUTOMATE.GET_SENSOR_CONFIG(device.id)
+        : API.SENSOR.DISPLAY_ACTIONS(device.id),
+      isScript && {},
+      isScript && true
+    );
+    if (success) {
+      isScript ? setSensorData(data) : setData(data);
+    }
+    const to = setTimeout(() => {
+      setIsLoading(false);
+      clearTimeout(to);
+    }, 1000);
+  }, [device.id, isScript]);
+
+  const onSave = useCallback(async () => {
+    if (isScript) {
+      const itemTemp = sensorData.find((i) => i.id === checkedItem?.id);
+      navigate(Routes.AddNewOneTap, {
+        automateData: {
+          condition: itemTemp?.conditionValue || '<',
+          value: itemTemp?.value,
+          config: itemTemp?.id,
+        },
+        type,
+        unit,
+      });
+    } else {
+      const { success } = await axiosPost(
+        API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
+        {
+          action: actions.action,
+          unit: unit.id,
+        }
+      );
+      if (success) {
+        navigate(Routes.ScriptDetail, {
+          id: automateId,
+          name: scriptName,
+          havePermission: true,
+          unit,
+          dateNow: moment().valueOf(), // TODO will remove dateNow later
+          type: type,
+        });
+      }
+    }
+  }, [
+    actions.action,
+    automateId,
+    navigate,
+    scriptName,
+    type,
+    unit,
+    isScript,
+    checkedItem,
+    sensorData,
+  ]);
+
+  const handleOnSelectAction = (action) => {
+    setActions({ ...action });
+  };
+
+  const handleClose = useCallback(() => {
+    isScript ? dispatch(popAction(3)) : alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isScript, t]);
+
+  const onChecked = useCallback(
+    (_, isChecked, id) => {
+      setCheckedItem(isChecked ? sensorData.find((i) => i?.id === id) : {});
+    },
+    [sensorData]
+  );
+
+  const onPressItem = (item) => () => {
+    navigate(Routes.SetUpSensor, { item, sensorData, setSensorData });
+  };
+
+  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 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}
+          />
+        )}
+      </>
+    );
+  };
+
+  const renderBottomButtonView = useMemo(
+    () => (
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={t(isScript ? 'continue' : 'save')}
+        onPressMain={onSave}
+        typeMain={actions?.action || !!checkedItem?.id ? 'primary' : 'disabled'}
+      />
+    ),
+    [onSave, actions, checkedItem, isScript, t]
+  );
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('set_up {name}', { name: device?.name })}
+        headerAniStyle={styles.headerAniStyle}
+        rightComponent={rightComponent}
+      >
+        {isScript ? (
+          isLoading ? (
+            <LoadingSelectAction style={styles.container} />
+          ) : (
+            sensorData.map((item) => {
+              const isHasValue = !!item?.value;
+              return (
+                <View style={styles.wrapItem} key={item?.id}>
+                  <TitleCheckBox
+                    onPress={onChecked}
+                    id={item?.id}
+                    title={item?.name}
+                    titleStyle={styles.titleStyle}
+                    wrapStyle={styles.wrapStyleCheckBox}
+                    isChecked={checkedItem?.id === item?.id}
+                  />
+                  <TouchableOpacity
+                    onPress={onPressItem(item)}
+                    style={[styles.wrapCondition, styles.shadowView]}
+                  >
+                    <Text type="Body" color={Colors.Gray7}>
+                      {t('condition')}
+                    </Text>
+                    <Text
+                      numberOfLines={1}
+                      type="H4"
+                      semibold={isHasValue}
+                      style={styles.description}
+                    >
+                      {isHasValue
+                        ? `${item?.name} ${
+                            item?.title ? item.title : t('is_below') + ' (<)'
+                          } ${item.value} ${item?.unit}`
+                        : `${t('no')} ${t('condition')}`}
+                    </Text>
+                    {isHasValue && (
+                      <Image
+                        source={Images.arrowBack}
+                        style={styles.arrowRight}
+                      />
+                    )}
+                  </TouchableOpacity>
+                </View>
+              );
+            })
+          )
+        ) : (
+          <RenderActionItem data={data} testID={TESTID.ACTION_ITEM} />
+        )}
+      </WrapHeaderScrollable>
+      {renderBottomButtonView}
+    </View>
+  );
+});
+
+export default SelectAction;

package/src/screens/AddNewAction/SelectSensorDevices.js

@@ -0,0 +1,150 @@
+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/SelectSensorDevicesStyles';
+import { AUTOMATE_SELECT } from '../../configs/Constants';
+import { popAction } from '../../navigations/utils';
+
+const SelectSensorDevices = memo(({ route }) => {
+  const t = useTranslations();
+  const {
+    unit,
+    automateId,
+    title = AUTOMATE_SELECT.SELECT_DEVICES,
+    type,
+    isScript,
+    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, dispatch } = useNavigation();
+
+  const onSnapToItem = useCallback(
+    (item, index) => {
+      setIndexStation(index);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [unit.id, indexStation]
+  );
+
+  const fetchDetails = useCallback(async () => {
+    let callAPI = API.UNIT.DEVICE_CONTROL(unit.id);
+    if (title === AUTOMATE_SELECT.SELECT_SENSOR) {
+      // TODO will update API later
+      callAPI = API.UNIT.DEVICE_CONTROL(unit.id);
+    }
+    await fetchWithCache(callAPI, {}, (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: '' }]));
+      }
+    });
+  }, [title, unit.id]);
+
+  useEffect(() => {
+    fetchDetails();
+  }, [fetchDetails]);
+
+  const onPressDevice = (sensor) => {
+    if (selectedDevice && selectedDevice.id === sensor.id) {
+      setSelectedDevice(false);
+    } else {
+      setSelectedDevice(sensor);
+    }
+  };
+
+  const onPressContinue = useCallback(() => {
+    navigate(Routes.SelectAction, {
+      unit,
+      device: selectedDevice,
+      automateId: automateId,
+      stationName: station[indexStation]?.name,
+      isScript,
+      type,
+      scriptName,
+    });
+  }, [
+    selectedDevice,
+    automateId,
+    station,
+    indexStation,
+    navigate,
+    unit,
+    type,
+    isScript,
+    scriptName,
+  ]);
+
+  const onClose = useCallback(() => {
+    isScript ? dispatch(popAction(2)) : alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isScript]);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose onClose={onClose} />
+
+      <ScrollView
+        style={styles.wrap}
+        contentContainerStyle={styles.contentContainerStyle}
+      >
+        <Text bold type="H2" style={styles.title}>
+          {t(title)}
+        </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 SelectSensorDevices;