@eohjsc/react-native-smart-city 0.3.8 → 0.3.11

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(() => {

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

@@ -22,11 +22,11 @@ const Item = memo((props) => {
       <View size={14} color={Colors.Gray8} style={styles.textTitleX}>
         <Text>{title}</Text>
         {waterType && (
-          <TouchableOpacity onPress={goToDetail}>
+          <TouchableOpacity onPress={goToDetail} style={styles.buttonInfo}>
             <IconOutline
               style={styles.row}
               name="info-circle"
-              size={14}
+              size={20}
               color={Colors.Black}
             />
           </TouchableOpacity>
@@ -79,4 +79,12 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  buttonInfo: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -10,
+    marginRight: -10,
+  },
 });

package/src/screens/UnitSummary/index.js

@@ -3,9 +3,10 @@ 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 { useTranslations } from '../../hooks/Common/useTranslations';
 import moment from 'moment';
 
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useReceiveNotifications } from '../../hooks';
 import { API, Colors } from '../../configs';
 import Routes from '../../utils/Route';
 import { axiosGet } from '../../utils/Apis/axios';
@@ -139,6 +140,19 @@ const UnitSummary = memo(({ route }) => {
     fetchSummaryDetail();
   }, [fetchSummaryDetail]);
 
+  const { dataNotification } = useReceiveNotifications();
+
+  useEffect(() => {
+    if (dataNotification) {
+      const { params = {} } = dataNotification;
+      const { summary_id } = params;
+      if (summary_id && summary_id === summaryId) {
+        fetchSummaryDetail();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataNotification]);
+
   const UnitSummaryDetail = getComponentAndGuide();
   const ComponentName = UnitSummaryDetail?.componentName;
   const GuideName = UnitSummaryDetail?.guideName;

package/src/screens/WaterQualityGuide/index.js

@@ -270,7 +270,7 @@ const WaterQualityGuide = memo(({ route }) => {
 
   return (
     <SafeAreaView style={styles.container}>
-      <ScrollView style={styles.container}>
+      <ScrollView style={styles.container} scrollIndicatorInsets={{ right: 1 }}>
         <View style={styles.wrapScroll}>
           {titles.map((item, index) => {
             const { title, des } = item;

package/src/utils/Apis/axios.js

@@ -1,35 +1,37 @@
-import axios from 'axios';
-import { deleteData, getData, storeData } from '../Storage';
+import { create } from 'apisauce';
+import { getData, storeData } from '../Storage';
 import { ToastBottomHelper } from '../Utils';
 import NetInfo from '@react-native-community/netinfo';
-
-export const replaceParams = (apiURL, params) => {
-  let _result = apiURL;
-  if (typeof params === 'object') {
-    Object.keys(params).forEach((key) => {
-      _result = _result.replace(`{${key}}`, params[key]);
-    });
-  }
-  return _result;
-};
+import { PROBLEM_CODE } from '../../configs/Constants';
+import { getTranslate } from '../I18n';
+import { SCConfig } from '../../configs';
+import { isHTML } from '../Validation';
+
+const api = create({
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 30000,
+});
 
 const parseErrorResponse = async (error) => {
   let message;
   let data = {};
-  if (
-    error.response &&
-    error.response.data &&
-    error.response.data instanceof Object
-  ) {
-    data = error.response.data;
-    const firstKey = Object.keys(error.response.data)[0];
-    message = error.response.data[firstKey];
+  if (error.data instanceof Array) {
+    message = error.data[0];
+  } else if (error.data instanceof Object) {
+    data = error.data;
+    const firstKey = Object.keys(error.data)[0];
+    message = error.data[firstKey];
 
     if (message instanceof Array) {
       message = message[0];
     }
+    if (message?.message) {
+      message = message.message;
+    }
   } else {
-    message = error.message;
+    message = error.data || error.problem;
   }
 
   if (typeof message === 'string') {
@@ -41,6 +43,16 @@ const parseErrorResponse = async (error) => {
       }
     }
     if (!hideError) {
+      switch (error.problem) {
+        case PROBLEM_CODE.SERVER_ERROR:
+          message = getTranslate(SCConfig.language, 'server_error');
+          break;
+        case PROBLEM_CODE.CLIENT_ERROR:
+          if (error.status === 404 && isHTML(error.data)) {
+            message = getTranslate(SCConfig.language, 'not_found');
+          }
+          break;
+      }
       ToastBottomHelper.error(message);
     }
   }
@@ -50,7 +62,7 @@ const parseErrorResponse = async (error) => {
     error,
     message,
     data,
-    resp_status: error?.response?.status,
+    resp_status: error?.status || error?.response?.status,
   };
 };
 
@@ -75,6 +87,7 @@ export async function fetchWithCache(url, config = {}, updateMethod) {
     if (cacheResponse) {
       updateMethod(cacheResponse);
     }
+    // eslint-disable-next-line no-empty
   } catch {}
   const response = await axiosGet(url, config, true);
   if (!response.cache) {
@@ -83,25 +96,34 @@ export async function fetchWithCache(url, config = {}, updateMethod) {
 }
 
 export async function axiosGet(URL, config = {}, cache = false) {
-  const cacheKey = `@CACHE_REQUEST_${URL}`;
   let response;
   try {
-    response = await axios.get(URL, config);
+    response = await api.get(URL, config.params, config);
   } catch (error) {
     if (cache) {
-      // only network error or server error
-      if (!error.response || error.response.status >= 500) {
+      if (error.message === 'Network Error') {
         return (
-          (await axiosCache(URL, error.response.status)) ||
+          (await axiosCache(URL, 500)) || (await parseErrorResponse(error))
+        );
+      }
+      if (!error?.response || error?.response?.status >= 500) {
+        return (
+          (await axiosCache(URL, error?.response?.status)) ||
           (await parseErrorResponse(error))
         );
-      } else {
-        await deleteData(cacheKey);
       }
     }
     return await parseErrorResponse(error);
   }
-  const { data } = response;
+  const { data, problem } = response;
+  if (problem) {
+    if (cache) {
+      return (
+        (await axiosCache(URL, 500)) || (await parseErrorResponse(response))
+      );
+    }
+    return await parseErrorResponse(response);
+  }
   if (response.status === 200) {
     if (cache) {
       await storeData(`@CACHE_REQUEST_${URL}`, JSON.stringify(data));
@@ -121,18 +143,23 @@ export async function axiosGet(URL, config = {}, cache = false) {
 async function axiosCall(method, ...args) {
   let response;
   try {
-    response = await axios[method](...args);
+    response = await api[method](...args);
   } catch (error) {
     return await parseErrorResponse(error);
   }
 
-  const { data } = response;
+  const { data, problem } = response;
+  if (problem) {
+    return await parseErrorResponse(response);
+  }
+
   if (response.status >= 200 && response.status < 300) {
     return {
       success: true,
       data,
     };
   }
+  await parseErrorResponse(response);
 
   return {
     success: false,
@@ -186,3 +213,5 @@ export function createFormData(data, list_file_field) {
 
   return formData;
 }
+
+export default api;

package/src/utils/Converter/time.js

@@ -1,24 +1,6 @@
 import t from '../../hooks/Common/useTranslations';
 import moment from 'moment';
 
-export const transformDatetime = (data = {}, listFieldName = []) => {
-  listFieldName.forEach((name) => {
-    const value = data[name];
-    const isArray = Array.isArray(value);
-
-    if (!data.hasOwnProperty(name)) {
-      return;
-    }
-
-    if (isArray) {
-      data[name] = value.map((item) => (item ? moment(item) : item));
-      return;
-    }
-
-    data[name] = value ? moment(value) : value;
-  });
-};
-
 export const timeDifference = (current, previous, symbol = false) => {
   let msPerMinute = 60 * 1000;
   let msPerHour = msPerMinute * 60;

package/src/utils/I18n/translations/en.json

@@ -985,5 +985,17 @@
   "you_need_to_enter_password": "You need to enter password to perform this action",
   "note": "Note",
   "back": "Back",
-  "This {name} was removed!" : "This {name} was removed!"
+  "invaild_data": "Invaild data",
+  "This {name} was removed!" : "This {name} was removed!",
+  "camera_request_permission": "Camera request permission",
+  "camera_request_permission_des": "To use camera, please unlock camera permission",
+  "location_require_message": "EoH needs your location permission to get current location.",
+  "turn_on_location_service": "Turn on location service for your phone",
+  "turn_on_location_service_des": "To continue, let your device turn on location by turning on location service in Settings",
+  "detected": "Detected",
+  "not_detected": "Not detected",
+  "activated": "Activated",
+  "text_unit_add_to_favorites_no_devices": "You don't have any devices or all your devices was added to your favorites",
+  "not_found": "Not found",
+  "not_activated": "Not activated"
 }

package/src/utils/I18n/translations/vi.json

@@ -985,5 +985,18 @@
   "maxmium_contacts": "Địa chỉ liên hệ tối đa",
   "note": "Lưu ý ",
   "back": "Quay lại",
-  "This {name} was removed!" : "{Name} này đã bị xóa!"
+  "invaild_data": "Dữ liệu không hợp lệ",
+  "This {name} was removed!" : "{Name} này đã bị xóa!",
+  "location_perm_denied": "Ứng dụng không cho phép truy cập vị trí.",
+  "camera_request_permission": "Quyền yêu cầu máy ảnh",
+  "camera_request_permission_des": "Để sử dụng máy ảnh, vui lòng mở khóa quyền đối với máy ảnh",
+  "location_require_message": "Eoh cần quyền truy cập vị trí của bạn để lấy vị trí hiện tại.",
+  "turn_on_location_service": "Bật dịch vụ vị trí cho điện thoại của bạn",
+  "turn_on_location_service_des": "Để tiếp tục, bật dịch vụ vị trí cho điện thoại của bạn trong Cài Đặt",
+  "detected": "Phát hiện",
+  "not_detected": "Không phát hiện",
+  "activated": "Được kích hoạt",
+  "text_unit_add_to_favorites_no_devices": "Bạn không có thiết bị nào hoặc tất cả thiết bị của bạn đã được thêm vào yêu thích",
+  "not_found": "Không tìm thấy",
+  "not_activated": "Không kích hoạt"
 }

package/src/utils/Permission/common.js

@@ -0,0 +1,67 @@
+/* eslint-disable promise/prefer-await-to-then */
+/* eslint-disable promise/prefer-await-to-callbacks */
+
+import {
+  check,
+  openSettings,
+  PERMISSIONS,
+  request,
+  RESULTS,
+} from 'react-native-permissions';
+import AlertAsync from 'react-native-alert-async';
+import t from '../../hooks/Common/useTranslations';
+import { Platform } from 'react-native';
+
+const isAndroid = Platform.OS === 'android';
+
+export const OpenSetting = async (alertTitle, alertMessage) => {
+  await AlertAsync(alertTitle, alertMessage, [
+    {
+      text: t('cancel'),
+      onPress: () => {},
+      style: 'cancel',
+    },
+    {
+      text: t('ok'),
+      onPress: () => {
+        openSettings().then();
+      },
+    },
+  ]);
+};
+
+export const permitPermissionFunction = (keyPermission, callback) => {
+  if (keyPermission) {
+    check(keyPermission).then((result) => {
+      switch (result) {
+        case RESULTS.DENIED:
+        case RESULTS.LIMITED:
+          request(keyPermission).then((res) => callback(res));
+          break;
+        case RESULTS.BLOCKED:
+        case RESULTS.GRANTED:
+          callback(result);
+          break;
+        default:
+          break;
+      }
+    });
+  }
+};
+
+export const keyPermission = {
+  SMS_RECEIVE: PERMISSIONS.ANDROID.RECEIVE_SMS,
+  LOCATION: isAndroid
+    ? PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
+    : PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
+  CAMERA: isAndroid ? PERMISSIONS.ANDROID.CAMERA : PERMISSIONS.IOS.CAMERA,
+  SELECT_PHOTO: isAndroid
+    ? PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE
+    : PERMISSIONS.IOS.PHOTO_LIBRARY,
+};
+
+export const GEOLOCATION_ERROR = {
+  PERMISSION_DENIED: 1,
+  POSITION_UNAVAILABLE: 2,
+  TIMEOUT: 3,
+};

package/src/utils/Route/index.js

@@ -136,6 +136,7 @@ const Routes = {
   SmartAccount: 'SmartAccount',
   SmartHomeDashboard: 'SmartHomeDashboard',
   SetupGeneratePasscode: 'SetupGeneratePasscode',
+  SideMenuDetail: 'SideMenuDetail',
   SelectDeviceType: 'SelectDeviceType',
   SelectBrand: 'SelectBrand',
   GroupButtonByType: 'GroupButtonByType',
@@ -145,6 +146,7 @@ const Routes = {
   ItemPasscode: 'ItemPasscode',
   UnitMemberInformation: 'UnitMemberInformation',
   EnterPassword: 'EnterPassword',
+  SelectDevices: 'SelectDevices',
 };
 
 export default Routes;

package/src/utils/Setting/Location.js

@@ -0,0 +1,30 @@
+import { Platform } from 'react-native';
+import RNAndroidLocationEnabler from 'react-native-android-location-enabler';
+import AlertAsync from 'react-native-alert-async';
+import t from '../../hooks/Common/useTranslations';
+
+export const openPromptEnableLocation = async () => {
+  if (Platform.OS === 'android') {
+    try {
+      await RNAndroidLocationEnabler.promptForEnableLocationIfNeeded({
+        interval: 10000,
+        fastInterval: 5000,
+      });
+      return true;
+    } catch (err) {
+      return false;
+    }
+  } else {
+    await AlertAsync(
+      t('turn_on_location_service'),
+      t('turn_on_location_service_des'),
+      [
+        {
+          text: t('ok'),
+          onPress: () => {},
+        },
+      ]
+    );
+    return false;
+  }
+};