@eohjsc/react-native-smart-city 0.7.3 → 0.7.5

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

@@ -5,35 +5,35 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Image, Platform, TouchableOpacity, View, Switch } from 'react-native';
+import { Image, Platform, Switch, TouchableOpacity, View } from 'react-native';
 import { PopoverMode } from 'react-native-popover-view';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import styles from './Styles/indexStyles';
-import Text from '../../../commons/Text';
-import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
-import { API, Colors } from '../../../configs';
-import { usePopover } from '../../../hooks/Common';
-import { useStarredScript } from './hooks/useStarredScript';
-import MenuActionMore from '../../../commons/MenuActionMore';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
 import Add from '../../../../assets/images/Add.svg';
-import Notify from '../../../../assets/images/Notify.svg';
 import Delay from '../../../../assets/images/Delay.svg';
-import { useIsFocused, useNavigation } from '@react-navigation/native';
-import { axiosGet, axiosPost } from '../../../utils/Apis/axios';
-import Routes from '../../../utils/Route';
-import { ToastBottomHelper } from '../../../utils/Utils';
-import ItemAutomate from '../../../commons/Automate/ItemAutomate';
+import Notify from '../../../../assets/images/Notify.svg';
+import IconComponent from '../../../commons/IconComponent';
+import MenuActionMore from '../../../commons/MenuActionMore';
+import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
+import Text from '../../../commons/Text';
 import withPreventDoubleClick from '../../../commons/WithPreventDoubleClick';
+import { API, Colors } from '../../../configs';
 import { AccessibilityLabel, AUTOMATE_TYPE } from '../../../configs/Constants';
-import RenameScript from './Components/RenameScript';
-import DeleteScript from './Components/DeleteScript';
 import Images from '../../../configs/Images';
+import { usePopover } from '../../../hooks/Common';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { axiosGet, axiosPost } from '../../../utils/Apis/axios';
 import { useBackendPermission } from '../../../utils/Permission/backend';
-import IconComponent from '../../../commons/IconComponent';
+import Routes from '../../../utils/Route';
+import { ToastBottomHelper } from '../../../utils/Utils';
 import AddActionScript from './Components/AddActionScript';
+import DeleteScript from './Components/DeleteScript';
+import RenameScript from './Components/RenameScript';
+import { useStarredScript } from './hooks/useStarredScript';
+import styles from './Styles/indexStyles';
+import ItemConditionScriptDetail from '../../../commons/Automate/ItemConditionScriptDetail';
 
 const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
 
@@ -43,13 +43,18 @@ const ScriptDetail = ({ route }) => {
   const refMenuAction = useRef();
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
+  const {
+    childRef: childRef1,
+    showingPopover: showingPopover1,
+    showPopoverWithRef: showPopoverWithRef1,
+    hidePopover: hidePopover1,
+  } = usePopover();
   const t = useTranslations();
   const {
-    id,
     saveAt,
     preAutomate = {}, // pre-loaded automate data
-    newAutomate, // updated automate data
     newActionsList, // updated actions list
+    closeScreen,
   } = params;
   const [automate, setAutomate] = useState(preAutomate);
   const isFocused = useIsFocused();
@@ -58,12 +63,22 @@ const ScriptDetail = ({ route }) => {
   const [isShowDelete, setIsShowDelete] = useState(false);
   const [isShowAddAction, setIsShowAddAction] = useState(false);
 
-  const { script, type, name, unit, can_edit, id: automateId } = automate;
+  const {
+    script,
+    type,
+    name,
+    unit,
+    can_edit,
+    id: automateId,
+    value_change,
+  } = automate;
+  const { end_device_id, unit_id } = value_change || {};
   const { enable } = script || {};
   const [enableScript, setEnableScript] = useState(enable);
+  const refMenuAction1 = useRef();
   const onShowActivityLog = useCallback(() => {
     navigate(Routes.ActivityLog, {
-      id: id,
+      id: automateId,
       type:
         type === AUTOMATE_TYPE.ONE_TAP
           ? `automate.${AUTOMATE_TYPE.ONE_TAP}`
@@ -74,7 +89,7 @@ const ScriptDetail = ({ route }) => {
         user: Boolean(unit),
       },
     });
-  }, [navigate, id, type, unit]);
+  }, [navigate, automateId, type, unit]);
 
   const listMenuItem = useMemo(
     () => [
@@ -91,6 +106,23 @@ const ScriptDetail = ({ route }) => {
     [t, onShowActivityLog]
   );
 
+  const listMenuItemCondition = useMemo(() => {
+    const items = [
+      { text: t('edit_condition'), doAction: () => handleUpdateAutomate() },
+    ];
+    if (value_change) {
+      items.unshift({
+        text: t('device_display'),
+        doAction: () =>
+          navigate(Routes.DeviceDetail, {
+            unitId: unit_id,
+            sensorId: end_device_id,
+          }),
+      });
+    }
+    return items;
+  }, [t, handleUpdateAutomate, value_change, navigate, unit_id, end_device_id]);
+
   const handleShowMenuAction = useCallback(() => {
     if (!can_edit) {
       ToastBottomHelper.error(
@@ -107,39 +139,41 @@ const ScriptDetail = ({ route }) => {
 
   const fetchAutomateActions = useCallback(async () => {
     const { success, data: automateData } = await axiosGet(
-      API.AUTOMATE.SCRIPT_ITEMS(id)
+      API.AUTOMATE.SCRIPT_ITEMS(automateId)
     );
     if (success) {
       setData(automateData.script_items || []);
     }
-  }, [id]);
+  }, [automateId]);
 
   const fetchAutomate = useCallback(async () => {
     const { success, data: automateData } = await axiosGet(
-      API.AUTOMATE.FETCH_AUTOMATE(id)
+      API.AUTOMATE.FETCH_AUTOMATE(automateId)
     );
     if (success) {
       setAutomate(automateData);
       setEnableScript(automateData.script.enable);
     }
-  }, [id]);
+  }, [automateId]);
 
   const onPressEdit = useCallback(() => {
     navigate(Routes.EditActionsList, {
       data,
-      id,
+      id: automateId,
       unitId: automate.unit,
     });
-  }, [navigate, data, id, automate.unit]);
+  }, [navigate, data, automateId, automate.unit]);
 
   const handleScriptAction = useCallback(async () => {
-    const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
+    const { success } = await axiosPost(
+      API.AUTOMATE.ACTION_ONE_TAP(automateId)
+    );
     if (success) {
       ToastBottomHelper.success(t('activated_successfully'));
     } else {
       ToastBottomHelper.error(t('activation_failed'));
     }
-  }, [id, t]);
+  }, [automateId, t]);
 
   const handleUpdateAutomate = useCallback(async () => {
     if (!can_edit) {
@@ -158,6 +192,19 @@ const ScriptDetail = ({ route }) => {
     });
   }, [automate, can_edit, enableScript, navigate, route.name, t]);
 
+  const handleGoBack = useCallback(async () => {
+    if (closeScreen === Routes.UnitDetail) {
+      navigate(closeScreen, { unitId: unit });
+    } else if (
+      closeScreen === Routes.MultiUnits ||
+      closeScreen === Routes.Automate
+    ) {
+      navigate(closeScreen, {});
+    } else {
+      goBack();
+    }
+  }, [closeScreen, goBack, navigate, unit]);
+
   const onChangeSwitch = useCallback(
     async (checked) => {
       setEnableScript(checked);
@@ -210,9 +257,9 @@ const ScriptDetail = ({ route }) => {
     saveAt && fetchAutomateActions();
   }, [saveAt, fetchAutomateActions]);
 
-  useEffect(() => {
-    newAutomate && setAutomate(newAutomate);
-  }, [newAutomate]);
+  const handleShowMenuAction1 = useCallback(() => {
+    showPopoverWithRef1(refMenuAction1);
+  }, [showPopoverWithRef1, refMenuAction1]);
 
   return (
     <View style={styles.wrap}>
@@ -220,7 +267,7 @@ const ScriptDetail = ({ route }) => {
         title={name}
         headerAniStyle={styles.headerAniStyle}
         rightComponent={rightComponent}
-        onGoBack={goBack}
+        onGoBack={handleGoBack}
       >
         <View style={styles.wrapContent}>
           {!!can_edit && (
@@ -228,16 +275,17 @@ const ScriptDetail = ({ route }) => {
               <Text type="H3" semibold>
                 {t('enable_this_script')}
               </Text>
-              <Switch checked={enableScript} onChange={onChangeSwitch} />
+              <Switch value={enableScript} onValueChange={onChangeSwitch} />
             </View>
           )}
           <Text type="H3" semibold>
             {t('how_to_start')}
           </Text>
-          <ItemAutomate
+          <ItemConditionScriptDetail
             automate={automate}
             enableScript={enableScript}
-            onPress={handleUpdateAutomate}
+            handleShowMenuAction1={handleShowMenuAction1}
+            refMenuAction1={refMenuAction1}
           />
           {type === AUTOMATE_TYPE.ONE_TAP && enableScript && (
             <TouchableOpacity
@@ -294,8 +342,24 @@ const ScriptDetail = ({ route }) => {
         isTextCenter={false}
         wrapStyle={styles.wrapStyle}
         mode={
+          /* istanbul ignore next */
+          Platform.OS === 'ios' ? PopoverMode.JS_MODAL : PopoverMode.RN_MODAL
+        }
+        accessibilityLabel={AccessibilityLabel.MENU_POPPER_MORE}
+      />
+      <MenuActionMore
+        isVisible={showingPopover1}
+        hideMore={hidePopover1}
+        listMenuItem={listMenuItemCondition}
+        childRef={childRef1}
+        onItemClick={onItemClick}
+        isTextCenter={false}
+        wrapStyle={styles.wrapStyle}
+        mode={
+          /* istanbul ignore next */
           Platform.OS === 'ios' ? PopoverMode.JS_MODAL : PopoverMode.RN_MODAL
         }
+        accessibilityLabel={AccessibilityLabel.MENU_POPPER_MORE_2}
       />
       <AddActionScript
         automate={automate}
@@ -479,9 +543,9 @@ const ButtonStar = ({ automate }) => {
       accessibilityLabel={AccessibilityLabel.HEADER_SCRIPT_DETAIL_BUTTON_STAR}
     >
       {isStarred ? (
-        <AntDesign name="star" size={25} color={Colors.Yellow6} />
+        <IconFill name="star" size={25} color={Colors.Yellow6} />
       ) : (
-        <AntDesign name="staro" size={25} />
+        <IconOutline name="star" size={25} />
       )}
     </PreventDoubleTouch>
   );

package/src/screens/Automate/SetSchedule/__test__/SelectWeekday.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { create, act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import { TouchableOpacity } from 'react-native';
 import SelectWeekday from '../components/SelectWeekday';
 
 const wrapComponent = (props) => (
@@ -28,7 +28,7 @@ it('test select', async () => {
   await act(async () => {
     await items[0].props.onPress();
   });
-  expect(mockSetWeekday).toBeCalledWith(['1']);
+  expect(mockSetWeekday).toHaveBeenCalledWith(['1']);
 
   mockSetWeekday.mockClear();
   props = {
@@ -44,5 +44,5 @@ it('test select', async () => {
   await act(async () => {
     await items[0].props.onPress();
   });
-  expect(mockSetWeekday).toBeCalledWith(['0', '1']);
+  expect(mockSetWeekday).toHaveBeenCalledWith(['0', '1']);
 });

package/src/screens/Automate/SetSchedule/__test__/index.test.js

@@ -1,34 +1,37 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import moment from 'moment';
 import React from 'react';
 import { act, create } from 'react-test-renderer';
+import BottomButtonView from '../../../../commons/BottomButtonView';
+import Calendar from '../../../../commons/Calendar';
+import WheelDateTimePicker from '../../../../commons/WheelDateTimePicker';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import SetSchedule from '../index';
-import RowItem from '../components/RowItem';
-import WheelDateTimePicker from '../../../../commons/WheelDateTimePicker';
+import Routes from '../../../../utils/Route';
 import RepeatOptionsPopup, {
   REPEAT_OPTIONS,
 } from '../components/RepeatOptionsPopup';
-import Calendar from '../../../../commons/Calendar';
-import BottomButtonView from '../../../../commons/BottomButtonView';
-import Routes from '../../../../utils/Route';
+import RowItem from '../components/RowItem';
 import SelectWeekday from '../components/SelectWeekday';
-import moment from 'moment';
-import { useNavigation } from '@react-navigation/native';
-import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+import SetSchedule from '../index';
 
-const wrapComponent = (route) => (
-  <SCProvider initState={mockSCStore({})}>
-    <SetSchedule route={route} />
-  </SCProvider>
-);
+const wrapComponent = (route) => {
+  useRoute.mockReturnValue(route);
+  return (
+    <SCProvider initState={mockSCStore({})}>
+      <SetSchedule route={route} />
+    </SCProvider>
+  );
+};
 
 describe('Test SetSchedule', () => {
   let tree;
   let route = {
     params: {
-      type: 'schedule',
-      unit: { id: 1 },
-      isAutomateTab: true,
+      automate: { type: 'schedule', unit: 1 },
+      unitId: 1,
+      closeScreen: 'UnitDetail',
     },
   };
 
@@ -70,7 +73,11 @@ describe('Test SetSchedule', () => {
     await act(async () => {
       await header.props.onPress();
     });
-    expect(global.mockedNavigate).toBeCalledWith(undefined);
+    expect(global.mockedNavigate).toHaveBeenCalledWith('UnitDetail', {
+      automate: { type: 'schedule', unit: 1 },
+      closeScreen: 'UnitDetail',
+      unitId: 1,
+    });
   });
 
   it('test repeat options popup', async () => {
@@ -137,7 +144,11 @@ describe('Test SetSchedule', () => {
         repeat: 'once',
         time_repeat: '12:00:00',
         weekday_repeat: [],
+        type: 'schedule',
+        unit: 1,
       },
+      closeScreen: 'UnitDetail',
+      unitId: 1,
     });
   });
 });

package/src/screens/Automate/SetSchedule/components/RowItem.js

@@ -1,9 +1,9 @@
+import { IconOutline } from '@ant-design/icons-react-native';
 import React from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { TouchableOpacity, View } from 'react-native';
 import Text from '../../../../commons/Text';
-import styles from '../styles/RowItemStyles';
 import { Colors } from '../../../../configs';
+import styles from '../styles/RowItemStyles';
 
 const RowItem = ({ title, value, icon = null, arrow = false, onPress }) => {
   return (
@@ -17,8 +17,8 @@ const RowItem = ({ title, value, icon = null, arrow = false, onPress }) => {
         </Text>
       </View>
       <View style={[styles.itemRight, arrow && styles.center]}>
-        {arrow && <AntDesign name="right" color={Colors.Gray7} />}
-        {icon && <AntDesign name={icon} size={17} color={Colors.Black} />}
+        {arrow && <IconOutline name="right" color={Colors.Gray7} />}
+        {icon && <IconOutline name={icon} size={17} color={Colors.Black} />}
       </View>
     </TouchableOpacity>
   );

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

@@ -1,19 +1,19 @@
-import React, { memo, useCallback, useState } from 'react';
-import { ScrollView } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import moment from 'moment';
-import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
+import React, { memo, useCallback, useState } from 'react';
+import { ScrollView } from 'react-native';
 import Calendar from '../../../commons/Calendar';
+import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
+import { useBoolean } from '../../../hooks/Common';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Routes from '../../../utils/Route';
+import NewActionWrapper from '../AddNewAction/NewActionWrapper';
 import RepeatOptionsPopup, {
   REPEAT_OPTIONS,
 } from './components/RepeatOptionsPopup';
 import RowItem from './components/RowItem';
 import SelectWeekday from './components/SelectWeekday';
-import { useBoolean } from '../../../hooks/Common';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
 import styles from './styles/indexStyles';
-import Routes from '../../../utils/Route';
-import NewActionWrapper from '../AddNewAction/NewActionWrapper';
 
 const SetSchedule = ({ route }) => {
   const t = useTranslations();
@@ -54,6 +54,7 @@ const SetSchedule = ({ route }) => {
         date_repeat: date.format('YYYY-MM-DD'),
         weekday_repeat: weekday,
       },
+      unitId: automate.unit,
     });
   }, [navigate, closeScreen, automate, repeat, time, date, weekday]);
 

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

@@ -65,9 +65,9 @@ export default StyleSheet.create({
     width: (Constants.width - 40) / 2,
   },
   automatesRow: {
+    display: 'flex',
     flexDirection: 'row',
     marginTop: 8,
     overflow: 'hidden',
-    alignSelf: 'center',
   },
 });

package/src/screens/Automate/__test__/MultiUnits.test.js

@@ -76,7 +76,6 @@ describe('Test MultiUnits', () => {
       params: {
         isMultiUnits: true,
         unitName: null,
-        unit: null,
       },
     });
     await act(async () => {
@@ -111,7 +110,6 @@ describe('Test MultiUnits', () => {
     expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
       screen: Routes.ScriptDetail,
       params: {
-        id: response[1].id,
         preAutomate: response[1],
       },
     });
@@ -120,7 +118,7 @@ describe('Test MultiUnits', () => {
       ItemAddNews[0].props.onAddNew();
     });
     expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
-      screen: Routes.AddUnknownTypeSmart,
+      screen: Routes.AddAutomationTypeSmart,
       params: {
         automate: { unit: undefined },
         closeScreen: undefined,
@@ -264,7 +262,6 @@ describe('Test MultiUnits', () => {
       params: {
         isMultiUnits: true,
         unitName: null,
-        unit: null,
       },
     });
     await act(async () => {

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

@@ -173,7 +173,6 @@ describe('Test Automate', () => {
       params: {
         preAutomate: response.data[0].automates[0],
         closeScreen: undefined,
-        id: 1,
       },
     });
   });

package/src/screens/Automate/index.js

@@ -1,3 +1,9 @@
+import { IconFill } from '@ant-design/icons-react-native';
+import {
+  useIsFocused,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native';
 import React, {
   useCallback,
   useEffect,
@@ -6,27 +12,21 @@ import React, {
   useState,
 } from 'react';
 import { FlatList, Image, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-import {
-  useIsFocused,
-  useNavigation,
-  useRoute,
-} from '@react-navigation/native';
 import { useSCContextSelector } from '../../context';
 
-import styles from './Styles/indexStyles';
+import ItemAddNew from '../../commons/Device/ItemAddNew';
+import ItemOneTap from '../../commons/SubUnit/OneTap/ItemOneTap';
+import Text from '../../commons/Text';
 import { API, Colors, Images } from '../../configs';
+import { AccessibilityLabel, UNIT_TYPES } from '../../configs/Constants';
+import { useGetIdUser } from '../../hooks/Common';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { axiosGet } from '../../utils/Apis/axios';
-import Text from '../../commons/Text';
-import ItemOneTap from '../../commons/SubUnit/OneTap/ItemOneTap';
+import { useBackendPermission } from '../../utils/Permission/backend';
 import Routes from '../../utils/Route';
-import Loading from './Components/Loading';
-import ItemAddNew from '../../commons/Device/ItemAddNew';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { useGetIdUser } from '../../hooks/Common';
-import { AccessibilityLabel, UNIT_TYPES } from '../../configs/Constants';
 import { keyExtractor, ToastBottomHelper } from '../../utils/Utils';
-import { useBackendPermission } from '../../utils/Permission/backend';
+import Loading from './Components/Loading';
+import styles from './Styles/indexStyles';
 
 const Automate = () => {
   const t = useTranslations();
@@ -75,7 +75,6 @@ const Automate = () => {
       navigate(Routes.UnitStack, {
         screen: Routes.ScriptDetail,
         params: {
-          id: item?.id,
           closeScreen: currentRouteName,
           preAutomate: item, // pre-loaded automate data
         },
@@ -164,29 +163,32 @@ const Automate = () => {
               <Image source={Images.arrowBack} style={styles.arrowRight} />
             </TouchableOpacity>
           </View>
-          {!!automates?.length && (
-            <View style={styles.automatesRow}>
-              <ItemOneTap
-                isOwner={isOwner}
-                automate={automates[0]}
-                wrapSyles={styles.wrapAutomateItem}
-                onPressItem={() =>
-                  onPressItem(automates[0], unit_id, type, isOwner)
-                }
-              />
-              {!!automates[1] && (
+          <View style={styles.automatesRow}>
+            {!!automates?.length && (
+              <>
                 <ItemOneTap
                   isOwner={isOwner}
-                  automate={automates[1]}
+                  automate={automates[0]}
                   wrapSyles={styles.wrapAutomateItem}
                   onPressItem={() =>
-                    onPressItem(automates[1], unit_id, type, isOwner)
+                    onPressItem(automates[0], unit_id, type, isOwner)
                   }
                 />
-              )}
-            </View>
-          )}
-          {!automates?.length && renderListFooterComponent(unit_id, automates)}
+                {!!automates[1] && (
+                  <ItemOneTap
+                    isOwner={isOwner}
+                    automate={automates[1]}
+                    wrapSyles={styles.wrapAutomateItem}
+                    onPressItem={() =>
+                      onPressItem(automates[1], unit_id, type, isOwner)
+                    }
+                  />
+                )}
+              </>
+            )}
+            {(!automates?.length || automates.length === 1) &&
+              renderListFooterComponent(unit_id, automates)}
+          </View>
         </View>
       );
     },
@@ -210,7 +212,7 @@ const Automate = () => {
       /* istanbul ignore next */
       headerRight: () => (
         <TouchableOpacity style={styles.buttonAdd}>
-          <AntDesign name={'pluscircle'} size={28} color={Colors.Orange} />
+          <IconFill name={'plus-circle'} size={28} color={Colors.Orange} />
         </TouchableOpacity>
       ),
     });

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

@@ -1,16 +1,16 @@
-import React from 'react';
-import { act, create } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 import { useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
 import DraggableFlatList from 'react-native-draggable-flatlist';
+import { act, create } from 'react-test-renderer';
 
 import ChangePosition from '../';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { API } from '../../../configs';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
 import { ToastBottomHelper } from '../../../utils/Utils';
-import BottomButtonView from '../../../commons/BottomButtonView';
 
 const mock = new MockAdapter(api.axiosInstance);
 const mockSetDisplay = jest.fn();
@@ -60,6 +60,6 @@ describe('Test ChangePosition', () => {
     expect(global.mockedGoBack).toHaveBeenCalled();
     expect(mockFetchData).toHaveBeenCalled();
     expect(mockSetDisplay).toHaveBeenCalled();
-    expect(spyToastSuccess).toBeCalledWith('Updated widget successfully');
+    expect(spyToastSuccess).toHaveBeenCalledWith('Updated widget successfully');
   });
 });

package/src/screens/ChangePosition/index.js

@@ -49,7 +49,8 @@ const ChangePosition = () => {
     }
   };
 
-  const renderItem = ({ item, index, drag, isActive }) => {
+  const renderItem = ({ item, getIndex, drag, isActive }) => {
+    const index = getIndex();
     return (
       <View style={styles.widgetItem}>
         <View style={[styles.itemOrder, isActive ? styles.isDragging : {}]}>