@eohjsc/react-native-smart-city 0.3.90 → 0.3.91

package/src/screens/AllCamera/index.js

@@ -19,6 +19,37 @@ import { Constants, normalize } from '../../configs/Constants';
 import styles from './Styles/index';
 import Routes from '../../utils/Route';
 
+export const CameraItem = ({
+  item,
+  width,
+  height,
+  thumbnail,
+  amount,
+  handleFullScreen,
+  goToPlayBack,
+}) => {
+  return (
+    <View style={styles.wrap}>
+      {!!item && (
+        <MediaPlayerDetail
+          id={item?.id}
+          uri={item?.configuration?.uri}
+          thumbnail={thumbnail}
+          key={`camera-device-${item?.id}`}
+          style={styles.camera}
+          wrapStyles={styles.wrapStyles}
+          resizeMode={'cover'}
+          cameraName={amount !== 1 && item?.configuration?.name}
+          amount={amount}
+          handleFullScreen={handleFullScreen}
+          goToPlayBack={goToPlayBack(item, thumbnail)}
+          width={width}
+          height={height}
+        />
+      )}
+    </View>
+  );
+};
 const AllCamera = () => {
   const t = useTranslations();
   const carouselRef = useRef();
@@ -73,35 +104,18 @@ const AllCamera = () => {
     [navigate]
   );
 
-  const CameraItem = ({ item, width, height }) => {
+  const renderItem = ({ item }) => {
     return (
-      <View style={styles.wrap}>
-        {!!item && (
-          <MediaPlayerDetail
-            id={item?.id}
-            uri={item?.configuration?.uri}
+      <View style={styles.wrapItem}>
+        {amount === 1 ? (
+          <CameraItem
+            key={item?.id}
+            item={item}
             thumbnail={thumbnail}
-            key={`camera-device-${item?.id}`}
-            style={styles.camera}
-            wrapStyles={styles.wrapStyles}
-            resizeMode={'cover'}
-            cameraName={amount !== 1 && item?.configuration?.name}
             amount={amount}
             handleFullScreen={handleFullScreen}
-            goToPlayBack={goToPlayBack(item, thumbnail)}
-            width={width}
-            height={height}
+            goToPlayBack={goToPlayBack}
           />
-        )}
-      </View>
-    );
-  };
-
-  const renderItem = ({ item }) => {
-    return (
-      <View style={styles.wrapItem}>
-        {amount === 1 ? (
-          <CameraItem key={item?.id} item={item} />
         ) : amount === 4 ? (
           <>
             <View style={styles.row}>
@@ -110,12 +124,20 @@ const AllCamera = () => {
                 item={item[0]}
                 width={Constants.width / 2}
                 height={112}
+                thumbnail={thumbnail}
+                amount={amount}
+                handleFullScreen={handleFullScreen}
+                goToPlayBack={goToPlayBack}
               />
               <CameraItem
                 key={item?.id}
                 item={item[1]}
                 width={Constants.width / 2}
                 height={112}
+                thumbnail={thumbnail}
+                amount={amount}
+                handleFullScreen={handleFullScreen}
+                goToPlayBack={goToPlayBack}
               />
             </View>
             <View style={styles.row}>
@@ -130,20 +152,66 @@ const AllCamera = () => {
                 item={item[3]}
                 width={Constants.width / 2}
                 height={112}
+                thumbnail={thumbnail}
+                amount={amount}
+                handleFullScreen={handleFullScreen}
+                goToPlayBack={goToPlayBack}
               />
             </View>
           </>
         ) : (
           <>
             <View style={styles.row}>
-              <CameraItem key={item?.id} item={item[0]} />
-              <CameraItem key={item?.id} item={item[1]} />
-              <CameraItem key={item?.id} item={item[2]} />
+              <CameraItem
+                key={item?.id}
+                item={item[0]}
+                thumbnail={thumbnail}
+                amount={amount}
+                handleFullScreen={handleFullScreen}
+                goToPlayBack={goToPlayBack}
+              />
+              <CameraItem
+                key={item?.id}
+                item={item[1]}
+                thumbnail={thumbnail}
+                amount={amount}
+                handleFullScreen={handleFullScreen}
+                goToPlayBack={goToPlayBack}
+              />
+              <CameraItem
+                key={item?.id}
+                item={item[2]}
+                thumbnail={thumbnail}
+                amount={amount}
+                handleFullScreen={handleFullScreen}
+                goToPlayBack={goToPlayBack}
+              />
             </View>
             <View style={styles.row}>
-              <CameraItem key={item?.id} item={item[3]} />
-              <CameraItem key={item?.id} item={item[4]} />
-              <CameraItem key={item?.id} item={item[5]} />
+              <CameraItem
+                key={item?.id}
+                item={item[3]}
+                thumbnail={thumbnail}
+                amount={amount}
+                handleFullScreen={handleFullScreen}
+                goToPlayBack={goToPlayBack}
+              />
+              <CameraItem
+                key={item?.id}
+                item={item[4]}
+                thumbnail={thumbnail}
+                amount={amount}
+                handleFullScreen={handleFullScreen}
+                goToPlayBack={goToPlayBack}
+              />
+              <CameraItem
+                key={item?.id}
+                item={item[5]}
+                thumbnail={thumbnail}
+                amount={amount}
+                handleFullScreen={handleFullScreen}
+                goToPlayBack={goToPlayBack}
+              />
             </View>
           </>
         )}

package/src/screens/Automate/MultiUnits.js

@@ -24,7 +24,7 @@ const MultiUnits = () => {
   const isFocused = useIsFocused();
   const idUser = useGetIdUser();
   const { navigate } = useNavigation();
-  const { params = {} } = useRoute();
+  const { params = {}, name: currentRouteName } = useRoute();
   const { isMultiUnits = false, unitName = '', unit, isOwner } = params;
   const [data, setData] = useState([]);
   const tabName = useMemo(
@@ -84,7 +84,7 @@ const MultiUnits = () => {
             ? AUTOMATE_TYPE.ONE_TAP_ONLY
             : AUTOMATE_TYPE.VALUE_CHANGE,
         unit: { id: unit?.id },
-        isAutomateTab: true,
+        closeScreen: currentRouteName,
         isMultiUnits,
       },
     });

package/src/screens/Automate/__test__/MultiUnits.test.js

@@ -144,7 +144,7 @@ describe('Test MultiUnits', () => {
       screen: Routes.AddNewAutoSmart,
       params: {
         type: AUTOMATE_TYPE.VALUE_CHANGE,
-        isAutomateTab: true,
+        closeScreen: undefined,
         isMultiUnits: true,
         unit: { id: undefined },
       },
@@ -217,7 +217,7 @@ describe('Test MultiUnits', () => {
       screen: Routes.AddNewAutoSmart,
       params: {
         type: AUTOMATE_TYPE.ONE_TAP_ONLY,
-        isAutomateTab: true,
+        closeScreen: undefined,
         isMultiUnits: true,
         unit: { id: undefined },
       },

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { FlatList, TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
@@ -12,31 +12,9 @@ import Routes from '../../../utils/Route';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import api from '../../../utils/Apis/axios';
 import { API } from '../../../configs';
+import { useNavigation } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
-const mockedNavigate = jest.fn();
-const mockSetState = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-      setOptions: () => ({
-        headerRight: jest.fn(),
-      }),
-    }),
-    useIsFocused: jest.fn(),
-  };
-});
-
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
@@ -46,10 +24,21 @@ const wrapComponent = () => (
 
 describe('Test Automate', () => {
   let tree;
+  const navigation = useNavigation();
+  const mockedNavigate = useNavigation().navigate;
+  beforeAll(() => {
+    useNavigation.mockImplementation(() => ({
+      ...navigation,
+      setOptions: jest.fn(),
+    }));
+  });
+
+  afterAll(() => {
+    useNavigation.mockImplementation(() => navigation);
+  });
 
   beforeEach(() => {
     mockedNavigate.mockClear();
-    mockSetState.mockClear();
   });
 
   it('Test success get Automate onPress onAddNew', async () => {
@@ -89,13 +78,10 @@ describe('Test Automate', () => {
     };
     mock.onGet(API.AUTOMATE.GET_SMART()).reply(200, response.data);
 
-    useState.mockImplementation(() => [false, mockSetState]);
-    useState.mockImplementation(() => [response.data, mockSetState]);
-
     await act(async () => {
       tree = await create(wrapComponent());
     });
-    expect(mockSetState).toBeCalledWith(true);
+
     const instance = tree.root;
     const FlatLists = instance.findAllByType(FlatList);
     expect(FlatLists).toHaveLength(2);
@@ -108,7 +94,7 @@ describe('Test Automate', () => {
     expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
       screen: Routes.AddNewAutoSmart,
       params: {
-        isAutomateTab: true,
+        closeScreen: undefined,
         isMultiUnits: true,
         type: 'automate',
         unit: { id: undefined },
@@ -142,13 +128,10 @@ describe('Test Automate', () => {
     };
     mock.onGet(API.AUTOMATE.GET_SMART()).reply(200, response.data);
 
-    useState.mockImplementation(() => [false, mockSetState]);
-    useState.mockImplementation(() => [response.data, mockSetState]);
-
     await act(async () => {
       tree = await create(wrapComponent());
     });
-    expect(mockSetState).toBeCalledWith(true);
+
     const instance = tree.root;
     const FlatLists = instance.findAllByType(FlatList);
     expect(FlatLists).toHaveLength(3);
@@ -162,7 +145,7 @@ describe('Test Automate', () => {
       screen: Routes.ScriptDetail,
       params: {
         automate: response.data[0].automates[0],
-        isAutomateTab: true,
+        closeScreen: undefined,
         isMultiUnits: true,
         name: 'script',
         type: 'one_tap',
@@ -172,6 +155,7 @@ describe('Test Automate', () => {
       },
     });
   });
+
   it('Test success get Automate onPressArrowRight to ScriptDetail', async () => {
     const response = {
       status: 200,
@@ -198,9 +182,6 @@ describe('Test Automate', () => {
     };
     mock.onGet(API.AUTOMATE.GET_SMART()).reply(200, response.data);
 
-    useState.mockImplementation(() => [false, mockSetState]);
-    useState.mockImplementation(() => [response.data, mockSetState]);
-
     await act(async () => {
       tree = await create(wrapComponent());
     });

package/src/screens/Automate/index.js

@@ -7,7 +7,11 @@ import React, {
 } from 'react';
 import { View, TouchableOpacity, FlatList, Image } from 'react-native';
 import { IconFill } from '@ant-design/icons-react-native/es';
-import { useNavigation, useIsFocused } from '@react-navigation/native';
+import {
+  useNavigation,
+  useIsFocused,
+  useRoute,
+} from '@react-navigation/native';
 import { useSCContextSelector } from '../../context';
 
 import styles from './Styles/indexStyles';
@@ -34,6 +38,7 @@ const Automate = () => {
   const { setOptions, navigate } = useNavigation();
   const [automatesData, setAutomatesData] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+  const { name: currentRouteName } = useRoute();
   const starredScriptIds = useSCContextSelector(
     (state) => state.automate.starredScriptIds
   );
@@ -72,7 +77,7 @@ const Automate = () => {
         type: item?.type,
         havePermission: isOwner || idUser === item?.user,
         unit: { id },
-        isAutomateTab: true,
+        closeScreen: currentRouteName,
         automate: item,
         isMultiUnits: type === UNIT_TYPES.MULTI,
       },
@@ -85,7 +90,7 @@ const Automate = () => {
       params: {
         unit: { id },
         type: AUTOMATE_TYPE.AUTOMATE,
-        isAutomateTab: true,
+        closeScreen: currentRouteName,
         isMultiUnits: unitType === UNIT_TYPES.MULTI,
       },
     });

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

@@ -46,7 +46,7 @@ describe('Test DetailHistoryChart', () => {
       .reply(200, [{ data: [1, 2, 3] }]);
 
     await act(async () => {
-      tree = renderer.create(wrapComponent(item, sensor));
+      tree = await renderer.create(wrapComponent(item, sensor));
     });
     const instance = tree.root;
     const historyChart = instance.findAllByType(HistoryChart);
@@ -60,7 +60,7 @@ describe('Test DetailHistoryChart', () => {
       configuration: { ...item?.configuration, type: 'line_chart' },
     };
     await act(async () => {
-      tree = renderer.create(wrapComponent(item, sensor));
+      tree = await renderer.create(wrapComponent(item, sensor));
     });
     const instance = tree.root;
     const historyChart = instance.findAllByType(HistoryChart);

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

@@ -15,7 +15,9 @@ describe('Test EmergencyCountdown', () => {
   let tree;
   it(' EmergencyCountdown resolved_emergency', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent('stopCount', 'resolved_emergency'));
+      tree = await renderer.create(
+        wrapComponent('stopCount', 'resolved_emergency')
+      );
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
@@ -23,7 +25,7 @@ describe('Test EmergencyCountdown', () => {
   });
   it(' EmergencyCountdown not resolved_emergency', async () => {
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         wrapComponent('stopCount', 'not_resolve_emergency')
       );
     });

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

@@ -48,7 +48,7 @@ describe('Test SensorDisplayItem', () => {
     };
 
     await act(async () => {
-      tree = renderer.create(wrapComponent({ item, sensor }));
+      tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
     const detailHistoryChart = instance.findAllByType(VisualChart);
@@ -80,7 +80,7 @@ describe('Test SensorDisplayItem', () => {
     };
 
     await act(async () => {
-      tree = renderer.create(wrapComponent({ item, sensor }));
+      tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
     const actionGroup = instance.findAllByType(ActionGroup);
@@ -110,7 +110,7 @@ describe('Test SensorDisplayItem', () => {
     };
 
     await act(async () => {
-      tree = renderer.create(wrapComponent({ item, sensor }));
+      tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
     const mediaPlayerDetail = instance.findAllByType(MediaPlayerDetail);
@@ -142,7 +142,7 @@ describe('Test SensorDisplayItem', () => {
     };
 
     await act(async () => {
-      tree = renderer.create(wrapComponent({ item, sensor }));
+      tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
     const flatListItems = instance.findAllByType(FlatListItems);
@@ -164,7 +164,7 @@ describe('Test SensorDisplayItem', () => {
     };
 
     await act(async () => {
-      tree = renderer.create(wrapComponent({ item, sensor }));
+      tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
     const flatListItems = instance.findAllByType(SmartIr);
@@ -186,7 +186,7 @@ describe('Test SensorDisplayItem', () => {
     };
 
     await act(async () => {
-      tree = renderer.create(wrapComponent({ item, sensor }));
+      tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
     const flatListItems = instance.findAllByType(FooterInfo);
@@ -210,7 +210,7 @@ describe('Test SensorDisplayItem', () => {
     };
 
     await act(async () => {
-      tree = renderer.create(wrapComponent({ item, sensor }));
+      tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
     const flatListItems = instance.findAllByType(Anemometer);
@@ -234,7 +234,7 @@ describe('Test SensorDisplayItem', () => {
     };
 
     await act(async () => {
-      tree = renderer.create(wrapComponent({ item, sensor }));
+      tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
     const flatListItems = instance.findAllByType(ProgressBar);
@@ -258,7 +258,7 @@ describe('Test SensorDisplayItem', () => {
     };
 
     await act(async () => {
-      tree = renderer.create(wrapComponent({ item, sensor }));
+      tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
     const flatListItems = instance.findAllByType(Compass);
@@ -282,7 +282,7 @@ describe('Test SensorDisplayItem', () => {
     };
 
     await act(async () => {
-      tree = renderer.create(wrapComponent({ item, sensor }));
+      tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
     const flatListItems = instance.findAllByType(DeviceAlertStatus);

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

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { styles } from './ChartWrapperStyles';
 import { View } from 'react-native';
 import DateTimeRangeChange from '../../../commons/DateTimeRangeChange';
 import moment from 'moment';
 
-const ChartWrapper = ({ children, onChangeDate, showTime }) => {
+const ChartWrapper = memo(({ children, onChangeDate, showTime }) => {
   const [value, setValue] = useState([moment().subtract(6, 'days'), moment()]);
 
   useEffect(() => {
@@ -34,6 +34,6 @@ const ChartWrapper = ({ children, onChangeDate, showTime }) => {
       {children}
     </View>
   );
-};
+});
 
 export default ChartWrapper;

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

@@ -32,7 +32,7 @@ export const convertLineChartData = (data = [], valueType = 'raw', groupBy) => {
     arr.push([moment(data[i].x), data[i].y]);
   }
   if (valueType === 'raw') {
-    return arr;
+    return arr.map((i) => [i[0].valueOf(), i[1]]);
   }
   if (groupBy) {
     arr = _.groupBy(arr, groupByFunc[groupBy]);

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

@@ -203,7 +203,7 @@ describe('Test LinearChartWidget', () => {
     assertChartData(chart.props.options.series[0].data, [['1970-01', 200]]);
   });
 
-  it('Test render aggregation sum', async () => {
+  it('Test render aggregation sum by day', async () => {
     mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, {
       configs: [
         {

package/src/screens/Device/hooks/useEvaluateValue.js

@@ -93,3 +93,11 @@ export const useEvaluateValue = () => {
 
   return evaluateValue;
 };
+
+export const useGetEvaluateValue = (configId) => {
+  const valueEvaluations = useSCContextSelector((state) => {
+    return state.valueEvaluations;
+  });
+
+  return valueEvaluations[configId];
+};

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

@@ -6,11 +6,19 @@ import DeviceInfo from '../';
 import { View } from 'react-native';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { useRoute } from '@react-navigation/native';
 
-jest.mock('@react-navigation/core', () => {
-  return {
-    ...jest.requireActual('@react-navigation/core'),
-    useRoute: jest.fn().mockReturnValue({
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceInfo />
+  </SCProvider>
+);
+
+describe('Test DeviceInfo', () => {
+  let tree;
+
+  beforeEach(() => {
+    useRoute.mockReturnValue({
       params: {
         deviceInfo: [
           {
@@ -29,30 +37,20 @@ jest.mock('@react-navigation/core', () => {
           },
         ],
       },
-    }),
-  };
-});
-
-const wrapComponent = () => (
-  <SCProvider initState={mockSCStore({})}>
-    <DeviceInfo />
-  </SCProvider>
-);
-
-describe('Test DeviceInfo', () => {
-  let tree;
+    });
+  });
 
   it('render DeviceInfo', async () => {
     await act(async () => {
       tree = await create(wrapComponent());
     });
     const instance = tree.root;
-    const battety = instance.findAll(
+    const battery = instance.findAll(
       (el) =>
         el.props.accessibilityLabel ===
           AccessibilityLabel.DEVICE_INFO_BATTERY && el.type === View
     );
-    expect(battety.length).toEqual(1);
+    expect(battery.length).toEqual(1);
 
     const rssiNode = instance.findAll(
       (el) =>

package/src/screens/DeviceInfo/index.js

@@ -13,15 +13,15 @@ const DeviceInfo = () => {
   const { deviceInfo } = params;
   const configuration = deviceInfo[0] ? deviceInfo[0].configuration : {};
 
-  const renderRow = (accessibilityLabel, textLeft, textRight) => {
+  const renderRow = (accessibilityLabel, textLeft, textRight, index) => {
     return (
-      <>
+      <React.Fragment key={index}>
         <View style={styles.row} accessibilityLabel={accessibilityLabel}>
           <Text style={styles.textLeft}>{t(textLeft)}</Text>
           <Text style={styles.textRight}>{textRight}</Text>
         </View>
         <View style={styles.separator} />
-      </>
+      </React.Fragment>
     );
   };
 
@@ -44,11 +44,12 @@ const DeviceInfo = () => {
           )}
 
         {configuration.chip_info &&
-          Object.entries(configuration.chip_info).map((item) => {
+          Object.entries(configuration.chip_info).map((item, index) => {
             return renderRow(
               AccessibilityLabel.DEVICE_INFO_CHIP_INFO,
               item[0],
-              item[1]
+              item[1],
+              index
             );
           })}
       </View>