@eohjsc/react-native-smart-city 0.3.90 → 0.3.92

package/src/screens/AddNewAction/SelectAction.js

@@ -1,570 +0,0 @@
-import React, { memo, useCallback, useEffect, useState, useMemo } from 'react';
-import { Alert, 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 NumberUpDownActionTemplate from '../../commons/OneTapTemplate/NumberUpDownActionTemplate';
-import OptionsDropdownActionTemplate from '../../commons/OneTapTemplate/OptionsDropdownActionTemplate';
-import StatesGridActionTemplate from '../../commons/OneTapTemplate/StatesGridActionTemplate';
-import { axiosGet, axiosPost, axiosPut } from '../../utils/Apis/axios';
-import { API, Images } from '../../configs';
-import {
-  CONDITION_TYPES,
-  STATE_VALUE_SENSOR_TYPES,
-  AccessibilityLabel,
-  AUTOMATE_TYPE,
-} 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';
-import { notImplemented, ToastBottomHelper } from '../../utils/Utils';
-
-const SelectAction = memo(({ route }) => {
-  const t = useTranslations();
-  const { navigate, dispatch, goBack } = useNavigation();
-  const {
-    unit,
-    device,
-    automateId,
-    automate = {},
-    scriptName,
-    isSelectSensor = false,
-    type,
-    isAutomateTab,
-    isCreateNewAction,
-    isMultiUnits,
-    oldType,
-    isSetupEvent,
-  } = route?.params || {};
-  const [data, setData] = useState([]);
-  const [actions, setActions] = useState([]);
-  const [sensorData, setSensorData] = useState([]);
-  const [checkedItem, setCheckedItem] = useState({});
-  const [isLoading, setIsLoading] = useState(false);
-  const [isfetched, setIsfetched] = useState(true);
-
-  const fetchData = useCallback(async () => {
-    isSelectSensor && setIsLoading(true);
-    setIsfetched(true);
-    const { success, data: automateData } = await axiosGet(
-      isSelectSensor
-        ? API.AUTOMATE.GET_SENSOR_CONFIG(device.id)
-        : isSetupEvent
-        ? API.DEVICE.DISPLAY_EVENTS(device.id)
-        : API.DEVICE.DISPLAY_ACTIONS(device.id),
-      isSelectSensor && {},
-      isSelectSensor && true
-    );
-    if (success) {
-      if (isSelectSensor) {
-        if (automate?.config_id) {
-          const conditionType = [
-            {
-              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: '>',
-            },
-          ];
-          const condition = conditionType.find((item) => {
-            return item.conditionValue === automate.condition;
-          });
-          const updateSensorData = automateData.map((obj) =>
-            obj.id === automate.config_id
-              ? { ...obj, value: automate.value, ...condition }
-              : obj
-          );
-          let selectSensor = automateData.find((config) => {
-            return config.id === automate.config_id;
-          });
-          setSensorData(updateSensorData);
-          setCheckedItem(selectSensor);
-        } else {
-          setSensorData(automateData);
-        }
-      } else {
-        if (isSetupEvent) {
-          setData(automateData?.actions);
-          setSensorData(automateData?.config_events);
-        } else {
-          setData(automateData);
-        }
-      }
-    }
-    setIsfetched(false);
-    const to = setTimeout(() => {
-      setIsLoading(false);
-      clearTimeout(to);
-    }, 1000);
-  }, [
-    automate.condition,
-    automate.config_id,
-    automate.value,
-    device.id,
-    isSelectSensor,
-    isSetupEvent,
-    t,
-  ]);
-
-  const checkConditionToContinue = useCallback(() => {
-    const itemTemp = sensorData?.find((i) => i.id === checkedItem?.id);
-    if (itemTemp?.value) {
-      navigate(Routes.AddNewOneTap, {
-        automateData: {
-          condition: itemTemp?.conditionValue || '<',
-          value: itemTemp?.value,
-          config: itemTemp?.id,
-        },
-        type: isSetupEvent ? AUTOMATE_TYPE.EVENT_SENSOR : type,
-        unit,
-        isAutomateTab,
-        isSelectSensor,
-        isMultiUnits,
-        automateId,
-        automate: {
-          ...automate,
-          condition: itemTemp?.conditionValue || '<',
-          value: itemTemp?.value,
-          config_id: itemTemp?.id,
-          config_name: itemTemp?.name,
-          sensor_type: itemTemp?.sensor_type,
-        },
-        scriptName,
-      });
-    } else {
-      ToastBottomHelper.error(t('please_choose_condition_before_continue'));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    sensorData,
-    navigate,
-    type,
-    unit,
-    isSelectSensor,
-    automateId,
-    scriptName,
-    checkedItem,
-    t,
-  ]);
-  const onSave = useCallback(async () => {
-    if (actions.length && !!checkedItem.id) {
-      Alert.alert('', t('choose_only_one'));
-      return;
-    }
-    if (isSelectSensor || sensorData?.length > 0) {
-      await checkConditionToContinue();
-    } else {
-      if (automateId) {
-        let result = false;
-        let data_automate;
-        if (isCreateNewAction) {
-          let list_action = [...actions];
-          list_action = list_action.map((item) => ({
-            action: item.action,
-            data: item.data,
-          }));
-          const { success } = await axiosPost(
-            API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
-            {
-              list_action,
-              unit: unit.id,
-            }
-          );
-          result = success;
-          data_automate = automate;
-        } else {
-          const params = {
-            unit: isMultiUnits ? null : unit.id,
-            type: type,
-            name: scriptName,
-            action: actions[0].action,
-          };
-          const { success } = await axiosPut(
-            API.AUTOMATE.UPDATE_AUTOMATE(automateId),
-            params
-          );
-          result = success;
-          data_automate = {
-            ...automate,
-            event: {
-              end_device_name: device?.name,
-              action: actions[0]?.action_name,
-            },
-          };
-        }
-        result &&
-          navigate(Routes.ScriptDetail, {
-            id: automateId,
-            name: scriptName,
-            havePermission: true,
-            unit,
-            saveAt: moment().valueOf(),
-            type: type,
-            isAutomateTab,
-            isCreateNewAction,
-            isMultiUnits,
-            automate: data_automate,
-          });
-      } else {
-        navigate(Routes.AddNewOneTap, {
-          automateData: {
-            action: actions[0].action,
-          },
-          type: AUTOMATE_TYPE.EVENT_ACTION,
-          unit,
-          isAutomateTab,
-          isSelectSensor,
-          isMultiUnits,
-          automateId,
-          automate: {
-            ...automate,
-            action: actions[0].action,
-          },
-          scriptName,
-        });
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    actions,
-    automateId,
-    navigate,
-    scriptName,
-    type,
-    unit,
-    isSelectSensor,
-    checkedItem,
-    sensorData,
-    isCreateNewAction,
-  ]);
-
-  const handleOnSelectAction = (action) => {
-    let newActions = [...actions];
-    let index = -1;
-
-    switch (action.template) {
-      case 'on_off_button_action_template':
-      case 'one_button_action_template':
-      case 'three_button_action_template':
-      case 'OnOffSimpleActionTemplate':
-      case 'curtain_action_template':
-      case 'OnOffSmartLockActionTemplate':
-        index = newActions.findIndex((item) => {
-          return (
-            item.template === 'on_off_button_action_template' ||
-            item.template === 'one_button_action_template' ||
-            item.template === 'three_button_action_template' ||
-            item.template === 'OnOffSimpleActionTemplate' ||
-            item.template === 'curtain_action_template' ||
-            item.template === 'OnOffSmartLockActionTemplate'
-          );
-        });
-        break;
-
-      case 'StatesGridActionTemplate':
-        index = newActions.findIndex(
-          (item) => item.template === action.template
-        );
-        break;
-      case 'OptionsDropdownActionTemplate':
-      case 'NumberUpDownActionTemplate':
-        index = newActions.findIndex((item) => item.action === action.action);
-        break;
-    }
-
-    if (index < 0) {
-      newActions.push(action);
-    } else {
-      newActions[index] = action;
-    }
-    setActions(newActions);
-  };
-
-  const handleClose = useCallback(() => {
-    if (automateId) {
-      navigate(Routes.ScriptDetail, {
-        id: automateId,
-        name: scriptName,
-        type: oldType,
-        havePermission: true,
-        unit,
-        isMultiUnits,
-        isCreateNewAction,
-        isAutomateTab,
-      });
-    } else if (isCreateNewAction) {
-      dispatch(popAction(2));
-    } else if (isSelectSensor) {
-      dispatch(popAction(3));
-      isAutomateTab && goBack();
-    } else {
-      notImplemented(t);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [route.params]);
-
-  const onChecked = useCallback(
-    (_, isChecked, id) => {
-      setCheckedItem(isChecked ? sensorData.find((i) => i?.id === id) : {});
-    },
-    [sensorData]
-  );
-
-  const onPressItem = (item) => () => {
-    navigate(Routes.SetUpSensor, {
-      item,
-      sensorData,
-      setSensorData,
-      isAutomateTab,
-    });
-  };
-
-  const RenderCondition = useCallback(
-    (item) => {
-      const stateConditionData = STATE_VALUE_SENSOR_TYPES.find(
-        (i) => i.type === item?.sensor_type
-      );
-      const isNumberValue = !stateConditionData;
-
-      if (isNumberValue) {
-        return `${item?.name} ${item.title || t('is_below') + ' (<)'} ${
-          item?.value
-        } ${item?.unit || ''}`;
-      }
-      return t(stateConditionData?.stateValue[item?.value]);
-    },
-    [t]
-  );
-
-  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
-    [route.params]
-  );
-
-  const renderBottomButtonView = useMemo(
-    () => (
-      <BottomButtonView
-        style={styles.bottomButtonView}
-        mainTitle={t(automateId ? 'save' : 'continue')}
-        onPressMain={onSave}
-        typeMain={
-          actions.length > 0 || !!checkedItem?.id ? 'primary' : 'disabled'
-        }
-      />
-    ),
-    [t, automateId, onSave, actions.length, checkedItem?.id]
-  );
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
-  return (
-    <View style={styles.wrap}>
-      <WrapHeaderScrollable
-        title={t('set_up {name}', { name: device?.name })}
-        headerAniStyle={styles.headerAniStyle}
-        rightComponent={rightComponent}
-      >
-        {isSelectSensor ? (
-          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
-                        ? RenderCondition(item)
-                        : `${t('no')} ${t('condition')}`}
-                    </Text>
-                    {isHasValue && (
-                      <Image
-                        source={Images.arrowBack}
-                        style={styles.arrowRight}
-                      />
-                    )}
-                  </TouchableOpacity>
-                </View>
-              );
-            })
-          )
-        ) : (
-          <View>
-            <RenderActionItem
-              data={data}
-              device={device}
-              onSelectAction={handleOnSelectAction}
-              accessibilityLabel={AccessibilityLabel.ACTION_ITEM}
-            />
-            {/* TODO: Nhat - refactor/combine with value_change case */}
-            {!!sensorData &&
-              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
-                          ? RenderCondition(item)
-                          : `${t('no')} ${t('condition')}`}
-                      </Text>
-                      {isHasValue && (
-                        <Image
-                          source={Images.arrowBack}
-                          style={styles.arrowRight}
-                        />
-                      )}
-                    </TouchableOpacity>
-                  </View>
-                );
-              })}
-          </View>
-        )}
-        {data?.length === 0 && sensorData?.length === 0 && !isfetched && (
-          <View style={styles.noneData}>
-            <Text center>
-              {t('you_do_not_have_the_device_or_have_share_control_device')}
-            </Text>
-          </View>
-        )}
-      </WrapHeaderScrollable>
-      {renderBottomButtonView}
-    </View>
-  );
-});
-
-const RenderActionItem = ({ device, data, onSelectAction }) => {
-  const actionTemplate = [];
-  const optionsDropdownActionTemplates = [];
-  const numberUpDownActionTemplates = [];
-  const statesGridActionTemplates = [];
-
-  data?.forEach((item) => {
-    switch (item.template) {
-      case 'on_off_button_action_template':
-      case 'one_button_action_template':
-      case 'three_button_action_template':
-      case 'OnOffSimpleActionTemplate':
-      case 'curtain_action_template':
-      case 'OnOffSmartLockActionTemplate':
-        actionTemplate.push(item);
-        break;
-      case 'OptionsDropdownActionTemplate':
-        optionsDropdownActionTemplates.push(item);
-        break;
-      case 'NumberUpDownActionTemplate':
-        numberUpDownActionTemplates.push(item);
-        break;
-      case 'StatesGridActionTemplate':
-        statesGridActionTemplates.push(item);
-        break;
-    }
-  });
-
-  const handleOnSelectAction = (action) => {
-    onSelectAction && onSelectAction(action);
-  };
-
-  return (
-    <>
-      {actionTemplate.length > 0 && (
-        <ActionTemplate
-          device={device}
-          data={actionTemplate}
-          onSelectAction={handleOnSelectAction}
-        />
-      )}
-      {numberUpDownActionTemplates.map((item) => (
-        <NumberUpDownActionTemplate
-          key={item.id}
-          device={device}
-          data={item}
-          onSelectAction={handleOnSelectAction}
-        />
-      ))}
-
-      {optionsDropdownActionTemplates.map((item) => (
-        <OptionsDropdownActionTemplate
-          key={item.id}
-          device={device}
-          data={item}
-          onSelectAction={handleOnSelectAction}
-        />
-      ))}
-      {statesGridActionTemplates.map((item) => (
-        <StatesGridActionTemplate
-          key={item.id}
-          device={device}
-          data={item}
-          onSelectAction={handleOnSelectAction}
-        />
-      ))}
-    </>
-  );
-};
-
-export default SelectAction;