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

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

@@ -0,0 +1,163 @@
+import moment from 'moment';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+
+import { styles as useIframeStyle } from '../IFrame/IFrameStyles';
+import { styles } from './IFrameWithConfigStyles';
+import IconComponent from '../../IconComponent';
+import { useConfigGlobalState } from '../../../iot/states';
+import { useFetchConfigHistory } from '../../UnitSummary/ConfigHistoryChart';
+import API from '../../../configs/API';
+import WebView from 'react-native-webview';
+import { TouchableOpacity, View } from 'react-native';
+
+const IFrameWithConfig = memo(
+  ({ item = {}, widgetStyle, isWidgetBox, isSetting, isEditing }) => {
+    const ref = useRef();
+
+    const { configuration } = item;
+    const { url } = configuration || {};
+
+    const [height, setHeight] = useState(200);
+    const [urlWithEnv, setUrlWithEnv] = useState();
+    const [isReady, setIsReady] = useState(false);
+
+    const [configValues] = useConfigGlobalState('configValues');
+    const [chartData, setChartData] = useState(configuration?.history_configs);
+    const fetchDataDisplayHistory = useFetchConfigHistory(
+      configuration?.history_configs,
+      setChartData,
+      API.CONFIG.DISPLAY_HISTORY_V4()
+    );
+
+    const postMessage = useCallback((message) => {
+      ref.current?.injectJavaScript(
+        'window.postMessage(' + JSON.stringify(message) + ', "*")'
+      );
+    }, []);
+
+    useEffect(() => {
+      if (!isReady || !ref.current) {
+        return;
+      }
+      if (!configuration?.history_configs?.length) {
+        return;
+      }
+      postMessage({
+        source: 'eraIframeWidget',
+        type: 'histories',
+        data: chartData,
+        eraWidgetId: item.id,
+      });
+    }, [
+      chartData,
+      configuration?.history_configs?.length,
+      configuration.realtime_configs,
+      isReady,
+      item.id,
+      postMessage,
+    ]);
+
+    useEffect(() => {
+      const appendix = `eraOrigin=http://localhost:3000&eraWidget=${item?.id}`;
+      if (!url.includes('?')) {
+        setUrlWithEnv(`${url}?${appendix}`);
+      } else {
+        setUrlWithEnv(`${url}&${appendix}`);
+      }
+    }, [item?.id, url]);
+
+    const onMessage = useCallback(
+      async (event) => {
+        const eventData = event.nativeEvent.data
+          ? JSON.parse(event.nativeEvent.data)
+          : {};
+        if (
+          eventData?.source !== 'eraIframeWidget' ||
+          eventData?.eraWidgetId !== item.id
+        ) {
+          return;
+        }
+        const { type, data } = eventData;
+
+        switch (type) {
+          case 'ready':
+            postMessage({
+              source: 'eraIframeWidget',
+              type: 'configuration',
+              data: configuration,
+              eraWidgetId: item.id,
+            });
+            setIsReady(true);
+            break;
+          case 'requestHistories':
+            await fetchDataDisplayHistory(moment(data[0]), moment(data[1]));
+            break;
+          case 'requestAdjustMobileHeight':
+            setHeight(data);
+            break;
+        }
+      },
+      [configuration, fetchDataDisplayHistory, item.id, postMessage]
+    );
+
+    useEffect(() => {
+      if (!isReady || !ref?.current) {
+        return;
+      }
+      if (!configuration?.realtime_configs?.length) {
+        return;
+      }
+      const values = {};
+      configuration?.realtime_configs.map((config) => {
+        return (values[config.id] = configValues[config.id]);
+      });
+      postMessage({
+        source: 'eraIframeWidget',
+        type: 'values',
+        data: values,
+        eraWidgetId: item.id,
+      });
+    }, [
+      isReady,
+      configValues,
+      configuration?.realtime_configs,
+      item.id,
+      postMessage,
+    ]);
+
+    const reload = useCallback(() => {
+      setIsReady(false);
+      ref.current.reload();
+    }, []);
+
+    return (
+      <View
+        style={
+          isSetting
+            ? styles.settingWidget
+            : { ...styles.wrapper, height: height }
+        }
+      >
+        <TouchableOpacity
+          className={
+            isEditing
+              ? useIframeStyle.reloadButtonEditing
+              : useIframeStyle.reloadButton
+          }
+          onClick={reload}
+        >
+          <IconComponent name="ReloadOutlined" />
+        </TouchableOpacity>
+        <WebView
+          source={{ uri: urlWithEnv }}
+          className={useIframeStyle.iframe}
+          ref={ref}
+          title={item?.title}
+          onMessage={onMessage}
+        />
+      </View>
+    );
+  }
+);
+
+export default IFrameWithConfig;

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

@@ -0,0 +1,9 @@
+export const styles = {
+  settingWidget: {
+    width: 256,
+  },
+  wrapper: {
+    width: '100%',
+    display: 'flex',
+  },
+};

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

@@ -0,0 +1,284 @@
+import React from 'react';
+import { act } from 'react-test-renderer';
+
+import IFrameWithConfig from '../IFrameWithConfig';
+import { useConfigGlobalState } from '../../../../iot/states';
+import { render } from '../../../../../jest/render';
+import API from '../../../../configs/API';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../../utils/Apis/axios';
+import WebView from 'react-native-webview';
+import { TouchableOpacity, View } from 'react-native';
+import { refFunctions } from '../../../../../__mocks__/react-native-webview';
+
+jest.mock('../../../../iot/states', () => {
+  return {
+    ...jest.requireActual('../../../../iot/states'),
+    useConfigGlobalState: jest.fn(),
+  };
+});
+
+describe('Test IFrame With Config', () => {
+  let item;
+  let configValues = {
+    1: {
+      value: 0.5,
+    },
+  };
+
+  beforeEach(() => {
+    item = {
+      id: 1,
+      configuration: {
+        url: 'http://localhost:3000/',
+        realtime_configs: [{ id: 1 }],
+      },
+    };
+    useConfigGlobalState.mockImplementation(() => [configValues]);
+    refFunctions.injectJavaScript.mockClear();
+  });
+
+  test('test with widget box', async () => {
+    const { root } = await render(<IFrameWithConfig 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:3000&eraWidget=1'
+    );
+  });
+
+  test('test with query string', async () => {
+    item.configuration.url = 'http://localhost:3000/?test=1';
+    const { root } = await render(<IFrameWithConfig 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:3000&eraWidget=1'
+    );
+  });
+
+  test('test reload', async () => {
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+
+    const buttons = root.findAllByType(TouchableOpacity);
+    expect(buttons).toHaveLength(1);
+
+    await act(async () => {
+      buttons[0].props.onClick();
+    });
+
+    expect(refFunctions.reload).toHaveBeenCalledTimes(1);
+  });
+
+  test('test iframe is ready', async () => {
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      await webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'ready',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+    expectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'configuration',
+        data: item.configuration,
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+    expectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'values',
+        data: configValues,
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+    unexpectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'histories',
+        data: [{ id: 1 }],
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+  });
+
+  test('test iframe request more height', async () => {
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      await webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'requestAdjustMobileHeight',
+            data: 100,
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+
+    const wrapper = root.findAllByType(View)[0];
+    expect(wrapper.props.style.height).toEqual(100);
+  });
+
+  test('test iframe receive message from unexpected origin', async () => {
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'ready',
+            eraWidgetId: 2,
+            source: 'eraIframeWidget',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+    expect(refFunctions.injectJavaScript).toHaveBeenCalledTimes(0);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'ready',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget-wrong',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+    expect(refFunctions.injectJavaScript).toHaveBeenCalledTimes(0);
+  });
+
+  test('test iframe init chart data', async () => {
+    item.configuration.history_configs = [{ id: 1 }];
+    item.configuration.realtime_configs = [];
+
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'ready',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+    unexpectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'configValues',
+        data: configValues,
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+    expectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'histories',
+        data: [{ id: 1 }],
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+  });
+
+  test('test iframe request chart data', async () => {
+    item.configuration.history_configs = [{ id: 1 }];
+    item.configuration.realtime_configs = [];
+
+    const { root } = await render(<IFrameWithConfig isWidgetBox item={item} />);
+    const webview = root.findByType(WebView);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'ready',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+
+    const mockAxios = new MockAdapter(api.axiosInstance);
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V4()).reply(200, {
+      configs: [
+        {
+          id: 1,
+          head: [],
+          tail: [{ x: 1000, y: 100 }],
+          middle: { ready: [], not_ready: [] },
+        },
+      ],
+    });
+    refFunctions.injectJavaScript.mockClear();
+
+    await act(async () => {
+      await webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'requestHistories',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+            data: [1, 2],
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+
+    expectSendMessage(
+      {
+        source: 'eraIframeWidget',
+        type: 'histories',
+        data: [{ id: 1, data: [{ x: 1000, y: 100 }] }],
+        eraWidgetId: 1,
+      },
+      'http://localhost:3000'
+    );
+  });
+
+  const expectSendMessage = (message) => {
+    expect(refFunctions.injectJavaScript).toHaveBeenCalledWith(
+      'window.postMessage(' + JSON.stringify(message) + ', "*")'
+    );
+  };
+  const unexpectSendMessage = (message) => {
+    expect(refFunctions.injectJavaScript).not.toHaveBeenCalledWith(
+      'window.postMessage(' + JSON.stringify(message) + ', "*")'
+    );
+  };
+});

package/src/configs/Constants.js

@@ -285,3 +285,8 @@ export const CHART_TIME = {
   month: 672,
   year: 12 * 672,
 };
+
+export const WIDGET_TYPE = {
+  iframe: 'IFrame',
+  iframeWithConfig: 'IFrameWithConfig',
+};

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/useDevicesStatus.js

@@ -5,20 +5,21 @@ import { axiosGet } from '../../utils/Apis/axios';
 import { API } from '../../configs';
 import { Action } from '../../context/actionType';
 
+let timeoutId = null;
+
 const useDevicesStatus = (unit, devices) => {
   const { setAction } = useContext(SCContext);
   const isNetworkConnected = useSCContextSelector(
     (state) => state.app.isNetworkConnected
   );
   const isFocused = useIsFocused();
-  const timeoutIdRef = useRef(null);
-  const hasFetchedRef = useRef(false);
+  const hasFetched = useRef(false); // Track if data has been fetched
 
   const getDevicesStatus = useCallback(
     async (_unit, _devices) => {
-      if (timeoutIdRef.current) {
-        clearTimeout(timeoutIdRef.current);
-        timeoutIdRef.current = null;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
       }
       const params = new URLSearchParams();
       _devices.forEach((device) => {
@@ -30,24 +31,17 @@ const useDevicesStatus = (unit, devices) => {
           params: params,
         }
       );
-      if (success) {
-        setAction(Action.SET_DEVICES_STATUS, data);
-      }
-      timeoutIdRef.current = setTimeout(
-        () => getDevicesStatus(_unit, _devices),
-        10000
-      );
+      success && setAction(Action.SET_DEVICES_STATUS, data);
+      timeoutId = setTimeout(() => getDevicesStatus(_unit, _devices), 10000);
     },
     [setAction]
   );
 
   useEffect(() => {
-    if (
-      !isFocused ||
-      !devices?.length ||
-      !isNetworkConnected ||
-      hasFetchedRef.current
-    ) {
+    if (!isFocused || !isNetworkConnected || hasFetched.current) {
+      return;
+    }
+    if (!devices?.length) {
       return;
     }
 
@@ -57,19 +51,25 @@ const useDevicesStatus = (unit, devices) => {
     if (!managedDevices.length) {
       return;
     }
+
     getDevicesStatus(unit, devices);
-    hasFetchedRef.current = true;
+    hasFetched.current = true; // Mark as fetched
     return () => {
-      if (timeoutIdRef.current) {
-        clearTimeout(timeoutIdRef.current);
-        timeoutIdRef.current = null;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
       }
     };
   }, [getDevicesStatus, unit, devices, isNetworkConnected, isFocused]);
 
   useEffect(() => {
+    // Reset the hasFetched flag when the component is no longer focused
     if (!isFocused) {
-      hasFetchedRef.current = false;
+      hasFetched.current = false;
+      if (timeoutId) {
+        clearTimeout(timeoutId); // Clear timeout when losing focus
+        timeoutId = null;
+      }
     }
   }, [isFocused]);
 };

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',
     };

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

@@ -20,13 +20,6 @@ jest.mock('react', () => {
   };
 });
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useFocusEffect: (func) => func(),
-  };
-});
-
 jest.mock('../../../iot/Monitor');
 
 describe('Test useWatchConfigs', () => {

package/src/iot/RemoteControl/HomeAssistant.js

@@ -127,7 +127,7 @@ export const homeAssistantConnect = async (
   for (let i = 0; i < options.length; i++) {
     const option = options[i];
 
-    option.config_maps.forEach((configMap) => {
+    option.config_maps?.forEach((configMap) => {
       if (option.text_maps) {
         textMaps[configMap.entity_id] = option.text_maps;
       }