@eohjsc/react-native-smart-city 0.6.2 → 0.7.3-rc1

package/src/commons/Unit/__test__/SharedUnit.test.js

@@ -14,26 +14,18 @@ import api from '../../../utils/Apis/axios';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
-const wrapComponent = (item, navigation, isOptions, mockedRenewItem) => (
-  <SCProvider initState={mockSCStore({})}>
-    <SharedUnit
-      item={item}
-      navigation={navigation}
-      isOptions={isOptions}
-      renewItem={mockedRenewItem}
-    />
-  </SCProvider>
-);
+const wrapComponent = (item, navigation, isOptions, mockedRenewItem) => {
+  return (
+    <SCProvider initState={mockSCStore({})}>
+      <SharedUnit
+        item={item}
+        navigation={navigation}
+        isOptions={isOptions}
+        renewItem={mockedRenewItem}
+      />
+    </SCProvider>
+  );
+};
 
 describe('Test SharedUnit', () => {
   let tree, item, unit;
@@ -67,9 +59,6 @@ describe('Test SharedUnit', () => {
       );
     });
 
-    await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
-    });
     const instance = tree.root;
     const touchSharedUnit = instance.find(
       (el) =>
@@ -111,7 +100,7 @@ describe('Test SharedUnit', () => {
       iconAddStarSharedUnit.props.onPress();
     });
     expect(iconRemovePinSharedUnit).toHaveLength(0);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
       screen: Routes.UnitDetail,
       params: {
         unitId: 3,
@@ -120,85 +109,85 @@ describe('Test SharedUnit', () => {
     });
   });
 
-  it('test create SharedUnit unit without unit owner', async () => {
-    const navigation = useNavigation();
-    delete unit.owner_name;
-
-    await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
-    });
-    const instance = tree.root;
-    const ownerName = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel === AccessibilityLabel.SHARED_UNIT_OWN_BY
-    );
-
-    expect(ownerName).toHaveLength(0);
-  });
-
-  it('test create SharedUnit unit isOption false', async () => {
-    const navigation = useNavigation();
-
-    await act(async () => {
-      tree = await create(wrapComponent(item, navigation, false));
-    });
-    const instance = tree.root;
-
-    const iconAddPinSharedUnit = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT + '-69'
-    );
-    const iconStarUnit = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT + '-69'
-    );
-
-    expect(iconAddPinSharedUnit).toHaveLength(0);
-    expect(iconStarUnit).toHaveLength(0);
-  });
-
-  it('test create SharedUnit unit is pin, is star', async () => {
-    const navigation = useNavigation();
-    item.is_pin = true;
-    item.is_star = true;
-
-    await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
-    });
-    const instance = tree.root;
-    const iconRemovePinSharedUnit = instance.find(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
-    );
-    mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(200);
-    await act(async () => {
-      iconRemovePinSharedUnit.props.onPress();
-    });
-    mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(400);
-    await act(async () => {
-      iconRemovePinSharedUnit.props.onPress();
-    });
-    const iconRemoveStarSharedUnit = instance.find(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
-    );
-    mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(200);
-    await act(async () => {
-      iconRemoveStarSharedUnit.props.onPress();
-    });
-    mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(400);
-    await act(async () => {
-      iconRemoveStarSharedUnit.props.onPress();
-    });
-    const iconRemoveStar = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
-    );
-    expect(iconRemoveStar).toHaveLength(3);
-  });
+  // it('test create SharedUnit unit without unit owner', async () => {
+  //   const navigation = useNavigation();
+  //   delete unit.owner_name;
+  //
+  //   await act(async () => {
+  //     tree = await create(wrapComponent(item, navigation));
+  //   });
+  //   const instance = tree.root;
+  //   const ownerName = instance.findAll(
+  //     (el) =>
+  //       el.props.accessibilityLabel === AccessibilityLabel.SHARED_UNIT_OWN_BY
+  //   );
+  //
+  //   expect(ownerName).toHaveLength(0);
+  // });
+  //
+  // it('test create SharedUnit unit isOption false', async () => {
+  //   const navigation = useNavigation();
+  //
+  //   await act(async () => {
+  //     tree = await create(wrapComponent(item, navigation, false));
+  //   });
+  //   const instance = tree.root;
+  //
+  //   const iconAddPinSharedUnit = instance.findAll(
+  //     (el) =>
+  //       el.props.accessibilityLabel ===
+  //       AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT + '-69'
+  //   );
+  //   const iconStarUnit = instance.findAll(
+  //     (el) =>
+  //       el.props.accessibilityLabel ===
+  //       AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT + '-69'
+  //   );
+  //
+  //   expect(iconAddPinSharedUnit).toHaveLength(0);
+  //   expect(iconStarUnit).toHaveLength(0);
+  // });
+  //
+  // it('test create SharedUnit unit is pin, is star', async () => {
+  //   const navigation = useNavigation();
+  //   item.is_pin = true;
+  //   item.is_star = true;
+  //
+  //   await act(async () => {
+  //     tree = await create(wrapComponent(item, navigation));
+  //   });
+  //   const instance = tree.root;
+  //   const iconRemovePinSharedUnit = instance.find(
+  //     (el) =>
+  //       el.props.accessibilityLabel ===
+  //       AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
+  //   );
+  //   mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(200);
+  //   await act(async () => {
+  //     iconRemovePinSharedUnit.props.onPress();
+  //   });
+  //   mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(400);
+  //   await act(async () => {
+  //     iconRemovePinSharedUnit.props.onPress();
+  //   });
+  //   const iconRemoveStarSharedUnit = instance.find(
+  //     (el) =>
+  //       el.props.accessibilityLabel ===
+  //       AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
+  //   );
+  //   mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(200);
+  //   await act(async () => {
+  //     iconRemoveStarSharedUnit.props.onPress();
+  //   });
+  //   mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(400);
+  //   await act(async () => {
+  //     iconRemoveStarSharedUnit.props.onPress();
+  //   });
+  //   const iconRemoveStar = instance.findAll(
+  //     (el) =>
+  //       el.props.accessibilityLabel ===
+  //       AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
+  //   );
+  //   expect(iconRemoveStar).toHaveLength(3);
+  // });
 });

package/src/commons/UnitSummary/AirQuality/SegmentedRoundDisplay/index.js

@@ -8,22 +8,22 @@ import TextCustom from '../../../../commons/Text';
 import { scaleValue, drawArc, polarToCartesian } from './helper';
 
 const SegmentedRoundDisplay = ({
-  filledArcWidth,
-  emptyArcWidth,
-  arcSpacing,
-  totalArcSize,
-  emptyArcColor,
-  filledArcColor,
-  radius,
   style,
   totalValue,
   value,
   title,
-  pos, //array position
-  boxTitle,
-  textHeader,
-  initIndex,
   valueText,
+  filledArcWidth = 0,
+  emptyArcWidth = 20,
+  arcSpacing = 1,
+  totalArcSize = 280,
+  emptyArcColor = Colors.Gray3,
+  filledArcColor = '#5ECCAA',
+  radius = 90,
+  pos = [0, 100, 200, 300, 400, 500],
+  boxTitle = false,
+  textHeader = '',
+  initIndex = 0,
 }) => {
   const [arcs, setArcs] = useState([]);
 
@@ -239,25 +239,6 @@ SegmentedRoundDisplay.propTypes = {
   initIndex: PropTypes.number,
 };
 
-SegmentedRoundDisplay.defaultProps = {
-  filledArcWidth: 0,
-  emptyArcWidth: 20,
-  arcSpacing: 1,
-  totalArcSize: 280,
-  emptyArcColor: Colors.Gray3,
-  filledArcColor: '#5ECCAA',
-  animationDuration: 1000,
-  incompleteArcColor: '#23318C',
-  displayValue: false,
-  valueBoxColor: '#23318C',
-  valueFontColor: '#FFFFFF',
-  radius: 90,
-  pos: [0, 100, 200, 300, 400, 500],
-  boxTitle: false,
-  textHeader: '',
-  initIndex: 0,
-};
-
 export default SegmentedRoundDisplay;
 
 const styles = StyleSheet.create({

package/src/commons/Widgets/IFrameWithConfig/IFrameWithConfig.js

@@ -9,10 +9,16 @@ import { useFetchConfigHistory } from '../../UnitSummary/ConfigHistoryChart';
 import API from '../../../configs/API';
 import WebView from 'react-native-webview';
 import { TouchableOpacity, View } from 'react-native';
+import { useRemoteControl } from '../../../hooks/IoT';
+import { useSCContextSelector } from '../../../context';
 
 const IFrameWithConfig = memo(
   ({ item = {}, widgetStyle, isWidgetBox, isSetting, isEditing }) => {
     const ref = useRef();
+    const sendRemoteCommand = useRemoteControl();
+    const userId = useSCContextSelector(
+      (state) => state?.auth?.account?.user?.id
+    );
 
     const { configuration } = item;
     const { url } = configuration || {};
@@ -66,6 +72,34 @@ const IFrameWithConfig = memo(
       }
     }, [item?.id, url]);
 
+    const triggerAction = useCallback(
+      async ({ actionKey, actionIndex, data }) => {
+        let action = null;
+        if (!configuration?.actions) {
+          return;
+        }
+        if (actionIndex !== undefined) {
+          action = configuration?.actions[actionIndex];
+        }
+
+        if (actionKey) {
+          action = configuration?.actions.find(
+            (act) => act.action === actionKey
+          );
+        }
+        if (!action) {
+          return;
+        }
+        await sendRemoteCommand(
+          action.action_data.end_device,
+          action.action_data,
+          data,
+          userId
+        );
+      },
+      [configuration?.actions, sendRemoteCommand, userId]
+    );
+
     const onMessage = useCallback(
       async (event) => {
         const eventData = event.nativeEvent.data
@@ -95,9 +129,18 @@ const IFrameWithConfig = memo(
           case 'requestAdjustMobileHeight':
             setHeight(data);
             break;
+          case 'triggerAction':
+            triggerAction(data);
+            break;
         }
       },
-      [configuration, fetchDataDisplayHistory, item.id, postMessage]
+      [
+        configuration,
+        fetchDataDisplayHistory,
+        item.id,
+        postMessage,
+        triggerAction,
+      ]
     );
 
     useEffect(() => {

package/src/commons/Widgets/IFrameWithConfig/__tests__/IFrameWithConfig.test.js

@@ -11,6 +11,14 @@ import WebView from 'react-native-webview';
 import { TouchableOpacity, View } from 'react-native';
 import { refFunctions } from '../../../../../__mocks__/react-native-webview';
 
+const mockDoAction = jest.fn();
+jest.mock('../../../../hooks/IoT', () => {
+  return {
+    ...jest.requireActual('../../../../hooks/IoT'),
+    useRemoteControl: () => mockDoAction,
+  };
+});
+
 jest.mock('../../../../iot/states', () => {
   return {
     ...jest.requireActual('../../../../iot/states'),
@@ -27,6 +35,7 @@ describe('Test IFrame With Config', () => {
   };
 
   beforeEach(() => {
+    mockDoAction.mockClear();
     item = {
       id: 1,
       configuration: {
@@ -281,4 +290,64 @@ describe('Test IFrame With Config', () => {
       'window.postMessage(' + JSON.stringify(message) + ', "*")'
     );
   };
+
+  const triggerAction = async (
+    data,
+    actions = [
+      {
+        action: 'xxx',
+        action_data: {
+          end_device: 1,
+        },
+      },
+    ]
+  ) => {
+    item.configuration.actions = actions;
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'triggerAction',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+            data: data,
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+  };
+
+  test('test iframe trigger action', async () => {
+    await triggerAction({ actionKey: 'xxx' });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      item.configuration.actions[0].action_data.end_device,
+      item.configuration.actions[0].action_data,
+      undefined,
+      undefined
+    );
+  });
+
+  test('test iframe trigger by index', async () => {
+    await triggerAction({ actionIndex: 0 });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      item.configuration.actions[0].action_data.end_device,
+      item.configuration.actions[0].action_data,
+      undefined,
+      undefined
+    );
+  });
+
+  test('test iframe trigger not exists', async () => {
+    await triggerAction({ actionIndex: -1 });
+    expect(mockDoAction).toHaveBeenCalledTimes(0);
+  });
+
+  test('test iframe trigger no actions', async () => {
+    await triggerAction({ actionIndex: 0 }, []);
+    expect(mockDoAction).toHaveBeenCalledTimes(0);
+  });
 });

package/src/commons/WrapParallaxScrollView/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { StatusBar, View, StyleSheet } from 'react-native';
+import { StatusBar, View, StyleSheet, RefreshControl } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
 import { Colors, Device, Images, SCConfig } from '../../configs';
@@ -7,65 +7,41 @@ import Text from '../Text';
 import HeaderUnit from '../Unit/HeaderUnit';
 import { AccessibilityLabel } from '../../configs/Constants';
 import FImage from '../FImage';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import ParallaxScrollView from '../../libs/react-native-parallax-scroll-view';
 
 const stickyHeaderHeight =
   Device.TopbarHeight + (Device.isIOS ? 0 : StatusBar.currentHeight);
 
-const WrapParallaxScrollView = ({
-  children,
-  refreshControl,
-  title,
-  uriImg,
-  onBack,
-  onAdd,
-  onMore,
-  hideRight,
-  hideRightPlus,
-  contentBackground,
-  accessibilityLabel,
-  idButtonMore = AccessibilityLabel.HEADER_UNIT_BUTTON_MORE,
-}) => {
+const WrapParallaxScrollView = ({ children, unit, onRefresh }) => {
+  const { name = '', background } = unit;
+  const t = useTranslations();
   const renderForeground = useCallback(
     () => (
       <View style={styles.wrap}>
-        <HeaderUnit
-          transparent
-          onBack={onBack}
-          onAdd={onAdd}
-          onMore={onMore}
-          hideRight={hideRight}
-          hideRightPlus={hideRightPlus}
-          idButtonMore={idButtonMore}
-        />
+        <HeaderUnit transparent unit={unit} />
         <Text
           numberOfLines={1}
           semibold
           style={styles.nameUnit}
           accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_TEXT}
         >
-          {title}
+          {t('Welcome {name}', {
+            name: name,
+          })}
         </Text>
-        {contentBackground}
       </View>
     ),
-    [
-      onBack,
-      onAdd,
-      onMore,
-      hideRight,
-      hideRightPlus,
-      idButtonMore,
-      title,
-      contentBackground,
-    ]
+    [unit, t, name]
   );
   const renderBackground = useCallback(
     () => (
       <View style={styles.image}>
         <FImage
           style={styles.image}
-          source={uriImg ? { uri: uriImg } : SCConfig.appUnitDefaultBackground}
+          source={
+            background ? { uri: background } : SCConfig.appUnitDefaultBackground
+          }
           defaultSource={Images.BgUnit}
           resizeMode="cover"
         />
@@ -75,23 +51,15 @@ const WrapParallaxScrollView = ({
         />
       </View>
     ),
-    [uriImg]
+    [background]
   );
   const renderStickyHeader = useCallback(
     () => (
       <View style={styles.stickyHeader}>
-        <HeaderUnit
-          title={title}
-          onBack={onBack}
-          onAdd={onAdd}
-          onMore={onMore}
-          hideRight={hideRight}
-          hideRightPlus={hideRightPlus}
-          idButtonMore={idButtonMore}
-        />
+        <HeaderUnit unit={unit} />
       </View>
     ),
-    [title, onBack, onAdd, onMore, hideRight, hideRightPlus, idButtonMore]
+    [unit]
   );
   return (
     <ParallaxScrollView
@@ -101,9 +69,11 @@ const WrapParallaxScrollView = ({
       stickyHeaderHeight={stickyHeaderHeight}
       renderStickyHeader={renderStickyHeader}
       backgroundColor={Colors.White}
-      refreshControl={refreshControl}
+      refreshControl={
+        <RefreshControl refreshing={false} onRefresh={onRefresh} />
+      }
       showsVerticalScrollIndicator={false}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_PARALLAX_SCROLLVIEW}
     >
       {children}
     </ParallaxScrollView>

package/src/configs/API.js

@@ -195,8 +195,7 @@ const API = {
     },
   },
   NOTIFICATION: {
-    LIST_EOH_NOTIFICATIONS: (page, type) =>
-      `/notifications/eoh/?page=${page}&type=${type}`,
+    LIST_EOH_NOTIFICATIONS: (page) => `/notifications/eoh/?page=${page}`,
     SET_READ: (id) => `/notifications/eoh/${id}/set_read/`,
   },
   VALUE_EVALUATIONS: () => '/property_manager/config_value_evaluations/',

package/src/configs/Constants.js

@@ -1,9 +1,9 @@
 export { default as AccessibilityLabel } from './AccessibilityLabel';
 import { Platform, Dimensions, StatusBar } from 'react-native';
 import { RFValue } from 'react-native-responsive-fontsize';
-import OneTap from '../../assets/images/OneTap.svg';
-import ValueChange from '../../assets/images/ValueChange.svg';
-import Schedule from '../../assets/images/Schedule.svg';
+import OneTap from '../../assets/images/Scenario-filled.svg';
+import ValueChange from '../../assets/images/Automation-fill.svg';
+import Schedule from '../../assets/images/schedule-fill.svg';
 import Event from '../../assets/images/Event.svg';
 
 const X_WIDTH = 375;

package/src/hooks/Common/__test__/useAndroidTranslucentStatusBar.test.js

@@ -4,6 +4,7 @@ import { renderHook } from '@testing-library/react-hooks';
 import { useAndroidTranslucentStatusBar } from '../index';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
 
 const mockedSetAction = jest.fn();
 
@@ -16,20 +17,8 @@ const mockUseContext = jest.fn().mockImplementation(() => ({
 
 React.useContext = mockUseContext;
 
-const mockAddListener = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      addListener: mockAddListener,
-    }),
-  };
-});
-
 describe('test useAndroidTranslucentStatusBar', () => {
-  beforeEach(() => {
-    mockAddListener.mockClear();
-  });
+  const { addListener } = useNavigation();
 
   it('test useAndroidTranslucentStatusBar android', async () => {
     Platform.OS = 'android';
@@ -39,7 +28,7 @@ describe('test useAndroidTranslucentStatusBar', () => {
         wrapper,
       }
     );
-    expect(mockAddListener).not.toBeCalled();
+    expect(addListener).not.toBeCalled();
   });
 
   it('test useAndroidTranslucentStatusBar ios', async () => {
@@ -50,6 +39,6 @@ describe('test useAndroidTranslucentStatusBar', () => {
         wrapper,
       }
     );
-    expect(mockAddListener).not.toBeCalled();
+    expect(addListener).not.toBeCalled();
   });
 });

package/src/hooks/Common/useIsOwnerOfUnit.js

@@ -5,7 +5,7 @@ export const useIsOwnerOfUnit = (unitOwnerId) => {
   const idUser = useSCContextSelector(
     (state) => state?.auth?.account?.user?.id
   );
-  let isOwner = idUser === unitOwnerId;
+  let isOwner = unitOwnerId && idUser === unitOwnerId;
 
   return {
     isOwner,

package/src/hooks/IoT/__test__/useRemoteControl.test.js

@@ -45,7 +45,7 @@ describe('Test useRemoteControl', () => {
       command_prefer_over_googlehome: false,
       command_prefer_over_internet: false,
       googlehome_actions: [],
-      icon: 'caret-up',
+      icon: 'caretup',
       id: 1,
       key: '2b949045-8e03-4c07-a855-7794ade2e69c',
     };