@eohjsc/react-native-smart-city 0.5.8 → 0.6.0-rc1

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>

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

@@ -12,17 +12,6 @@ const wrapComponent = (unit, summaryDetail) => (
   </SCProvider>
 );
 
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-  };
-});
-
 const mockConnectHomeAssistant = jest.fn();
 jest.mock('../../../../../hooks/IoT', () => {
   return {
@@ -34,10 +23,6 @@ jest.mock('../../../../../hooks/IoT', () => {
 });
 
 describe('test RunningDevices', () => {
-  afterEach(() => {
-    mockedNavigate.mockClear();
-  });
-
   let list_svgMain = [
     '',
     'sensor',
@@ -128,7 +113,7 @@ describe('test RunningDevices', () => {
     await act(async () => {
       button[0].props.onPress();
     });
-    expect(mockedNavigate).toBeCalledWith('DeviceDetail', {
+    expect(global.mockedNavigate).toBeCalledWith('DeviceDetail', {
       sensorData: summaryDetail.devices[0],
       station: 'station',
       title: undefined,

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

@@ -25,18 +25,21 @@ const Temperature = ({ summaryDetail }) => {
     () => [
       {
         id: temp,
+        key: 'temp',
         svgMain: <SvgTemperature />,
         title: `${t('text_temperature')}`,
         measure: '°C',
       },
       {
         id: humi,
+        key: 'humi',
         svgMain: <SvgHumidity />,
         title: `${t('text_humidity')}`,
         measure: '%',
       },
       {
         id: wind,
+        key: 'wind',
         svgMain: <SvgWind />,
         title: `${t('text_wind')}`,
         des: `${t('text_win_direction')}: ${windDirection || t('loading')}`,
@@ -44,6 +47,7 @@ const Temperature = ({ summaryDetail }) => {
       },
       {
         id: rain,
+        key: 'rain',
         svgMain: <SvgRain />,
         title: `${t('text_rain')}`,
         measure: '',
@@ -78,7 +82,7 @@ const Temperature = ({ summaryDetail }) => {
         <Today style={styles.textIndoor} />
         <View style={styles.boxTemperature}>
           {dataTemperature.map((item) => (
-            <ItemTemperature {...item} key={item.id} />
+            <ItemTemperature {...item} key={item.key} />
           ))}
         </View>
       </Section>

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

@@ -9,14 +9,6 @@ import api from '../../../../../utils/Apis/axios';
 
 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({})}>
     <UvIndex {...data} />

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

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { View } 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 { Colors } from '../../../../configs';
@@ -37,7 +37,7 @@ const UvIndex = memo(({ summaryDetail }) => {
         <Today />
         <SegmentedRoundChart data={data} />
         <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}

package/src/screens/UnitSummary/components/WaterQuality/Item/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useNavigation } from '@react-navigation/native';
 
 import Text from '../../../../../commons/Text';
@@ -23,7 +23,7 @@ const Item = memo(({ id, svgMain, title, measure, des, color, waterType }) => {
         <Text>{title}</Text>
         {waterType && (
           <TouchableOpacity onPress={goToDetail} style={styles.buttonInfo}>
-            <IconOutline
+            <AntDesign
               style={styles.row}
               name="info-circle"
               size={20}

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

@@ -8,19 +8,9 @@ import { SCProvider } from '../../../../../context';
 import { mockSCStore } from '../../../../../context/mockStore';
 import MockAdapter from 'axios-mock-adapter';
 import api from '../../../../../utils/Apis/axios';
+import { useNavigation } from '@react-navigation/native';
 
 new MockAdapter(api.axiosInstance);
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-    useFocusEffect: (func) => func(),
-  };
-});
 
 const wrapComponent = (data) => (
   <SCProvider initState={mockSCStore({})}>
@@ -29,10 +19,10 @@ const wrapComponent = (data) => (
 );
 
 describe('Test WaterQualityGuide', () => {
+  const { navigate } = useNavigation();
   let data;
   beforeEach(() => {
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
-    mockNavigate.mockClear();
     data = {
       summaryDetail: {
         ph_id: 1,
@@ -45,6 +35,7 @@ describe('Test WaterQualityGuide', () => {
           ph: 1,
           tur: 2,
           clo: 3,
+          temp: 4,
         },
       },
     };
@@ -83,25 +74,30 @@ describe('Test WaterQualityGuide', () => {
     await act(async () => {
       buttons[0].props.onPress();
     });
-    expect(mockNavigate).toHaveBeenCalledTimes(1);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
       waterType: 'turbidity',
     });
 
     await act(async () => {
       buttons[1].props.onPress();
     });
-    expect(mockNavigate).toHaveBeenCalledTimes(2);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
+    expect(navigate).toHaveBeenCalledTimes(2);
+    expect(navigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
       waterType: 'ph',
     });
 
     await act(async () => {
       buttons[2].props.onPress();
     });
-    expect(mockNavigate).toHaveBeenCalledTimes(3);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
+    expect(navigate).toHaveBeenCalledTimes(3);
+    expect(navigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
       waterType: 'clo',
     });
+
+    await act(async () => {
+      buttons[3].props.onPress();
+    });
+    expect(navigate).toHaveBeenCalledTimes(3); // not call navigate
   });
 });

package/src/screens/UnitSummary/index.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import moment from 'moment';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -129,9 +129,9 @@ const UnitSummary = memo(({ route }) => {
     fetchSummaryDetail();
   }, [fetchSummaryDetail, summary?.screen]);
 
-  const onRefresh = useCallback(() => {
+  const onRefresh = useCallback(async () => {
     setLoading(true);
-    fetchSummaryDetail();
+    await fetchSummaryDetail();
   }, [fetchSummaryDetail]);
 
   const { dataNotification } = useReceiveNotifications();
@@ -168,11 +168,7 @@ const UnitSummary = memo(({ route }) => {
                 accessibilityLabel={AccessibilityLabel.UNIT_SUMMARY_GUIDE_TOUCH}
                 onPress={() => navigation.navigate(GuideName)}
               >
-                <IconOutline
-                  name="info-circle"
-                  size={27}
-                  color={Colors.Black}
-                />
+                <AntDesign name="info-circle" size={27} color={Colors.Black} />
               </TouchableOpacity>
             </View>
           ) : null

package/src/utils/Converter/__test__/timer.test.js

@@ -17,6 +17,14 @@ describe('Test timer', () => {
     expect(result).toBe('1 seconds ago');
   });
 
+  it('Test timeDifference when previous is string', async () => {
+    result = await timeDifference(
+      new Date('2022-08-01T03:24:01'),
+      '2022-08-01T03:24:00'
+    );
+    expect(result).toBe('1 seconds ago');
+  });
+
   it('Test timeDifference when elapsed < msPerMinute and symbol=true', async () => {
     result = await timeDifference(
       new Date('2022-08-01T03:24:01'),

package/src/utils/Functions/preloadImages.js

@@ -7,7 +7,7 @@ export const preloadImagesFromUnits = async (units, storeKey) => {
   const isFirstTime = await getData(storeKey);
   if (units?.length && !isFirstTime) {
     await storeData(storeKey, 'true');
-    Promise.all(
+    const results = await Promise.all(
       units.map(async (item) => {
         const unitId =
           storeKey === STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS
@@ -22,18 +22,17 @@ export const preloadImagesFromUnits = async (units, storeKey) => {
           return success && data;
         }
       })
-      // eslint-disable-next-line promise/prefer-await-to-then
-    ).then((results) => {
-      const icons = results
-        .map((item) => item?.stations?.map((i) => i?.background) || [])
-        .flat()
-        .filter(Boolean);
-      FastImage.preload(
-        icons.map((uri) => ({
-          uri,
-          priority: FastImage.priority.high,
-        }))
-      );
-    });
+    );
+
+    const icons = results
+      .map((item) => item?.stations?.map((i) => i?.background) || [])
+      .flat()
+      .filter(Boolean);
+    FastImage.preload(
+      icons.map((uri) => ({
+        uri,
+        priority: FastImage.priority.high,
+      }))
+    );
   }
 };

package/src/utils/Storage.js

@@ -1,4 +1,4 @@
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export const STORAGE_KEY = {
   FIREBASE_APP_CONFIG: 'app_config',