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

package/src/screens/{EditActionsList → Automate/EditActionsList}/index.js

@@ -4,18 +4,18 @@ import DraggableFlatList from 'react-native-draggable-flatlist';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import ParsedText from 'react-native-parsed-text';
 
-import { HeaderCustom } from '../../commons/Header';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import Text from '../../commons/Text';
+import { HeaderCustom } from '../../../commons/Header';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Text from '../../../commons/Text';
 import styles from './Styles/indexStyles';
-import { API, Colors } from '../../configs';
-import FImage from '../../commons/FImage';
-import Rearrange from '../../../assets/images/Rearrange.svg';
-import Close from '../../../assets/images/Close.svg';
-import { axiosDelete, axiosPut } from '../../utils/Apis/axios';
-import { ModalBottom } from '../../commons/Modal';
-import { ToastBottomHelper } from '../../utils/Utils';
-import { AccessibilityLabel } from '../../configs/Constants';
+import { API, Colors } from '../../../configs';
+import FImage from '../../../commons/FImage';
+import Rearrange from '../../../../assets/images/Rearrange.svg';
+import Close from '../../../../assets/images/Close.svg';
+import { axiosDelete, axiosPut } from '../../../utils/Apis/axios';
+import { ModalBottom } from '../../../commons/Modal';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 const EditActionsList = memo(() => {
   const t = useTranslations();
@@ -37,11 +37,6 @@ const EditActionsList = memo(() => {
     })
   );
 
-  const onPressCancel = useCallback(() => {
-    goBack();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const onPressSave = useCallback(async () => {
     const { success } = await axiosPut(API.AUTOMATE.ORDER_SCRIPT_ACTION(id), {
       id_script_actions: actionsList.map((i) => i.id),
@@ -79,9 +74,13 @@ const EditActionsList = memo(() => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, itemRemove, actionsList]);
 
-  const renderItem = useCallback(({ item, index, drag }) => {
+  const renderItem = useCallback(({ item, index, drag, isActive }) => {
     return (
-      <TouchableOpacity style={styles.wrapItem} onLongPress={drag}>
+      <TouchableOpacity
+        style={[styles.wrapItem, isActive ? styles.isDragging : {}]}
+        onPressIn={drag}
+        disabled={isActive}
+      >
         <View style={styles.leftItem}>
           <Text color={Colors.Gray9} type="H4" semibold>
             {index + 1 < 10 ? '0' + (index + 1) : index + 1}
@@ -153,7 +152,7 @@ const EditActionsList = memo(() => {
       </View>
       <View style={styles.wrapBottom}>
         <TouchableOpacity
-          onPress={onPressCancel}
+          onPress={goBack}
           accessibilityLabel={AccessibilityLabel.BUTTON_CANCEL_EDIT_ACTION_LIST}
         >
           <Text type="H4" hilight semibold>

package/src/screens/Automate/MultiUnits.js

@@ -1,9 +1,9 @@
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
 import {
-  useRoute,
-  useNavigation,
   useIsFocused,
+  useNavigation,
+  useRoute,
 } from '@react-navigation/native';
 import { useSCContextSelector } from '../../context';
 
@@ -13,26 +13,26 @@ import { axiosGet, fetchWithCache } from '../../utils/Apis/axios';
 import { API, Colors } from '../../configs';
 import Text from '../../commons/Text';
 import styles from './Styles/MultiUnitsStyles';
-import { AUTOMATE_TYPE } from '../../configs/Constants';
+import { AUTOMATE_TABS, AUTOMATE_TYPE } from '../../configs/Constants';
 import ItemOneTap from '../../commons/SubUnit/OneTap/ItemOneTap';
 import Routes from '../../utils/Route';
-import { useGetIdUser } from '../../hooks/Common';
 import ItemAddNew from '../../commons/Device/ItemAddNew';
 
 const MultiUnits = () => {
   const t = useTranslations();
   const isFocused = useIsFocused();
-  const idUser = useGetIdUser();
   const { navigate } = useNavigation();
   const { params = {}, name: currentRouteName } = useRoute();
-  const { isMultiUnits = false, unitName = '', unit, isOwner } = params;
+  const {
+    isMultiUnits = false,
+    unitName = '',
+    unit,
+    isOwner,
+    newAutomate,
+  } = params;
   const [data, setData] = useState([]);
-  const tabName = useMemo(
-    () => [t(AUTOMATE_TYPE.SCENARIO), t(AUTOMATE_TYPE.AUTOMATION)],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const [tabActive, setTabActive] = useState(tabName[0]);
+
+  const [tabActive, setTabActive] = useState(AUTOMATE_TABS.SCENARIO);
 
   const starredScriptIds = useSCContextSelector(
     (state) => state.automate.starredScriptIds
@@ -60,64 +60,48 @@ const MultiUnits = () => {
     setTabActive(tab);
   };
 
-  const onPressItem = (item, isItemOwner) => () => {
-    navigate(Routes.UnitStack, {
-      screen: Routes.ScriptDetail,
-      params: {
-        id: item?.id,
-        name: item?.script?.name,
-        type: item?.type,
-        havePermission: isItemOwner || idUser === item?.user,
-        unit,
-        isMultiUnits,
-        automate: item,
-      },
-    });
-  };
+  const onPressItem = useCallback(
+    (item) => {
+      navigate(Routes.UnitStack, {
+        screen: Routes.ScriptDetail,
+        params: {
+          id: item?.id,
+          unitId: unit?.id,
+          preAutomate: item,
+        },
+      });
+    },
+    [navigate, unit?.id]
+  );
+
+  useEffect(() => {
+    newAutomate && onPressItem(newAutomate);
+  }, [newAutomate, onPressItem]);
 
   const handleOnAddNew = useCallback(() => {
+    if (tabActive === AUTOMATE_TABS.SCENARIO) {
+      navigate(Routes.UnitStack, {
+        screen: Routes.ScenarioName,
+        params: {
+          automate: { type: AUTOMATE_TYPE.ONE_TAP, unit: unit?.id },
+          closeScreen: currentRouteName,
+        },
+      });
+      return;
+    }
+
     navigate(Routes.UnitStack, {
       screen: Routes.AddNewAutoSmart,
       params: {
-        type:
-          tabActive === t(AUTOMATE_TYPE.SCENARIO)
-            ? AUTOMATE_TYPE.ONE_TAP_ONLY
-            : AUTOMATE_TYPE.VALUE_CHANGE,
-        unit: { id: unit?.id },
+        automate: { unit: unit?.id },
         closeScreen: currentRouteName,
-        isMultiUnits,
       },
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tabActive]);
-
-  const renderTab = useMemo(
-    () => (
-      <View style={styles.wrapTab}>
-        {tabName.map((item) => (
-          <TouchableOpacity
-            onPress={onPressTabName(item)}
-            key={item}
-            style={[styles.tabName, item === tabActive && styles.tabNameActive]}
-          >
-            <Text
-              type="Body"
-              semibold
-              color={item === tabActive ? Colors.Primary : Colors.Gray6}
-            >
-              {item}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-    ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [tabActive]
-  );
+  }, [currentRouteName, navigate, tabActive, unit?.id]);
 
   const renderContent = useMemo(() => {
     const listItems = data.filter((item) =>
-      tabActive === t(AUTOMATE_TYPE.SCENARIO)
+      tabActive === AUTOMATE_TABS.SCENARIO
         ? item?.type === AUTOMATE_TYPE.ONE_TAP
         : item?.type !== AUTOMATE_TYPE.ONE_TAP
     );
@@ -138,7 +122,7 @@ const MultiUnits = () => {
               styles.wrapAutomateItem,
               index % 2 === 0 && styles.marginRigt8,
             ]}
-            onPressItem={onPressItem(item, isOwner)}
+            onPressItem={() => onPressItem(item)}
           />
         ))}
         <ItemAddNew
@@ -152,9 +136,8 @@ const MultiUnits = () => {
   }, [data, tabActive]);
 
   useEffect(() => {
-    getData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isFocused]);
+    isFocused && getData();
+  }, [getData, isFocused]);
 
   return (
     <View style={styles.wrap}>
@@ -163,7 +146,26 @@ const MultiUnits = () => {
         headerAniStyle={styles.headerAniStyle}
       >
         <View style={styles.wrapContent}>
-          {renderTab}
+          <View style={styles.wrapTab}>
+            {Object.values(AUTOMATE_TABS).map((item) => (
+              <TouchableOpacity
+                onPress={onPressTabName(item)}
+                key={item}
+                style={[
+                  styles.tabName,
+                  item === tabActive && styles.tabNameActive,
+                ]}
+              >
+                <Text
+                  type="Body"
+                  semibold
+                  color={item === tabActive ? Colors.Primary : Colors.Gray6}
+                >
+                  {t(item)}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
           {renderContent}
         </View>
       </WrapHeaderScrollable>

package/src/screens/Automate/OneTap/__test__/AddNewOneTap.test.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import MockAdapter from 'axios-mock-adapter';
+import { Platform, TextInput, TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
+
+import AddNewOneTap from '../index';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import Routes from '../../../../utils/Route';
+import api from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
+import { useNavigation, useRoute } from '@react-navigation/native';
+
+const wrapComponent = (route) => {
+  useRoute.mockReturnValue(route);
+  return (
+    <SCProvider initState={mockSCStore({})}>
+      <AddNewOneTap route={route} />
+    </SCProvider>
+  );
+};
+const mock = new MockAdapter(api.axiosInstance);
+
+jest.mock('react-redux', () => {
+  return {
+    ...jest.requireActual('react-redux'),
+    useSelector: () => 'vi',
+  };
+});
+
+let tree;
+
+describe('test OneTap', () => {
+  const mockedNavigate = useNavigation().navigate;
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+  });
+
+  it('create OneTap success', async () => {
+    Platform.OS = 'ios';
+    let route = {
+      params: {
+        type: 'one_tap',
+        unit: { id: 1 },
+        isMultiUnits: false,
+        isAutomateTab: false,
+      },
+    };
+
+    const response = {
+      id: 1,
+      unit: 1,
+      type: 'one_tap',
+      weekday_repeat: [],
+      script: { id: 1, name: 'William Miller' },
+    };
+
+    mock.onPost(API.AUTOMATE.CREATE_AUTOMATE()).reply(200, response);
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const inputName = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.NAME_YOUR_BUTTON &&
+        el.type === TextInput
+    );
+    expect(inputName).toHaveLength(1);
+
+    await act(async () => {
+      await inputName[0].props.onChangeText('Tap to up');
+    });
+
+    const item = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+
+    expect(item).toHaveLength(1);
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+  });
+
+  it('create OneTap fail', async () => {
+    Platform.OS = 'android';
+    let route = {
+      params: { type: 'one_tap' },
+    };
+
+    mock.onPost(API.AUTOMATE.CREATE_AUTOMATE()).reply(400);
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+
+    const item = tree.root.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+
+    expect(item).toHaveLength(1);
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+    expect(mockedNavigate).not.toBeCalled();
+  });
+
+  it('test onClose have automateId', async () => {
+    Platform.OS = 'android';
+    let route = {
+      params: {
+        closeScreen: Routes.ScriptDetail,
+      },
+    };
+    mock.onPost(API.AUTOMATE.CREATE_AUTOMATE()).reply(400);
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+
+    const header = tree.root.findByProps({
+      accessibilityLabel: AccessibilityLabel.ICON_CLOSE,
+    });
+
+    await act(async () => {
+      header.props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail);
+  });
+});

package/src/screens/Automate/OneTap/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import InputName from '../Components/InputName';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const AddNewOneTap = () => {
+  const t = useTranslations();
+
+  return (
+    <InputName
+      title={t('name_your_scenario')}
+      placeholder={t('name_your_button')}
+    />
+  );
+};
+
+export default AddNewOneTap;

package/src/screens/Automate/Scenario/ScenarioName.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import InputName from '../Components/InputName';
+
+const ScenarioName = () => {
+  const t = useTranslations();
+  return (
+    <InputName
+      title={t('name_your_scenario')}
+      placeholder={t('name_your_button')}
+    />
+  );
+};
+
+export default ScenarioName;

package/src/screens/{AddNewOneTap → Automate/Scenario}/__test__/AddNewOneTap.test.js

@@ -3,20 +3,23 @@ import MockAdapter from 'axios-mock-adapter';
 import { Platform, TextInput, TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 
-import AddNewOneTap from '..';
-import { AccessibilityLabel } from '../../../configs/Constants';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import Routes from '../../../utils/Route';
-import { HeaderCustom } from '../../../commons/Header';
-import api from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
-
-const wrapComponent = (route) => (
-  <SCProvider initState={mockSCStore({})}>
-    <AddNewOneTap route={route} />
-  </SCProvider>
-);
+import ScenarioName from '../ScenarioName';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import Routes from '../../../../utils/Route';
+import api from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
+import { useNavigation, useRoute } from '@react-navigation/native';
+
+const wrapComponent = (route) => {
+  useRoute.mockReturnValue(route);
+  return (
+    <SCProvider initState={mockSCStore({})}>
+      <ScenarioName route={route} />
+    </SCProvider>
+  );
+};
 const mock = new MockAdapter(api.axiosInstance);
 
 jest.mock('react-redux', () => {
@@ -26,24 +29,15 @@ jest.mock('react-redux', () => {
   };
 });
 
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-  };
-});
-
 let tree;
 
-describe('test AddNewOneTap', () => {
+describe('test OneTap', () => {
+  const mockedNavigate = useNavigation().navigate;
   beforeEach(() => {
     mockedNavigate.mockClear();
   });
 
-  it('create AddNewOneTap success', async () => {
+  it('create OneTap success', async () => {
     Platform.OS = 'ios';
     let route = {
       params: {
@@ -94,7 +88,7 @@ describe('test AddNewOneTap', () => {
     });
   });
 
-  it('create AddNewOneTap fail', async () => {
+  it('create OneTap fail', async () => {
     Platform.OS = 'android';
     let route = {
       params: { type: 'one_tap' },
@@ -123,13 +117,7 @@ describe('test AddNewOneTap', () => {
     Platform.OS = 'android';
     let route = {
       params: {
-        automateId: 1,
-        scriptName: 'script test',
-        type: 'one_tap',
-        havePermission: true,
-        unit: { id: 1 },
-        isMultiUnits: false,
-        isAutomateTab: false,
+        closeScreen: Routes.ScriptDetail,
       },
     };
     mock.onPost(API.AUTOMATE.CREATE_AUTOMATE()).reply(400);
@@ -137,19 +125,13 @@ describe('test AddNewOneTap', () => {
       tree = await create(wrapComponent(route));
     });
 
-    const header = tree.root.findByType(HeaderCustom);
+    const header = tree.root.findByProps({
+      accessibilityLabel: AccessibilityLabel.ICON_CLOSE,
+    });
 
     await act(async () => {
-      header.props.onClose();
-    });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
-      id: 1,
-      name: 'script test',
-      type: undefined,
-      havePermission: true,
-      unit: { id: 1 },
-      isMultiUnits: false,
-      isAutomateTab: false,
+      header.props.onPress();
     });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail);
   });
 });

package/src/screens/Automate/ScriptDetail/Components/DeleteScript.js

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { API, Colors } from '../../../../configs';
+import AlertAction from '../../../../commons/AlertAction';
+import { axiosDelete } from '../../../../utils/Apis/axios';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import { useNavigation } from '@react-navigation/native';
+
+const RenameScript = ({ automate, isVisible, setIsVisible }) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+
+  const deleteScript = useCallback(async () => {
+    const { success } = await axiosDelete(API.AUTOMATE.SCRIPT(automate.id));
+    if (success) {
+      setIsVisible(false);
+      goBack();
+      ToastBottomHelper.success(t('removed_successfully'));
+    } else {
+      ToastBottomHelper.error(t('remove_failed'));
+    }
+  }, [automate.id, goBack, setIsVisible, t]);
+
+  const hidePopup = () => setIsVisible(false);
+
+  return (
+    <AlertAction
+      visible={isVisible}
+      hideModal={hidePopup}
+      title={t('title_delete_script', {
+        scriptName: automate?.name,
+      })}
+      message={t('message_delete_script', {
+        scriptName: automate?.name,
+      })}
+      leftButtonTitle={t('cancel')}
+      leftButtonClick={hidePopup}
+      rightButtonTitle={t('remove')}
+      rightButtonClick={deleteScript}
+      rightButtonStyle={{ color: Colors.Red6 }}
+    />
+  );
+};
+
+export default RenameScript;

package/src/screens/Automate/ScriptDetail/Components/RenameScript.js

@@ -0,0 +1,58 @@
+import React, { useCallback, useState } from 'react';
+import { API, Colors } from '../../../../configs';
+import _TextInput from '../../../../commons/Form/TextInput';
+import styles from '../Styles/indexStyles';
+import AlertAction from '../../../../commons/AlertAction';
+import { axiosPatch } from '../../../../utils/Apis/axios';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import useKeyboardAnimated from '../../../../hooks/Explore/useKeyboardAnimated';
+
+const RenameScript = ({ automate, setAutomate, isVisible, setIsVisible }) => {
+  const t = useTranslations();
+  const [inputName, setInputName] = useState(automate.name);
+  const transY = useKeyboardAnimated();
+
+  const renameScript = useCallback(async () => {
+    const { success, data: script } = await axiosPatch(
+      API.AUTOMATE.SCRIPT(automate.id),
+      {
+        name: inputName,
+      }
+    );
+    if (success) {
+      setAutomate((prev) => ({ ...prev, name: script.name }));
+      ToastBottomHelper.success(t('rename_successfully'));
+    } else {
+      ToastBottomHelper.error(t('rename_failed'));
+    }
+    setIsVisible(false);
+  }, [automate.id, inputName, setAutomate, setIsVisible, t]);
+
+  const hidePopup = () => setIsVisible(false);
+
+  return (
+    <AlertAction
+      visible={isVisible}
+      hideModal={hidePopup}
+      title={t('rename_automate')}
+      message=""
+      leftButtonTitle={t('cancel')}
+      leftButtonClick={hidePopup}
+      rightButtonTitle={t('rename')}
+      rightButtonClick={renameScript}
+      rightButtonStyle={{ color: Colors.Primary }}
+      transY={transY}
+    >
+      <_TextInput
+        onChange={setInputName}
+        value={inputName}
+        defaultValue={automate?.name}
+        textInputStyle={styles.textInput}
+        maxLength={64}
+      />
+    </AlertAction>
+  );
+};
+
+export default RenameScript;

package/src/screens/{ScriptDetail → Automate/ScriptDetail}/Styles/indexStyles.js

@@ -1,4 +1,4 @@
-import { Colors } from '../../../configs';
+import { Colors } from '../../../../configs';
 import { Platform, StyleSheet } from 'react-native';
 import { getBottomSpace } from 'react-native-iphone-x-helper';