@eohjsc/react-native-smart-city 0.5.9 → 0.6.1

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) => {
       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/UnitSummary/components/3PPowerConsumption/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import Text from '../../../../commons/Text';
 import { API, Colors } from '../../../../configs';
@@ -8,7 +8,7 @@ import ListQualityIndicator from '../../../../commons/Device/WaterQualitySensor/
 import PMSensorIndicator from '../../../../commons/Device/PMSensor/PMSensorIndicator';
 import VisualChart from '../../../Device/components/VisualChart';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
-import HistoryChart from '../../../../commons/Device/HistoryChart';
+import PowerConsumptionChart from '../../../../commons/Device/PowerConsumptionChart';
 import { axiosGet } from '../../../../utils/Apis/axios';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import { useWatchConfigs } from '../../../../hooks/IoT';
@@ -114,10 +114,6 @@ const ThreePhasePowerConsumption = memo(({ summaryDetail }) => {
     return !!listConfigs;
   }, [listConfigs]);
 
-  const [startDate, setStartDate] = useState(
-    moment().subtract(6, 'days').valueOf()
-  );
-  const [endDate, setEndDate] = useState(moment().valueOf());
   const [groupBy, setGroupBy] = useState('date');
   const [getData, setData] = useState({});
   const [chartConfig, setChartConfig] = useState({
@@ -125,8 +121,8 @@ const ThreePhasePowerConsumption = memo(({ summaryDetail }) => {
     price: '',
   });
 
-  useEffect(() => {
-    const fetchData = async () => {
+  const fetchData = useCallback(
+    async (startDate, endDate) => {
       let params = new URLSearchParams();
       params.append('config', total_power);
       params.append('group_by', groupBy);
@@ -143,11 +139,9 @@ const ThreePhasePowerConsumption = memo(({ summaryDetail }) => {
       if (success) {
         setData(data);
       }
-    };
-    if (total_power) {
-      fetchData();
-    }
-  }, [startDate, endDate, total_power, groupBy]);
+    },
+    [groupBy, total_power]
+  );
 
   const dataTotal = useMemo(() => {
     return total_power
@@ -191,21 +185,14 @@ const ThreePhasePowerConsumption = memo(({ summaryDetail }) => {
         </Text>
 
         <PMSensorIndicator data={dataTotal} style={styles.styleTotalPower} />
-        {!!getData?.length && (
-          <HistoryChart
+        {total_power && (
+          <PowerConsumptionChart
+            onChangeDate={fetchData}
             datas={getData}
             chartConfig={chartConfig}
             setChartConfig={setChartConfig}
-            formatType={'date'}
-            startDate={startDate}
-            setEndDate={setEndDate}
-            setStartDate={setStartDate}
             groupBy={groupBy}
             setGroupBy={setGroupBy}
-            configuration={{
-              type: 'horizontal_bar_chart',
-              config: 'power_consumption',
-            }}
           />
         )}
       </Section>

package/src/screens/UnitSummary/components/PowerConsumption/__test__/PowerConsumption.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
+import renderer, { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 
 import { AccessibilityLabel } from '../../../../../configs/Constants';
@@ -104,13 +104,67 @@ describe('Test PowerConsumption', () => {
       },
     };
 
-    mock.onGet(API.VALUE_CONSUME.DISPLAY_HISTORY()).reply(200);
+    const data = [
+      {
+        config: 207,
+        data: [
+          {
+            x: 'Thu-20.06',
+            y: 7.94,
+          },
+          {
+            x: 'Wed-19.06',
+            y: 9.73,
+          },
+          {
+            x: 'Tue-18.06',
+            y: 4.11,
+          },
+          {
+            x: 'Mon-17.06',
+            y: 8.52,
+          },
+          {
+            x: 'Sun-16.06',
+            y: 5.72,
+          },
+          {
+            x: 'Sat-15.06',
+            y: 9.53,
+          },
+          {
+            x: 'Fri-14.06',
+            y: 11.83,
+          },
+        ],
+      },
+    ];
+    mock.onGet(API.VALUE_CONSUME.DISPLAY_HISTORY()).reply(200, data);
     await act(async () => {
-      tree = await renderer.create(wrapComponent(summaryDetail));
+      tree = await create(wrapComponent(summaryDetail));
     });
     const instance = tree.root;
     const Todays = instance.findByType(Today);
     expect(Todays).toBeDefined();
+
+    const input_calculate_cost = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.INPUT_CALCULATE_COST
+    );
+    await act(async () => {
+      input_calculate_cost.props.onChangeText('1000');
+    });
+    const button_calculate_cost = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_CALCULATE_COST
+    );
+    await act(async () => {
+      button_calculate_cost.props.onPress();
+    });
+    const totalPrice = instance.find(
+      (el) => el.props.accessibilityLabel === AccessibilityLabel.TOTAL_PRICE
+    );
+    expect(totalPrice.props.children).toEqual('57.380 đ');
   });
 
   it('render with unsuccess fetch', async () => {

package/src/screens/UnitSummary/components/PowerConsumption/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, useEffect, useState } from 'react';
+import React, { memo, useMemo, useState, useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import moment from 'moment';
@@ -8,7 +8,7 @@ import Text from '../../../../commons/Text';
 import { Section, Today } from '../../../../commons';
 import ListQualityIndicator from '../../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
 import PMSensorIndicator from '../../../../commons/Device/PMSensor/PMSensorIndicator';
-import HistoryChart from '../../../../commons/Device/HistoryChart';
+import PowerConsumptionChart from '../../../../commons/Device/PowerConsumptionChart';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import { axiosGet } from '../../../../utils/Apis/axios';
 import VisualChart from '../../../Device/components/VisualChart';
@@ -20,8 +20,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
   const { volt, current, active_power, power_factor, total_power } =
     listConfigs || {};
   useWatchConfigs([volt, current, active_power, power_factor, total_power]);
-  const [startDate, setStartDate] = useState(moment().subtract(6, 'days'));
-  const [endDate, setEndDate] = useState(moment());
+
   const [groupBy, setGroupBy] = useState('date');
   const [getData, setData] = useState([]);
   const [chartConfig, setChartConfig] = useState({
@@ -32,13 +31,15 @@ const PowerConsumption = memo(({ summaryDetail }) => {
     return !!listConfigs;
   }, [listConfigs]);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const createDataItem = (id, color, title, measure) => ({
-    id,
-    color,
-    title,
-    measure,
-  });
+  const createDataItem = useCallback(
+    (id, color, title, measure) => ({
+      id,
+      color,
+      title,
+      measure,
+    }),
+    []
+  );
 
   const configs = useMemo(() => {
     const data = [];
@@ -77,10 +78,10 @@ const PowerConsumption = memo(({ summaryDetail }) => {
           ),
         ]
       : [];
-  }, [total_power]);
+  }, [createDataItem, total_power]);
 
-  useEffect(() => {
-    const fetchData = async () => {
+  const fetchData = useCallback(
+    async (startDate, endDate) => {
       let params = new URLSearchParams();
       params.append('config', total_power);
       params.append('group_by', groupBy);
@@ -97,11 +98,9 @@ const PowerConsumption = memo(({ summaryDetail }) => {
       if (success) {
         setData(data);
       }
-    };
-    if (total_power) {
-      fetchData();
-    }
-  }, [startDate, endDate, total_power, groupBy]);
+    },
+    [groupBy, total_power]
+  );
 
   return (
     <>
@@ -123,22 +122,14 @@ const PowerConsumption = memo(({ summaryDetail }) => {
         </Text>
 
         <PMSensorIndicator data={dataTotal} style={styles.styleTotalPower} />
-        {!!getData?.length && (
-          <HistoryChart
+        {total_power && (
+          <PowerConsumptionChart
+            onChangeDate={fetchData}
             datas={getData}
             chartConfig={chartConfig}
             setChartConfig={setChartConfig}
-            formatType={'date'}
-            startDate={startDate}
-            endDate={endDate}
-            setEndDate={setEndDate}
-            setStartDate={setStartDate}
             groupBy={groupBy}
             setGroupBy={setGroupBy}
-            configuration={{
-              type: 'horizontal_bar_chart',
-              config: 'power_consumption',
-            }}
           />
         )}
       </Section>