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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.5.9",
+  "version": "0.6.0",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Device/HorizontalBarChart.js

@@ -123,7 +123,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         y: item.y,
       };
     });
-    const dataX = (datas[0].data || []).map((item) => item.x);
+    const dataX = (datas[0]?.data || []).map((item) => item.x);
     const maxY = getMaxValueIndex(dataY);
     if (!isEmpty(maxY.max)) {
       dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });

package/src/commons/Device/PowerConsumptionChart.js

@@ -0,0 +1,154 @@
+import React, { memo, useCallback, useState, useMemo, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import moment from 'moment';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+import { Colors } from '../../configs';
+import Text from '../Text';
+import Button from '../Button';
+import CurrencyInput from '../Form/CurrencyInput';
+import DateTimeRangeChange from '../DateTimeRangeChange';
+import HorizontalBarChart from './HorizontalBarChart';
+import ChartAggregationOption from '../ChartAggregationOption';
+import { formatMoney } from '../../utils/Utils';
+
+const PowerConsumptionChart = memo(
+  ({
+    datas,
+    chartConfig,
+    setChartConfig,
+    style,
+    groupBy,
+    setGroupBy,
+    onChangeDate,
+  }) => {
+    const t = useTranslations();
+    const [price, setPrice] = useState(null);
+
+    const onCalculateCost = useCallback(() => {
+      setChartConfig((config) => ({
+        ...config,
+        price,
+      }));
+    }, [setChartConfig, price]);
+
+    const totalPrice = useMemo(() => {
+      const { price: chartPrice } = chartConfig;
+      if (chartPrice === '' || isNaN(chartPrice)) {
+        return null;
+      }
+      const sum = datas[0].data.reduce((a, b) => a + b.y, 0);
+      const roundedSum = sum * chartPrice;
+      return roundedSum.toFixed();
+    }, [datas, chartConfig]);
+
+    const renderChart = useMemo(() => {
+      return <HorizontalBarChart datas={datas} config={chartConfig} />;
+    }, [chartConfig, datas]);
+
+    const [value, setValue] = useState([
+      moment().subtract(6, 'days'),
+      moment(),
+    ]);
+
+    useEffect(() => {
+      onChangeDate(value[0], value[1]);
+    }, [onChangeDate, value]);
+
+    const selectStart = (date) => {
+      setValue((state) => [date, state[1]]);
+    };
+    const selectEnd = (date) => {
+      setValue((state) => [state[0], date]);
+    };
+
+    return (
+      <View style={style}>
+        <View style={styles.historyView}>
+          <View style={styles.titleHistory}>
+            <Text size={20} semibold color={Colors.Gray9}>
+              {t('history')}
+            </Text>
+
+            <ChartAggregationOption groupBy={groupBy} setGroupBy={setGroupBy} />
+          </View>
+          {groupBy === 'date' && (
+            <DateTimeRangeChange
+              startTime={value[0]}
+              endTime={value[1]}
+              selectStart={selectStart}
+              selectEnd={selectEnd}
+            />
+          )}
+        </View>
+
+        <View style={styles.wrapCalculateCost}>
+          <Text type="H4">
+            {t('input_price_to_calculate_electricity_cost')}
+          </Text>
+          <View style={styles.row}>
+            <CurrencyInput
+              value={price}
+              onChange={setPrice}
+              minValue={0}
+              maxValue={100000000}
+              placeholder={'0'}
+              onSubmitEditing={onCalculateCost}
+            />
+            <Button
+              type="primary"
+              title={t('calculate_cost')}
+              onPress={onCalculateCost}
+              style={styles.buttonCalculate}
+              textSemiBold={false}
+            />
+          </View>
+        </View>
+
+        {renderChart}
+        {!!chartConfig.price && (
+          <Text type="H4">
+            {t('total_power_price')} <Text bold>{formatMoney(totalPrice)}</Text>
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+
+export default PowerConsumptionChart;
+
+const styles = StyleSheet.create({
+  historyView: {
+    paddingTop: 16,
+  },
+  titleHistory: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  chartInfo: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  chartContainer: {
+    marginLeft: -8,
+  },
+  chart: {
+    height: 300,
+  },
+  wrapCalculateCost: {
+    marginTop: 12,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonCalculate: {
+    width: null,
+    flex: null,
+    paddingHorizontal: 12,
+  },
+});

package/src/commons/UnitSummary/ConfigHistoryChart/index.js

@@ -1,8 +1,7 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 import moment from 'moment';
 
 import { API } from '../../../configs';
-import HistoryChart from '../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../utils/Apis/axios';
 import { getPusher } from '../../../utils/Pusher';
 
@@ -39,11 +38,12 @@ export const useFetchConfigHistory = (
       });
 
       const timezone = moment().utcOffset();
-      startDate = startDate.subtract(timezone, 'minutes');
-      endDate = endDate.subtract(timezone, 'minutes');
 
-      params.append('date_from', startDate.format('YYYY-MM-DDTHH:mm:ss'));
-      params.append('date_to', endDate.format('YYYY-MM-DDTHH:mm:ss'));
+      const date_from = moment(startDate).subtract(timezone, 'minutes');
+      const date_to = moment(endDate).subtract(timezone, 'minutes');
+
+      params.append('date_from', date_from.format('YYYY-MM-DDTHH:mm:ss'));
+      params.append('date_to', date_to.format('YYYY-MM-DDTHH:mm:ss'));
 
       const { success, data } = await axiosGet(endpoint, {
         params,
@@ -122,58 +122,3 @@ export const updateConfigChart = async (
     }
   });
 };
-
-let timeoutId;
-
-const ConfigHistoryChart = ({ configs }) => {
-  const [chartData, setChartData] = useState(configs);
-  const [startDate, setStartDate] = useState(
-    moment().subtract(1, 'days').valueOf()
-  );
-  const [endDate, setEndDate] = useState(moment().valueOf());
-
-  useEffect(() => {
-    const fetchData = async () => {
-      let params = new URLSearchParams();
-      let configuration = configs.filter((item) => item.id);
-      configuration.map((item) => {
-        params.append('configs', item.id);
-      });
-      params.append(
-        'date_from',
-        moment(startDate).utc().format('YYYY-MM-DD HH:mm:ss')
-      );
-      params.append(
-        'date_to',
-        moment(endDate).utc().format('YYYY-MM-DD HH:mm:ss')
-      );
-      const { success, data } = await axiosGet(
-        API.CONFIG.DISPLAY_HISTORY_V3(),
-        {
-          params,
-        }
-      );
-      updateConfigChart(success, data, configuration, setChartData);
-    };
-
-    timeoutId = setTimeout(fetchData, 200);
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [startDate, endDate, configs]);
-
-  if (!chartData.length) {
-    return false;
-  }
-
-  return (
-    <HistoryChart
-      configuration={{ type: 'line_chart', date_format: 'DD.MM' }}
-      datas={chartData}
-      setStartDate={setStartDate}
-      setEndDate={setEndDate}
-    />
-  );
-};
-
-export default ConfigHistoryChart;

package/src/hooks/Common/useDevicesStatus.js

@@ -5,20 +5,21 @@ import { axiosGet } from '../../utils/Apis/axios';
 import { API } from '../../configs';
 import { Action } from '../../context/actionType';
 
+let timeoutId = null;
+
 const useDevicesStatus = (unit, devices) => {
   const { setAction } = useContext(SCContext);
   const isNetworkConnected = useSCContextSelector(
     (state) => state.app.isNetworkConnected
   );
   const isFocused = useIsFocused();
-  const timeoutIdRef = useRef(null);
-  const hasFetchedRef = useRef(false);
+  const hasFetched = useRef(false); // Track if data has been fetched
 
   const getDevicesStatus = useCallback(
     async (_unit, _devices) => {
-      if (timeoutIdRef.current) {
-        clearTimeout(timeoutIdRef.current);
-        timeoutIdRef.current = null;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
       }
       const params = new URLSearchParams();
       _devices.forEach((device) => {
@@ -30,24 +31,18 @@ const useDevicesStatus = (unit, devices) => {
           params: params,
         }
       );
-      if (success) {
-        setAction(Action.SET_DEVICES_STATUS, data);
-      }
-      timeoutIdRef.current = setTimeout(
-        () => getDevicesStatus(_unit, _devices),
-        10000
-      );
+      success && setAction(Action.SET_DEVICES_STATUS, data);
+      timeoutId = setTimeout(() => getDevicesStatus(_unit, _devices), 10000);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     },
     [setAction]
   );
 
   useEffect(() => {
-    if (
-      !isFocused ||
-      !devices?.length ||
-      !isNetworkConnected ||
-      hasFetchedRef.current
-    ) {
+    if (!isFocused || !isNetworkConnected || hasFetched.current) {
+      return;
+    }
+    if (!devices?.length) {
       return;
     }
 
@@ -57,19 +52,25 @@ const useDevicesStatus = (unit, devices) => {
     if (!managedDevices.length) {
       return;
     }
+
     getDevicesStatus(unit, devices);
-    hasFetchedRef.current = true;
+    hasFetched.current = true; // Mark as fetched
     return () => {
-      if (timeoutIdRef.current) {
-        clearTimeout(timeoutIdRef.current);
-        timeoutIdRef.current = null;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
       }
     };
   }, [getDevicesStatus, unit, devices, isNetworkConnected, isFocused]);
 
   useEffect(() => {
+    // Reset the hasFetched flag when the component is no longer focused
     if (!isFocused) {
-      hasFetchedRef.current = false;
+      hasFetched.current = false;
+      if (timeoutId) {
+        clearTimeout(timeoutId); // Clear timeout when losing focus
+        timeoutId = null;
+      }
     }
   }, [isFocused]);
 };

package/src/screens/Device/__test__/sensorDisplayItem.test.js

@@ -45,7 +45,7 @@ jest.mock('@react-navigation/native', () => {
 
 describe('Test SensorDisplayItem', () => {
   let tree;
-  it('render DetailHistoryChart', async () => {
+  it('render visualChart', async () => {
     const item = {
       id: 10452,
       order: 0,
@@ -74,8 +74,8 @@ describe('Test SensorDisplayItem', () => {
       tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
-    const detailHistoryChart = instance.findAllByType(VisualChart);
-    expect(detailHistoryChart).toHaveLength(1);
+    const visualChart = instance.findAllByType(VisualChart);
+    expect(visualChart).toHaveLength(1);
   });
 
   it('render ActionGroup', async () => {

package/src/screens/Device/components/SensorDisplayItem.js

@@ -20,7 +20,6 @@ import { useConfigGlobalState } from '../../../iot/states';
 import SmartIr from '../../../screens/SmartIr';
 import { useEvaluateValue } from '../hooks/useEvaluateValue';
 import styles from '../styles';
-import { DetailHistoryChart } from './DetailHistoryChart';
 import VisualChart from './VisualChart';
 import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { Device } from '../../../configs';
@@ -177,9 +176,6 @@ export const SensorDisplayItem = ({
         />
       );
     case 'history':
-      if (configuration?.config === 'power_consumption') {
-        return <DetailHistoryChart item={item} sensor={sensor} />;
-      }
       return (
         <VisualChart
           item={item}

package/src/screens/PlayBackCamera/Styles/index.js

@@ -52,12 +52,14 @@ export default StyleSheet.create({
   },
   commonButton: {
     height: 40,
+    width: 80,
     justifyContent: 'center',
     alignItems: 'center',
   },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginHorizontal: 20,
   },
   container: {
     position: 'absolute',
@@ -66,12 +68,8 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   textDate: {
-    marginLeft: 32,
     marginRight: 10,
   },
-  iconDate: {
-    marginRight: 32,
-  },
   timer: {
     height: 80,
     marginTop: 20,

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>