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

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

@@ -13,18 +13,19 @@ import ListQualityIndicator from '../../../commons/Device/WaterQualitySensor/Lis
 import Compass from '../../../commons/Device/WindDirection/Compass';
 import Anemometer from '../../../commons/Device/WindSpeed/Anemometer';
 import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
-import { AccessibilityLabel } from '../../../configs/Constants';
+import { AccessibilityLabel, WIDGET_TYPE } from '../../../configs/Constants';
 import { useSCContextSelector } from '../../../context';
 import { useRemoteControl } from '../../../hooks/IoT';
 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';
 import DonutCharts from './DonutChart';
+import IFrame from '../../../commons/Widgets/IFrame/IFrame';
+import IFrameWithConfig from '../../../commons/Widgets/IFrameWithConfig/IFrameWithConfig';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
@@ -176,10 +177,27 @@ export const SensorDisplayItem = ({
           isWidgetOrder={isWidgetOrder}
         />
       );
+    case WIDGET_TYPE.iframe:
+      return (
+        <IFrame
+          doAction={doAction}
+          sensor={sensor}
+          id={idTemplate}
+          item={item}
+          isWidgetOrder={isWidgetOrder}
+        />
+      );
+    case WIDGET_TYPE.iframeWithConfig:
+      return (
+        <IFrameWithConfig
+          doAction={doAction}
+          sensor={sensor}
+          id={idTemplate}
+          item={item}
+          isWidgetOrder={isWidgetOrder}
+        />
+      );
     case 'history':
-      if (configuration?.config === 'power_consumption') {
-        return <DetailHistoryChart item={item} sensor={sensor} />;
-      }
       return (
         <VisualChart
           item={item}

package/src/screens/Device/components/__test__/VisualChart.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import MockAdapter from 'axios-mock-adapter';
 import moment from 'moment';
-import { act, create } from 'react-test-renderer';
+import { act } from 'react-test-renderer';
 
 import VisualChart from '../VisualChart';
 import { API } from '../../../../configs';
@@ -11,14 +11,7 @@ import api from '../../../../utils/Apis/axios';
 import ChartAggregationOption from '../../../../commons/ChartAggregationOption';
 import DateTimeRangeChange from '../../../../commons/DateTimeRangeChange';
 import Highcharts from '../../../../commons/Highcharts';
-
-const render = async (component) => {
-  let tree;
-  await act(async () => {
-    tree = await create(component);
-  });
-  return tree;
-};
+import { render } from '../../../../../jest/render';
 
 const mockAxios = new MockAdapter(api.axiosInstance);
 

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>

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';
@@ -21,7 +20,14 @@ jest.mock('@react-navigation/native', () => {
     }),
     useRoute: jest.fn().mockReturnValue({
       params: {
-        item: {},
+        item: {
+          configuration: {
+            time_zone: 0,
+            playback: '',
+            name: 'name',
+            uri: '',
+          },
+        },
         thumbnail: {},
       },
     }),
@@ -43,23 +49,26 @@ describe('Test PlayBackCamera', () => {
       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 +78,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 +108,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 +122,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 +156,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')}`
     );
   });
 });