@eohjsc/react-native-smart-city 0.2.99 → 0.3.2

package/src/commons/Device/LinearChart.js

@@ -52,6 +52,21 @@ 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/SonosSpeaker/index.js

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 import { act, create } from 'react-test-renderer';
 import { TESTID } from '../../../../configs/Constants';
 import { mockSCStore } from '../../../../context/mockStore';
@@ -7,8 +7,10 @@ import { SCProvider } from '../../../../context';
 import ChooseUserField from '../index';
 import { TouchableOpacity } from 'react-native';
 import { ModalCustom } from '../../../Modal';
+import api from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
 
-jest.mock('axios');
+const mock = new MockAdapter(api.axiosInstance);
 
 const wrapComponent = (
   unit = { id: 1 },
@@ -47,10 +49,6 @@ const wrapComponent = (
 describe('Test ChooseUserField', () => {
   let tree;
 
-  afterEach(() => {
-    axios.get.mockClear();
-  });
-
   const onPressCancel = async (instance, popup) => {
     const buttonCancel = instance.find(
       (el) =>
@@ -79,14 +77,7 @@ describe('Test ChooseUserField', () => {
   };
 
   test('render ChooseUserField handleOnApply', async () => {
-    const response_unit_members = {
-      status: 200,
-      data: [{ id: 1, name: 'Ken' }],
-    };
-
-    axios.get.mockImplementation(() => {
-      return response_unit_members;
-    });
+    mock.onGet(API.SHARE.UNITS_MEMBERS(1)).reply(200, [{ id: 1, name: 'Ken' }]);
     await act(async () => {
       tree = create(wrapComponent());
     });
@@ -110,4 +101,18 @@ describe('Test ChooseUserField', () => {
     await onPressCancel(instance, popup);
     await onPressApply(instance, popup);
   });
+
+  test('fetch unit_members error', async () => {
+    mock.onGet(API.SHARE.UNITS_MEMBERS(1)).reply(new Error('Network Error'));
+    await act(async () => {
+      tree = create(wrapComponent());
+    });
+    const instance = tree.root;
+    const ChooseField = instance.findAll(
+      (item) =>
+        item.props.testID === TESTID.CHOOSE_ITEM &&
+        item.type === TouchableOpacity
+    );
+    expect(ChooseField).toHaveLength(0);
+  });
 });

package/src/commons/FieldTemplate/PasscodeField/__test__/index.test.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import axios from 'axios';
 import { act, create } from 'react-test-renderer';
 import { TESTID } from '../../../../configs/Constants';
 import { mockSCStore } from '../../../../context/mockStore';
 import { SCProvider } from '../../../../context';
 import PasscodeField from '../index';
 
-jest.mock('axios');
 const mockSetState = jest.fn();
 
 const wrapComponent = (
@@ -44,7 +42,6 @@ describe('Test PasscodeField', () => {
   let tree;
 
   afterEach(() => {
-    axios.get.mockClear();
     mockSetState.mockClear();
   });
 

package/src/commons/FieldTemplate/ScheduleField/__test__/index.test.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import axios from 'axios';
 import { act, create } from 'react-test-renderer';
 import { mockSCStore } from '../../../../context/mockStore';
 import { SCProvider } from '../../../../context';
@@ -7,7 +6,6 @@ import ScheduleField from '../index';
 import { TESTID } from '../../../../configs/Constants';
 import { TouchableOpacity } from 'react-native';
 
-jest.mock('axios');
 const mockSetState = jest.fn();
 
 const wrapComponent = (
@@ -55,7 +53,6 @@ describe('Test ScheduleField', () => {
     Date.now = jest.fn(() => new Date('2022-05-30T15:50:36+01:00'));
   });
   afterEach(() => {
-    axios.get.mockClear();
     mockSetState.mockClear();
   });
 

package/src/commons/FieldTemplate/ScheduleField/index.js

@@ -152,9 +152,9 @@ const ScheduleField = ({ dataItem, index, setDataForm, dataForm }) => {
     <View style={styles.wrapper}>
       <Text style={styles.textHeadLine}>{t('access_schedule')}</Text>
 
-      {listAccessSchedule.map((item, index) => (
+      {listAccessSchedule.map((item, i) => (
         <AccessScheduleItem
-          key={index}
+          key={i}
           item={item}
           isSelected={item.value === accessSchedule}
           onSelect={setAccessSchedule}

package/src/commons/Header/HeaderCustom.js

@@ -6,6 +6,7 @@ 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 = '',
@@ -33,7 +34,7 @@ const HeaderCustom = ({
   };
 
   const handleClose = useCallback(() => {
-    onClose ? onClose() : alert(t('feature_under_development'));
+    onClose ? onClose() : notImplemented(t);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/commons/HorizontalPicker/index.js

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

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

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

package/src/commons/MediaPlayerDetail/index.js

@@ -6,15 +6,7 @@ import React, {
   useContext,
   useMemo,
 } from 'react';
-import {
-  Image,
-  View,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  Platform,
-  ActivityIndicator,
-} from 'react-native';
+import { Image, View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -43,18 +35,14 @@ const MediaPlayerDetail = ({
   height,
 }) => {
   const { setAction } = useContext(SCContext);
-  const { isFirstOpenCamera, camera_opened } = useSCContextSelector(
-    (state) => state.app
-  );
+  const { camera_opened } = useSCContextSelector((state) => state.app);
   const t = useTranslations();
   const [paused, setPaused] = useState(isPaused);
 
   const onTapPause = useCallback(() => {
-    if (!isFirstOpenCamera) {
-      setPaused(false);
-      id && setAction(Action.CAMERA_STATUS_CHANGE, { id, status: true });
-    }
-  }, [id, isFirstOpenCamera, setAction]);
+    setPaused(false);
+    id && setAction(Action.CAMERA_STATUS_CHANGE, { id, status: true });
+  }, [id, setAction]);
 
   const onTapGoDetail = useCallback(() => {
     if (!paused) {
@@ -72,29 +60,29 @@ const MediaPlayerDetail = ({
   }, []);
 
   const getWidthHeight = useCallback(() => {
-    let width = 0,
-      height = 0;
+    let newWidth = 0,
+      newHeight = 0;
     switch (amount) {
       case 1:
-        width = Constants.width;
-        height = 224;
+        newWidth = Constants.width;
+        newHeight = 224;
         break;
       case 4:
-        width = Constants.width / 2;
-        height = 112;
+        newWidth = Constants.width / 1.5;
+        newHeight = 112;
         break;
       case 6:
-        width = Constants.width / 3;
-        height = 112;
+        newWidth = Constants.width / 3;
+        newHeight = 112;
         break;
       default:
-        width = Constants.width - 28;
-        height = 162;
+        newWidth = Constants.width - 28;
+        newHeight = 162;
         break;
     }
     return {
-      width,
-      height,
+      width: newWidth,
+      height: newHeight,
     };
   }, [amount]);
 
@@ -103,9 +91,9 @@ const MediaPlayerDetail = ({
       <VLCPlayer
         autoAspectRatio={true}
         videoAspectRatio={
-          width && height
-            ? `${width}:${height}`
-            : `${getWidthHeight().width}:${getWidthHeight().height}`
+          amount
+            ? `${getWidthHeight().width}:${getWidthHeight().height}`
+            : `${width}:${height}`
         }
         source={{
           initType: 2,
@@ -126,31 +114,20 @@ const MediaPlayerDetail = ({
           styles.player,
           style,
           {
-            width: width || getWidthHeight().width,
-            height: height || getWidthHeight().height,
+            width: amount ? getWidthHeight().width : width,
+            height: amount ? getWidthHeight().height : height,
           },
-          isFirstOpenCamera && styles.firstOpenCamera,
         ]}
         isLive={true}
       />
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uri, isFirstOpenCamera]);
+  }, [uri]);
 
   useEffect(() => {
     setPaused(isPaused);
   }, [isPaused]);
 
-  useEffect(() => {
-    if (isFirstOpenCamera) {
-      const to = setTimeout(() => {
-        setAction(Action.IS_FIRST_OPEN_CAMERA, false);
-        clearTimeout(to);
-      }, 1000);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isFirstOpenCamera]);
-
   useEffect(() => {
     if (id && !(camera_opened || []).some((item) => item === id)) {
       setPaused(true);
@@ -161,14 +138,6 @@ const MediaPlayerDetail = ({
   const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
   return (
     <View style={[styles.wrap, wrapStyles]}>
-      {isFirstOpenCamera && Platform.OS === 'ios' && (
-        <>
-          {renderCamera}
-          <View style={styles.loading}>
-            <ActivityIndicator size={'small'} color={Colors.Primary} />
-          </View>
-        </>
-      )}
       <View style={[styles.loadingWrap]}>
         <Text style={styles.loadingText}>{t('loading')}</Text>
       </View>
@@ -194,7 +163,7 @@ const MediaPlayerDetail = ({
             />
           </View>
         ) : (
-          !isFirstOpenCamera && renderCamera
+          renderCamera
         )}
 
         <View style={styles.buttonView}>

package/src/commons/Sharing/__test__/DevicePermissionsCheckbox.test.js

@@ -15,7 +15,6 @@ const wrapComponent = (sensor, mockFunction) => (
   </SCProvider>
 );
 
-jest.mock('axios');
 describe('Test DevicePermissionsCheckbox', () => {
   let tree;
   let sensor = {

package/src/commons/SubUnit/Favorites/index.js

@@ -8,13 +8,13 @@ import ItemDevice from '../../Device/ItemDevice';
 import ItemOneTap from '../OneTap/ItemOneTap';
 import ItemAddNew from '../../Device/ItemAddNew';
 import styles from './styles';
+import { notImplemented } from '../../../utils/Utils';
 
 const SubUnitFavorites = ({
   isOwner,
   unit,
   favoriteDevices,
   favoriteAutomates,
-  isGGHomeConnected,
   wrapItemStyle,
 }) => {
   const t = useTranslations();
@@ -22,7 +22,7 @@ const SubUnitFavorites = ({
   const { getStatus, serverDown } = useSensorsStatus(unit, favoriteDevices);
 
   const handleOnAddNew = () => {
-    alert(t('feature_under_development'));
+    notImplemented(t);
   };
 
   return (
@@ -42,7 +42,6 @@ const SubUnitFavorites = ({
               sensor={sensor}
               unit={unit}
               station={sensor.station}
-              isGGHomeConnected={isGGHomeConnected}
               serverDown={serverDown}
               status={getStatus(sensor)}
               wrapStyle={wrapItemStyle}

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -1,13 +1,18 @@
-import axios from 'axios';
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { act, create } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
 import SubUnitAutomate from '..';
 import { AUTOMATE_TYPE, TESTID } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import Routes from '../../../../utils/Route';
+import api from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
 
 const wrapComponent = (data) => (
   <SCProvider initState={mockSCStore({})}>
@@ -32,8 +37,6 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-jest.mock('axios');
-
 let tree;
 let data = {
   isOwner: true,
@@ -60,18 +63,9 @@ let data = {
 
 describe('test Item', () => {
   beforeEach(() => {
-    axios.post.mockClear();
     mockedNavigate.mockClear();
   });
   test('render SubUnitAutomate isOwner and handleOnAddNew', async () => {
-    const response = {
-      status: 200,
-    };
-
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
-
     await act(async () => {
       tree = await create(wrapComponent(data));
     });
@@ -114,6 +108,7 @@ describe('test Item', () => {
         el.type === TouchableOpacity
     );
     expect(handleScriptAction).toHaveLength(1);
+    mock.onPost(API.AUTOMATE.ACTION_ONE_TAP(1)).reply(200);
     await act(async () => {
       await handleScriptAction[0].props.onPress();
     });
@@ -127,14 +122,6 @@ describe('test Item', () => {
 
   test('render SubUnitAutomate not is owner handleScriptAction fail', async () => {
     data.isOwner = false;
-    const response = {
-      status: 400,
-    };
-
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
-
     await act(async () => {
       tree = await create(wrapComponent(data));
     });
@@ -145,6 +132,7 @@ describe('test Item', () => {
         el.type === TouchableOpacity
     );
     expect(handleScriptAction).toHaveLength(1);
+    mock.onPost(API.AUTOMATE.ACTION_ONE_TAP(1)).reply(400);
     await act(async () => {
       await handleScriptAction[0].props.onPress();
     });
@@ -181,14 +169,6 @@ describe('test Item', () => {
         ],
       },
     ];
-    const response = {
-      status: 200,
-    };
-
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
-
     await act(async () => {
       tree = await create(wrapComponent(data));
     });
@@ -233,13 +213,6 @@ describe('test Item', () => {
         ],
       },
     ];
-    const response = {
-      status: 200,
-    };
-
-    await axios.post.mockImplementation(async () => {
-      return response;
-    });
 
     await act(async () => {
       tree = await create(wrapComponent(data));

package/src/commons/SubUnit/OneTap/index.js

@@ -41,10 +41,9 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
     setAutomates(listAutomate[indexAutomate]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [listAutomate]);
-
   return (
     <Section style={styles.noShadow}>
-      <View style={styles.boxScenario}>
+      <View style={styles.boxScenario} testID={TESTID.VIEW_SUB_UNIT_AUTOMATE}>
         {listAutomate.map((item, index) => (
           <TouchableOpacity
             style={