@eohjsc/react-native-smart-city 0.5.9 → 0.6.0-rc1

package/src/commons/Tabbar/__test__/index.test.js

@@ -12,17 +12,6 @@ const wrapComponent = (props) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 describe('Test HanetCameraDetail', () => {
   Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
   let tree, props;

package/src/commons/Unit/HeaderUnit/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useRef } from 'react';
 import { View, TouchableOpacity, StyleSheet, StatusBar } from 'react-native';
-import { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
@@ -47,7 +47,7 @@ const HeaderUnit = memo(
           onPress={onPressBack}
         >
           <View style={styles.btnLeft}>
-            <Icon
+            <AntDesign
               name={'left'}
               size={27}
               color={transparent ? Colors.White : Colors.Black}
@@ -70,7 +70,7 @@ const HeaderUnit = memo(
                 onPress={onPressAdd}
               >
                 <View style={styles.btnAdd}>
-                  <Icon
+                  <AntDesign
                     name={'plus'}
                     size={27}
                     color={transparent ? Colors.White : Colors.Black}
@@ -84,7 +84,7 @@ const HeaderUnit = memo(
               accessibilityLabel={idButtonMore}
             >
               <View style={styles.btnMore}>
-                <Icon
+                <AntDesign
                   name={'more'}
                   size={27}
                   color={transparent ? Colors.White : Colors.Black}

package/src/commons/Unit/SharedUnit.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useCallback } from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { IconOutline, IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import { API, Colors, Images } from '../../configs';
 import Text from '../../commons/Text';
@@ -91,7 +91,7 @@ const SharedUnit = ({
         {isOptions && (
           <Fragment>
             {item.is_pin ? (
-              <IconFill
+              <AntDesign
                 name="pushpin"
                 size={20}
                 color={Colors.Blue10}
@@ -99,7 +99,7 @@ const SharedUnit = ({
                 accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT}-${item.id}`}
               />
             ) : (
-              <IconOutline
+              <AntDesign
                 name="pushpin"
                 size={20}
                 onPress={addPinSharedUnit}
@@ -107,7 +107,7 @@ const SharedUnit = ({
               />
             )}
             {item.is_star ? (
-              <IconFill
+              <AntDesign
                 name="star"
                 size={20}
                 color={Colors.Yellow6}
@@ -115,7 +115,7 @@ const SharedUnit = ({
                 accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT}-${item.id}`}
               />
             ) : (
-              <IconOutline
+              <AntDesign
                 name="star"
                 size={20}
                 onPress={addStarSharedUnit}

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

@@ -2,23 +2,11 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import HeaderUnit from '../HeaderUnit/index';
-
-const mockedGoBack = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: mockedGoBack,
-    }),
-  };
-});
+import { useNavigation } from '@react-navigation/native';
 
 describe('Test HeaderUnit', () => {
-  afterEach(() => {
-    mockedGoBack.mockClear();
-  });
   let tree;
+  const { goBack } = useNavigation();
   const mockedFunc = jest.fn();
   const mockedOnBack = jest.fn();
   it('HeaderUnit onPress', async () => {
@@ -65,7 +53,7 @@ describe('Test HeaderUnit', () => {
     await act(async () => {
       item.props.onPress();
     });
-    expect(mockedGoBack).toHaveBeenCalled();
+    expect(goBack).toHaveBeenCalled();
   });
 
   it('HeaderUnit onPressAdd onPressMore', async () => {

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/UnitSummary/ConfigHistoryChart/index.js

@@ -1,8 +1,7 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 import moment from 'moment';
 
 import { API } from '../../../configs';
-import HistoryChart from '../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../utils/Apis/axios';
 import { getPusher } from '../../../utils/Pusher';
 
@@ -39,11 +38,12 @@ export const useFetchConfigHistory = (
       });
 
       const timezone = moment().utcOffset();
-      startDate = startDate.subtract(timezone, 'minutes');
-      endDate = endDate.subtract(timezone, 'minutes');
 
-      params.append('date_from', startDate.format('YYYY-MM-DDTHH:mm:ss'));
-      params.append('date_to', endDate.format('YYYY-MM-DDTHH:mm:ss'));
+      const date_from = moment(startDate).subtract(timezone, 'minutes');
+      const date_to = moment(endDate).subtract(timezone, 'minutes');
+
+      params.append('date_from', date_from.format('YYYY-MM-DDTHH:mm:ss'));
+      params.append('date_to', date_to.format('YYYY-MM-DDTHH:mm:ss'));
 
       const { success, data } = await axiosGet(endpoint, {
         params,
@@ -122,58 +122,3 @@ export const updateConfigChart = async (
     }
   });
 };
-
-let timeoutId;
-
-const ConfigHistoryChart = ({ configs }) => {
-  const [chartData, setChartData] = useState(configs);
-  const [startDate, setStartDate] = useState(
-    moment().subtract(1, 'days').valueOf()
-  );
-  const [endDate, setEndDate] = useState(moment().valueOf());
-
-  useEffect(() => {
-    const fetchData = async () => {
-      let params = new URLSearchParams();
-      let configuration = configs.filter((item) => item.id);
-      configuration.map((item) => {
-        params.append('configs', item.id);
-      });
-      params.append(
-        'date_from',
-        moment(startDate).utc().format('YYYY-MM-DD HH:mm:ss')
-      );
-      params.append(
-        'date_to',
-        moment(endDate).utc().format('YYYY-MM-DD HH:mm:ss')
-      );
-      const { success, data } = await axiosGet(
-        API.CONFIG.DISPLAY_HISTORY_V3(),
-        {
-          params,
-        }
-      );
-      updateConfigChart(success, data, configuration, setChartData);
-    };
-
-    timeoutId = setTimeout(fetchData, 200);
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [startDate, endDate, configs]);
-
-  if (!chartData.length) {
-    return false;
-  }
-
-  return (
-    <HistoryChart
-      configuration={{ type: 'line_chart', date_format: 'DD.MM' }}
-      datas={chartData}
-      setStartDate={setStartDate}
-      setEndDate={setEndDate}
-    />
-  );
-};
-
-export default ConfigHistoryChart;

package/src/commons/Widgets/IFrame/IFrame.js

@@ -0,0 +1,54 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+
+import { styles } from './IFrameStyles';
+import IconComponent from '../../IconComponent';
+import WebView from 'react-native-webview';
+import { TouchableOpacity, View } from 'react-native';
+
+const IFrame = memo(
+  ({ item = {}, widgetStyle, isWidgetBox, isSetting, isEditing }) => {
+    const ref = useRef();
+    const [urlWithEnv, setUrlWithEnv] = useState();
+
+    const { configuration } = item;
+    const { url } = configuration || {};
+
+    const reload = useCallback(() => {
+      ref.current.reload();
+    }, []);
+
+    useEffect(() => {
+      if (!url) {
+        return;
+      }
+      if (!url.includes('?')) {
+        setUrlWithEnv(
+          `${url}?eraOrigin=${window.location.origin}&eraWidget=${item?.id}`
+        );
+      } else {
+        setUrlWithEnv(
+          `${url}&eraOrigin=${window.location.origin}&eraWidget=${item?.id}`
+        );
+      }
+    }, [item?.id, url]);
+
+    return (
+      <View>
+        <TouchableOpacity
+          style={isEditing ? styles.reloadButtonEditing : styles.reloadButton}
+          onClick={reload}
+        >
+          <IconComponent icon="ReloadOutlined" />
+        </TouchableOpacity>
+        <WebView
+          source={{ uri: urlWithEnv }}
+          style={styles.iframe}
+          ref={ref}
+          title={item?.title}
+        />
+      </View>
+    );
+  }
+);
+
+export default IFrame;

package/src/commons/Widgets/IFrame/IFrameStyles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export const styles = StyleSheet.create({
+  iframe: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    paddingHorizontal: 16,
+  },
+  reloadButton: {
+    position: 'absolute',
+    right: 16,
+    top: 5,
+    border: '1px solid #E6E6E6',
+    backgroundColor: Colors.White,
+  },
+  reloadButtonEditing: {
+    position: 'absolute',
+    right: 77,
+    top: 0,
+    width: 36,
+    marginLeft: 2,
+    paddingTop: 5,
+    paddingBottom: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    backgroundColor: Colors.White,
+    border: '1px solid #E6E6E6',
+  },
+  settingWidget: {
+    width: 256,
+  },
+});

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

@@ -0,0 +1,74 @@
+import React, { useRef } from 'react';
+import { act } from 'react-test-renderer';
+
+import IFrame from '../IFrame';
+import WebView from 'react-native-webview';
+import { TouchableOpacity } from 'react-native';
+import { render } from '../../../../../jest/render';
+
+describe('Test IFrame', () => {
+  let item;
+  beforeEach(() => {
+    item = {
+      id: 1,
+      configuration: {
+        url: 'http://localhost:3000/',
+      },
+    };
+  });
+
+  test('test with widget box', async () => {
+    const { root } = await render(<IFrame isWidgetBox item={item} />);
+
+    const iframes = root.findAllByType(WebView);
+    expect(iframes).toHaveLength(1);
+
+    expect(iframes[0].props.source?.uri).toEqual(
+      'http://localhost:3000/?eraOrigin=http://localhost&eraWidget=1'
+    );
+  });
+
+  test('test with query string', async () => {
+    item.configuration.url = 'http://localhost:3000/?test=1';
+    const { root } = await render(<IFrame isWidgetBox item={item} />);
+
+    const iframes = root.findAllByType(WebView);
+    expect(iframes).toHaveLength(1);
+
+    expect(iframes[0].props.source?.uri).toEqual(
+      'http://localhost:3000/?test=1&eraOrigin=http://localhost&eraWidget=1'
+    );
+  });
+
+  test('test no url', async () => {
+    item.configuration.url = null;
+    const { root } = await render(<IFrame isWidgetBox item={item} />);
+
+    const iframes = root.findAllByType(WebView);
+    expect(iframes).toHaveLength(1);
+
+    expect(iframes[0].props.source?.uri).toEqual(undefined);
+  });
+
+  test('test reload', async () => {
+    const ref = {
+      current: {},
+    };
+    useRef.mockReturnValue(ref);
+
+    const mockReload = jest.fn();
+    const { root } = await render(<IFrame isWidgetBox item={item} />);
+    ref.current = {
+      reload: mockReload,
+    };
+
+    const buttons = root.findAllByType(TouchableOpacity);
+    expect(buttons).toHaveLength(1);
+
+    await act(async () => {
+      buttons[0].props.onClick();
+    });
+
+    expect(mockReload).toHaveBeenCalledTimes(1);
+  });
+});