@eohjsc/react-native-smart-city 0.2.98 → 0.3.1

package/src/screens/Device/detail.js

@@ -12,7 +12,7 @@ import { get } from 'lodash';
 import { useSelector } from 'react-redux';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { Icon } from '@ant-design/react-native';
-
+import Routes from '../../utils/Route';
 import { useCountUp } from './hooks/useCountUp';
 import { getData as getLocalData } from '../../utils/Storage';
 import { API, Colors } from '../../configs';
@@ -32,20 +32,19 @@ import {
 import { useFavoriteDevice } from './hooks/useFavoriteDevice';
 import BottomButtonView from '../../commons/BottomButtonView';
 import Text from '../../commons/Text';
-import { transformDatetime } from '../../utils/Converter/time';
-import {
-  AlertAction,
-  ButtonPopup,
-  FullLoading,
-  MenuActionMore,
-} from '../../commons';
+import { AlertAction, ButtonPopup, MenuActionMore } from '../../commons';
 import { TESTID } from '../../configs/Constants';
-import Routes from '../../utils/Route';
+
 import { usePopover } from '../../hooks/Common';
 import { useConfigGlobalState } from '../../iot/states';
 import { useNavigation } from '@react-navigation/native';
 import styles from './styles';
-import { useIsOwnerOfUnit, useBoolean } from '../../hooks/Common';
+import {
+  useIsOwnerOfUnit,
+  useBoolean,
+  useGGHomeDeviceConnected,
+} from '../../hooks/Common';
+import { useGGHomeConnection } from '../../hooks/IoT';
 import { SensorDisplayItem } from './components/SensorDisplayItem';
 import { useSCContextSelector } from '../../context';
 import { EmergencyCountdown } from './components/EmergencyCountdown';
@@ -53,6 +52,7 @@ import { SensorConnectStatusViewHeader } from './components/SensorConnectStatusV
 import { useDisconnectedDevice } from './hooks/useDisconnectedDevice';
 import { Card } from '../../commons/CardShadow';
 import PreventAccess from '../../commons/PreventAccess';
+import { notImplemented } from '../../utils/Utils';
 
 const DeviceDetail = ({ route }) => {
   const t = useTranslations();
@@ -71,8 +71,7 @@ const DeviceDetail = ({ route }) => {
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
 
-  const { unitData, unitId, sensorData, sensorId, isGGHomeConnected } =
-    route.params;
+  const { unitData, unitId, sensorData, sensorId } = route.params;
   const [unit, setUnit] = useState(unitData || { id: unitId });
   const [sensor, setSensor] = useState(sensorData || { id: sensorId });
   const [station, setStation] = useState(sensor?.station);
@@ -87,15 +86,14 @@ const DeviceDetail = ({ route }) => {
     displayTemplate: true,
   });
   const [serverDown, setServerDown] = useState(false);
-
+  const [sideMenu, setSideMenu] = useState([]);
   const isNetworkConnected = useSCContextSelector(
     (state) => state.app.isNetworkConnected
   );
   const isBluetoothEnabled = useSCContextSelector((state) => {
     return state.app.isBluetoothEnabled;
   });
-
-  const isFullLoading = useSCContextSelector((state) => state.isFullLoading);
+  const { isConnected: isGGHomeConnected } = useGGHomeDeviceConnected(sensor);
 
   const isDeviceConnectedViaBle = useMemo(
     () =>
@@ -138,10 +136,8 @@ const DeviceDetail = ({ route }) => {
     [display.items]
   );
 
-  const { isFavorite, addToFavorites, removeFromFavorites } = useFavoriteDevice(
-    unit,
-    sensor
-  );
+  const { isFavorite, addToFavorites, removeFromFavorites } =
+    useFavoriteDevice(sensor);
 
   const currentUserId = useSelector((state) =>
     get(state, 'auth.account.user.id', 0)
@@ -166,9 +162,24 @@ const DeviceDetail = ({ route }) => {
     }
   }, [fetchUnitDetail, unitId, unitData]);
 
+  const { connectGoogleHome } = useGGHomeConnection();
+
+  useEffect(() => {
+    if (
+      unit.remote_control_options &&
+      unit.remote_control_options.googlehome?.length &&
+      isNetworkConnected
+    ) {
+      (async () => {
+        await connectGoogleHome(unit.remote_control_options.googlehome);
+      })();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [unit, isNetworkConnected]);
+
   const fetchSensorDetail = useCallback(async () => {
     const { success, data, resp_status } = await axiosGet(
-      API.SENSOR.SENSOR_DETAIL(sensorId)
+      API.DEVICE.SENSOR_DETAIL(sensorId)
     );
     if (success) {
       setSensor(data);
@@ -194,19 +205,20 @@ const DeviceDetail = ({ route }) => {
     }
 
     const { success, data } = await axiosGet(
-      API.SENSOR.DISPLAY(sensor?.id),
+      API.DEVICE.DISPLAY(sensor?.id),
       {},
       true
     );
+
     if (success) {
       setDisplay(data);
       setServerDown(false);
       if (data.items.length) {
         const config = data.items[0].configuration;
-        if (config.hasOwnProperty('max_value')) {
+        if (Object.prototype.hasOwnProperty.call(config, 'max_value')) {
           setMaxValue(config.max_value);
         }
-        if (config.hasOwnProperty('device')) {
+        if (Object.prototype.hasOwnProperty.call(config, 'device')) {
           // for emergency
           setDeviceId(config.device.id);
           const last_event = config.device.last_event;
@@ -217,11 +229,14 @@ const DeviceDetail = ({ route }) => {
           }
         }
       }
+      if (data?.side_menu_items?.length) {
+        setSideMenu(data.side_menu_items);
+      }
     }
     setLoading((preState) => ({ ...preState, displayTemplate: false }));
 
     const controlResult = await axiosGet(
-      API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor?.id),
+      API.DEVICE.REMOTE_CONTROL_OPTIONS(sensor?.id),
       {},
       true
     );
@@ -312,6 +327,19 @@ const DeviceDetail = ({ route }) => {
         text: t('activity_log'),
       });
     }
+
+    sideMenu.forEach((el) => {
+      menuItems.push({
+        route: Routes.SideMenuDetail,
+        data: {
+          unit,
+          sensor,
+          side_menu: el,
+        },
+        text: el.name,
+      });
+    });
+
     menuItems.push({
       route: Routes.DeviceInfo,
       text: t('device_info'),
@@ -328,6 +356,13 @@ const DeviceDetail = ({ route }) => {
         text: t('auto_lock'),
       });
     }
+    menuItems.push({
+      route: Routes.SmartLockStack,
+      data: {
+        screen: Routes.SetupGeneratePasscode,
+      },
+      text: t('setup_generate_passcode'),
+    });
     if (isOwner && isShowSetUpSmartLock) {
       menuItems.push({
         route: Routes.SmartLockStack,
@@ -368,6 +403,7 @@ const DeviceDetail = ({ route }) => {
     sensor,
     unit,
     sensorName,
+    sideMenu,
     station,
     emergencyDeviceId,
     addToFavorites,
@@ -377,7 +413,7 @@ const DeviceDetail = ({ route }) => {
   const { countUpStr } = useCountUp(lastEvent.reportedAt);
 
   useEffect(() => {
-    if (controlOptions.bluetooth) {
+    if (controlOptions?.bluetooth) {
       const bluetooth = controlOptions.bluetooth;
       scanBluetoothDevices([bluetooth.address]);
     }
@@ -389,8 +425,17 @@ const DeviceDetail = ({ route }) => {
 
   const onRefresh = useCallback(() => {
     fetchDataDeviceDetail();
+    if (
+      unit.remote_control_options &&
+      unit.remote_control_options.googlehome?.length &&
+      isNetworkConnected
+    ) {
+      (async () => {
+        await connectGoogleHome(unit.remote_control_options.googlehome);
+      })();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sensor, fetchDataDeviceDetail]);
+  }, [sensor, unit, isNetworkConnected, fetchDataDeviceDetail]);
 
   const getData = useCallback(
     (item) => {
@@ -417,6 +462,7 @@ const DeviceDetail = ({ route }) => {
       if (item.type !== 'value') {
         return;
       }
+
       if (!item.configuration) {
         return;
       }
@@ -434,7 +480,7 @@ const DeviceDetail = ({ route }) => {
 
     const fetchValues = async () => {
       const { success, data, resp_status } = await axiosGet(
-        API.SENSOR.DISPLAY_VALUES_V2(sensor?.id),
+        API.DEVICE.DISPLAY_VALUES_V2(sensor?.id),
         {
           params: params,
         }
@@ -442,7 +488,10 @@ const DeviceDetail = ({ route }) => {
       if (success) {
         setDisplayValues(data.configs);
         setConnected(data.is_connected);
-        transformDatetime(data, ['last_updated']);
+        data.last_updated = data.last_updated
+          ? moment(data.last_updated)
+          : data.last_updated;
+
         setLastUpdated(data.last_updated);
       } else if (resp_status >= 500) {
         setServerDown(true);
@@ -462,7 +511,7 @@ const DeviceDetail = ({ route }) => {
   useEffect(() => {
     setDisplayValues((currentDisplayValues) => {
       for (const [configId, value] of Object.entries(configValues)) {
-        const intId = parseInt(configId);
+        const intId = parseInt(configId, 10);
         const index = currentDisplayValues.findIndex(
           (element) => element.id === intId
         );
@@ -580,19 +629,18 @@ const DeviceDetail = ({ route }) => {
             })}
           </Card>
         )}
-        {isFullLoading && <FullLoading />}
       </SensorConnectStatusViewHeader>
     );
   };
 
   const getDataFromLocal = async () => {
     const displayData = await getLocalData(
-      `@CACHE_REQUEST_${API.SENSOR.DISPLAY(sensor?.id)}`
+      `@CACHE_REQUEST_${API.DEVICE.DISPLAY(sensor?.id)}`
     );
     displayData && setDisplay(JSON.parse(displayData));
 
     const controlOptionData = await getLocalData(
-      `@CACHE_REQUEST_${API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor?.id)}`
+      `@CACHE_REQUEST_${API.DEVICE.REMOTE_CONTROL_OPTIONS(sensor?.id)}`
     );
     controlOptionData && setControlOptions(JSON.parse(controlOptionData));
     setLoading((preState) => ({ ...preState, displayTemplate: false }));
@@ -604,7 +652,7 @@ const DeviceDetail = ({ route }) => {
     } else if (item.doAction) {
       item.doAction();
     } else {
-      alert(t('feature_under_development'));
+      notImplemented(t);
     }
   };
 

package/src/screens/Device/hooks/useDisconnectedDevice.js

@@ -47,7 +47,7 @@ export const useDisconnectedDevice = (
   );
 
   const checkNetworkConnect = useCallback(
-    async (isNetworkConnected, isBluetoothEnabled, serverDown) => {
+    async () => {
       if (!isDeviceHasBle) {
         return;
       }
@@ -72,10 +72,10 @@ export const useDisconnectedDevice = (
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isDeviceHasBle]
+    [isDeviceHasBle, isNetworkConnected, isBluetoothEnabled, serverDown]
   );
 
   useEffect(() => {
-    checkNetworkConnect(isNetworkConnected, isBluetoothEnabled, serverDown);
-  }, [isNetworkConnected, isBluetoothEnabled, checkNetworkConnect, serverDown]);
+    checkNetworkConnect();
+  }, [checkNetworkConnect]);
 };

package/src/screens/Device/hooks/useFavoriteDevice.js

@@ -4,7 +4,7 @@ import { SCContext, useSCContextSelector } from '../../../context';
 import { Action } from '../../../context/actionType';
 import { axiosPost } from '../../../utils/Apis/axios';
 
-export const useFavoriteDevice = (unit, device) => {
+export const useFavoriteDevice = (device) => {
   const { setAction } = useContext(SCContext);
   const favoriteDeviceIds = useSCContextSelector(
     (state) => state.unit.favoriteDeviceIds
@@ -14,21 +14,17 @@ export const useFavoriteDevice = (unit, device) => {
 
   const addToFavorites = useCallback(async () => {
     const { success } = await axiosPost(
-      API.SENSOR.ADD_TO_FAVOURITES(unit?.id, device?.station?.id, device?.id)
+      API.DEVICE.ADD_TO_FAVOURITES(device?.id)
     );
     success && setAction(Action.ADD_DEVICE_TO_FAVORITES, device.id);
-  }, [unit, device, setAction]);
+  }, [device, setAction]);
 
   const removeFromFavorites = useCallback(async () => {
     const { success } = await axiosPost(
-      API.SENSOR.REMOVE_FROM_FAVOURITES(
-        unit?.id,
-        device?.station?.id,
-        device?.id
-      )
+      API.DEVICE.REMOVE_FROM_FAVOURITES(device?.id)
     );
     success && setAction(Action.REMOVE_DEVICE_FROM_FAVORITES, device.id);
-  }, [unit, device, setAction]);
+  }, [device, setAction]);
 
   return {
     isFavorite,

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

@@ -7,8 +7,6 @@ import { View } from 'react-native';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 
-jest.mock('axios');
-
 jest.mock('@react-navigation/core', () => {
   return {
     ...jest.requireActual('@react-navigation/core'),

package/src/screens/EditActionsList/index.js

@@ -142,7 +142,7 @@ const EditActionsList = () => {
           data={actionsList}
           renderItem={renderItem}
           keyExtractor={(item) => `draggable-item-${item.key}`}
-          onDragEnd={({ data }) => setActionList(data)}
+          onDragEnd={({ data: dragData }) => setActionList(dragData)}
           extraData={actionsList}
           containerStyle={styles.containerStyle}
         />

package/src/screens/EmergencyContacts/EmergencyContactsSelectContacts.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { SafeAreaView, StyleSheet, View } from 'react-native';
+import { SafeAreaView, StyleSheet, View, Platform } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -71,11 +71,11 @@ export const EmergencyContactsSelectContacts = ({ route }) => {
   return (
     <SafeAreaView style={styles.container}>
       <WrapHeaderScrollable title={t('select_contacts')} loading={loading}>
-        <Section type={'border'}>
+        <Section type={'border'} style={styles.section}>
           {dataContact.map((contact, index) => (
             <RowUser
               key={contact.id.toString()}
-              testID={TESTID.EMERGENCY_SELECT_CONTACT}
+              testID={TESTID.EMERGENCY_SELECT_CONTACT + index}
               index={index}
               leftIcon={
                 <IconOutline name={'user'} size={20} color={Colors.White} />
@@ -116,6 +116,9 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.Gray2,
   },
+  section: {
+    marginTop: Platform.OS === 'ios' ? 40 : 0,
+  },
   buttonRemove: {
     height: 40,
     width: 40,

package/src/screens/EmergencyContacts/__test__/EmergencyContactAddNew.test.js

@@ -2,13 +2,15 @@ import React from 'react';
 import { TextInput } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import { EmergencyContactsAddNew } from '../EmergencyContactsAddNew';
-import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 import Toast from 'react-native-toast-message';
 import { ViewButtonBottom } from '../../../commons';
 import { TESTID } from '../../../configs/Constants';
 import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -20,7 +22,7 @@ jest.mock('react-native-toast-message');
 
 const mockedGoBack = jest.fn();
 
-jest.mock('axios');
+const mock = new MockAdapter(api.axiosInstance);
 
 jest.mock('@react-navigation/native', () => {
   return {
@@ -105,13 +107,7 @@ describe('test EmergencyContactAddNew', () => {
   });
 
   test('onSave success', async () => {
-    const response = {
-      status: 200,
-      data: {},
-    };
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
+    mock.onPost(API.EMERGENCY_BUTTON.CREATE_CONTACT()).reply(200);
 
     await act(async () => {
       tree = await create(wrapComponent(route));
@@ -127,22 +123,14 @@ describe('test EmergencyContactAddNew', () => {
   });
 
   test('onSave fail', async () => {
-    const response = {
-      data: {},
-    };
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
-
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
 
-    await act(async () => {
-      await viewButtonBottom.props.onRightClick();
-    });
+    mock.onPost(API.EMERGENCY_BUTTON.CREATE_CONTACT()).reply(400);
+    await viewButtonBottom.props.onRightClick();
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',

package/src/screens/EmergencyContacts/__test__/EmergencyContactList.test.js

@@ -1,16 +1,19 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
 import Routes from '../../../utils/Route';
-import axios from 'axios';
 import { API } from '../../../configs';
-
 import { AlertAction } from '../../../commons';
 import { EmergencyContactsList } from '../EmergencyContactsList';
 import { TESTID } from '../../../configs/Constants';
 import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import api from '../../../utils/Apis/axios';
+
+const mock = new MockAdapter(api.axiosInstance);
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -26,12 +29,10 @@ jest.mock('@react-navigation/native', () => {
     useNavigation: () => ({
       navigate: mockedNavigate,
     }),
-    useIsFocused: jest.fn(),
+    useIsFocused: () => true,
   };
 });
 
-jest.mock('axios');
-
 describe('test EmergencyContactList', () => {
   let route;
 
@@ -42,7 +43,6 @@ describe('test EmergencyContactList', () => {
         group: 1,
       },
     };
-    axios.delete.mockClear();
   });
   let tree;
 
@@ -56,20 +56,24 @@ describe('test EmergencyContactList', () => {
     });
     const instance = tree.root;
     const alertAction = instance.findByType(AlertAction);
-
-    const response = { status: 204 };
-    axios.delete.mockImplementation(async () => {
-      return response;
+    mock.onDelete(API.EMERGENCY_BUTTON.REMOVE_CONTACTS()).reply(204);
+    act(() => {
+      alertAction.props.rightButtonClick();
     });
+    expect(alertAction.props.visible).toBe(false);
+  });
 
+  test('handleRemove failure', async () => {
+    act(() => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const alertAction = instance.findByType(AlertAction);
+    mock.onDelete(API.EMERGENCY_BUTTON.REMOVE_CONTACTS()).reply(400);
     act(() => {
       alertAction.props.rightButtonClick();
     });
-
     expect(alertAction.props.visible).toBe(false);
-    expect(axios.delete).toHaveBeenCalledWith(
-      API.EMERGENCY_BUTTON.REMOVE_CONTACTS()
-    );
   });
 
   test('onAddNew', async () => {

package/src/screens/EmergencyContacts/__test__/EmergencyContactsSelectContacts.test.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import Toast from 'react-native-toast-message';
+
 import { EmergencyContactsSelectContacts } from '../EmergencyContactsSelectContacts';
 import { TESTID } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { API } from '../../../configs';
 import { ViewButtonBottom } from '../../../commons';
+import api from '../../../utils/Apis/axios';
+import { getTranslate } from '../../../utils/I18n';
 
-jest.mock('axios');
+const mock = new MockAdapter(api.axiosInstance);
 
 const mockedNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
@@ -45,7 +49,6 @@ describe('test EmergencyContactsSelectContacts', () => {
       tree = create(wrapComponent(route));
     });
     const instance = tree.root;
-
     const rowUser = instance.findAllByProps(
       (item) => item.props.testID === TESTID.EMERGENCY_SELECT_CONTACT
     );
@@ -54,50 +57,41 @@ describe('test EmergencyContactsSelectContacts', () => {
 
   test('render emergencyContactsSelectContacts success', async () => {
     jest.useFakeTimers();
-    const response = {
-      status: 200,
-      data: {
-        data: {},
-      },
-    };
-    axios.get.mockImplementation(() => Promise.resolve(response));
-
-    act(() => {
-      tree = create(wrapComponent(route));
+    mock.onGet(API.SHARE.UNITS_MEMBERS(1, 1)).reply(200, {
+      id: 1,
+      name: 'test',
+      phone_number: 1,
     });
     act(() => {
-      jest.runOnlyPendingTimers();
+      tree = create(wrapComponent(route));
     });
-    expect(axios.get).toHaveBeenCalled();
-    expect(axios.get).toHaveBeenCalledWith(API.SHARE.UNITS_MEMBERS(1, 1), {});
+    const instance = tree.root;
+    const rowUser = instance.findAllByProps(
+      (item) => item.props.testID === TESTID.EMERGENCY_SELECT_CONTACT + 0
+    );
+    expect(rowUser[0]).toBeDefined();
   });
 
   test('test onSave emergencyContactsSelectContacts', async () => {
-    const response = {
-      status: 200,
-    };
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
+    mock.onPost(API.EMERGENCY_BUTTON.CREATE_BATCH()).reply(200);
     act(() => {
       tree = create(wrapComponent(route));
     });
     const instance = tree.root;
-
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(axios.post).toHaveBeenCalled();
+    expect(Toast.show).toBeCalledWith({
+      type: 'success',
+      position: 'bottom',
+      text1: getTranslate('en', 'saving_contact_successful'),
+      visibilityTime: 1000,
+    });
   });
 
   test('test onSave emergencyContactsSelectContacts fail', async () => {
-    const response = {
-      status: 500,
-    };
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
+    mock.onPost(API.EMERGENCY_BUTTON.CREATE_BATCH()).reply(500);
     act(() => {
       tree = create(wrapComponent(route));
     });
@@ -107,6 +101,11 @@ describe('test EmergencyContactsSelectContacts', () => {
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(axios.post).toHaveBeenCalled();
+    expect(Toast.show).toBeCalledWith({
+      type: 'error',
+      position: 'bottom',
+      text1: getTranslate('en', 'create_contact_failed'),
+      visibilityTime: 1000,
+    });
   });
 });

package/src/screens/EmergencySetting/components/DropDownItem.js

@@ -34,11 +34,11 @@ const DropDownItem = ({ label, data, onSelectItem, isOpen, onOpen, index }) => {
 
         {isOpen && (
           <View style={[styles.dropDownItem]}>
-            {data.map((item, index) => (
+            {data.map((item, i) => (
               <Text
                 style={styles.dropDownText}
                 onPress={handleSelectItem(item)}
-                key={index}
+                key={i}
                 testID={TESTID.DROP_DOWN_PICKER_ITEM}
               >
                 {item?.label}