@eohjsc/react-native-smart-city 0.5.9 → 0.6.0-rc2

package/src/screens/PlayBackCamera/Timer.js

@@ -1,12 +1,15 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 import { View, Animated } from 'react-native';
 import { Constants, Colors } from '../../configs';
 import Text from '../../commons/Text';
 import styles from './Styles/TimerStyles';
 
-let time = -1;
-let isFirstTime = true;
-
 const Timer = ({
   width = Constants.width,
   onChangeValue,
@@ -29,70 +32,91 @@ const Timer = ({
 }) => {
   const scrollViewRef = useRef();
   const [scrollX] = useState(new Animated.Value(0));
+  const isFirstTime = useRef(true); // Use useRef to track the first render
 
-  const snapSegment = segmentWidth + segmentSpacing;
-  const spacerWidth = (width - segmentWidth) / 2;
-  const timerWidth = width - segmentWidth + (maximum - minimum) * snapSegment;
+  const snapSegment = useMemo(
+    () => segmentWidth + segmentSpacing,
+    [segmentWidth, segmentSpacing]
+  );
+  const spacerWidth = useMemo(
+    () => (width - segmentWidth) / 2,
+    [width, segmentWidth]
+  );
+  const timerWidth = useMemo(
+    () => width - segmentWidth + (maximum - minimum) * snapSegment,
+    [width, segmentWidth, maximum, minimum, snapSegment]
+  );
 
   const renderTime = useMemo(() => {
+    let time = -1;
     const data = [...Array(maximum - minimum + 1).keys()].map(
       (i) => i + minimum
     );
+
     return (
       <View style={[styles.wrap, { width: timerWidth + segmentWidth }]}>
-        <View
-          style={{
-            width: spacerWidth,
-          }}
-        />
-        {data.map((i, index) => {
+        <View style={{ width: spacerWidth }} />
+        {data.map((i) => {
+          const isStep = i % step === 0;
+          if (isStep) {
+            time += 1;
+          }
           return (
             <View key={i}>
               <View
                 style={{
-                  backgroundColor: i % step === 0 ? stepColor : normalColor,
-                  height: i % step === 0 ? stepHeight : normalHeight,
+                  backgroundColor: isStep ? stepColor : normalColor,
+                  height: isStep ? stepHeight : normalHeight,
                   width: segmentWidth,
                   marginRight: segmentSpacing,
                 }}
               />
-              {i % step === 0 && (
-                <Text type="Label" color={Colors.Gray7} style={styles.time}>{`${
-                  time < 9 ? '0' + ++time : ++time
-                }:00`}</Text>
+              {isStep && (
+                <Text type="Label" color={Colors.Gray7} style={styles.time}>
+                  {`${time < 9 ? '0' + time : time}:00`}
+                </Text>
               )}
             </View>
           );
         })}
       </View>
     );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [
+    maximum,
+    minimum,
+    step,
+    stepColor,
+    normalColor,
+    stepHeight,
+    normalHeight,
+    segmentWidth,
+    segmentSpacing,
+    timerWidth,
+    spacerWidth,
+  ]);
 
   useEffect(() => {
     const scrollListener = scrollX.addListener(({ value: timeValue }) => {
-      !isFirstTime && onChangeValue && onChangeValue(timeValue, selected);
+      if (!isFirstTime.current) {
+        onChangeValue(timeValue, selected);
+      }
     });
+
     return () => scrollX.removeListener(scrollListener);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isFirstTime, selected]);
+  }, [scrollX, onChangeValue, selected]);
 
   useEffect(() => {
-    return () => {
-      time = -1;
-      isFirstTime = true;
-    };
-  }, []);
+    const timeoutId = setTimeout(() => {
+      if (scrollViewRef.current) {
+        scrollViewRef.current.scrollTo({ x: value, animated: false });
+      }
+      isFirstTime.current = false; // Set to false after initial scroll
+    }, 400);
 
-  useEffect(() => {
-    if (isFirstTime) {
-      const to = setTimeout(() => {
-        scrollViewRef?.current.scrollTo({ x: value });
-        clearTimeout(to);
-        isFirstTime = false;
-      }, 400);
-    }
-  }, [value, scrollViewRef]);
+    return () => clearTimeout(timeoutId);
+  }, [value]);
+
+  const handleScrollEndDrag = useCallback(onScrollEndDrag, [onScrollEndDrag]);
 
   return (
     <View>
@@ -104,17 +128,11 @@ const Timer = ({
         showsHorizontalScrollIndicator={false}
         scrollEventThrottle={16}
         onScroll={Animated.event(
-          [
-            {
-              nativeEvent: {
-                contentOffset: { x: scrollX },
-              },
-            },
-          ],
+          [{ nativeEvent: { contentOffset: { x: scrollX } } }],
           { useNativeDriver: true }
         )}
-        onScrollEndDrag={onScrollEndDrag}
-        onMomentumScrollEnd={onScrollEndDrag}
+        onScrollEndDrag={handleScrollEndDrag}
+        onMomentumScrollEnd={handleScrollEndDrag}
       >
         {renderTime}
       </Animated.ScrollView>

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

@@ -5,7 +5,6 @@ import { Calendar } from 'react-native-calendars';
 
 import { act, create } from 'react-test-renderer';
 import PlayBackCamera from '..';
-import { ModalCustom } from '../../../commons/Modal';
 import Text from '../../../commons/Text';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
@@ -13,21 +12,6 @@ import { mockSCStore } from '../../../context/mockStore';
 import MediaPlayerFull from '../../../commons/MediaPlayerDetail/MediaPlayerFull';
 import Timer from '../Timer';
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: jest.fn(),
-    }),
-    useRoute: jest.fn().mockReturnValue({
-      params: {
-        item: {},
-        thumbnail: {},
-      },
-    }),
-  };
-});
-
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
     <PlayBackCamera />
@@ -37,29 +21,45 @@ const wrapComponent = () => (
 describe('Test PlayBackCamera', () => {
   let tree;
   jest.useFakeTimers();
+  global.mockedUseRoute.mockReturnValue({
+    params: {
+      item: {
+        configuration: {
+          time_zone: 0,
+          playback: '',
+          name: 'name',
+          uri: '',
+        },
+      },
+      thumbnail: {},
+    },
+  });
 
   it('Test render', async () => {
     await act(async () => {
       tree = await create(wrapComponent());
     });
     const instance = tree.root;
-    const HeaderCustoms = instance.findAllByType(ModalCustom);
-    expect(HeaderCustoms).toHaveLength(2);
-    const textOpenModal = instance.findAll(
+
+    const textOpenModal = instance.find(
       (el) =>
         el.props.accessibilityLabel === AccessibilityLabel.OPEN_DATE_MODAL &&
-        el.type === Text
+        el.type === TouchableOpacity
     );
 
     await act(async () => {
-      textOpenModal[0].props.onPress();
+      textOpenModal.props.onPress();
     });
 
     const texts = instance.findAllByType(Text);
     await act(async () => {
       texts[0].props.onPress();
     });
-    expect(HeaderCustoms[0].props.isVisible).toBeTruthy();
+
+    let modalCustom = instance.find(
+      (el) => el.props.accessibilityLabel === AccessibilityLabel.MODAL_CUSTOM
+    );
+    expect(modalCustom.props.isVisible).toBeTruthy();
 
     const Calendars = instance.findAllByType(Calendar);
     expect(Calendars).toHaveLength(1);
@@ -69,27 +69,26 @@ describe('Test PlayBackCamera', () => {
 
     expect(texts[0].props.children).toEqual('01/07/2022');
 
-    const buttonCancel = instance.findAll(
+    const buttonCancel = instance.find(
       (el) =>
         el.props.accessibilityLabel === AccessibilityLabel.ON_PRESS_CANCEL &&
         el.type === TouchableOpacity
     );
     await act(async () => {
-      buttonCancel[0].props.onPress();
+      buttonCancel.props.onPress();
     });
-    expect(HeaderCustoms[0].props.isVisible).toBeFalsy();
+
     const todayStr = moment().format('DD/MM/YYYY');
     expect(texts[0].props.children).toEqual(todayStr);
 
-    const buttonOK = instance.findAll(
+    const buttonOK = instance.find(
       (el) =>
         el.props.accessibilityLabel === AccessibilityLabel.ON_PRESS_OK &&
         el.type === TouchableOpacity
     );
     await act(async () => {
-      buttonOK[0].props.onPress();
+      buttonOK.props.onPress();
     });
-    expect(HeaderCustoms[0].props.isVisible).toBeFalsy();
 
     const buttonAddDate = instance.findAll(
       (el) =>
@@ -100,7 +99,9 @@ describe('Test PlayBackCamera', () => {
     await act(async () => {
       await buttonAddDate[0].props.onPress();
     });
-    expect(texts[0].props.children).toEqual(todayStr);
+    expect(texts[0].props.children).toEqual(
+      moment().add(1, 'days').format('DD/MM/YYYY')
+    );
 
     const buttonSubDate = instance.findAll(
       (el) =>
@@ -112,9 +113,7 @@ describe('Test PlayBackCamera', () => {
       await buttonSubDate[0].props.onPress();
     });
 
-    expect(texts[0].props.children).toEqual(
-      moment().subtract(1, 'days').format('DD/MM/YYYY')
-    );
+    expect(texts[0].props.children).toEqual(moment().format('DD/MM/YYYY'));
     // todo Bang add timer test later
     const timerScroll = instance.findAllByType(Animated.ScrollView);
     const timer = instance.findAllByType(Timer);
@@ -148,7 +147,7 @@ describe('Test PlayBackCamera', () => {
     });
     const media = instance.findByType(MediaPlayerFull);
     expect(media.props.uri).toEqual(
-      `=${moment().subtract(1, 'days').format('YYYYMMDDT003730\\Z')}`
+      `=${moment().format('YYYYMMDDT003730\\Z')}`
     );
   });
 });

package/src/screens/PlayBackCamera/index.js

@@ -1,5 +1,11 @@
 import moment from 'moment';
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
 import { Calendar } from 'react-native-calendars';
 
@@ -15,75 +21,83 @@ import { setStatusBarPreview } from '../../hooks/Common/useStatusBar';
 import MediaPlayerFull from '../../commons/MediaPlayerDetail/MediaPlayerFull';
 import { DATE_TIME_FORMAT, AccessibilityLabel } from '../../configs/Constants';
 
-let dateTemp = moment().format(DATE_TIME_FORMAT.YMD);
-let isFirstTime = true;
-
 const PlayBackCamera = () => {
-  const now = useMemo(() => moment().format(DATE_TIME_FORMAT.YMD), []);
-  const hourTemp = useMemo(() => moment().format('HH:mm:ss'), []);
-  const arrHourTemp = useMemo(() => hourTemp.split(':'), [hourTemp]);
   const t = useTranslations();
   const { params = {} } = useRoute();
-  const { item = {}, thumbnail } = params;
-  const [selected, setSelected] = useState(dateTemp);
+  const { item, thumbnail } = params;
+  const { configuration } = item;
+  const { time_zone, playback, name, uri } = configuration;
+
+  const initialDate = useMemo(() => moment().format(DATE_TIME_FORMAT.YMD), []);
+  const initialHour = useMemo(() => moment().format('HH:mm:ss').split(':'), []);
+
+  const [selected, setSelected] = useState(initialDate);
   const [isShowDate, setIsShowDate] = useState(false);
   const [hour, setHour] = useState({
-    h: arrHourTemp[0],
-    m: arrHourTemp[1],
-    s: arrHourTemp[2],
+    h: initialHour[0],
+    m: initialHour[1],
+    s: initialHour[2],
   });
-  const [uri, setUri] = useState(item?.configuration?.uri);
-  const [mainURI, setMainURI] = useState(uri);
+  const [uriCamera, setUriCamera] = useState(uri);
   const [paused, setPaused] = useState(false);
+  const isFirstTime = useRef(true); // Use useRef to track the first render
+  const tempDate = useRef(initialDate);
+
   const onOpenDateModal = useCallback(() => {
+    tempDate.current = selected;
     setIsShowDate(true);
-  }, []);
+  }, [selected, setIsShowDate]);
 
   const onPressCancel = useCallback(() => {
     setIsShowDate(false);
-    setSelected(dateTemp);
-  }, []);
+    setSelected(tempDate.current);
+  }, [setIsShowDate]);
+
+  const updateCameraPlayback = useCallback(
+    async (selectedTime) => {
+      setPaused(true);
+      await setUriPlayBack(selectedTime, hour);
+      setPaused(false);
+    },
+    [hour, setUriPlayBack]
+  );
 
   const onPressOk = useCallback(() => {
     setIsShowDate(false);
-    dateTemp = selected;
-  }, [selected]);
+    updateCameraPlayback(selected);
+  }, [selected, setIsShowDate, updateCameraPlayback]);
 
   const onAddDate = useCallback(() => {
-    setPaused(true);
-    if (selected !== now) {
-      const date = moment(selected).add(1, 'days').format(DATE_TIME_FORMAT.YMD);
-      setSelected(date);
-      dateTemp = date;
-    }
-  }, [selected, now]);
+    const nextDate = moment(selected)
+      .add(1, 'days')
+      .format(DATE_TIME_FORMAT.YMD);
+    setSelected(nextDate);
+    updateCameraPlayback(nextDate);
+  }, [selected, updateCameraPlayback]);
 
   const onSubtractDate = useCallback(() => {
-    setPaused(true);
-    const date = moment(selected)
+    const prevDate = moment(selected)
       .subtract(1, 'days')
       .format(DATE_TIME_FORMAT.YMD);
-    setSelected(date);
-    dateTemp = date;
-  }, [selected]);
+    setSelected(prevDate);
+    updateCameraPlayback(prevDate);
+  }, [selected, updateCameraPlayback]);
 
   const getHourWithTimeZone = useCallback(
-    // eslint-disable-next-line no-shadow
-    (hour) => {
+    (_hour) => {
       const hourWithTimezone =
-        parseInt(hour, 10) + parseInt(item?.configuration?.time_zone || 0, 10);
+        parseInt(_hour, 10) + parseInt(time_zone || 0, 10);
       if (hourWithTimezone < 0 || hourWithTimezone > 9) {
         return hourWithTimezone;
       }
       return '0' + hourWithTimezone;
     },
-    [item?.configuration?.time_zone]
+    [time_zone]
   );
 
   const onScrollEndDrag = useCallback(() => {
-    setMainURI(uri);
     setPaused(false);
-  }, [uri]);
+  }, []);
 
   const onDayPress = useCallback((day) => {
     setPaused(true);
@@ -99,13 +113,37 @@ const PlayBackCamera = () => {
     addMonth && addMonth();
   }, []);
 
+  const setUriPlayBack = useCallback(
+    (selectedTime, time) => {
+      const currentTime = moment().valueOf();
+      const selectedDayTime = moment(
+        `${selectedTime} ${time.h}:${time.m}:${time.s}`,
+        'YYYY-MM-DD HH:mm:SS'
+      ).valueOf();
+
+      if (selectedDayTime > currentTime) {
+        setUriCamera(uri);
+      } else {
+        if (playback.includes('chID')) {
+          setUriCamera(
+            `${playback}&date=${selectedTime}&time=${time.h}:${time.m}:${time.s}&timelen=100&StreamType=main`
+          );
+        } else {
+          const date = selectedTime.split('-');
+          setUriCamera(
+            `${playback.split('=')[0]}=${date[0]}${date[1]}${
+              date[2]
+            }T${getHourWithTimeZone(time.h)}${time.m}${time.s}Z`
+          );
+        }
+      }
+    },
+    [getHourWithTimeZone, playback, uri]
+  );
+
   const onChangeValue = useCallback(
     (value, selectedTime) => {
-      if (!isFirstTime) {
-        const currentTime =
-          parseFloat(arrHourTemp[0]) +
-          parseFloat(arrHourTemp[1] / 60) +
-          parseFloat(arrHourTemp[2] / 3600);
+      if (!isFirstTime.current) {
         setPaused(true);
         const t1 = value / 96;
         const t2 = t1.toString().split('.');
@@ -115,62 +153,23 @@ const PlayBackCamera = () => {
         const h = t2[0] < 10 ? '0' + t2[0] : t2[0];
         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 && selectedTime === now) {
-          setUri(item?.configuration?.uri);
-        } else {
-          const playback = item?.configuration?.playback || '';
-          const date = selectedTime.split('-');
-          setUri(
-            `${playback.split('=')[0]}=${date[0]}${date[1]}${
-              date[2]
-            }T${getHourWithTimeZone(h)}${m}${s}Z`
-          );
-        }
+        setUriPlayBack(selectedTime, { h, m, s });
       }
     },
-    [
-      arrHourTemp,
-      getHourWithTimeZone,
-      item?.configuration?.playback,
-      item?.configuration?.uri,
-      now,
-    ]
+    [setUriPlayBack]
   );
 
-  const renderArrow = useCallback((direction) => {
-    return (
+  const renderArrow = useCallback(
+    (direction) => (
       <Image
         source={Images.arrowLeft}
         style={[direction !== 'left' && styles.arrowRight]}
       />
-    );
-  }, []);
-
-  useEffect(() => {
-    if (!isFirstTime) {
-      const date = selected.split('-');
-      const playback = item?.configuration?.playback || '';
-      if (
-        selected === now &&
-        parseInt(moment().format('HH:mm:ss'), 10) <=
-          parseInt(`${hour.h}:${hour.m}:${hour.s}`, 10)
-      ) {
-        setMainURI(item?.configuration?.uri);
-      } else {
-        setMainURI(
-          `${playback.split('=')[0]}=${date[0]}${date[1]}${
-            date[2]
-          }T${getHourWithTimeZone(hour.h)}${hour.m}${hour.s}Z`
-        );
-      }
-      const to = setTimeout(() => {
-        setPaused(false);
-        clearTimeout(to);
-      }, 100);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selected, getHourWithTimeZone]);
+    ),
+    []
+  );
 
   useEffect(() => {
     setStatusBarPreview(
@@ -179,13 +178,13 @@ const PlayBackCamera = () => {
   }, [isShowDate]);
 
   useEffect(() => {
-    const to = setTimeout(() => {
-      isFirstTime = false;
-      clearTimeout(to);
+    const timeoutId = setTimeout(() => {
+      isFirstTime.current = false;
     }, 2000);
+
     return () => {
-      dateTemp = moment().format(DATE_TIME_FORMAT.YMD);
-      isFirstTime = true;
+      isFirstTime.current = true;
+      clearTimeout(timeoutId);
     };
   }, []);
 
@@ -193,11 +192,11 @@ const PlayBackCamera = () => {
     <View style={styles.wrap}>
       <HeaderCustom title={t('video_detail')} />
       <MediaPlayerFull
-        uri={mainURI}
+        uri={uriCamera}
         isPaused={paused}
         thumbnail={thumbnail}
         isShowFullScreenIcon
-        cameraName={item?.configuration?.name}
+        cameraName={name}
         amount={1}
       />
       <View style={styles.container}>
@@ -209,19 +208,16 @@ const PlayBackCamera = () => {
           >
             <Image source={Images.arrowLeft} />
           </TouchableOpacity>
-          <Text
-            accessibilityLabel={AccessibilityLabel.OPEN_DATE_MODAL}
-            onPress={onOpenDateModal}
-            style={styles.textDate}
-            type="h4"
-          >
-            {moment(selected).format('DD/MM/YYYY')}
-          </Text>
+
           <TouchableOpacity
+            accessibilityLabel={AccessibilityLabel.OPEN_DATE_MODAL}
             onPress={onOpenDateModal}
-            style={styles.commonButton}
+            style={styles.row}
           >
-            <Image source={Images.file} style={styles.iconDate} />
+            <Text onPress={onOpenDateModal} style={styles.textDate} type="h4">
+              {moment(selected).format('DD/MM/YYYY')}
+            </Text>
+            <Image source={Images.file} />
           </TouchableOpacity>
           <TouchableOpacity
             accessibilityLabel={AccessibilityLabel.ON_PRESS_ADD_DATE}
@@ -238,9 +234,9 @@ const PlayBackCamera = () => {
         <View style={styles.timer}>
           <Timer
             value={
-              (parseFloat(arrHourTemp[0]) +
-                parseFloat(arrHourTemp[1] / 60) +
-                parseFloat(arrHourTemp[2] / 3600)) *
+              (parseFloat(initialHour[0]) +
+                parseFloat(initialHour[1] / 60) +
+                parseFloat(initialHour[2] / 3600)) *
               96
             }
             minimum={0}
@@ -260,11 +256,18 @@ const PlayBackCamera = () => {
         </View>
       </View>
 
-      <ModalCustom isVisible={isShowDate} style={styles.modal}>
+      <ModalCustom
+        isVisible={isShowDate}
+        style={styles.modal}
+        onBackdropPress={() => {
+          setIsShowDate(false);
+        }}
+        accessibilityLabel={AccessibilityLabel.MODAL_CUSTOM}
+      >
         <View style={styles.wrapDate}>
           <Calendar
             onDayPress={onDayPress}
-            maxDate={moment().format(DATE_TIME_FORMAT.YMD)}
+            maxDate={initialDate}
             onPressArrowLeft={onPressArrowLeft}
             onPressArrowRight={onPressArrowRight}
             markedDates={{
@@ -275,7 +278,7 @@ const PlayBackCamera = () => {
                 selectedTextColor: Colors.White,
               },
             }}
-            enableSwipeMonths={true}
+            enableSwipeMonths
             renderArrow={renderArrow}
             headerStyle={styles.headerStyle}
           />

package/src/screens/ScanChipQR/components/QRScan/__test__/QRScan.test.js

@@ -6,20 +6,9 @@ import { SCProvider } from '../../../../../context';
 import { mockSCStore } from '../../../../../context/mockStore';
 import QRScan from '../index';
 
-const mockedPop = jest.fn();
 const mockedOnScan = jest.fn();
 const mockedSetLoading = jest.fn();
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      pop: mockedPop,
-    }),
-    useIsFocused: jest.fn(),
-  };
-});
-
 const wrapComponent = (data) => (
   <SCProvider initState={mockSCStore({})}>
     <QRScan {...data} />