@eohjsc/react-native-smart-city 0.3.89 → 0.3.91

package/src/screens/AddNewAction/SelectSensorDevices.js

@@ -1,236 +0,0 @@
-import React, { memo, useState, useEffect, useCallback, useMemo } from 'react';
-import { ScrollView, TouchableOpacity, 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, Colors } 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, AccessibilityLabel } from '../../configs/Constants';
-import { popAction } from '../../navigations/utils';
-import { Icon } from '@ant-design/react-native';
-
-const SelectSensorDevices = memo(({ route }) => {
-  const t = useTranslations();
-  const {
-    unit,
-    automateId,
-    automate = {},
-    title = AUTOMATE_SELECT.SELECT_DEVICE,
-    type,
-    scriptName,
-    isAutomateTab,
-    isCreateNewAction,
-    isMultiUnits,
-    oldType,
-    isSetupEvent,
-  } = 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, goBack } = useNavigation();
-  const isSelectSensor = title === AUTOMATE_SELECT.SELECT_SENSOR;
-  const [loading, setLoading] = useState(true);
-
-  const onSnapToItem = useCallback(
-    (item, index) => {
-      setIndexStation(index);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [unit.id, indexStation]
-  );
-
-  const fetchDetails = useCallback(async () => {
-    await fetchWithCache(
-      isSelectSensor
-        ? API.UNIT.DEVICE_SENSOR(unit.id)
-        : API.UNIT.DEVICE_CONTROL(unit.id),
-      {},
-      (response) => {
-        const { success, data } = response;
-        if (success) {
-          const newData = data.filter((item) => item.sensors.length > 0);
-          const listMenu = newData.map((item, index) => ({
-            text: item.name,
-            station: item,
-            index: index,
-          }));
-          if (isSelectSensor) {
-            if (automate.sensor_id) {
-              let selectSensor = {};
-              newData.map((item) => {
-                item.sensors.map((sensor) => {
-                  if (sensor.id === automate.sensor_id) {
-                    selectSensor = sensor;
-                    return;
-                  } else if (selectSensor) {
-                    return;
-                  }
-                });
-              });
-              setSelectedDevice(selectSensor);
-            }
-          }
-          setStation(newData);
-          setListMenuItem(listMenu);
-          setListStation(listMenu);
-        }
-      }
-    );
-    setLoading(false);
-  }, [automate.sensor_id, isSelectSensor, unit]);
-
-  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,
-      automate: {
-        ...automate,
-        sensor_id: selectedDevice?.id ? selectedDevice.id : automate.sensor_id,
-      },
-      stationName: station[indexStation]?.name,
-      isSelectSensor,
-      type,
-      scriptName,
-      isAutomateTab,
-      isCreateNewAction,
-      isMultiUnits,
-      oldType,
-      isSetupEvent,
-    });
-  }, [
-    navigate,
-    unit,
-    selectedDevice,
-    automateId,
-    automate,
-    station,
-    indexStation,
-    isSelectSensor,
-    type,
-    scriptName,
-    isAutomateTab,
-    isCreateNewAction,
-    isMultiUnits,
-    oldType,
-    isSetupEvent,
-  ]);
-
-  const onPressClose = useCallback(() => {
-    if (automateId) {
-      navigate(Routes.ScriptDetail, {
-        id: automateId,
-        name: scriptName,
-        type: oldType,
-        havePermission: true,
-        unit,
-        isMultiUnits,
-        isCreateNewAction,
-        isAutomateTab,
-      });
-    } else {
-      dispatch(popAction(2));
-      isAutomateTab && goBack();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [route.params]);
-
-  const rightComponent = useMemo(
-    () => (
-      <TouchableOpacity
-        style={styles.buttonClose}
-        onPress={onPressClose}
-        accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
-      >
-        <Icon name={'close'} size={24} color={Colors.Black} />
-      </TouchableOpacity>
-    ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [route.params]
-  );
-  if (loading) {
-    return null;
-  }
-
-  return (
-    <View style={styles.wrap}>
-      <HeaderCustom rightComponent={rightComponent} />
-
-      <ScrollView
-        style={styles.wrap}
-        contentContainerStyle={styles.contentContainerStyle}
-        scrollIndicatorInsets={{ right: 1 }}
-      >
-        <Text bold type="H2" style={styles.title}>
-          {t(title)}
-        </Text>
-
-        {listStation.length ? (
-          <NavBar
-            listStation={listStation}
-            listMenuItem={listMenuItem}
-            onSnapToItem={onSnapToItem}
-            indexStation={indexStation}
-            style={styles.navbar}
-          />
-        ) : (
-          <View style={styles.noneData}>
-            <Text center>
-              {t('you_do_not_have_the_device_or_have_share_control_device')}
-            </Text>
-          </View>
-        )}
-
-        <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={
-          Object.keys(selectedDevice || {}).length === 0
-            ? 'disabled'
-            : 'primary'
-        }
-      />
-    </View>
-  );
-});
-
-export default SelectSensorDevices;

package/src/screens/AddNewAction/SetupSensor.js

@@ -1,263 +0,0 @@
-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';
-import {
-  CONDITION_TYPES,
-  STATE_VALUE_SENSOR_TYPES,
-} from '../../configs/Constants';
-
-const SetUpSensor = () => {
-  const t = useTranslations();
-
-  const modalNumberConditionData = 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, isAutomateTab } = params;
-
-  const modalStateConditionData = useMemo(() => {
-    return STATE_VALUE_SENSOR_TYPES.find((i) => i.type === item?.sensor_type);
-  }, [item?.sensor_type]);
-
-  const isHasLimit = useMemo(() => !!item?.range_max, [item]);
-  const [isShowModal, setIsShowModal] = useState(false);
-  const [itemActiveModal, setItemActiveModal] = useState(
-    modalNumberConditionData[0]
-  );
-  const [itemActiveStateModal, setItemActiveStateModal] = useState(
-    modalStateConditionData?.stateValue[1]
-  );
-  const [value, setValue] = useState(parseFloat(item?.value || 0));
-  const [minimum] = useState(isHasLimit ? parseInt(item?.range_min, 10) : 0);
-  const [maximum, setMaximum] = useState(
-    value === 0
-      ? 100
-      : isHasLimit
-      ? (parseInt(item?.range_max, 10) - minimum) * 10 + minimum
-      : (parseInt(item?.value, 10) + 20 - minimum) * 10 + minimum
-  );
-
-  const isNumberValue = useMemo(() => {
-    return !(modalStateConditionData?.type === item?.sensor_type);
-  }, [item?.sensor_type, modalStateConditionData?.type]);
-
-  const onOpenModal = useCallback(() => {
-    setIsShowModal(true);
-  }, []);
-
-  const onCloseModal = useCallback(() => {
-    setIsShowModal(false);
-  }, []);
-
-  const onChooseCondition = (selectedItem) => () => {
-    if (isNumberValue) {
-      setItemActiveModal(selectedItem);
-    } else {
-      setItemActiveStateModal(selectedItem);
-      setItemActiveModal(modalNumberConditionData[1]);
-      setValue(modalStateConditionData?.stateValue[0] === selectedItem ? 0 : 1);
-    }
-    onCloseModal();
-  };
-
-  useEffect(() => {
-    if (!isNumberValue) {
-      setItemActiveModal(modalNumberConditionData[1]);
-    }
-  }, [isNumberValue, modalNumberConditionData]);
-
-  const handleClose = useCallback(() => {
-    dispatch(popAction(4));
-    isAutomateTab && goBack();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onChangeValue = useCallback(
-    (newValue) => {
-      setValue(
-        (parseFloat(newValue / 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(() => {
-    !isNumberValue && setValue(1);
-  }, [isNumberValue]);
-
-  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 = modalNumberConditionData.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}>
-            {isNumberValue
-              ? `${item?.name} ${itemActiveModal.title}`
-              : t(itemActiveStateModal)}
-          </Text>
-          <Image source={Images.arrowBack} style={styles.arrowRight} />
-        </TouchableOpacity>
-        {isNumberValue && (
-          <>
-            <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}>
-          {(isNumberValue
-            ? modalNumberConditionData
-            : /* Huy Disable picking not_active/not_detect option -> temporally remove not_active option */
-              modalStateConditionData?.stateValue.slice(1)
-          ).map((i, index) => (
-            <React.Fragment key={index}>
-              <TouchableOpacity
-                onPress={onChooseCondition(i)}
-                key={index}
-                style={styles.itemModal}
-              >
-                <Text type="H4">
-                  {isNumberValue ? `${item?.name} ${i.title}` : t(i)}
-                </Text>
-              </TouchableOpacity>
-              {index !== modalNumberConditionData.length - 1 && (
-                <View style={styles.separated} />
-              )}
-            </React.Fragment>
-          ))}
-        </View>
-      </ModalCustom>
-    </View>
-  );
-};
-
-export default SetUpSensor;