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

package/src/screens/Device/detail.js

@@ -32,7 +32,6 @@ 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, MenuActionMore } from '../../commons';
 import { TESTID } from '../../configs/Constants';
 
@@ -40,7 +39,12 @@ 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';
@@ -48,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();
@@ -66,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);
@@ -89,6 +93,7 @@ const DeviceDetail = ({ route }) => {
   const isBluetoothEnabled = useSCContextSelector((state) => {
     return state.app.isBluetoothEnabled;
   });
+  const { isConnected: isGGHomeConnected } = useGGHomeDeviceConnected(sensor);
 
   const isDeviceConnectedViaBle = useMemo(
     () =>
@@ -157,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);
@@ -185,7 +205,7 @@ const DeviceDetail = ({ route }) => {
     }
 
     const { success, data } = await axiosGet(
-      API.SENSOR.DISPLAY(sensor?.id),
+      API.DEVICE.DISPLAY(sensor?.id),
       {},
       true
     );
@@ -195,10 +215,10 @@ const DeviceDetail = ({ route }) => {
       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;
@@ -216,7 +236,7 @@ const DeviceDetail = ({ route }) => {
     setLoading((preState) => ({ ...preState, displayTemplate: false }));
 
     const controlResult = await axiosGet(
-      API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor?.id),
+      API.DEVICE.REMOTE_CONTROL_OPTIONS(sensor?.id),
       {},
       true
     );
@@ -405,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) => {
@@ -433,6 +462,7 @@ const DeviceDetail = ({ route }) => {
       if (item.type !== 'value') {
         return;
       }
+
       if (!item.configuration) {
         return;
       }
@@ -450,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,
         }
@@ -458,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);
@@ -478,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
         );
@@ -602,12 +635,12 @@ const DeviceDetail = ({ route }) => {
 
   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 }));
@@ -619,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/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/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}

package/src/screens/HanetCamera/Detail.js

@@ -39,7 +39,7 @@ const HanetCameraDetail = ({ route }) => {
 
   const fetchDisplayConfig = useCallback(async () => {
     const { success, data } = await axiosGet(
-      API.SENSOR.DISPLAY(sensor?.id),
+      API.DEVICE.DISPLAY(sensor?.id),
       {},
       true
     );

package/src/screens/HanetCamera/__test__/Detail.test.js

@@ -101,7 +101,7 @@ describe('Test HanetCameraDetail', () => {
   });
 
   test('Test render HanetCameraDetail', async () => {
-    mock.onGet(API.SENSOR.DISPLAY(1)).reply(200, responseDisplay.data);
+    mock.onGet(API.DEVICE.DISPLAY(1)).reply(200, responseDisplay.data);
     mock.onGet(API.CAMERA.HANET.CHECKIN(2)).reply(200, responseCheckin.data);
     await act(async () => {
       tree = await create(wrapComponent(route));
@@ -123,7 +123,7 @@ describe('Test HanetCameraDetail', () => {
   });
 
   test('Test change date', async () => {
-    mock.onGet(API.SENSOR.DISPLAY(1)).reply(200, responseDisplay.data);
+    mock.onGet(API.DEVICE.DISPLAY(1)).reply(200, responseDisplay.data);
     mock.onGet(API.CAMERA.HANET.CHECKIN(1)).reply(200, responseCheckin.data);
     await act(async () => {
       tree = await create(wrapComponent(route));

package/src/screens/HanetCamera/components/RequestFaceIDPopup.js

@@ -31,7 +31,7 @@ const RequestFaceIDPopup = ({
       text: t('pick_available_image_from_your_phone'),
       onChoose: async () => {
         setHide();
-        const options = {
+        const pickerOptions = {
           mediaType: 'photo',
           compressImageMaxHeight: 1280,
           compressImageMaxWidth: 738,
@@ -39,8 +39,9 @@ const RequestFaceIDPopup = ({
           forceJpg: true,
         };
         try {
-          const result = await ImagePicker.openPicker(options);
+          const result = await ImagePicker.openPicker(pickerOptions);
           onChooseFile && onChooseFile(result);
+          // eslint-disable-next-line no-empty
         } catch (e) {}
       },
     },

package/src/screens/HanetCamera/hooks/useHanetCheckinData.js

@@ -16,13 +16,13 @@ const useHanetCheckinData = (hanetCamera) => {
   const [loadingMore, setLoadingMore] = useState(false);
   const [canLoadMore, setCanLoadMore] = useState(true);
 
-  const fetchData = async (page, date) => {
+  const fetchData = async (selectedPage, selectedDate) => {
     if (!hanetCamera) {
       return;
     }
-    setPage(page);
-    setDate(date);
-    if (page === 1) {
+    setPage(selectedPage);
+    setDate(selectedDate);
+    if (selectedPage === 1) {
       setRefreshing(true);
     } else {
       if (!canLoadMore) {
@@ -32,8 +32,8 @@ const useHanetCheckinData = (hanetCamera) => {
     }
 
     const params = new URLSearchParams();
-    params.append('page', page);
-    params.append('date', date.format('YYYY-MM-DD'));
+    params.append('page', selectedPage);
+    params.append('date', selectedDate.format('YYYY-MM-DD'));
     const { success, data } = await axiosGet(
       API.CAMERA.HANET.CHECKIN(hanetCamera.device_id),
       {
@@ -43,17 +43,17 @@ const useHanetCheckinData = (hanetCamera) => {
     if (success && data) {
       setCountMember(data.count_member);
       setCountStranger(data.count_stranger);
-      if (page === 1) {
+      if (selectedPage === 1) {
         setCheckinData(data.results || []);
       } else {
-        setCanLoadMore(page < Math.ceil(data.count / 20));
+        setCanLoadMore(selectedPage < Math.ceil(data.count / 20));
         setCheckinData((prevData) =>
           _.uniqBy(prevData.concat(data.results || []), 'id')
         );
       }
     }
 
-    if (page === 1) {
+    if (selectedPage === 1) {
       setRefreshing(false);
     } else {
       setLoadingMore(false);
@@ -75,8 +75,8 @@ const useHanetCheckinData = (hanetCamera) => {
   const onMomentumScrollBegin = () =>
     (onEndReachedCalledDuringMomentum = false);
 
-  const onChangeDate = (date) => {
-    fetchData(page, date);
+  const onChangeDate = (selectedDate) => {
+    fetchData(page, selectedDate);
   };
 
   const onReceiveNewCheckinData = (data) => {

package/src/screens/HanetCamera/hooks/useHanetPlaceMembers.js

@@ -13,12 +13,12 @@ const useHanetPlaceMembers = (place) => {
   const [loadingMore, setLoadingMore] = useState(false);
   const [canLoadMore, setCanLoadMore] = useState(true);
 
-  const fetchData = async (page) => {
+  const fetchData = async (selectedPage) => {
     if (!place) {
       return;
     }
-    setPage(page);
-    if (page === 1) {
+    setPage(selectedPage);
+    if (selectedPage === 1) {
       setRefreshing(true);
     } else {
       if (!canLoadMore) {
@@ -28,23 +28,23 @@ const useHanetPlaceMembers = (place) => {
     }
 
     const params = new URLSearchParams();
-    params.append('page', page);
-    const { success, data } = await axiosGet(
+    params.append('page', selectedPage);
+    const { success, data: membersData } = await axiosGet(
       API.CAMERA.HANET.PLACE_MEMBERS(place.place_id),
       {
         params,
       }
     );
-    if (success && data) {
-      if (page === 1) {
-        setData(data.results || []);
+    if (success && membersData) {
+      if (selectedPage === 1) {
+        setData(membersData.results || []);
       } else {
-        setCanLoadMore(page < Math.ceil(data.count / 20));
-        setData((prevData) => prevData.concat(data.results || []));
+        setCanLoadMore(selectedPage < Math.ceil(membersData.count / 20));
+        setData((prevData) => prevData.concat(membersData.results || []));
       }
     }
 
-    if (page === 1) {
+    if (selectedPage === 1) {
       setRefreshing(false);
     } else {
       setLoadingMore(false);

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

@@ -8,11 +8,14 @@ export default (unit, sensor) => {
   const [isLoading, setIsLoading] = useState(false);
   const fetchData = useCallback(async () => {
     setIsLoading(true);
-    const { success, data } = await axiosGet(API.UNIT.MANAGE_ACCESS(unit.id), {
-      params: { sensor_id: sensor.id },
-    });
+    const { success, data: accessData } = await axiosGet(
+      API.UNIT.MANAGE_ACCESS(unit.id),
+      {
+        params: { sensor_id: sensor.id },
+      }
+    );
     if (success) {
-      setData(data);
+      setData(accessData);
     }
     setIsLoading(false);
   }, [unit.id, sensor.id]);

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

@@ -136,13 +136,13 @@ describe('Test Render ListSubUnit', () => {
         sensors: [],
       });
     });
-    mock.onPatch(API.SENSOR.CHANGE_SUB_UNIT(200, 3, 73)).reply(200);
+    mock.onPatch(API.DEVICE.CHANGE_SUB_UNIT(200, 3, 73)).reply(200);
     await bottomButtonView.props.onPressMain();
     expect(mockNavigate).toBeCalled();
     const TouchableOpacities = instance.findAllByType(TouchableOpacity);
     await TouchableOpacities[2].props.onPress();
     mockNavigate.mockClear();
-    mock.onPatch(API.SENSOR.CHANGE_SUB_UNIT(200, 3, 73)).reply(400);
+    mock.onPatch(API.DEVICE.CHANGE_SUB_UNIT(200, 3, 73)).reply(400);
     await bottomButtonView.props.onPressMain();
     expect(mockNavigate).not.toBeCalled();
   });

package/src/screens/MoveToAnotherSubUnit/index.js

@@ -49,7 +49,7 @@ const MoveToAnotherSubUnit = memo(({ route }) => {
 
   const onSubmit = useCallback(async () => {
     const { success } = await axiosPatch(
-      API.SENSOR.CHANGE_SUB_UNIT(unit.id, station.id, sensor.id),
+      API.DEVICE.CHANGE_SUB_UNIT(unit.id, station.id, sensor.id),
       {
         station_id: selectedSubUnit.id,
       }

package/src/screens/Notification/__test__/NotificationItem.test.js

@@ -254,10 +254,10 @@ describe('test NotificationItem', () => {
 
   test('test render Notify not in any case', () => {
     item.content_code = 'NEW CASE';
-    (item.params = "{ 'unit_id': 1 }"),
-      act(() => {
-        tree = create(wrapComponent(item));
-      });
+    item.params = "{ 'unit_id': 1 }";
+    act(() => {
+      tree = create(wrapComponent(item));
+    });
     const instance = tree.root;
     const button = instance.findByType(TouchableOpacity);
     act(() => {

package/src/screens/Notification/components/NotificationItem.js

@@ -41,7 +41,7 @@ const NotificationItem = memo(({ item }) => {
     return values;
   }, [paramsJSON]);
 
-  const customColorText = (text, params) => {
+  const customColorText = (text, colorParams) => {
     return text.split('**').map((str, i) =>
       i % 2 === 0 ? (
         <Text type="Body" key={i} style={styles.textNotification}>
@@ -49,7 +49,7 @@ const NotificationItem = memo(({ item }) => {
         </Text>
       ) : (
         <Text type="Body" bold key={i} style={styles.textNotification}>
-          {params[(i - 1) / 2]}
+          {colorParams[(i - 1) / 2]}
         </Text>
       )
     );
@@ -167,7 +167,6 @@ const NotificationItem = memo(({ item }) => {
             }),
         };
       case NOTIFICATION_TYPES.BOOKING_EXPIRED_AND_VIOLATION_CREATED:
-        const violated_booking_id = paramsJSON.violated_booking_id;
         return {
           content: customColorText(
             t(
@@ -178,7 +177,7 @@ const NotificationItem = memo(({ item }) => {
           redirect: () =>
             navigation.navigate(Routes.SmartParkingStack, {
               screen: Routes.SmartParkingBookingDetails,
-              params: { id: violated_booking_id || booking_id },
+              params: { id: paramsJSON.violated_booking_id || booking_id },
             }),
         };
       case NOTIFICATION_TYPES.MOVE_CAR_WITHOUT_PAY_VIOLATION:
@@ -206,7 +205,6 @@ const NotificationItem = memo(({ item }) => {
             }),
         };
       case NOTIFICATION_TYPES.PAY_FINE_AND_EXTEND_SUCCESSFULLY:
-        const new_booking_id = paramsJSON.booking_id_new;
         return {
           content: customColorText(
             t('text_notification_content_pay_fine_and_extend_successfully'),
@@ -215,7 +213,7 @@ const NotificationItem = memo(({ item }) => {
           redirect: () =>
             navigation.navigate(Routes.SmartParkingStack, {
               screen: Routes.SmartParkingBookingDetails,
-              params: { id: new_booking_id },
+              params: { id: paramsJSON.booking_id_new },
             }),
         };
       case NOTIFICATION_TYPES.STOP_VIOLATION_FREE_PARKING_ZONE:
@@ -231,8 +229,7 @@ const NotificationItem = memo(({ item }) => {
             }),
         };
       case NOTIFICATION_TYPES.NOTIFY_INDICATOR:
-        const { sensor_type, summary_id } = paramsJSON;
-        switch (sensor_type) {
+        switch (paramsJSON.sensor_type) {
           case SENSOR_TYPE.AIR_QUALITY:
             return {
               content: customColorText(
@@ -243,7 +240,7 @@ const NotificationItem = memo(({ item }) => {
                 navigation.navigate(Routes.UnitStack, {
                   screen: Routes.UnitSummary,
                   params: {
-                    summaryId: summary_id,
+                    summaryId: paramsJSON.summary_id,
                     unitId,
                   },
                 }),
@@ -259,7 +256,7 @@ const NotificationItem = memo(({ item }) => {
                 navigation.navigate(Routes.UnitStack, {
                   screen: Routes.UnitSummary,
                   params: {
-                    summaryId: summary_id,
+                    summaryId: paramsJSON.summary_id,
                     unitId,
                   },
                 }),
@@ -275,7 +272,7 @@ const NotificationItem = memo(({ item }) => {
                 navigation.navigate(Routes.UnitStack, {
                   screen: Routes.UnitSummary,
                   params: {
-                    summaryId: summary_id,
+                    summaryId: paramsJSON.summary_id,
                     unitId,
                   },
                 }),
@@ -291,7 +288,7 @@ const NotificationItem = memo(({ item }) => {
                 navigation.navigate(Routes.UnitStack, {
                   screen: Routes.UnitSummary,
                   params: {
-                    summaryId: summary_id,
+                    summaryId: paramsJSON.summary_id,
                     unitId,
                   },
                 }),
@@ -307,7 +304,7 @@ const NotificationItem = memo(({ item }) => {
                 navigation.navigate(Routes.UnitStack, {
                   screen: Routes.UnitSummary,
                   params: {
-                    summaryId: summary_id,
+                    summaryId: paramsJSON.summary_id,
                     unitId,
                   },
                 }),
@@ -388,12 +385,13 @@ const NotificationItem = memo(({ item }) => {
         }
 
       case NOTIFICATION_TYPES.NOTIFY_REMOVE_UNIT:
-        const unitOwerName = paramsJSON?.unit_owner_name;
-        const textNotify = unitOwerName
-          ? t('text_notification_content_remove_unit_to_member')
-          : t('text_notification_content_remove_unit_to_owner');
         return {
-          content: customColorText(textNotify, arrParams),
+          content: customColorText(
+            paramsJSON?.unit_owner_name
+              ? t('text_notification_content_remove_unit_to_member')
+              : t('text_notification_content_remove_unit_to_owner'),
+            arrParams
+          ),
           redirect: () => null,
           iconContent: (
             <IconComponent icon={'home'} style={styles.backgroundSummer} />
@@ -474,7 +472,6 @@ const NotificationItem = memo(({ item }) => {
           ),
         };
       case NOTIFICATION_TYPES.NOTIFY_RENAME_SUB_UNIT:
-        const stationId = paramsJSON?.sub_unit_id;
         return {
           content: customColorText(
             t('text_notification_content_rename_sub_unit'),
@@ -485,7 +482,7 @@ const NotificationItem = memo(({ item }) => {
               screen: Routes.UnitDetail,
               params: {
                 unitId,
-                stationId,
+                stationId: paramsJSON?.sub_unit_id,
               },
             });
           },

package/src/screens/Notification/index.js

@@ -13,6 +13,7 @@ import {
   unwatchNotificationData,
 } from '../../utils/Monitor';
 import { useSCContextSelector } from '../../context';
+import { notImplemented } from '../../utils/Utils';
 
 let page = 1;
 
@@ -26,12 +27,18 @@ const Notification = memo(() => {
       <View style={styles.rightComponent}>
         <TouchableOpacity
           style={styles.iconPlus}
-          onPress={() => alert(t('feature_under_development'))}
+          onPress={() => {
+            notImplemented(t);
+          }}
         >
           <Icon name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
 
-        <TouchableOpacity onPress={() => alert(t('feature_under_development'))}>
+        <TouchableOpacity
+          onPress={() => {
+            notImplemented(t);
+          }}
+        >
           <Icon name={'search'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>

package/src/screens/PlayBackCamera/Timer.js

@@ -70,8 +70,8 @@ const Timer = ({
   }, []);
 
   useEffect(() => {
-    const scrollListener = scrollX.addListener(({ value }) => {
-      !isFirstTime && onChangeValue && onChangeValue(value, selected);
+    const scrollListener = scrollX.addListener(({ value: timeValue }) => {
+      !isFirstTime && onChangeValue && onChangeValue(timeValue, selected);
     });
     return () => scrollX.removeListener(scrollListener);
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/screens/PlayBackCamera/index.js

@@ -62,7 +62,7 @@ const PlayBackCamera = () => {
     dateTemp = date;
   }, [selected]);
 
-  const onChangeValue = (value, selected) => {
+  const onChangeValue = (value, selectedTime) => {
     if (!isFirstTime) {
       const currentTime =
         parseFloat(arrHourTemp[0]) +
@@ -78,11 +78,11 @@ const PlayBackCamera = () => {
       const m = t4[0] < 10 ? '0' + t4[0] : t4[0];
       const s = t5 < 10 ? '0' + t5 : t5;
       setHour({ h, m, s });
-      if (value + 0.5 > currentTime * 96 && selected === now) {
+      if (value + 0.5 > currentTime * 96 && selectedTime === now) {
         setUri(item?.configuration?.uri);
       } else {
         const playback = item?.configuration?.playback || '';
-        const date = selected.split('-');
+        const date = selectedTime.split('-');
         setUri(
           `${playback.split('=')[0]}=${date[0]}${date[1]}${
             date[2]