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

package/src/screens/Unit/__test__/Summaries.test.js

@@ -19,17 +19,6 @@ const wrapComponent = (props) => (
   </SCProvider>
 );
 
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useIsFocused: jest.fn(),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-  };
-});
-
 jest.mock('react-native-onesignal', () => {
   return {
     setNotificationWillShowInForegroundHandler: jest.fn(),
@@ -52,7 +41,6 @@ describe('Test Summaries', () => {
         id: 1,
       },
     };
-    mockedNavigate.mockReset();
     mock.reset();
   });
 
@@ -76,7 +64,7 @@ describe('Test Summaries', () => {
     await act(async () => {
       items[0].props.goToSummary({ id: 1 });
     });
-    expect(mockedNavigate).toBeCalled();
+    expect(global.mockedNavigate).toBeCalled();
   });
 
   it('render Summaries receive noti with summary_id then not reload', async () => {
@@ -92,7 +80,7 @@ describe('Test Summaries', () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent(props));
     });
-    expect(mockedNavigate).not.toBeCalled();
+    expect(global.mockedNavigate).not.toBeCalled();
   });
 
   it('fetch data non-stop', async () => {

package/src/screens/Unit/components/AutomateScript/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, TouchableWithoutFeedback } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import Text from '../../../../commons/Text';
 import FImage from '../../../../commons/FImage';
@@ -61,7 +61,7 @@ const AutomateScript = ({ automate, onPress, isSelected }) => {
             <Text numberOfLines={1} type={'Label'} color={Colors.Gray7}>
               {t('created_by', { name: author })}
             </Text>
-            <IconOutline name="right" size={12} />
+            <AntDesign name="right" size={12} />
           </View>
         </View>
       </View>

package/src/screens/Unit/components/ButtonWrapper/index.js

@@ -2,8 +2,7 @@ import React, { memo } from 'react';
 import { View, TouchableOpacity, Image } from 'react-native';
 import Text from '../../../../commons/Text';
 import { Colors } from '../../../../configs';
-import { Icon } from '@ant-design/react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import styles from './styles';
 
@@ -47,10 +46,10 @@ const ButtonWrapper = ({
             <Image source={{ uri: value }} style={styles.avatar} />
           ) : (
             <View style={styles.avatar}>
-              <Icon name={'user'} size={27} />
+              <AntDesign name={'user'} size={27} />
             </View>
           )}
-          <IconOutline name="right" size={20} color={Colors.Gray7} />
+          <AntDesign name="right" size={20} color={Colors.Gray7} />
         </View>
       </View>
       {children}

package/src/screens/Unit/components/Header/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { Dimensions, View, TouchableOpacity, StyleSheet } from 'react-native';
 import Popover from '../../../../commons/Popover';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
@@ -97,7 +97,7 @@ const HeaderComponent = ({ title, goBack, dark, hideRight, style }) => {
                 onPress={() => setShowModal(true)}
                 style={styles.rightHeader}
               >
-                <IconOutline
+                <AntDesign
                   name="plus"
                   size={32}
                   color={dark ? Colors.Black : Colors.White}
@@ -107,7 +107,7 @@ const HeaderComponent = ({ title, goBack, dark, hideRight, style }) => {
                 onPress={() => setMenu(true)}
                 style={styles.rightHeader}
               >
-                <IconOutline
+                <AntDesign
                   name="more"
                   size={30}
                   color={dark ? Colors.Black : Colors.White}

package/src/screens/Unit/components/SharedUnit/index.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useCallback } from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
-import { IconOutline, IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import { API, Colors, Images } from '../../../../configs';
 import Text from '../../../../commons/Text';
@@ -88,7 +88,7 @@ const SharedUnit = ({
         {isOptions && (
           <Fragment>
             {item.is_pin ? (
-              <IconFill
+              <AntDesign
                 name="pushpin"
                 size={20}
                 color={Colors.Blue10}
@@ -98,7 +98,7 @@ const SharedUnit = ({
                 }
               />
             ) : (
-              <IconOutline
+              <AntDesign
                 name="pushpin"
                 size={20}
                 onPress={addPinSharedUnit}
@@ -106,7 +106,7 @@ const SharedUnit = ({
               />
             )}
             {item.is_star ? (
-              <IconFill
+              <AntDesign
                 name="star"
                 size={20}
                 color={Colors.Yellow6}
@@ -116,7 +116,7 @@ const SharedUnit = ({
                 }
               />
             ) : (
-              <IconOutline
+              <AntDesign
                 name="star"
                 size={20}
                 onPress={addStarSharedUnit}

package/src/screens/Unit/components/__test__/Header.test.js

@@ -17,19 +17,6 @@ const wrapComponent = (title, goBack, dark, hideRight) => (
   </SCProvider>
 );
 
-const mockedNavigate = jest.fn();
-const mockedGoBack = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-      goBack: mockedGoBack,
-    }),
-    useIsFocused: () => true,
-  };
-});
-
 describe('Test Header', () => {
   let tree;
   it('test hideModal', async () => {
@@ -97,6 +84,6 @@ describe('Test Header', () => {
     await act(async () => {
       touchableOpacity[0].props.onPress();
     });
-    expect(mockedGoBack).toHaveBeenCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
   });
 });

package/src/screens/Unit/components/__test__/MyUnitDevice.test.js

@@ -7,16 +7,6 @@ import MyUnitDevice from '../MyUnitDevice';
 import ItemQuickAction from '../../../../commons/Action/ItemQuickAction';
 import Text from '../../../../commons/Text';
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),
@@ -57,7 +47,7 @@ describe('Test MyUnitDevice', () => {
     await act(async () => {
       await touches[0].props.onPress();
     });
-    expect(mockNavigate).toHaveBeenCalled();
+    expect(global.mockedNavigate).toHaveBeenCalled();
   });
 
   it('Test render without status', async () => {

package/src/screens/Unit/components/__test__/SharedUnit.test.js

@@ -25,16 +25,6 @@ const wrapComponent = (item, navigation) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 describe('Test SharedUnit', () => {
   let tree;
 
@@ -70,7 +60,7 @@ describe('Test SharedUnit', () => {
     await act(async () => {
       touchSharedUnit.props.onPress();
     });
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
       screen: Routes.UnitDetail,
       params: {
         unitId: 3,

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

@@ -20,22 +20,11 @@ import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
 import { WrapHeaderScrollable } from '../../../commons';
 import AirQuality from '../components/AirQuality';
+import Text from '../../../commons/Text';
+import { useConfigGlobalState } from '../../../iot/states';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedNavigate = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-    useFocusEffect: (func) => func(),
-  };
-});
-
 jest.mock('react-native-onesignal', () => {
   return {
     setNotificationWillShowInForegroundHandler: jest.fn(),
@@ -49,6 +38,10 @@ jest.mock('../../../hooks', () => {
   };
 });
 
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: jest.fn(),
+}));
+
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <UnitSummary route={route} />
@@ -60,6 +53,7 @@ describe('Test UnitSummary', () => {
 
   beforeEach(() => {
     mock.reset();
+    useConfigGlobalState.mockReturnValue([{}]);
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
     route = {
       params: {
@@ -79,7 +73,9 @@ describe('Test UnitSummary', () => {
   let tree;
 
   it('onRefresh', async () => {
-    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200);
+    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200, {
+      data: {},
+    });
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -188,7 +184,9 @@ describe('Test UnitSummary', () => {
 
   it('test receive notification with summary_id then reload data', async () => {
     jest.useFakeTimers();
-    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200);
+    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200, {
+      data: {},
+    });
     const dataNotification = {
       params: {
         summary_id: 1,
@@ -207,7 +205,9 @@ describe('Test UnitSummary', () => {
 
   it('test receive notification with other summary_id then not reload data', async () => {
     jest.useFakeTimers();
-    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200);
+    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200, {
+      data: {},
+    });
     const dataNotification = {
       params: {
         summary_id: 2,
@@ -222,6 +222,7 @@ describe('Test UnitSummary', () => {
     await act(async () => {
       jest.runOnlyPendingTimers();
     });
+    expect(mock.history.get.length).toBe(1);
   });
 
   let list_value = [
@@ -286,13 +287,46 @@ describe('Test UnitSummary', () => {
         await act(async () => {
           await touch.props.onPress();
         });
-        expect(mockedNavigate).toHaveBeenLastCalledWith(
+        expect(global.mockedNavigate).toHaveBeenLastCalledWith(
           UnitSummaryDetail.guideName
         );
       }
     });
   });
 
+  test('create Unit Summary temperature value', async () => {
+    mock
+      .onGet(
+        API.UNIT.UNIT_SUMMARY_DETAIL(
+          route.params.unitId,
+          route.params.summaryData.id
+        )
+      )
+      .reply(200, {
+        data: {
+          listConfigs: {
+            temp: 1,
+          },
+        },
+      });
+    route.params.summaryData.screen = Routes.Temperature;
+    useConfigGlobalState.mockReturnValue([
+      {
+        1: {
+          value: 50,
+        },
+      },
+    ]);
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const texts = instance.findAll((el) => {
+      return el.type === Text && el.props.children === '50 °C';
+    });
+    expect(texts).toHaveLength(1);
+  });
+
   it('Test render without params', async () => {
     useReceiveNotifications.mockImplementationOnce(() => ({
       dataNotification: {},

package/src/screens/UnitSummary/components/3PPowerConsumption/__test__/3PPowerConsumption.test.js

@@ -18,18 +18,6 @@ jest.mock('react', () => {
   };
 });
 
-const mockedNavigate = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useFocusEffect: (func) => func(),
-  };
-});
-
 useState.mockImplementation((init) => [init, mockSetState]);
 
 const wrapComponent = (summaryDetail) => (

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/AirQuality/__test__/index.test.js

@@ -12,13 +12,7 @@ import { Section, Text } from '../../../../../commons';
 import AccessibilityLabel from '../../../../../configs/AccessibilityLabel';
 
 new MockAdapter(api.axiosInstance);
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useFocusEffect: (func) => func(),
-  };
-});
+
 const wrapComponent = (data) => (
   <SCProvider initState={mockSCStore({})}>
     <AirQuality {...data} />

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

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import styles from './styles';
 
@@ -79,7 +79,7 @@ const AirQuality = memo(({ summaryDetail }) => {
             <View
               style={[styles.boxEmotion, { backgroundColor: outdoorColor }]}
             >
-              <IconOutline name={outdoorIcon} size={35} />
+              <AntDesign name={outdoorIcon} size={35} />
             </View>
             <View
               style={[
@@ -121,7 +121,7 @@ const AirQuality = memo(({ summaryDetail }) => {
           {<SegmentedRoundChart data={outdoor} />}
           {!!advices?.length && (
             <View style={styles.boxHealth}>
-              <IconOutline name="alert" size={20} style={styles.iconMargin} />
+              <AntDesign name="alert" size={20} style={styles.iconMargin} />
               <Text semibold color={Colors.Gray9} type="H4">
                 {t('Health advices:')}
               </Text>

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';
@@ -13,17 +13,6 @@ import { Today } from '../../../../../commons';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedNavigate = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useFocusEffect: (func) => func(),
-  };
-});
 const wrapComponent = (summaryDetail) => (
   <SCProvider initState={mockSCStore({})}>
     <PowerConsumption summaryDetail={summaryDetail} />
@@ -104,9 +93,44 @@ 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);

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>