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

package/src/commons/Dashboard/MyPinnedSharedUnit/__test__/MyPinnedSharedUnit.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
 import MyPinnedSharedUnit from '../index';
 import { Text } from 'react-native';
@@ -10,9 +9,9 @@ import { mockSCStore } from '../../../../context/mockStore';
 import { TESTID } from '../../../../configs/Constants';
 import { API } from '../../../../configs';
 import { TouchableOpacity } from 'react-native';
-import api from '../../../../utils/Apis/axios';
+import axios from 'axios';
 
-const mock = new MockAdapter(api.axiosInstance);
+jest.mock('axios');
 
 const mockedNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
@@ -33,14 +32,21 @@ const wrapComponent = (route) => (
 
 describe('Test MyPinnedSharedUnit', () => {
   let tree;
+  afterEach(() => {
+    axios.get.mockClear();
+  });
 
   test('create', async () => {
-    mock.onGet(API.UNIT.SHARED_UNITS()).reply(200, [{ id: 1 }]);
-
+    const response = {
+      status: 200,
+      data: [{ id: 1 }],
+    };
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
     await act(async () => {
       tree = await create(wrapComponent());
     });
-
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts).toHaveLength(4);
@@ -59,15 +65,6 @@ describe('Test MyPinnedSharedUnit', () => {
       goToAllSharedUnits.props.onPress();
     });
     expect(mockedNavigate).toHaveBeenCalled();
-  });
-
-  test('render without item', async () => {
-    mock.onGet(API.UNIT.SHARED_UNITS()).reply(400, []);
-    await act(async () => {
-      tree = await create(wrapComponent());
-    });
-    const instance = tree.root;
-    const texts = instance.findAllByType(Text);
-    expect(texts).toHaveLength(4);
+    expect(axios.get).toHaveBeenCalledWith(API.UNIT.SHARED_UNITS(), {});
   });
 });

package/src/commons/Dashboard/MyPinnedSharedUnit/index.js

@@ -60,7 +60,7 @@ const MyPinnedSharedUnit = () => {
         {sharedUnits &&
           Boolean(sharedUnits.length) &&
           sharedUnits
-            .filter((sharedUnit) => sharedUnit?.is_pin)
+            .filter((sharedUnit) => sharedUnit.is_pin)
             .map((item, index) => (
               <View key={item.id}>
                 <SharedUnit

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -4,7 +4,9 @@ import MyUnit from '..';
 import { TESTID } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
+import axios from 'axios';
 
+jest.mock('axios');
 const mockedNavigate = jest.fn();
 const mockUseIsFocused = jest.fn();
 const mockedDispatch = jest.fn();
@@ -34,6 +36,9 @@ const wrapComponent = () => (
 
 describe('Test MyUnit', () => {
   let tree;
+  beforeEach(() => {
+    axios.get.mockClear();
+  });
   const getElement = (instance) => {
     const goToDetail = instance.findAll(
       (item) => item.props.testID === TESTID.MY_UNIT_GO_TO_DETAIL

package/src/commons/Device/ConnectedViewHeader.js

@@ -29,7 +29,7 @@ const ConnectedViewHeader = memo(
     const t = useTranslations();
     const lastUpdatedStr = lastUpdated
       ? timeDifference(new Date(), lastUpdated)
-      : `5 ${t('seconds_ago')}`;
+      : null;
     return (
       <View style={styles.statusContainer}>
         <View style={styles.connectStatus}>

package/src/commons/Device/HistoryChart.js

@@ -151,12 +151,12 @@ const HistoryChart = memo(
       if (configuration.config !== 'power_consumption') {
         return null;
       }
-      const { price: chartPrice } = chartConfig;
-      if (chartPrice === '' || isNaN(chartPrice)) {
+      const { price } = chartConfig;
+      if (price === '' || isNaN(price)) {
         return null;
       }
       const sum = datas[0].data.reduce((a, b) => a + b.y, 0);
-      const roundedSum = sum * chartPrice;
+      const roundedSum = sum * price;
       return roundedSum.toFixed();
     }, [configuration, datas, chartConfig]);
 
@@ -239,8 +239,6 @@ const HistoryChart = memo(
           onConfirm={onConfirmStart}
           onCancel={onCancel}
           display="spinner"
-          cancelTextIOS={t('cancel')}
-          confirmTextIOS={t('confirm')}
         />
         <DateTimePickerModal
           isVisible={eventPicker.showModalEnd}
@@ -249,8 +247,6 @@ const HistoryChart = memo(
           onConfirm={onConfirmEnd}
           onCancel={onCancel}
           display="spinner"
-          cancelTextIOS={t('cancel')}
-          confirmTextIOS={t('confirm')}
         />
       </View>
     );

package/src/commons/Device/ItemDevice.js

@@ -11,9 +11,8 @@ import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import ItemQuickAction from '../../commons/Action/ItemQuickAction';
 import Text from '../../commons/Text';
-import { isDeviceConnected as isBluetoothDeviceConnected } from '../../iot/RemoteControl/Bluetooth';
+import { isDeviceConnected } from '../../iot/RemoteControl/Bluetooth';
 import { useSCContextSelector } from '../../context';
-import { useGGHomeDeviceConnected } from '../../hooks/Common';
 
 import { Colors } from '../../configs';
 import { TESTID, DEVICE_TYPE, DEVICE_SIZE } from '../../configs/Constants';
@@ -27,6 +26,7 @@ const ItemDevice = memo(
     sensor,
     unit,
     station,
+    isGGHomeConnected,
     serverDown,
     status,
     wrapStyle,
@@ -39,7 +39,6 @@ const ItemDevice = memo(
     const isNetworkConnected = useSCContextSelector(
       (state) => state.app.isNetworkConnected
     );
-    const { isConnected: isGGHomeConnected } = useGGHomeDeviceConnected(sensor);
 
     const goToSensorDisplay = useCallback(() => {
       navigation.navigate(Routes.DeviceDetail, {
@@ -47,35 +46,29 @@ const ItemDevice = memo(
         station,
         sensorData: sensor,
         title,
+        isGGHomeConnected,
       });
-    }, [navigation, sensor, station, title, unit]);
+    }, [navigation, sensor, station, title, unit, isGGHomeConnected]);
 
     const isConnectedViaInternet =
       status === undefined
         ? !serverDown && isNetworkConnected && sensor.is_connected
         : !serverDown && isNetworkConnected && status.is_connected;
-
     const isConnectedViaBLE =
       isBluetoothEnabled &&
-      isBluetoothDeviceConnected(
-        sensor?.remote_control_options?.bluetooth?.address
-      );
-
+      isDeviceConnected(sensor?.remote_control_options?.bluetooth?.address);
+    const isConnectedViaGGHome =
+      !!sensor &&
+      sensor?.is_other_device &&
+      !sensor?.device_type !== DEVICE_TYPE.LG_THINQ &&
+      isGGHomeConnected;
     const isConnected =
-      !!sensor && sensor?.is_other_device
-        ? sensor?.device_type === DEVICE_TYPE.LG_THINQ
-          ? true
-          : isGGHomeConnected
-        : isConnectedViaInternet || isConnectedViaBLE;
-
+      isConnectedViaInternet || isConnectedViaGGHome || isConnectedViaBLE;
     const borderColor = isConnected ? Colors.Gray4 : Colors.Red6;
     const textConnected = isConnected ? t('connected') : t('disconnected');
 
     return (
-      <TouchableWithoutFeedback
-        onPress={goToSensorDisplay}
-        testID={`${TESTID.SENSOR_NAME}-${sensor?.id}`}
-      >
+      <TouchableWithoutFeedback onPress={goToSensorDisplay}>
         <View
           style={[styles.container, wrapStyle, { borderColor }]}
           testID={TESTID.SUB_UNIT_DEVICES}

package/src/commons/Device/LinearChart.js

@@ -52,21 +52,6 @@ const chartOptions = {
       format: '{value:%d.%m %H:%M}',
     },
   },
-  legend: {
-    useHTML: true,
-    labelFormatter: function () {
-      if (this.visible) {
-        return (
-          '<span style="color:#333333;font-weight:bold">' +
-          this.name +
-          '</span>'
-        );
-      }
-      return (
-        '<span style="color:#cccccc;font-weight:bold">' + this.name + '</span>'
-      );
-    },
-  },
 };
 
 function LinearChart({ datas }) {

package/src/commons/Device/PMSensor/PMSensorIndicatior.js

@@ -1,5 +1,4 @@
 import React, { memo, useCallback } from 'react';
-import { View } from 'react-native';
 import { FlatList } from 'react-native';
 import QualityIndicatorItem from '../WaterQualitySensor/QualityIndicatorsItem';
 import styles from './PMSensorIndicatorStyles';
@@ -27,21 +26,18 @@ const PMSensorIndicatior = memo(({ data, style }) => {
   const isScrollMode = data.length > 3;
 
   return (
-    <View style={styles.wrap}>
-      <FlatList
-        bounces={false}
-        numColumns={1}
-        horizontal={true}
-        contentContainerStyle={[
-          styles.standard,
-          !isScrollMode && styles.centerItem,
-        ]}
-        data={data}
-        keyExtractor={keyExtractor}
-        renderItem={renderItem}
-        scrollIndicatorInsets={{ right: 1 }}
-      />
-    </View>
+    <FlatList
+      bounces={false}
+      numColumns={1}
+      horizontal={true}
+      contentContainerStyle={[
+        styles.standard,
+        !isScrollMode && styles.centerItem,
+      ]}
+      data={data}
+      keyExtractor={keyExtractor}
+      renderItem={renderItem}
+    />
   );
 });
 

package/src/commons/Device/PMSensor/PMSensorIndicatorStyles.js

@@ -10,7 +10,4 @@ export default StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
-  wrap: {
-    marginVertical: 16,
-  },
 });

package/src/commons/Device/SonosSpeaker/index.js

@@ -69,7 +69,7 @@ const SonosSpeaker = memo(() => {
         <View style={styles.containerSlider}>
           <Slider
             value={value}
-            onValueChange={setValue}
+            onValueChange={(value) => setValue(value)}
             step={1}
             minimumValue={0}
             maximumValue={100}

package/src/commons/Device/WaterQualitySensor/ListQualityIndicator.js

@@ -27,7 +27,6 @@ const ListQualityIndicator = ({ data, style }) => {
         showsHorizontalScrollIndicator={false}
         nestedScrollEnabled
         contentContainerStyle={[styles.flatlistContent, style]}
-        scrollIndicatorInsets={{ right: 1 }}
       />
     </View>
   );

package/src/commons/Device/WaterQualitySensor/QualityIndicatorsItem.js

@@ -37,7 +37,7 @@ const QualityIndicatorItem = memo(
             >
               <IconOutline
                 name={'info-circle'}
-                size={18}
+                size={16}
                 color={Colors.Gray8}
               />
             </TouchableOpacity>
@@ -92,11 +92,6 @@ const styles = StyleSheet.create({
     marginTop: 8,
   },
   iconInfo: {
-    width: 40,
-    height: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: -10,
-    marginTop: -2,
+    top: 10,
   },
 });

package/src/commons/Explore/__test__/CityItem.test.js

@@ -2,15 +2,12 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import CityItem from '../CityItem';
 import { TouchableOpacity } from 'react-native';
+import axios from 'axios';
 import { API } from '../../../configs';
 import Pin from '../../../../assets/images/Explore/Pin.svg';
 import PinOutline from '../../../../assets/images/Explore/PinOutline.svg';
 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 mockedDispatch = jest.fn();
 
@@ -20,6 +17,7 @@ const wrapComponent = (item, mockeSelect) => (
   </SCProvider>
 );
 
+jest.mock('axios');
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useDispatch: () => mockedDispatch,
@@ -27,6 +25,9 @@ jest.mock('react-redux', () => ({
 
 describe('Test CityItem', () => {
   let tree;
+  afterEach(() => {
+    axios.post.mockClear();
+  });
 
   test('render CityItem is_pin: true', async () => {
     const item = {
@@ -37,23 +38,37 @@ describe('Test CityItem', () => {
       count_pin: 1,
     };
     const mockeSelect = jest.fn();
-    mock.onPost(API.UNIT.PIN_UNIT()).reply(200);
+    const response = {
+      status: 200,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
     await act(async () => {
       tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
     const buttons = instance.findAllByType(TouchableOpacity);
     expect(buttons.length).toBe(2);
-    await buttons[0].props.onPress();
+    await act(async () => {
+      await buttons[0].props.onPress();
+    });
     expect(mockeSelect).toHaveBeenCalledTimes(1);
+
     const pin = instance.findAllByType(Pin);
     expect(pin.length).toBe(2);
-    mock.onPost(API.UNIT.PIN_UNIT()).reply(200);
-    await pin[1].props.onPress();
+    await act(async () => {
+      await pin[1].props.onPress();
+    });
+    expect(axios.post).toHaveBeenCalledWith(API.UNIT.UNPIN_UNIT(1));
+
     const unpin = instance.findAllByType(PinOutline);
-    mock.onPost(API.UNIT.UNPIN_UNIT(1)).reply(200);
-    await unpin[1].props.onPress();
     expect(unpin.length).toBe(2);
+    await act(async () => {
+      await unpin[1].props.onPress();
+    });
+    expect(axios.post).toHaveBeenCalledWith(API.UNIT.UNPIN_UNIT(1));
   });
 
   test('render CityItem is_pin: false', async () => {
@@ -65,33 +80,24 @@ describe('Test CityItem', () => {
       count_pin: 1,
     };
     const mockeSelect = jest.fn();
+    const response = {
+      status: 200,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
     await act(async () => {
       tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
+
     const unpin = instance.findAllByType(PinOutline);
-    mock.onPost(API.UNIT.PIN_UNIT(1)).reply(200);
-    await unpin[1].props.onPress();
     expect(unpin.length).toBe(2);
-  });
-
-  test('render CityItem is_pin: false and call api false', async () => {
-    const item = {
-      id: 1,
-      name: 'name',
-      icon: 'icon',
-      is_pin: false,
-      count_pin: 1,
-    };
-    const mockeSelect = jest.fn();
     await act(async () => {
-      tree = await renderer.create(wrapComponent(item, mockeSelect));
+      await unpin[1].props.onPress();
     });
-    const instance = tree.root;
-    const unpin = instance.findAllByType(PinOutline);
-    mock.onPost(API.UNIT.PIN_UNIT(1)).reply(400);
-    await unpin[1].props.onPress();
-    expect(unpin.length).toBe(2);
+    expect(axios.post).toHaveBeenCalledWith(API.UNIT.PIN_UNIT(1));
   });
 
   test('render CityItem PinOutline axios.post response false', async () => {
@@ -103,14 +109,22 @@ describe('Test CityItem', () => {
       count_pin: 1,
     };
     const mockeSelect = jest.fn();
-    mock.onPost(API.UNIT.PIN_UNIT()).reply(200, {});
+    const response = {};
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
     await act(async () => {
       tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
+
     const unpin = instance.findAllByType(PinOutline);
-    await unpin[1].props.onPress();
     expect(unpin.length).toBe(2);
+    await act(async () => {
+      await unpin[1].props.onPress();
+    });
+    expect(axios.post).not.toHaveBeenCalledWith(API.UNIT.UNPIN_UNIT(1));
   });
 
   test('render CityItem Pin axios.post response false', async () => {
@@ -122,14 +136,21 @@ describe('Test CityItem', () => {
       count_pin: 1,
     };
     const mockeSelect = jest.fn();
-    mock.onPost(API.UNIT.UNPIN_UNIT(1)).reply(400, {});
+    const response = {};
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
     await act(async () => {
       tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
     const pin = instance.findAllByType(Pin);
-    await pin[1].props.onPress();
     expect(pin.length).toBe(2);
+    await act(async () => {
+      await pin[1].props.onPress();
+    });
+    expect(axios.post).toHaveBeenCalledWith(API.UNIT.UNPIN_UNIT(1));
   });
 
   test('render CityItem icon null', async () => {

package/src/commons/Form/CurrencyInput.js

@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useRef,
-  useCallback,
-  useMemo,
-  useEffect,
-} from 'react';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
 import {
   View,
   TextInput,
@@ -12,7 +6,6 @@ import {
   TouchableWithoutFeedback,
   Platform,
 } from 'react-native';
-import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -132,13 +125,6 @@ const CurrencyInput = ({
     return textInputValue.toString().length < 2 ? -12 : 0;
   }, [textInputValue]);
 
-  useEffect(() => {
-    const isAndroid = Platform.OS === 'android';
-    isAndroid && AndroidKeyboardAdjust.setAdjustResize();
-
-    return () => isAndroid && AndroidKeyboardAdjust.setAdjustPan();
-  }, []);
-
   return (
     <TouchableWithoutFeedback onPress={focusInput}>
       <View style={styles.wrap}>

package/src/commons/Form/TextInputPassword.js

@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     borderRadius: 2,
     paddingTop: 12,
     paddingBottom: 12,
-    paddingRight: 20,
+    paddingHorizontal: 20,
     backgroundColor: Colors.White,
     // ...Theme.shadow,
     shadowColor: Colors.Gray13,

package/src/commons/FullLoading/index.js

@@ -22,8 +22,7 @@ const styles = StyleSheet.create({
     left: 0,
     bottom: 0,
     right: 0,
-    zIndex: 1000, // works on ios
-    elevation: 1000, // works on android
+    zIndex: 10,
   },
   background: {
     backgroundColor: colorOpacity(Colors.White, 0.8),

package/src/commons/Header/HeaderCustom.js

@@ -6,7 +6,6 @@ import { Icon } from '@ant-design/react-native';
 import { useNavigation } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { notImplemented } from '../../utils/Utils';
 
 const HeaderCustom = ({
   title = '',
@@ -34,7 +33,7 @@ const HeaderCustom = ({
   };
 
   const handleClose = useCallback(() => {
-    onClose ? onClose() : notImplemented(t);
+    onClose ? onClose() : alert(t('feature_under_development'));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/commons/HeaderAni/index.js

@@ -6,7 +6,6 @@ import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 import Text from '../../commons/Text';
 import { Colors, Constants } from '../../configs';
-import { TESTID } from '../../configs/Constants';
 
 const screenHeight = Constants.height;
 const default_height = 44;
@@ -90,11 +89,7 @@ const HeaderAni = memo(
             },
           ]}
         >
-          <TouchableOpacity
-            style={styles.btnBack}
-            onPress={onPressLeft}
-            testID={TESTID.ICON_BACK}
-          >
+          <TouchableOpacity style={styles.btnBack} onPress={onPressLeft}>
             <Icon name={'left'} size={27} color={Colors.Gray9} />
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>

package/src/commons/HorizontalPicker/index.js

@@ -76,8 +76,8 @@ const HorizontalPicker = ({
   }, [maximum, minimum, time]);
 
   useEffect(() => {
-    const scrollListener = scrollX.addListener(({ value: scrollValue }) => {
-      isCanChangeValue && onChangeValue && onChangeValue(scrollValue);
+    const scrollListener = scrollX.addListener(({ value }) => {
+      isCanChangeValue && onChangeValue && onChangeValue(value);
     });
     return () => scrollX.removeListener(scrollListener);
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/commons/MediaPlayerDetail/Styles/MediaPlayerDetailStyles.js

@@ -68,6 +68,12 @@ export default StyleSheet.create({
     right: 0,
     bottom: 0,
   },
+  firstOpenCamera: {
+    zIndex: -9999,
+    position: 'absolute',
+    width: 1,
+    height: 1,
+  },
   loading: {
     position: 'absolute',
     zIndex: 10,