@eohjsc/react-native-smart-city 0.7.8 → 0.7.9

package/src/screens/AllGateway/GatewayWifi/__test__/index.test.js

@@ -0,0 +1,319 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { Alert } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import mqtt from 'precompiled-mqtt/dist/mqtt.browser';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { getTranslate } from '../../../../utils/I18n';
+import Routes from '../../../../utils/Route';
+
+import ConnectWifi from '../../../../commons/ConnectWifi';
+import GatewayWifi from '../index';
+
+jest.mock('precompiled-mqtt/dist/mqtt.browser', () => {
+  return {
+    connect: jest.fn(() => {
+      return {
+        on: jest.fn(),
+        subscribe: jest.fn(),
+        publish: jest.fn(),
+        end: jest.fn(),
+      };
+    }),
+  };
+});
+
+const wrapComponent = ({ props }) => (
+  <SCProvider initState={mockSCStore({})}>
+    <GatewayWifi {...props} />
+  </SCProvider>
+);
+
+describe('Test GatewayWifi', () => {
+  let tree;
+  let mockClient;
+
+  const mockNavigate = useNavigation().navigate;
+  const spyAlert = jest.spyOn(Alert, 'alert');
+
+  const props = {
+    route: {
+      params: {
+        gateway: {
+          mqtt_server: {
+            websocket_host: 'mqtt.example.com',
+            websocket_port: 8083,
+          },
+          code: '123456',
+        },
+      },
+    },
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.spyOn(global, 'setTimeout');
+    jest.spyOn(global, 'clearTimeout');
+    mockClient = {
+      on: jest.fn(),
+      subscribe: jest.fn(),
+      publish: jest.fn(),
+      end: jest.fn(),
+    };
+    mqtt.connect.mockReturnValue(mockClient);
+  });
+
+  afterEach(() => {
+    global.setTimeout.mockRestore();
+    global.clearTimeout.mockRestore();
+    jest.clearAllMocks();
+    jest.useRealTimers();
+  });
+
+  const triggerConnect = async () => {
+    const connectCallback = mockClient.on.mock.calls.find(
+      (call) => call[0] === 'connect'
+    )[1];
+    await act(async () => {
+      connectCallback();
+    });
+  };
+
+  const triggerMessage = async (topic, payload) => {
+    const messageCallback = mockClient.on.mock.calls.find(
+      (call) => call[0] === 'message'
+    )[1];
+    await act(async () => {
+      messageCallback(topic, JSON.stringify(payload), {});
+    });
+  };
+
+  const triggerOnChangeWifi = async (wifiDetails) => {
+    const instance = tree.root;
+    const connectWifi = instance.findByType(ConnectWifi);
+    const onConnect = connectWifi.props.onConnect;
+
+    await act(async () => {
+      onConnect(wifiDetails);
+    });
+
+    expect(mockClient.publish).toHaveBeenCalledWith(
+      'eoh/chip/123456/wifi/change',
+      JSON.stringify({
+        ssid: wifiDetails.wifiSsid,
+        password: wifiDetails.wifiPassword,
+      })
+    );
+
+    expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 120000);
+  };
+
+  it('test connects to MQTT server on mount and subscribes to topics', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    expect(mqtt.connect).toHaveBeenCalledWith('wss://mqtt.example.com:8083', {
+      username: '123456',
+      password: '123456',
+    });
+    expect(mockClient.on).toHaveBeenCalledTimes(2);
+    expect(mockClient.on).toHaveBeenCalledWith('connect', expect.any(Function));
+    expect(mockClient.on).toHaveBeenCalledWith('message', expect.any(Function));
+
+    await act(async () => {
+      triggerConnect();
+    });
+
+    expect(mockClient.subscribe).toHaveBeenCalledWith(
+      'eoh/chip/123456/wifi/list'
+    );
+    expect(mockClient.subscribe).toHaveBeenCalledWith(
+      'eoh/chip/123456/wifi/change_result'
+    );
+    expect(mockClient.publish).toHaveBeenCalledWith(
+      'eoh/chip/123456/wifi/ask',
+      '1'
+    );
+  });
+
+  it('test with no mqtt server', async () => {
+    const newProps = {
+      route: {},
+    };
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props: newProps }));
+    });
+
+    const instance = tree.root;
+    const connectWifi = instance.findByType(ConnectWifi);
+    const onConnect = connectWifi.props.onConnect;
+
+    await act(async () => {
+      onConnect({ wifiSsid: 'NewWiFi', wifiPassword: 'NewPassword123' });
+    });
+
+    expect(mqtt.connect).not.toHaveBeenCalled();
+    expect(mockClient.on).not.toHaveBeenCalled();
+    expect(mockClient.subscribe).not.toHaveBeenCalled();
+    expect(mockClient.publish).not.toHaveBeenCalled();
+    expect(mockClient.end).not.toHaveBeenCalled();
+  });
+
+  it('test handles receiving wifi list message', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    await act(async () => {
+      triggerConnect();
+    });
+
+    const wifiList = [
+      { ssid: 'HomeWiFi', encryption: 'WPA2/PSK' },
+      { ssid: 'OpenNetwork', encryption: 'OPEN' },
+    ];
+
+    await act(async () => {
+      triggerMessage('eoh/chip/123456/wifi/list', wifiList);
+    });
+
+    const instance = tree.root;
+    const connectWifi = instance.findByType(ConnectWifi);
+    expect(connectWifi.props.wifiList).toEqual(wifiList);
+  });
+
+  it('test handles successful wifi change result message', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    await act(async () => {
+      triggerConnect();
+    });
+
+    await act(async () => {
+      triggerOnChangeWifi({
+        wifiSsid: 'NewWiFi',
+        wifiPassword: 'NewPassword123',
+      });
+    });
+
+    await act(async () => {
+      triggerMessage('eoh/chip/123456/wifi/change_result', { success: true });
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.Successfully, {
+      gateway: props.route.params.gateway,
+      wifiName: 'NewWiFi',
+    });
+    expect(clearTimeout).toHaveBeenCalledWith(expect.any(Number));
+    expect(mockClient.end).not.toHaveBeenCalled();
+
+    await act(async () => {
+      triggerMessage('eoh/chip/123456/wifi/change_result', { success: true });
+    });
+    expect(clearTimeout).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      tree.unmount();
+    });
+    expect(mockClient.end).toHaveBeenCalled();
+    expect(clearTimeout).toHaveBeenCalledTimes(1);
+  });
+
+  it('test handles failed wifi change result message', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    await act(async () => {
+      triggerConnect();
+    });
+
+    await act(async () => {
+      triggerOnChangeWifi({
+        wifiSsid: 'NewWiFi',
+        wifiPassword: 'NewPassword123',
+      });
+    });
+
+    await act(async () => {
+      triggerMessage('eoh/chip/123456/wifi/change_result', { success: false });
+    });
+
+    expect(spyAlert).toHaveBeenCalledWith(
+      getTranslate('en', 'failed'),
+      getTranslate('en', 'change_wifi_failed')
+    );
+    expect(mockNavigate).not.toHaveBeenCalled();
+    expect(mockClient.end).not.toHaveBeenCalled();
+  });
+
+  it('test publishes wifi change on onChangeWifi and sets timeout', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    await act(async () => {
+      triggerConnect();
+    });
+
+    await act(async () => {
+      triggerOnChangeWifi({
+        wifiSsid: 'NewWiFi',
+        wifiPassword: 'NewPassword123',
+      });
+    });
+
+    await act(async () => {
+      jest.runAllTimers();
+    });
+
+    expect(spyAlert).toHaveBeenCalledWith(
+      getTranslate('en', 'failed'),
+      getTranslate('en', 'connection_timeout')
+    );
+  });
+
+  it('test handles unmount', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    await act(async () => {
+      triggerConnect();
+    });
+
+    await act(async () => {
+      triggerOnChangeWifi({
+        wifiSsid: 'NewWiFi',
+        wifiPassword: 'NewPassword123',
+      });
+    });
+
+    expect(mockClient.end).not.toHaveBeenCalled();
+    expect(clearTimeout).not.toHaveBeenCalled();
+
+    await act(async () => {
+      tree.unmount();
+    });
+    expect(mockClient.end).toHaveBeenCalled();
+    expect(clearTimeout).toHaveBeenCalledWith(expect.any(Number));
+  });
+
+  it('test receives change result message before connect', async () => {
+    await act(async () => {
+      renderer.create(wrapComponent({ props }));
+    });
+
+    await act(async () => {
+      triggerMessage('eoh/chip/123456/wifi/change_result', { success: true });
+    });
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+    expect(spyAlert).not.toHaveBeenCalled();
+  });
+});

package/src/screens/AllGateway/GatewayWifi/index.js

@@ -0,0 +1,107 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { memo, useCallback, useEffect, useState, useRef } from 'react';
+import { Alert } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { connectMqttServer } from '../../../hooks/useMqtt';
+import Routes from '../../../utils/Route';
+import ConnectWifi from '../../../commons/ConnectWifi';
+
+const GatewayWifi = ({ route }) => {
+  const { gateway } = route?.params || {};
+
+  const t = useTranslations();
+  const { navigate, goBack } = useNavigation();
+
+  const mqttClientRef = useRef(null);
+  const timeoutIdRef = useRef(null);
+  const wifiNameRef = useRef(null);
+
+  const [wifiList, setWifiList] = useState([]);
+  const [isShowLoading, setIsShowLoading] = useState(false);
+
+  useEffect(() => {
+    if (!gateway?.mqtt_server) {
+      return;
+    }
+
+    const client = connectMqttServer(gateway.mqtt_server, gateway.code);
+
+    client.on('connect', () => {
+      client.subscribe(`eoh/chip/${gateway.code}/wifi/list`);
+      client.subscribe(`eoh/chip/${gateway.code}/wifi/change_result`);
+      client.publish(`eoh/chip/${gateway.code}/wifi/ask`, '1');
+    });
+
+    client.on('message', async (topic, payload) => {
+      if (topic === `eoh/chip/${gateway.code}/wifi/change_result`) {
+        if (!wifiNameRef.current) {
+          return;
+        }
+        if (timeoutIdRef.current) {
+          clearTimeout(timeoutIdRef.current);
+          timeoutIdRef.current = null;
+        }
+        const result = JSON.parse(payload.toString());
+        if (result.success) {
+          navigate(Routes.Successfully, {
+            gateway,
+            wifiName: wifiNameRef.current,
+          });
+        } else {
+          setIsShowLoading(false);
+          Alert.alert(t('failed'), t('change_wifi_failed'));
+        }
+      }
+
+      if (topic === `eoh/chip/${gateway.code}/wifi/list`) {
+        setWifiList(JSON.parse(payload.toString()));
+      }
+    });
+
+    mqttClientRef.current = client;
+    return () => {
+      client.end();
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current);
+        timeoutIdRef.current = null;
+      }
+    };
+  }, [gateway, t, navigate]);
+
+  const onChangeWifi = useCallback(
+    ({ wifiSsid, wifiPassword }) => {
+      if (!mqttClientRef.current) {
+        return;
+      }
+
+      timeoutIdRef.current = setTimeout(() => {
+        setIsShowLoading(false);
+        Alert.alert(t('failed'), t('connection_timeout'));
+      }, 120000);
+
+      mqttClientRef.current.publish(
+        `eoh/chip/${gateway.code}/wifi/change`,
+        JSON.stringify({
+          ssid: wifiSsid,
+          password: wifiPassword,
+        })
+      );
+
+      wifiNameRef.current = wifiSsid;
+    },
+    [gateway, t]
+  );
+
+  return (
+    <ConnectWifi
+      title={'change_wifi'}
+      wifiList={wifiList}
+      onConnect={onChangeWifi}
+      onGoBack={goBack}
+      isShowLoading={isShowLoading}
+      setIsShowLoading={setIsShowLoading}
+    />
+  );
+};
+
+export default memo(GatewayWifi);

package/src/screens/AllGateway/Successfully/__test__/index.test.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+import Routes from '../../../../utils/Route';
+
+import Successfully from '../index';
+
+const wrapComponent = ({ props }) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Successfully {...props} />
+  </SCProvider>
+);
+
+describe('test Successfully', () => {
+  let tree;
+
+  const mockNavigate = useNavigation().navigate;
+
+  const props = {
+    route: {
+      params: {
+        gateway: { id: 1, name: 'Gateway1' },
+        wifiName: 'HomeWiFi',
+      },
+    },
+  };
+
+  afterEach(() => {
+    mockNavigate.mockClear();
+  });
+
+  it('test navigates to GatewayInfo with correct parameters when Done is pressed', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ props }));
+    });
+
+    const instance = tree.root;
+    const doneButton = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_DONE &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      doneButton.props.onPress();
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.GatewayInfo, {
+      chipId: 1,
+      gatewayName: 'Gateway1',
+    });
+  });
+
+  it('test handles missing route params', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({}));
+    });
+
+    const instance = tree.root;
+    const doneButton = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_DONE &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      doneButton.props.onPress();
+    });
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+});

package/src/screens/AllGateway/Successfully/index.js

@@ -0,0 +1,66 @@
+import React, { useCallback } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { Colors } from '../../../configs';
+import Text from '../../../commons/Text';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import Routes from '../../../utils/Route';
+import { HeaderCustom } from '../../../commons/Header';
+
+import styles from './styles';
+
+const Successfully = ({ route }) => {
+  const { gateway, wifiName } = route?.params || {};
+
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+
+  const onPressDone = useCallback(() => {
+    if (!gateway) {
+      return;
+    }
+    navigate(Routes.GatewayInfo, {
+      chipId: gateway?.id,
+      gatewayName: gateway?.name,
+    });
+  }, [navigate, gateway]);
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom
+        title={t('connect_wifi')}
+        isShowSeparator
+        isCanBack={false}
+      />
+      <View style={styles.content}>
+        <View style={styles.viewIconSuccess}>
+          <IconOutline name="check-circle" size={48} color={Colors.Green6} />
+          <Text
+            semibold
+            color={Colors.Black}
+            size={20}
+            style={styles.textStatus}
+          >
+            {t('successfully_connected')}
+          </Text>
+          <Text size={14} color={Colors.Gray9} style={styles.textInfo}>
+            {`${t('you_have_successfully_connected_wifi')}: ${wifiName}`}
+          </Text>
+        </View>
+      </View>
+      <TouchableOpacity
+        style={styles.btnDone}
+        onPress={onPressDone}
+        accessibilityLabel={AccessibilityLabel.BUTTON_DONE}
+      >
+        <Text semibold size={16} color={Colors.Primary}>
+          {t('done')}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default Successfully;

package/src/screens/AllGateway/Successfully/styles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnDone: {
+    height: 48,
+    width: '100%',
+    alignItems: 'center',
+    marginTop: 100,
+  },
+  textStatus: {
+    marginTop: 8,
+    marginBottom: 16,
+  },
+  textInfo: {
+    textAlign: 'center',
+    lineHeight: 24,
+    marginHorizontal: 20,
+  },
+  viewIconSuccess: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/screens/AllGateway/components/Information/index.js

@@ -1,9 +1,12 @@
 import React, { useCallback, memo } from 'react';
 import { TouchableOpacity, View, Image, FlatList } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../../../utils/Route';
 import { Colors, SCConfig } from '../../../../configs';
 import t from '../../../../hooks/Common/useTranslations';
 import { Text, HeaderCustom } from '../../../../commons';
 import Images from '../../../../configs/Images';
+import { ToastBottomHelper } from '../../../../utils/Utils';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import styles from './styles';
 import RowItem from '../RowItem';
@@ -12,12 +15,23 @@ const Information = ({
   listInformation,
   handleDeleteGateway,
   handleConnectionMethods,
+  gatewayDetail,
   isDevice = false,
   title = t('gateway_information'),
   isModbus,
   buttonBackStyles,
   methodsConnection,
 }) => {
+  const { navigate } = useNavigation();
+
+  const handleChangeWifi = useCallback(() => {
+    if (!gatewayDetail?.is_connected) {
+      ToastBottomHelper.error(t('gateway_need_to_be_connected'));
+      return;
+    }
+    navigate(Routes.GatewayWifi, { gateway: gatewayDetail });
+  }, [navigate, gatewayDetail]);
+
   const renderItem = useCallback(
     ({ item, index }) => {
       return (
@@ -26,10 +40,12 @@ const Information = ({
           subTitle={item?.data}
           key={index}
           isShowCopy={item?.id === 5 && !isModbus}
+          isShowChangeWifi={item?.id === 3 && !isModbus}
+          handleChangeWifi={handleChangeWifi}
         />
       );
     },
-    [isModbus]
+    [isModbus, handleChangeWifi]
   );
 
   return (

package/src/screens/AllGateway/components/RowItem/index.js

@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import t from '../../../../hooks/Common/useTranslations';
 import FileCopy from '../../../../Images/DevMode/file_copy.svg';
@@ -14,6 +15,8 @@ const RowItem = ({
   subTitle = '--',
   isShowCopy = false,
   onRowOne = false,
+  isShowChangeWifi = false,
+  handleChangeWifi,
 }) => {
   const handleCopy = useCallback(() => {
     Clipboard?.setString(subTitle);
@@ -39,9 +42,17 @@ const RowItem = ({
             <FileCopy />
           </TouchableOpacity>
         )}
+        {!!isShowChangeWifi && (
+          <TouchableOpacity
+            onPress={handleChangeWifi}
+            accessibilityLabel={AccessibilityLabel.CHANGE_WIFI}
+          >
+            <IconOutline name="edit" size={25} />
+          </TouchableOpacity>
+        )}
       </>
     );
-  }, [handleCopy, isShowCopy, subTitle]);
+  }, [handleCopy, handleChangeWifi, isShowCopy, isShowChangeWifi, subTitle]);
 
   return (
     <View