@eohjsc/react-native-smart-city 0.3.7 → 0.3.10

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

@@ -2,15 +2,16 @@ import React from 'react';
 import { create, act } from 'react-test-renderer';
 import moment from 'moment';
 import { useNavigation } from '@react-navigation/native';
-import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 import SharedUnit from '../SharedUnit';
 import { TESTID } from '../../../../configs/Constants';
 import { API } from '../../../../configs';
 import Routes from '../../../../utils/Route';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
+import api from '../../../../utils/Apis/axios';
 
-jest.mock('axios');
+const mock = new MockAdapter(api.axiosInstance);
 
 const mockRenewItem = jest.fn();
 const wrapComponent = (item, navigation) => (
@@ -37,10 +38,6 @@ jest.mock('@react-navigation/native', () => {
 describe('Test SharedUnit', () => {
   let tree;
 
-  beforeEach(() => {
-    axios.post.mockClear();
-  });
-
   let unit = {
     background: '',
     icon: '',
@@ -60,14 +57,8 @@ describe('Test SharedUnit', () => {
 
   test('test create SharedUnit unit is not pin, not star', async () => {
     const navigation = useNavigation();
-    const response = {
-      status: 200,
-      success: true,
-    };
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
-
+    mock.onPost(API.UNIT.PIN_UNIT(3)).reply(200);
+    mock.onPost(API.UNIT.STAR_UNIT(3)).reply(200);
     await act(async () => {
       tree = await create(wrapComponent(item, navigation));
     });
@@ -85,41 +76,50 @@ describe('Test SharedUnit', () => {
         unitData: unit,
       },
     });
-
     const iconRemovePinSharedUnit = instance.findAll(
       (el) => el.props.testID === TESTID.ICON_REMOVE_PIN_SHARED_UNIT
     );
-    expect(iconRemovePinSharedUnit).toHaveLength(0);
-
     const iconAddPinSharedUnit = instance.find(
       (el) => el.props.testID === TESTID.ICON_ADD_PIN_SHARED_UNIT
     );
     act(() => {
       iconAddPinSharedUnit.props.onPress();
     });
-    expect(axios.post).toHaveBeenCalledWith(API.UNIT.PIN_UNIT(3));
-
     const iconAddStarSharedUnit = instance.find(
       (el) => el.props.testID === TESTID.ICON_ADD_STAR_SHARED_UNIT
     );
     act(() => {
       iconAddStarSharedUnit.props.onPress();
     });
-    expect(axios.post).toHaveBeenCalledWith(API.UNIT.STAR_UNIT(3));
+    expect(iconRemovePinSharedUnit).toHaveLength(0);
   });
 
   test('test create SharedUnit unit is pin, is star', async () => {
     const navigation = useNavigation();
     item.is_pin = true;
     item.is_star = true;
-    const response = {
-      status: 200,
-      success: true,
-    };
-    axios.post.mockImplementation(async () => {
-      return response;
+    await act(async () => {
+      tree = await create(wrapComponent(item, navigation));
     });
+    const instance = tree.root;
+    const iconRemovePinSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_PIN_SHARED_UNIT
+    );
+    mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(200);
+    await iconRemovePinSharedUnit.props.onPress();
 
+    const iconRemoveStarSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_STAR_SHARED_UNIT
+    );
+    mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(200);
+    await iconRemoveStarSharedUnit.props.onPress();
+    expect(mockRenewItem).toBeCalled();
+  });
+
+  test('test create SharedUnit unit is pin, is star with call api failure', async () => {
+    const navigation = useNavigation();
+    item.is_pin = true;
+    item.is_star = true;
     await act(async () => {
       tree = await create(wrapComponent(item, navigation));
     });
@@ -127,17 +127,14 @@ describe('Test SharedUnit', () => {
     const iconRemovePinSharedUnit = instance.find(
       (el) => el.props.testID === TESTID.ICON_REMOVE_PIN_SHARED_UNIT
     );
-    act(() => {
-      iconRemovePinSharedUnit.props.onPress();
-    });
-    expect(axios.post).toHaveBeenCalledWith(API.UNIT.UNPIN_UNIT(3));
+    mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(400);
+    await iconRemovePinSharedUnit.props.onPress();
 
     const iconRemoveStarSharedUnit = instance.find(
       (el) => el.props.testID === TESTID.ICON_REMOVE_STAR_SHARED_UNIT
     );
-    act(() => {
-      iconRemoveStarSharedUnit.props.onPress();
-    });
-    expect(axios.post).toHaveBeenCalledWith(API.UNIT.UNSTAR_UNIT(3));
+    mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(200);
+    await iconRemoveStarSharedUnit.props.onPress();
+    expect(mockRenewItem).toBeCalled();
   });
 });

package/src/screens/Unit/hook/useUnitConnectRemoteDevices.js

@@ -0,0 +1,50 @@
+import { useEffect, useCallback } from 'react';
+import { scanBluetoothDevices } from '../../../iot/RemoteControl/Bluetooth';
+import { lgThinqConnect } from '../../../iot/RemoteControl/LG';
+import { useGGHomeConnection } from '../../../hooks/IoT';
+import { useSCContextSelector } from '../../../context';
+
+export const useUnitConnectRemoteDevices = (unit) => {
+  const { isNetworkConnected } = useSCContextSelector((state) => state.app);
+
+  const { connectGoogleHome } = useGGHomeConnection();
+
+  let lgThinqConnected = false;
+
+  const handleLgThinqConnect = useCallback(async (options) => {
+    if (lgThinqConnected) {
+      return;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    lgThinqConnected = true;
+    await lgThinqConnect(options);
+  }, []);
+
+  useEffect(() => {
+    if (unit.remote_control_options && unit.remote_control_options.bluetooth) {
+      scanBluetoothDevices(unit.remote_control_options.bluetooth);
+    }
+  }, [unit]);
+
+  useEffect(() => {
+    if (
+      unit.remote_control_options &&
+      unit.remote_control_options.googlehome?.length &&
+      isNetworkConnected
+    ) {
+      (async () => {
+        await connectGoogleHome(unit.remote_control_options.googlehome);
+      })();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [unit, isNetworkConnected]);
+
+  useEffect(() => {
+    if (unit.remote_control_options && unit.remote_control_options.lg_thinq) {
+      (async () => {
+        await handleLgThinqConnect(unit.remote_control_options.lg_thinq);
+      })();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [unit]);
+};

package/src/screens/Unit/styles.js

@@ -80,4 +80,12 @@ export default StyleSheet.create({
     height: heightItem,
     marginVertical: 0,
   },
+  camera: {
+    width: 1,
+    height: 1,
+  },
+  fakeCamera: {
+    position: 'absolute',
+    zIndex: -99999,
+  },
 });

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+import { RefreshControl } from 'react-native';
+
 import Routes from '../../../utils/Route';
 import UnitSummary from '..';
-import axios from 'axios';
 import { API } from '../../../configs';
-import { RefreshControl } from 'react-native';
 import { TESTID } from '../../../configs/Constants';
 import { TouchableOpacity } from 'react-native';
 import AirQuality from '../../../commons/UnitSummary/AirQuality';
@@ -14,10 +15,12 @@ import RunningDevices from '../components/RunningDevices';
 import Temperature from '../components/Temperature';
 import UvIndex from '../components/UvIndex';
 import WaterQuality from '../components/WaterQuality';
+import { useReceiveNotifications } from '../../../hooks';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import api from '../../../utils/Apis/axios';
 
-jest.mock('axios');
+const mock = new MockAdapter(api.axiosInstance);
 
 const mockedNavigate = jest.fn();
 
@@ -30,6 +33,19 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+jest.mock('react-native-onesignal', () => {
+  return {
+    setNotificationWillShowInForegroundHandler: jest.fn(),
+  };
+});
+
+jest.mock('../../../hooks', () => {
+  return {
+    ...jest.requireActual('../../../hooks'),
+    useReceiveNotifications: jest.fn(() => ({ dataNotification: null })),
+  };
+});
+
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <UnitSummary route={route} />
@@ -40,12 +56,15 @@ describe('Test UnitSummary', () => {
   let route;
 
   beforeEach(() => {
+    mock.resetHistory();
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
     route = {
       params: {
+        unitId: 1,
         unitData: {
           id: 1,
         },
+        summaryId: 1,
         summaryData: {
           id: 1,
           name: '',
@@ -57,6 +76,7 @@ describe('Test UnitSummary', () => {
   let tree;
 
   test('onRefresh', async () => {
+    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200);
     act(() => {
       tree = create(wrapComponent(route));
     });
@@ -65,53 +85,94 @@ describe('Test UnitSummary', () => {
     act(() => {
       refreshControl.props.onRefresh();
     });
-    expect(axios.get).toHaveBeenCalled();
-    expect(axios.get).toHaveBeenCalledWith(
-      API.UNIT.UNIT_SUMMARY_DETAIL(1, 1),
-      {}
-    );
+    expect(refreshControl).toBeDefined();
   });
 
   test('render fetchSummaryDetail failed', async () => {
-    const response = {
-      status: 400,
-      data: {
-        data: {},
+    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200, {});
+    act(() => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const refreshControl = instance.findByType(RefreshControl);
+    expect(refreshControl).toBeDefined();
+  });
+
+  test('render fetchSummaryDetail success', async () => {
+    jest.useFakeTimers();
+    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200);
+    act(() => {
+      tree = create(wrapComponent(route));
+    });
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+    const instance = tree.root;
+    const refreshControl = instance.findByType(RefreshControl);
+    expect(refreshControl).toBeDefined();
+  });
+
+  test('render fetchUnitDetail success', async () => {
+    route = {
+      params: {
+        unitId: 1,
+        unitData: null,
+        summaryData: {
+          id: 1,
+          name: '',
+          screen: Routes.AirQuality,
+        },
       },
     };
-    axios.get.mockImplementation(() => Promise.resolve(response));
-
+    jest.useFakeTimers();
+    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, {});
     act(() => {
       tree = create(wrapComponent(route));
     });
-    expect(axios.get).toHaveBeenCalled();
-    expect(axios.get).toHaveBeenCalledWith(
-      API.UNIT.UNIT_SUMMARY_DETAIL(1, 1),
-      {}
-    );
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+    const instance = tree.root;
+    const refreshControl = instance.findByType(RefreshControl);
+    expect(refreshControl).toBeDefined();
   });
 
-  test('render fetchSummaryDetail success', async () => {
+  test('test receive notification with summary_id then reload data', async () => {
     jest.useFakeTimers();
-    const response = {
-      status: 200,
-      data: {
-        data: {},
+    mock.onGet(API.UNIT.UNIT_SUMMARY_DETAIL(1, 1)).reply(200);
+    const dataNotification = {
+      params: {
+        summary_id: 1,
       },
     };
-    axios.get.mockImplementation(() => Promise.resolve(response));
+    useReceiveNotifications.mockImplementationOnce(() => ({
+      dataNotification,
+    }));
+    act(() => {
+      tree = create(wrapComponent(route));
+    });
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+  });
 
+  test('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);
+    const dataNotification = {
+      params: {
+        summary_id: 2,
+      },
+    };
+    useReceiveNotifications.mockImplementationOnce(() => ({
+      dataNotification,
+    }));
     act(() => {
       tree = create(wrapComponent(route));
     });
     act(() => {
       jest.runOnlyPendingTimers();
     });
-    expect(axios.get).toHaveBeenCalled();
-    expect(axios.get).toHaveBeenCalledWith(
-      API.UNIT.UNIT_SUMMARY_DETAIL(1, 1),
-      {}
-    );
   });
 
   let list_value = [

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

@@ -1,10 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TESTID } from '../../../../../configs/Constants';
-import { Colors } from '../../../../../configs';
+import { API, Colors } from '../../../../../configs';
 import PowerConsumption from '../index';
 import { SCProvider } from '../../../../../context';
 import { mockSCStore } from '../../../../../context/mockStore';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../../../utils/Apis/axios';
+
+const mock = new MockAdapter(api.axiosInstance);
+const mockSetState = jest.fn();
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useState: jest.fn(),
+  };
+});
+useState.mockImplementation((init) => [init, mockSetState]);
 
 const wrapComponent = (summaryDetail) => (
   <SCProvider initState={mockSCStore({})}>
@@ -64,4 +77,20 @@ describe('Test 3PPowerConsumption', () => {
     ];
     expect(listIndicator.props.data).toEqual(resultList);
   });
+
+  test('render 3PPowerConsumption with total_power', async () => {
+    mock.onGet(API.VALUE_CONSUME.DISPLAY_HISTORY()).reply(200, [{}]);
+    const summaryDetail = {
+      volt1Value: 200,
+      current1Value: 20,
+      activePowerValue: 10,
+      powerFactor1Value: 30,
+      totalPowerValue: 20,
+      listConfigs: { total_power: 1 },
+    };
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(summaryDetail));
+    });
+    expect(mockSetState).toHaveBeenCalledWith([{}]);
+  });
 });

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+import moment from 'moment';
+
 import ConfigHistoryChart from '../';
 import { SCProvider } from '../../../../../context';
 import { mockSCStore } from '../../../../../context/mockStore';
 import HistoryChart from '../../../../../commons/Device/HistoryChart';
-import axios from 'axios';
-import moment from 'moment';
+import api from '../../../../../utils/Apis/axios';
+import { API } from '../../../../../configs';
 
 jest.mock('react', () => {
   return {
@@ -14,7 +17,7 @@ jest.mock('react', () => {
   };
 });
 
-jest.mock('axios');
+const mock = new MockAdapter(api.axiosInstance);
 
 const wrapComponent = (configs = []) => (
   <SCProvider initState={mockSCStore({})}>
@@ -48,7 +51,7 @@ describe('Test HistoryChart', () => {
         },
       ],
     };
-    axios.get.mockImplementation(async () => response);
+    mock.onGet(API.CONFIG.DISPLAY_HISTORY).reply(200, response.data);
     const configs = [{ id: 1 }];
     await act(async () => {
       tree = await create(wrapComponent(configs));

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

@@ -4,6 +4,7 @@ import moment from 'moment';
 import { API } from '../../../../configs';
 import HistoryChart from '../../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../../utils/Apis/axios';
+import { updateConfigChart } from '../../../../commons/UnitSummary/ConfigHistoryChart';
 
 export const dateTimeType = {
   date: 'date',
@@ -30,19 +31,7 @@ const ConfigHistoryChart = memo(({ configs }) => {
       const { success, data } = await axiosGet(API.CONFIG.DISPLAY_HISTORY, {
         params,
       });
-      if (success) {
-        for (let i = 0; i < data.length; i++) {
-          for (let j = 0; j < data[i].data.length; j++) {
-            data[i].data[j].x = moment(data[i].data[j].x).toDate();
-          }
-        }
-        setChartData(
-          configuration.map((config) => {
-            config.data = data.find((k) => k.config === config.id).data;
-            return config;
-          })
-        );
-      }
+      updateConfigChart(success, data, configuration, setChartData);
     };
     fetchData();
   }, [startDate, endDate, configs]);

package/src/screens/UnitSummary/components/PowerConsumption/__test__/ItemPower.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable promise/prefer-await-to-callbacks */
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import Text from '../../../../../commons/Text';

package/src/screens/UnitSummary/components/PowerConsumption/__test__/PowerConsumption.test.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
 import { TESTID } from '../../../../../configs/Constants';
-import { Colors } from '../../../../../configs';
+import { API, Colors } from '../../../../../configs';
 import ListQualityIndicator from '../../../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
-import axios from 'axios';
 import PowerConsumption from '../index';
 import { SCProvider } from '../../../../../context';
 import { mockSCStore } from '../../../../../context/mockStore';
+import api from '../../../../../utils/Apis/axios';
+import { Today } from '../../../../../commons';
 
-jest.mock('axios');
+const mock = new MockAdapter(api.axiosInstance);
 
 const wrapComponent = (summaryDetail) => (
   <SCProvider initState={mockSCStore({})}>
@@ -86,15 +89,13 @@ describe('Test PowerConsumption', () => {
       },
     };
 
-    const response = {
-      status: 200,
-    };
-    axios.get.mockImplementation(async (url) => response);
-
+    mock.onGet(API.VALUE_CONSUME.DISPLAY_HISTORY()).reply(200);
     await act(async () => {
       tree = await renderer.create(wrapComponent(summaryDetail));
     });
-    expect(axios.get).toHaveBeenCalled();
+    const instance = tree.root;
+    const Todays = instance.findByType(Today);
+    expect(Todays).toBeDefined();
   });
 
   test('render with unsuccess fetch', async () => {
@@ -113,16 +114,13 @@ describe('Test PowerConsumption', () => {
         volt: 209,
       },
     };
-
-    const response = {
-      data: {},
-    };
-    axios.get.mockImplementation(async (url) => response);
-
+    mock.onGet(API.VALUE_CONSUME.DISPLAY_HISTORY()).reply(200, {});
     await act(async () => {
       tree = await renderer.create(wrapComponent(summaryDetail));
     });
-    expect(axios.get).toHaveBeenCalled();
+    const instance = tree.root;
+    const Todays = instance.findByType(Today);
+    expect(Todays).toBeDefined();
   });
 
   test('render without value', async () => {

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

@@ -13,7 +13,6 @@ const wrapComponent = (unit, summaryDetail) => (
 );
 
 const mockedNavigate = jest.fn();
-
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -23,6 +22,16 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const mockConnectGoogleHome = jest.fn();
+jest.mock('../../../../../hooks/IoT', () => {
+  return {
+    ...jest.requireActual('../../../../../hooks/IoT'),
+    useGGHomeConnection: () => ({
+      connectGoogleHome: mockConnectGoogleHome,
+    }),
+  };
+});
+
 describe('test RunningDevices', () => {
   afterEach(() => {
     mockedNavigate.mockClear();
@@ -73,6 +82,7 @@ describe('test RunningDevices', () => {
       act(() => {
         button[0].props.onPress();
       });
+      expect(mockConnectGoogleHome).toBeCalled();
     });
   });
 
@@ -112,7 +122,6 @@ describe('test RunningDevices', () => {
       button[0].props.onPress();
     });
     expect(mockedNavigate).toBeCalledWith('DeviceDetail', {
-      isGGHomeConnected: false,
       sensorData: summaryDetail.devices[0],
       station: 'station',
       title: undefined,

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

@@ -1,16 +1,13 @@
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 import ItemDevice from '../../../../commons/Device/ItemDevice';
 import { scanBluetoothDevices } from '../../../../iot/RemoteControl/Bluetooth';
-import { googleHomeConnect } from '../../../../iot/RemoteControl/GoogleHome';
+import { useGGHomeConnection } from '../../../../hooks/IoT';
 
 const RunningDevices = memo(({ unit, summaryDetail }) => {
-  const [isGGHomeConnected, setIsGGHomeConnected] = useState(false);
   const { devices } = summaryDetail;
-  const handleGoogleHomeConnect = useCallback(async (options) => {
-    let isConnected = await googleHomeConnect(options);
-    setIsGGHomeConnected(isConnected);
-  }, []);
+
+  const { connectGoogleHome } = useGGHomeConnection();
 
   useEffect(() => {
     if (unit.remote_control_options) {
@@ -18,10 +15,11 @@ const RunningDevices = memo(({ unit, summaryDetail }) => {
         scanBluetoothDevices(unit.remote_control_options.bluetooth);
       }
       if (unit.remote_control_options.googlehome) {
-        handleGoogleHomeConnect(unit.remote_control_options.googlehome);
+        (async () =>
+          await connectGoogleHome(unit.remote_control_options.googlehome))();
       }
     }
-  }, [handleGoogleHomeConnect, unit]);
+  }, [connectGoogleHome, unit]);
   return (
     <View style={styles.container}>
       {!!devices &&
@@ -39,7 +37,6 @@ const RunningDevices = memo(({ unit, summaryDetail }) => {
               sensor={item}
               unit={unit}
               station={item.station}
-              isGGHomeConnected={isGGHomeConnected}
             />
           );
         })}

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

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import t, { useTranslations } from '../../../../hooks/Common/useTranslations';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
 import { Section, Today } from '../../../../commons';
@@ -11,7 +11,7 @@ import SvgRain from '../../../../../assets/images/Device/rain-outline.svg';
 import SvgTemperature from '../../../../../assets/images/Device/temperature.svg';
 import SvgWind from '../../../../../assets/images/Device/wind.svg';
 
-const getDataTemperature = (summaryDetail) => {
+const getDataTemperature = (summaryDetail, t) => {
   return [
     {
       id: '0',
@@ -52,8 +52,8 @@ const Temperature = memo(({ summaryDetail }) => {
   }, [listConfigs]);
 
   const dataTemperature = useMemo(
-    () => getDataTemperature(summaryDetail),
-    [summaryDetail]
+    () => getDataTemperature(summaryDetail, t),
+    [summaryDetail, t]
   );
 
   const configs = useMemo(() => {