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

package/src/screens/ScriptDetail/Styles/indexStyles.js

@@ -0,0 +1,157 @@
+import { Colors } from '../../../configs';
+import { Platform, StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  wrapContent: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: getBottomSpace() + 10,
+  },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+  box: {
+    height: 76,
+    backgroundColor: Colors.White,
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 8,
+    marginTop: 16,
+    marginBottom: 24,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  wrapText: {
+    flex: 1,
+    marginLeft: 16,
+  },
+  rightComponent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerButton: {
+    marginRight: 20,
+  },
+  activeButton: {
+    marginTop: 16,
+    alignSelf: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 16,
+    marginBottom: 16,
+  },
+  editButton: {
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  moreButton: {
+    marginLeft: -5,
+  },
+  wrapStyle: {
+    borderRadius: 8,
+    borderBottomRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    width: 160,
+    marginTop: Platform.select({
+      android: -25,
+      ios: 0,
+    }),
+    marginLeft: -10,
+  },
+  wrapItem: {
+    flexDirection: 'row',
+    height: 100,
+    marginBottom: 16,
+  },
+  leftItem: {
+    width: 41,
+    height: '100%',
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+  },
+  leftItemAdd: {
+    width: 41,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+    borderStyle: 'dashed',
+    borderWidth: 2,
+  },
+  rightItem: {
+    flex: 1,
+    marginLeft: 4,
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+    borderWidth: 1,
+    flexDirection: 'row',
+    paddingVertical: 15,
+    paddingHorizontal: 16,
+  },
+  rightItemAdd: {
+    flex: 1,
+    marginLeft: 4,
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    borderStyle: 'dashed',
+    borderWidth: 2,
+  },
+  noBorder: {
+    borderWidth: 0,
+  },
+  iconItem: {
+    width: 40,
+    height: 40,
+    marginRight: 24,
+  },
+  contentItem: {
+    flex: 1,
+  },
+  addAction: {
+    marginLeft: 24,
+    marginTop: Platform.select({
+      android: 3,
+      ios: 0,
+    }),
+  },
+  number: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+  textInput: {
+    margin: 16,
+    marginTop: 0,
+    borderWidth: 0,
+    paddingLeft: 0,
+    paddingTop: 0,
+    borderBottomWidth: 2,
+    borderBottomColor: Colors.Primary,
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.Gray9,
+  },
+});

package/src/screens/ScriptDetail/__test__/index.test.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import axios from 'axios';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import ScriptDetail from '..';
+import MenuActionMore from '../../../commons/MenuActionMore';
+import AlertAction from '../../../commons/AlertAction';
+import _TextInput from '../../../commons/Form/TextInput';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
+import { API } from '../../../configs';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ScriptDetail route={route} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+const mockGoBack = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockGoBack,
+    }),
+  };
+});
+
+jest.mock('axios');
+
+describe('Test ScriptDetail', () => {
+  let route;
+  let tree;
+
+  beforeEach(() => {
+    axios.patch.mockClear();
+    axios.delete.mockClear();
+    mockGoBack.mockClear();
+    route = {
+      params: {
+        id: 1,
+        name: 'script',
+        unit: 2,
+        type: AUTOMATE_TYPE.ONE_TAP,
+        havePermission: true,
+      },
+    };
+  });
+
+  test('test rename script', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const menu = instance.findByType(MenuActionMore);
+    const alertAction = instance.findByType(AlertAction);
+    const rename = menu.props.listMenuItem[0];
+
+    await act(async () => {
+      await menu.props.onItemClick(rename);
+    });
+    expect(alertAction.props.visible).toBeTruthy();
+
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      textInput.props.onChange('new_name');
+    });
+
+    const response = {
+      status: 200,
+      data: {
+        name: 'new_name',
+      },
+    };
+    axios.patch.mockImplementation(async () => {
+      return response;
+    });
+    await act(async () => {
+      await alertAction.props.rightButtonClick();
+    });
+    expect(axios.patch).toHaveBeenCalledWith(API.AUTOMATE.SCRIPT(1), {
+      name: 'new_name',
+    });
+    expect(alertAction.props.visible).toBeFalsy();
+  });
+
+  test('test delete script', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const menu = instance.findByType(MenuActionMore);
+    const alertAction = instance.findByType(AlertAction);
+    const deleteItem = menu.props.listMenuItem[2];
+
+    await act(async () => {
+      await menu.props.onItemClick(deleteItem);
+    });
+    expect(alertAction.props.visible).toBeTruthy();
+
+    const response = { status: 204 };
+    axios.delete.mockImplementation(async () => {
+      return response;
+    });
+    await act(async () => {
+      await alertAction.props.rightButtonClick();
+    });
+    expect(axios.delete).toHaveBeenCalledWith(API.AUTOMATE.SCRIPT(1));
+    expect(alertAction.props.visible).toBeFalsy();
+    expect(mockGoBack).toHaveBeenCalled();
+  });
+});

package/src/screens/ScriptDetail/hooks/index.js

@@ -0,0 +1,55 @@
+import { useState, useCallback } from 'react';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const useStateAlertAction = () => {
+  const t = useTranslations();
+  const [stateAlertAction, setStateAlertAction] = useState({
+    visible: false,
+    title: '',
+    message: '',
+    leftButton: t('cancel'),
+    rightButton: '',
+    isDelete: true,
+  });
+  const hideAlertAction = useCallback(() => {
+    setStateAlertAction({ ...stateAlertAction, visible: false });
+  }, [stateAlertAction]);
+
+  const onShowRename = useCallback(() => {
+    setStateAlertAction((action) => {
+      return {
+        ...action,
+        visible: true,
+        title: t('rename_automate'),
+        message: '',
+        leftButton: t('cancel'),
+        rightButton: t('rename'),
+        isDelete: false,
+      };
+    });
+  }, [t]);
+
+  const onShowDelete = useCallback(
+    (scriptName) => () => {
+      setStateAlertAction((action) => {
+        return {
+          ...action,
+          visible: true,
+          title: t('title_delete_script', {
+            scriptName: scriptName,
+          }),
+          message: t('message_delete_script', {
+            scriptName: scriptName,
+          }),
+          leftButton: t('cancel'),
+          rightButton: t('remove'),
+          isDelete: true,
+        };
+      });
+    },
+    [t]
+  );
+
+  return [stateAlertAction, hideAlertAction, onShowRename, onShowDelete];
+};
+export { useStateAlertAction };

package/src/screens/ScriptDetail/index.js

@@ -0,0 +1,344 @@
+import React, {
+  useCallback,
+  useMemo,
+  useState,
+  useRef,
+  useEffect,
+  memo,
+} from 'react';
+import {
+  View,
+  TouchableOpacity,
+  Image,
+  BackHandler,
+  Alert,
+} 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 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 { AUTOMATE_TYPE } from '../../configs/Constants';
+import { popAction } from '../../navigations/utils';
+
+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,
+    name = '',
+    type,
+    havePermission,
+    unit,
+    dateNow = null,
+    isCreateScriptSuccess,
+  } = params;
+  const [isFavourite, setIsFavourite] = useState(false);
+  const [scriptName, setScriptName] = useState(name);
+  const [inputName, setInputName] = useState(name);
+  const [stateAlertAction, hideAlertAction, onShowRename, onShowDelete] =
+    useStateAlertAction();
+  const [data, setData] = useState([]);
+
+  const renameScript = useCallback(async () => {
+    const { success, data: script } = await axiosPatch(
+      API.AUTOMATE.SCRIPT(id),
+      {
+        name: inputName,
+      }
+    );
+    if (success) {
+      setScriptName(script.name);
+    }
+    hideAlertAction();
+  }, [id, inputName, hideAlertAction]);
+
+  const deleteScript = useCallback(async () => {
+    hideAlertAction();
+    const { success } = await axiosDelete(API.AUTOMATE.SCRIPT(id));
+    success && goBack();
+  }, [id, goBack, hideAlertAction]);
+
+  const handleRenameOrDelete = useCallback(async () => {
+    if (stateAlertAction.isDelete) {
+      deleteScript();
+    } else {
+      renameScript();
+    }
+  }, [stateAlertAction.isDelete, deleteScript, renameScript]);
+
+  const listMenuItem = useMemo(
+    () => [
+      { text: t('rename'), doAction: onShowRename },
+      { text: t('activity_log'), doAction: null },
+      { text: t('delete_script'), doAction: onShowDelete(scriptName) },
+    ],
+    [t, onShowRename, onShowDelete, scriptName]
+  );
+
+  const onPressFavourite = useCallback(() => {
+    setIsFavourite(!isFavourite);
+  }, [isFavourite]);
+
+  const handleShowMenuAction = useCallback(
+    () => showPopoverWithRef(refMenuAction),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onItemClick = useCallback(
+    (item) => {
+      if (item.doAction) {
+        item.doAction();
+      } else {
+        alert(t('feature_under_development'));
+      }
+    },
+    [t]
+  );
+
+  const onPressAdd = useCallback(() => {
+    // eslint-disable-next-line no-alert
+    alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getOneTapDetail = useCallback(async () => {
+    const { success, data } = await axiosGet(API.AUTOMATE.SCRIPT(id));
+    success && setData(data?.script_actions || []);
+  }, [id]);
+
+  const onPressEdit = useCallback(() => {
+    navigate(Routes.EditActionsList, { data, id, setData });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const onPressAddAction = useCallback(() => {
+    navigate(Routes.SelectSensorDevices, {
+      unit,
+      automateId: id,
+      scriptName: name,
+      isScript: false,
+      type: AUTOMATE_TYPE.ONE_TAP,
+    });
+  }, [navigate, id, name, unit]);
+
+  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 onGoBack = useCallback(() => {
+    if (isCreateScriptSuccess) {
+      dispatch(popAction(5));
+    } else {
+      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}>
+            <Text numberOfLines={1} type="Label" color={Colors.Gray7}>
+              {item?.station_name}
+            </Text>
+            <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]}
+        >
+          <Add />
+          <Text type="H4" color={Colors.Gray8} style={styles.addAction}>
+            {t('add_action')}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const renderButtonStar = useMemo(() => {
+    return (
+      <TouchableOpacity
+        style={[styles.buttonStar, styles.headerButton]}
+        onPress={onPressFavourite}
+      >
+        {isFavourite ? (
+          <IconFill name="star" size={25} color={Colors.Yellow6} />
+        ) : (
+          <IconOutline name="star" size={25} />
+        )}
+      </TouchableOpacity>
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFavourite]);
+
+  const rightComponent = useMemo(
+    () => (
+      <View style={styles.rightComponent}>
+        {renderButtonStar}
+        <TouchableOpacity onPress={onPressAdd} style={styles.headerButton}>
+          <Icon name={'plus'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+        <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
+    [isFavourite]
+  );
+
+  useEffect(() => {
+    getOneTapDetail();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, dateNow]); // TODO will remove dateNow later
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => isCreateScriptSuccess
+    );
+    return () => backHandler.remove();
+  }, [isCreateScriptSuccess]);
+
+  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={() => Alert.alert(t('feature_under_development'))}
+            disabledOnPress={!havePermission}
+          />
+          {type === AUTOMATE_TYPE.ONE_TAP && (
+            <TouchableOpacity
+              onPress={handleScriptAction}
+              style={styles.activeButton}
+            >
+              <Image source={Images.activeButton} />
+            </TouchableOpacity>
+          )}
+
+          <View style={styles.row}>
+            <Text type="H3" color={Colors.Gray9} semibold>
+              {t('active_list')}
+            </Text>
+            {havePermission && (
+              <TouchableOpacity onPress={onPressEdit} style={styles.editButton}>
+                <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}
+        hideModal={hideAlertAction}
+        title={stateAlertAction.title}
+        message={stateAlertAction.message}
+        leftButtonTitle={stateAlertAction.leftButton}
+        leftButtonClick={hideAlertAction}
+        rightButtonTitle={stateAlertAction.rightButton}
+        rightButtonClick={handleRenameOrDelete}
+      >
+        {!stateAlertAction.isDelete && (
+          <_TextInput
+            onChange={(text) => setInputName(text)}
+            defaultValue={scriptName}
+            textInputStyle={styles.textInput}
+          />
+        )}
+      </AlertAction>
+    </View>
+  );
+};
+
+export default memo(ScriptDetail);