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

package/src/commons/MediaPlayerDetail/index.js

@@ -13,6 +13,7 @@ import {
   Text,
   TouchableOpacity,
   Platform,
+  ActivityIndicator,
 } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -42,14 +43,18 @@ const MediaPlayerDetail = ({
   height,
 }) => {
   const { setAction } = useContext(SCContext);
-  const { camera_opened } = useSCContextSelector((state) => state.app);
+  const { isFirstOpenCamera, camera_opened } = useSCContextSelector(
+    (state) => state.app
+  );
   const t = useTranslations();
   const [paused, setPaused] = useState(isPaused);
 
   const onTapPause = useCallback(() => {
-    setPaused(false);
-    id && setAction(Action.CAMERA_STATUS_CHANGE, { id, status: true });
-  }, [id, setAction]);
+    if (!isFirstOpenCamera) {
+      setPaused(false);
+      id && setAction(Action.CAMERA_STATUS_CHANGE, { id, status: true });
+    }
+  }, [id, isFirstOpenCamera, setAction]);
 
   const onTapGoDetail = useCallback(() => {
     if (!paused) {
@@ -67,31 +72,29 @@ const MediaPlayerDetail = ({
   }, []);
 
   const getWidthHeight = useCallback(() => {
-    let newWidth = 0,
-      newHeight = 0;
+    let width = 0,
+      height = 0;
     switch (amount) {
       case 1:
-        newWidth = Constants.width;
-        newHeight = 224;
+        width = Constants.width;
+        height = 224;
         break;
       case 4:
-        newWidth =
-          Constants.width /
-          (Platform.OS === 'ios' && Constants.width < 400 ? 1.5 : 2);
-        newHeight = 112;
+        width = Constants.width / 2;
+        height = 112;
         break;
       case 6:
-        newWidth = Constants.width / 3;
-        newHeight = 112;
+        width = Constants.width / 3;
+        height = 112;
         break;
       default:
-        newWidth = Constants.width - 28;
-        newHeight = 162;
+        width = Constants.width - 28;
+        height = 162;
         break;
     }
     return {
-      width: newWidth,
-      height: newHeight,
+      width,
+      height,
     };
   }, [amount]);
 
@@ -100,9 +103,9 @@ const MediaPlayerDetail = ({
       <VLCPlayer
         autoAspectRatio={true}
         videoAspectRatio={
-          amount
-            ? `${getWidthHeight().width}:${getWidthHeight().height}`
-            : `${width}:${height}`
+          width && height
+            ? `${width}:${height}`
+            : `${getWidthHeight().width}:${getWidthHeight().height}`
         }
         source={{
           initType: 2,
@@ -123,20 +126,31 @@ const MediaPlayerDetail = ({
           styles.player,
           style,
           {
-            width: amount ? getWidthHeight().width : width,
-            height: amount ? getWidthHeight().height : height,
+            width: width || getWidthHeight().width,
+            height: height || getWidthHeight().height,
           },
+          isFirstOpenCamera && styles.firstOpenCamera,
         ]}
         isLive={true}
       />
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uri]);
+  }, [uri, isFirstOpenCamera]);
 
   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);
@@ -147,6 +161,14 @@ 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>
@@ -172,7 +194,7 @@ const MediaPlayerDetail = ({
             />
           </View>
         ) : (
-          renderCamera
+          !isFirstOpenCamera && renderCamera
         )}
 
         <View style={styles.buttonView}>

package/src/commons/MenuActionAddnew/index.js

@@ -59,7 +59,6 @@ const MenuActionAddnew = memo(
               data={dataActions}
               keyExtractor={keyExtractor}
               renderItem={renderItem}
-              scrollIndicatorInsets={{ right: 1 }}
             />
           </View>
         </View>

package/src/commons/MenuActionList/index.js

@@ -57,7 +57,6 @@ const MenuActionList = memo(
               data={listItem}
               keyExtractor={keyExtractor}
               renderItem={renderItem}
-              scrollIndicatorInsets={{ right: 1 }}
             />
           </View>
         </View>

package/src/commons/MenuActionMore/index.js

@@ -50,7 +50,7 @@ const MenuActionMore = memo(
         isVisible={isVisible}
         arrowStyle={styles.wrap}
       >
-        <ScrollView scrollIndicatorInsets={{ right: 1 }}>
+        <ScrollView>
           {listMenuItem.map((item, index) => {
             return (
               <TouchableOpacity

package/src/commons/PreventAccess/index.js

@@ -7,7 +7,6 @@ import t from '../../hooks/Common/useTranslations';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import { styles } from './styles';
-import { TESTID } from '../../configs/Constants';
 
 const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
   const { goBack } = useNavigation();
@@ -38,7 +37,6 @@ const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
       transparent={true}
       onBackButtonPress={handleBackPress}
       style={styles.container}
-      testID={TESTID.BUTTON_PREVENT_ACCESS}
     >
       <View style={styles.popoverStyle}>
         <View style={styles.actionTextWrap}>
@@ -50,13 +48,7 @@ const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
           </Text>
         </View>
         <View style={styles.endOfText}>
-          <Text
-            testID={TESTID.TEXT_PREVENT_ACCESS}
-            size={16}
-            bold
-            color={Colors.Primary}
-            onPress={handleDonePopup}
-          >
+          <Text size={16} bold color={Colors.Primary} onPress={handleDonePopup}>
             {dataText?.endOfText}
           </Text>
         </View>

package/src/commons/Sharing/MemberList.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Colors, Constants } from '../../configs';
+import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import RowMember from './RowMember';
 
@@ -26,9 +26,7 @@ const MemberList = ({
           />
         ))}
       {!dataMember.length && (
-        <View style={styles.viewEmpty}>
-          <Text style={styles.textCenter}>{t('no_member')}</Text>
-        </View>
+        <Text style={styles.textCenter}>{t('no_member')}</Text>
       )}
     </View>
   );
@@ -39,10 +37,4 @@ const styles = StyleSheet.create({
   box: {
     backgroundColor: Colors.White,
   },
-  viewEmpty: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: Constants.height - 200,
-    backgroundColor: Colors.White,
-  },
 });

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -13,7 +13,6 @@ import { isIphoneX } from 'react-native-iphone-x-helper';
 import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
 import Text from '../../commons/Text';
-import { TESTID } from '../../configs/Constants';
 
 const WrapHeaderScrollable = ({
   children,
@@ -60,7 +59,6 @@ const WrapHeaderScrollable = ({
         onLeft={onGoBack}
       />
       <Animated.ScrollView
-        testID={TESTID.ANIMATED_SCROLL}
         scrollEventThrottle={16}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: animatedScrollYValue } } }],

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

@@ -15,6 +15,7 @@ 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 = () => {
-    notImplemented(t);
+    alert(t('feature_under_development'));
   };
 
   return (
@@ -42,6 +42,7 @@ 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,18 +1,13 @@
+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({})}>
@@ -37,6 +32,8 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+jest.mock('axios');
+
 let tree;
 let data = {
   isOwner: true,
@@ -63,9 +60,18 @@ 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));
     });
@@ -108,7 +114,6 @@ 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();
     });
@@ -122,6 +127,14 @@ 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));
     });
@@ -132,7 +145,6 @@ 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();
     });
@@ -169,6 +181,14 @@ describe('test Item', () => {
         ],
       },
     ];
+    const response = {
+      status: 200,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
     await act(async () => {
       tree = await create(wrapComponent(data));
     });
@@ -213,6 +233,13 @@ 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,9 +41,10 @@ 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} testID={TESTID.VIEW_SUB_UNIT_AUTOMATE}>
+      <View style={styles.boxScenario}>
         {listAutomate.map((item, index) => (
           <TouchableOpacity
             style={

package/src/commons/SubUnit/ShortDetail.js

@@ -15,18 +15,12 @@ import { standardizeCameraScreenSize } from '../../utils/Utils';
 import Routes from '../../utils/Route';
 import FastImage from 'react-native-fast-image';
 import MediaPlayerDetail from '../MediaPlayerDetail';
-import {
-  keyPermission,
-  OpenSetting,
-  permitPermissionFunction,
-} from '../../utils/Permission/common';
-import { RESULTS } from 'react-native-permissions';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
 );
 
-const ShortDetailSubUnit = ({ unit, station }) => {
+const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
 
@@ -77,24 +71,13 @@ const ShortDetailSubUnit = ({ unit, station }) => {
   };
 
   const handleOnAddNew = () => {
-    permitPermissionFunction(keyPermission.CAMERA, (res) => {
-      if (res === RESULTS.GRANTED) {
-        navigate(Routes.AddDeviceStack, {
-          screen: Routes.ScanSensorQR,
-          params: {
-            station_id: station?.id,
-            unit_id: unit.id,
-            unit_name: unit.name,
-          },
-        });
-        return;
-      }
-      if (res === RESULTS.BLOCKED) {
-        OpenSetting(
-          t('camera_request_permission'),
-          t('camera_request_permission_des')
-        );
-      }
+    navigate(Routes.AddDeviceStack, {
+      screen: Routes.ScanSensorQR,
+      params: {
+        station_id: station?.id,
+        unit_id: unit.id,
+        unit_name: unit.name,
+      },
     });
   };
 
@@ -139,6 +122,7 @@ const ShortDetailSubUnit = ({ unit, station }) => {
                     sensor={sensor}
                     unit={unit}
                     station={station}
+                    isGGHomeConnected={isGGHomeConnected}
                     serverDown={serverDown}
                     status={getStatus(sensor)}
                   />

package/src/commons/SubUnit/__test__/Item.test.js

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

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import { Image, View } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import mock from 'react-native-permissions/mock';
 import { TESTID } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ShortDetailSubUnit from '../ShortDetail';
 import ItemAddNew from '../../Device/ItemAddNew';
 import Routes from '../../../utils/Route';
-import { keyPermission } from '../../../utils/Permission/common';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -23,10 +21,6 @@ jest.mock('react', () => {
   };
 });
 
-jest.mock('react-native-permissions', () => {
-  return mock;
-});
-
 const mockedNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
   return {
@@ -151,10 +145,10 @@ describe('test ShortDetail Subunit', () => {
       (item) =>
         item.props.testID === TESTID.SUB_UNIT_DEVICES && item.type === View
     );
-    expect(itemDevice.length).toBe(0);
+    expect(itemDevice.length).toBe(1);
   });
 
-  test('render ShortDetail add new device', async () => {
+  test('render ShortDetail add new device', () => {
     act(() => {
       tree = create(wrapComponent(props));
     });
@@ -163,7 +157,6 @@ describe('test ShortDetail Subunit', () => {
     act(() => {
       buttonAddNew.props.onAddNew();
     });
-    await mock.request(keyPermission.CAMERA);
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddDeviceStack, {
       screen: Routes.ScanSensorQR,
       params: {

package/src/commons/Unit/SharedUnit.js

@@ -39,7 +39,6 @@ const SharedUnit = ({
   }, [renewItem, index, unit, item]);
   const addPinSharedUnit = useCallback(async () => {
     const { success } = await axiosPost(API.UNIT.PIN_UNIT(unit.id));
-
     if (success) {
       item.is_pin = true;
       renewItem(index);