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

package/src/screens/ScriptDetail/index.js

@@ -1,525 +0,0 @@
-import React, {
-  useCallback,
-  useMemo,
-  useState,
-  useRef,
-  useEffect,
-  memo,
-} from 'react';
-import { View, TouchableOpacity, Image } from 'react-native';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
-import { Icon } from '@ant-design/react-native';
-
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import styles from './Styles/indexStyles';
-import Text from '../../commons/Text';
-import AlertAction from '../../commons/AlertAction';
-import _TextInput from '../../commons/Form/TextInput';
-import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
-import { API, Colors, Images } from '../../configs';
-import { usePopover } from '../../hooks/Common';
-import { useStateAlertAction } from './hooks';
-import { useStarredScript } from './hooks/useStarredScript';
-import MenuActionMore from '../../commons/MenuActionMore';
-import Add from '../../../assets/images/Add.svg';
-import { useNavigation } from '@react-navigation/native';
-import {
-  axiosGet,
-  axiosPost,
-  axiosDelete,
-  axiosPatch,
-} from '../../utils/Apis/axios';
-import FImage from '../../commons/FImage';
-import Routes from '../../utils/Route';
-import { ToastBottomHelper } from '../../utils/Utils';
-import ItemAutomate from '../../commons/Automate/ItemAutomate';
-import withPreventDoubleClick from '../../commons/WithPreventDoubleClick';
-import {
-  AUTOMATE_SELECT,
-  AUTOMATE_TYPE,
-  STATE_VALUE_SENSOR_TYPES,
-} from '../../configs/Constants';
-import { popAction } from '../../navigations/utils';
-import { AccessibilityLabel } from '../../configs/Constants';
-import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
-import { REPEAT_OPTIONS } from '../SetSchedule/components/RepeatOptionsPopup';
-import { useSCContextSelector } from '../../context';
-
-const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
-
-const ScriptDetail = ({ route }) => {
-  const { navigate, goBack, dispatch } = useNavigation();
-  const { params = {} } = route;
-  const refMenuAction = useRef();
-  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
-    usePopover();
-  const t = useTranslations();
-  const {
-    id,
-    automate = {},
-    name = '',
-    type,
-    havePermission,
-    unit,
-    saveAt,
-    isCreateScriptSuccess,
-    isAutomateTab,
-    isCreateNewAction,
-    isMultiUnits,
-  } = params;
-  const [scriptName, setScriptName] = useState(name);
-  const [inputName, setInputName] = useState(name);
-  const [
-    stateAlertAction,
-    hideAlertAction,
-    onShowRename,
-    onShowActivityLog,
-    onShowDelete,
-  ] = useStateAlertAction();
-  const [data, setData] = useState([]);
-
-  const { isStarred, starScript, unstarScript } = useStarredScript(automate);
-  const popoverAnimating = useSCContextSelector(
-    (state) => state.app.popoverAnimating
-  );
-
-  const transY = useKeyboardAnimated();
-
-  const renameScript = useCallback(async () => {
-    const { success, data: script } = await axiosPatch(
-      API.AUTOMATE.SCRIPT(id),
-      {
-        name: inputName,
-      }
-    );
-    if (success) {
-      setScriptName(script.name);
-      ToastBottomHelper.success(t('rename_successfully'));
-    } else {
-      ToastBottomHelper.error(t('rename_failed'));
-    }
-    hideAlertAction();
-  }, [id, inputName, hideAlertAction, t]);
-
-  const deleteScript = useCallback(async () => {
-    hideAlertAction();
-    const { success } = await axiosDelete(API.AUTOMATE.SCRIPT(id));
-    if (success) {
-      if (isCreateScriptSuccess || isCreateNewAction) {
-        dispatch(popAction(5));
-        isAutomateTab && goBack();
-      } else {
-        goBack();
-      }
-      ToastBottomHelper.success(t('removed_successfully'));
-    } else {
-      ToastBottomHelper.error(t('remove_failed'));
-    }
-  }, [
-    hideAlertAction,
-    id,
-    isCreateScriptSuccess,
-    isCreateNewAction,
-    t,
-    dispatch,
-    isAutomateTab,
-    goBack,
-  ]);
-
-  const handleRenameOrDelete = useCallback(async () => {
-    if (stateAlertAction.isDelete) {
-      deleteScript();
-    } else {
-      renameScript();
-    }
-  }, [stateAlertAction.isDelete, deleteScript, renameScript]);
-
-  const onPressStar = useCallback(() => {
-    if (isStarred) {
-      unstarScript();
-    } else {
-      starScript();
-    }
-  }, [isStarred, starScript, unstarScript]);
-
-  const listMenuItem = useMemo(
-    () => [
-      { text: t('rename'), doAction: onShowRename(havePermission) },
-      {
-        text: isStarred ? t('remove_favorite') : t('add_favorite'),
-        doAction: isStarred ? unstarScript : starScript,
-      },
-      {
-        text: t('activity_log'),
-        doAction: onShowActivityLog(havePermission, id, type, unit),
-      },
-      {
-        text: t('delete_script'),
-        doAction: onShowDelete(scriptName, havePermission),
-      },
-    ],
-    [
-      t,
-      onShowRename,
-      havePermission,
-      onShowActivityLog,
-      id,
-      type,
-      unit,
-      onShowDelete,
-      scriptName,
-      isStarred,
-      starScript,
-      unstarScript,
-    ]
-  );
-
-  const handleShowMenuAction = useCallback(
-    () => showPopoverWithRef(refMenuAction),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  const onItemClick = useCallback((item) => {
-    item.doAction();
-  }, []);
-
-  const getScriptDetail = useCallback(async () => {
-    const { success, data: automateData } = await axiosGet(
-      API.AUTOMATE.SCRIPT(id)
-    );
-    success && setData(automateData?.script_actions || []);
-  }, [id]);
-
-  const onPressEdit = useCallback(() => {
-    navigate(Routes.EditActionsList, { data, id, setData, unit });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data]);
-
-  const onPressAddAction = useCallback(() => {
-    const navParams = {
-      unit,
-      scriptName,
-      automateId: id,
-      type,
-      oldType: type,
-      isCreateNewAction: true,
-      title: AUTOMATE_SELECT.SELECT_DEVICE,
-      automate,
-    };
-    navigate(
-      isMultiUnits ? Routes.SelectUnit : Routes.SelectSensorDevices,
-      navParams
-    );
-  }, [unit, scriptName, id, type, navigate, isMultiUnits, automate]);
-
-  const handleScriptAction = useCallback(async () => {
-    const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
-    if (success) {
-      ToastBottomHelper.success(t('Activated successfully.'));
-    } else {
-      ToastBottomHelper.error(t('Activation failed.'));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id]);
-
-  const handleUpdateAutomate = useCallback(async () => {
-    navigate(Routes.AddNewAutoSmart, {
-      type,
-      automate,
-      unit,
-      isAutomateTab,
-      isMultiUnits,
-      scriptName: name,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [name, automate]);
-
-  const onGoBack = useCallback(() => {
-    goBack();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isCreateScriptSuccess]);
-
-  const Item = useCallback(({ item, index }) => {
-    return (
-      <View style={styles.wrapItem}>
-        <View style={styles.leftItem}>
-          <Text color={Colors.Gray9} type="H4" semibold>
-            {index + 1 < 10 ? '0' + (index + 1) : index + 1}
-          </Text>
-        </View>
-        <View style={styles.rightItem}>
-          <FImage
-            source={{ uri: item?.sensor_icon_kit }}
-            style={styles.iconItem}
-          />
-          <View style={styles.contentItem}>
-            <View style={styles.titleItem}>
-              <Text
-                numberOfLines={1}
-                semibold
-                type="Label"
-                color={Colors.Gray7}
-                style={styles.paddingRight4}
-              >
-                {item?.unit_name}
-              </Text>
-              <Text
-                numberOfLines={1}
-                type="Label"
-                color={Colors.Gray7}
-                style={styles.flex1}
-              >
-                {item?.station_name}
-              </Text>
-            </View>
-            <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
-              {item?.sensor_name}
-            </Text>
-            <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
-              {item?.action_name}
-            </Text>
-          </View>
-        </View>
-      </View>
-    );
-  }, []);
-
-  const ItemAdd = useCallback(
-    ({ item, index }) => {
-      return (
-        <View style={styles.wrapItem}>
-          <View style={styles.leftItemAdd}>
-            <Text style={styles.number} type="H4" semibold color={Colors.Gray7}>
-              {index + 1 < 10 ? '0' + (index + 1) : index + 1}
-            </Text>
-          </View>
-          <TouchableOpacity
-            onPress={onPressAddAction}
-            style={[styles.rightItemAdd]}
-            accessibilityLabel={AccessibilityLabel.BUTTON_ADD_SCRIPT_ACTION}
-          >
-            <Add />
-            <Text type="H4" color={Colors.Gray8} style={styles.addAction}>
-              {t('add_action')}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      );
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [scriptName]
-  );
-
-  const renderButtonStar = useMemo(() => {
-    return (
-      <PreventDoubleTouch
-        style={[styles.buttonStar, styles.headerButton]}
-        onPress={onPressStar}
-        accessibilityLabel={AccessibilityLabel.HEADER_SCRIPT_DETAIL_BUTTON_STAR}
-      >
-        {isStarred ? (
-          <IconFill name="star" size={25} color={Colors.Yellow6} />
-        ) : (
-          <IconOutline name="star" size={25} />
-        )}
-      </PreventDoubleTouch>
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isStarred]);
-
-  const rightComponent = useMemo(
-    () => (
-      <View style={styles.rightComponent}>
-        {renderButtonStar}
-        <TouchableOpacity
-          onPress={handleShowMenuAction}
-          ref={refMenuAction}
-          style={[styles.headerButton, styles.moreButton]}
-        >
-          <Icon name={'more'} size={27} color={Colors.Black} />
-        </TouchableOpacity>
-      </View>
-    ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isStarred]
-  );
-
-  useEffect(() => {
-    setScriptName(name);
-  }, [name]);
-
-  useEffect(() => {
-    getScriptDetail();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, saveAt]);
-
-  const isHaveScriptActions = data?.length > 0;
-
-  const textCondition = useMemo(() => {
-    if (
-      [AUTOMATE_TYPE.VALUE_CHANGE, AUTOMATE_TYPE.EVENT_SENSOR].includes(type)
-    ) {
-      const { condition, config_name, value, sensor_type } =
-        automate?.value_change || automate?.event_sensor;
-      const stateConditionData = STATE_VALUE_SENSOR_TYPES.find(
-        (i) => i.type === sensor_type
-      );
-      const isNumberValue = !stateConditionData;
-
-      let text;
-      if (condition === '>') {
-        text = 'higher_than';
-      } else if (condition === '<') {
-        text = 'lower_than';
-      } else if (condition === '=') {
-        text = isNumberValue ? 'equal' : stateConditionData?.stateValue[value];
-      }
-      return `${config_name} ${t(text)} ${isNumberValue ? value : ''}`;
-    } else if (type === AUTOMATE_TYPE.SCHEDULE) {
-      const { repeat, time_repeat, date_repeat, weekday_repeat } =
-        automate?.schedule;
-      const time =
-        time_repeat?.length >= 8
-          ? time_repeat.substring(0, time_repeat?.length - 3)
-          : time_repeat;
-      const date = date_repeat?.split('-').reverse().join('/');
-      const weekday = {
-        1: t('mon'),
-        2: t('tue'),
-        3: t('wed'),
-        4: t('thu'),
-        5: t('fri'),
-        6: t('sat'),
-        0: t('sun'),
-      };
-
-      if (repeat === REPEAT_OPTIONS.ONCE) {
-        return `${time} ${date}`;
-      } else if (repeat === REPEAT_OPTIONS.EVERYDAY) {
-        return `${t('every_day_at', { time })}`;
-      } else if (repeat === REPEAT_OPTIONS.EVERYWEEK) {
-        //sort 0 is last number, exp: [1,3,5,0]
-        const newWeekdayRepeat = weekday_repeat.map((item) =>
-          parseInt(item, 10)
-        );
-        const sortWeekday = newWeekdayRepeat.sort((a, b) => {
-          if (a !== 0 && b === 0) {
-            return -1;
-          }
-          if (a === 0 && b !== 0) {
-            return 1;
-          }
-          return a - b;
-        });
-        const textWeekday = sortWeekday.map((item) => weekday[item]).join(', ');
-        return `${textWeekday} ${t('at')} ${time}`;
-      }
-    } else if (
-      [AUTOMATE_TYPE.EVENT, AUTOMATE_TYPE.EVENT_ACTION].includes(type)
-    ) {
-      const { action, end_device_name, config_name, sensor_type, value } =
-        automate?.event || automate?.event_action || automate?.event_sensor;
-      let textEvent = '';
-      if (config_name) {
-        const stateConditionData = STATE_VALUE_SENSOR_TYPES.find(
-          (i) => i.type === sensor_type
-        );
-        textEvent = `${config_name} - ${t(
-          stateConditionData.stateValue[value]
-        )}`;
-      } else {
-        textEvent = `${end_device_name} - ${action}`;
-      }
-      return textEvent;
-    }
-    return null;
-  }, [t, automate, type]);
-
-  return (
-    <View style={styles.wrap}>
-      <WrapHeaderScrollable
-        title={scriptName}
-        headerAniStyle={styles.headerAniStyle}
-        rightComponent={rightComponent}
-        onGoBack={onGoBack}
-      >
-        <View style={styles.wrapContent}>
-          <Text type="H3" semibold>
-            {t('how_to_start')}
-          </Text>
-          <ItemAutomate
-            type={type}
-            onPress={handleUpdateAutomate}
-            disabledOnPress={!havePermission}
-            textCondition={textCondition}
-          />
-          {type === AUTOMATE_TYPE.ONE_TAP && (
-            <TouchableOpacity
-              onPress={handleScriptAction}
-              style={styles.activeButton}
-              accessibilityLabel={AccessibilityLabel.BUTTON_ACTIVATE_ONE_TAP}
-            >
-              <Image source={Images.activeButton} />
-            </TouchableOpacity>
-          )}
-
-          <View style={styles.row}>
-            <Text type="H3" color={Colors.Gray9} semibold>
-              {t('active_list')}
-            </Text>
-            {havePermission && isHaveScriptActions && (
-              <TouchableOpacity
-                onPress={onPressEdit}
-                style={styles.editButton}
-                accessibilityLabel={
-                  AccessibilityLabel.BUTTON_EDIT_SCRIPT_ACTION
-                }
-              >
-                <Text type="Label" hilight>
-                  {t('edit')}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
-          {data.map((item, index) => (
-            <Item key={item?.id} item={item} index={index} />
-          ))}
-          {havePermission && <ItemAdd index={data.length} />}
-        </View>
-      </WrapHeaderScrollable>
-      <MenuActionMore
-        isVisible={showingPopover}
-        hideMore={hidePopover}
-        listMenuItem={listMenuItem}
-        childRef={childRef}
-        onItemClick={onItemClick}
-        isTextCenter={false}
-        wrapStyle={styles.wrapStyle}
-      />
-      <AlertAction
-        visible={stateAlertAction.visible && !popoverAnimating}
-        hideModal={hideAlertAction}
-        title={stateAlertAction.title}
-        message={stateAlertAction.message}
-        leftButtonTitle={stateAlertAction.leftButton}
-        leftButtonClick={hideAlertAction}
-        rightButtonTitle={stateAlertAction.rightButton}
-        rightButtonClick={handleRenameOrDelete}
-        rightButtonStyle={{ color: stateAlertAction.rightColor }}
-        transY={transY}
-      >
-        {!stateAlertAction.isDelete && havePermission && (
-          <_TextInput
-            onChange={(text) => setInputName(text)}
-            defaultValue={scriptName}
-            textInputStyle={styles.textInput}
-            maxLength={64}
-          />
-        )}
-      </AlertAction>
-    </View>
-  );
-};
-
-export default memo(ScriptDetail);