@eohjsc/react-native-smart-city 0.3.31 → 0.3.34

package/src/screens/AddNewGateway/SelectZigbeeGateway.js

@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import SelectGateway from '../../commons/SelectGateway';
+import Routes from '../../utils/Route';
+
+const SelectZigbeeGateway = ({ route }) => {
+  const t = useTranslations();
+  const navigation = useNavigation();
+  const { unitId, stationId } = route?.params || {};
+
+  const onPressNext = useCallback(
+    (gateway) => {
+      navigation.navigate(Routes.ConnectingZigbeeDevice, {
+        unitId,
+        stationId,
+        chipId: gateway.id,
+      });
+    },
+    [navigation, unitId, stationId]
+  );
+
+  return (
+    <SelectGateway
+      onPressNext={onPressNext}
+      title={t('text_select_a_gateway')}
+      subTitle={t('text_select_a_gateway')}
+      unitId={unitId}
+      type="zigbee"
+    />
+  );
+};
+
+export default SelectZigbeeGateway;

package/src/screens/AddNewGateway/ShareWifiPassword.js

@@ -0,0 +1,198 @@
+import React, { useCallback, useState } from 'react';
+import WifiManager from 'react-native-wifi-reborn';
+import { Alert, ScrollView, TouchableOpacity, View } from 'react-native';
+import dgram from 'react-native-udp';
+
+import { ToastBottomHelper } from '../../utils/Utils';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { HeaderCustom } from '../../commons/Header';
+import Text from '../../commons/Text';
+import WifiIcon from '../../../assets/images/wifi.svg';
+import ButtonPopup from '../../commons/ButtonPopup';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import { Colors } from '../../configs';
+import TextInputPassword from '../../commons/Form/TextInputPassword';
+import styles from './ShareWifiPasswordStyles';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../utils/Route';
+
+const WifiItem = ({ item, setIsShowPopupPassword, setSelectedWifi }) => {
+  const showPopupPassword = useCallback(
+    (ssid) => {
+      setIsShowPopupPassword(true);
+      setSelectedWifi(ssid);
+    },
+    [setIsShowPopupPassword, setSelectedWifi]
+  );
+
+  return (
+    <TouchableOpacity
+      style={styles.listItem}
+      onPress={() => showPopupPassword(item.ssid)}
+      accessibilityLabel={`${AccessibilityLabel.SELECT_WIFI}${item.ssid}`}
+    >
+      <Text type="H4" style={styles.textItem}>
+        {item.ssid}
+      </Text>
+      <View style={styles.wifiIcon}>
+        <WifiIcon />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const ShareWifiPassword = ({ route }) => {
+  const { wifiList, unitId, stationId } = route?.params || {};
+  const t = useTranslations();
+  const navigation = useNavigation();
+
+  const [isShowPopupPassword, setIsShowPopupPassword] = useState(false);
+  const [selectedWifi, setSelectedWifi] = useState('');
+  const [selectedWifiPassword, setSelectedWifiPassword] = useState('');
+
+  const hidePopupPassword = useCallback(() => {
+    setIsShowPopupPassword(false);
+  }, []);
+
+  const shareWifiToDevice = useCallback(
+    (socket, i) => {
+      const timeoutSendConnect = setTimeout(async () => {
+        i--;
+        socket.send(
+          JSON.stringify({
+            type: 'connect',
+            data: { wifi: { ssid: selectedWifi, pass: selectedWifiPassword } },
+          }),
+          undefined,
+          undefined,
+          54321,
+          '192.168.27.1',
+          undefined
+        );
+        if (i > 0) {
+          shareWifiToDevice(socket, i);
+          clearTimeout(timeoutSendConnect);
+        }
+      }, 1000);
+    },
+    [selectedWifiPassword, selectedWifi]
+  );
+
+  const handleSocketOnMsg = useCallback(
+    (currentSsid, msg) => {
+      const data = JSON.parse(msg.toString());
+      if (!Object.prototype.hasOwnProperty.call(data, 'gateway')) {
+        return false;
+      }
+      const gatewayInfo = data.gateway;
+      const checkWifiInterval = setInterval(async () => {
+        let ssid;
+        try {
+          ssid = await WifiManager.getCurrentWifiSSID();
+        } catch (e) {
+          return;
+        }
+
+        if (ssid !== currentSsid) {
+          clearInterval(checkWifiInterval);
+          navigation.navigate(Routes.ConnectingWifiDevice, {
+            unitId,
+            stationId,
+            gateway: gatewayInfo,
+            selectedWifi: {
+              ssid: selectedWifi,
+              password: selectedWifiPassword,
+            },
+          });
+        }
+      }, 1000);
+
+      return true;
+    },
+    [navigation, selectedWifi, selectedWifiPassword, stationId, unitId]
+  );
+
+  const onPasswordReady = useCallback(async () => {
+    const socket = dgram.createSocket({ type: 'udp4' });
+    socket.bind(54321);
+    let currentSsid;
+    try {
+      currentSsid = await WifiManager.getCurrentWifiSSID();
+    } catch (e) {
+      Alert.alert(t('cannot_get_current_wifi_ssid'));
+      return;
+    }
+
+    socket.on('message', (msg, rinfo) => {
+      if (handleSocketOnMsg(currentSsid, msg)) {
+        socket.close();
+      }
+    });
+    socket.on('error', () => {
+      ToastBottomHelper.error(t('server_error'));
+      // todo Bang handle error
+    });
+
+    setIsShowPopupPassword(false);
+    shareWifiToDevice(socket, 3);
+  }, [handleSocketOnMsg, shareWifiToDevice, t]);
+
+  return (
+    <View style={styles.screen}>
+      <HeaderCustom
+        onGoBack={navigation.goBack}
+        title={t('connect_home_wifi')}
+        isShowSeparator
+      />
+      <View>
+        <Text style={styles.title} semibold type="H3">
+          {t('set_network')}
+        </Text>
+        <Text style={styles.subTitle} type="Body">
+          {t('select_network')}
+        </Text>
+
+        <ScrollView
+          style={styles.listContainer}
+          scrollIndicatorInsets={{ right: 1 }}
+        >
+          {!!wifiList?.length &&
+            wifiList.map((item, index) => {
+              return (
+                <WifiItem
+                  key={index}
+                  item={item}
+                  setSelectedWifi={setSelectedWifi}
+                  setIsShowPopupPassword={setIsShowPopupPassword}
+                />
+              );
+            })}
+        </ScrollView>
+      </View>
+
+      <ButtonPopup
+        accessibilityLabel={AccessibilityLabel.GATEWAY_WIFI_LIST.BUTTON_POPUP}
+        visible={isShowPopupPassword}
+        mainTitle={t('connect')}
+        onPressMain={onPasswordReady}
+        secondaryTitle={t('cancel')}
+        typeSecondary={'cancel'}
+        onPressSecondary={hidePopupPassword}
+        hideClose
+      >
+        <>
+          <Text>{t('enter_wifi_password')}</Text>
+          <TextInputPassword
+            secureTextEntry
+            placeholder={t('password')}
+            onChange={setSelectedWifiPassword}
+            value={selectedWifiPassword}
+            textInputStyle={styles.input}
+            selectionColor={Colors.Primary}
+          />
+        </>
+      </ButtonPopup>
+    </View>
+  );
+};
+export default ShareWifiPassword;

package/src/screens/AddNewGateway/ShareWifiPasswordStyles.js

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  screen: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+  },
+  title: {
+    marginVertical: 16,
+    marginLeft: 16,
+  },
+  subTitle: {
+    marginBottom: 16,
+    marginLeft: 16,
+  },
+  listContainer: {
+    borderWidth: 1,
+    backgroundColor: Colors.White,
+    borderRadius: 20,
+    borderColor: Colors.Gray4,
+  },
+  listItem: {
+    borderBottomColor: Colors.Gray4,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  textItem: {
+    paddingVertical: 16,
+    paddingLeft: 16,
+  },
+  wifiIcon: {
+    paddingRight: 16,
+  },
+  input: {
+    height: 40,
+    marginVertical: 12,
+    borderWidth: 1,
+    padding: 10,
+    borderColor: Colors.Gray5,
+  },
+});

package/src/screens/AddNewGateway/__test__/AddNewGateway.test.js

@@ -4,7 +4,7 @@ import MockAdapter from 'axios-mock-adapter';
 
 import AddNewGateway from '../index';
 import GroupCheckBox from '../../../commons/GroupCheckBox';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { ViewButtonBottom } from '../../../commons';
 import { TextInput } from 'react-native';
 import { getTranslate } from '../../../utils/I18n';
@@ -54,7 +54,7 @@ describe('Test AddNewGateway', () => {
   });
 
   const getText = (instance, id) => {
-    return instance.find((el) => el.props.testID === id);
+    return instance.find((el) => el.props.accessibilityLabel === id);
   };
 
   test('create', async () => {
@@ -62,8 +62,11 @@ describe('Test AddNewGateway', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const textAdd = getText(instance, TESTID.ADD_NEW_GATEWAY_ADD);
-    const textThen = getText(instance, TESTID.ADD_NEW_GATEWAY_THEN_SELECT);
+    const textAdd = getText(instance, AccessibilityLabel.ADD_NEW_GATEWAY_ADD);
+    const textThen = getText(
+      instance,
+      AccessibilityLabel.ADD_NEW_GATEWAY_THEN_SELECT
+    );
     expect(textAdd.props.children).toEqual(
       getTranslate('en', 'add_new_gateway')
     );

package/src/screens/AddNewGateway/__test__/ConnectingModbusDevice.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+import ConnectingModbusDevice from '../ConnectingModbusDevice';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import api from '../../../utils/Apis/axios';
+import Processing from '../../../commons/Processing';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectingModbusDevice route={route} />
+  </SCProvider>
+);
+
+const mock = new MockAdapter(api.axiosInstance);
+
+jest.mock('react', () => {
+  return { ...jest.requireActual('react'), memo: (x) => x };
+});
+
+const mockedNavigate = jest.fn();
+const mockedGoBack = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+  };
+});
+
+describe('Test connecting modbus device', () => {
+  let tree;
+  let route;
+
+  afterEach(() => {
+    mockedNavigate.mockClear();
+  });
+
+  beforeEach(() => {
+    route = {
+      params: {
+        unitId: 1,
+        stationId: 2,
+        chipId: 3,
+        qrData: {},
+      },
+    };
+  });
+
+  test('rendering', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    expect(instance.findAllByType(Processing)).toHaveLength(1);
+
+    expect(mock.history.post).toHaveLength(1);
+  });
+});

package/src/screens/AddNewGateway/__test__/{SelectGateway.test.js → ConnectingWifiDevice.test.js}

@@ -1,17 +1,20 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-
-import AddNewGatewaySelectGateway from '../SelectGateway';
+import MockAdapter from 'axios-mock-adapter';
+import ConnectingWifiDevice from '../ConnectingWifiDevice';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { SafeAreaView } from 'react-native';
+import api from '../../../utils/Apis/axios';
+import Processing from '../../../commons/Processing';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
-    <AddNewGatewaySelectGateway route={route} />
+    <ConnectingWifiDevice route={route} />
   </SCProvider>
 );
 
+const mock = new MockAdapter(api.axiosInstance);
+
 jest.mock('react', () => {
   return { ...jest.requireActual('react'), memo: (x) => x };
 });
@@ -26,11 +29,10 @@ jest.mock('@react-navigation/native', () => {
       navigate: mockedNavigate,
       goBack: mockedGoBack,
     }),
-    useIsFocused: () => true,
   };
 });
 
-describe('Test AddNewGatewaySelectGateway', () => {
+describe('Test connecting wifi device', () => {
   let tree;
   let route;
 
@@ -41,17 +43,20 @@ describe('Test AddNewGatewaySelectGateway', () => {
   beforeEach(() => {
     route = {
       params: {
-        unit_id: 1,
+        unitId: 1,
+        stationId: 2,
+        gateway: {},
+        selectedWifi: {},
       },
     };
   });
 
-  test('create AddNewGatewaySelectGateway', async () => {
+  test('rendering', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const safeAreaView = instance.findAllByType(SafeAreaView);
-    expect(safeAreaView).toHaveLength(1);
+    expect(instance.findAllByType(Processing)).toHaveLength(1);
+    expect(mock.history.post).toHaveLength(1);
   });
 });

package/src/screens/AddNewGateway/__test__/ConnectingWifiGuide.test.js

@@ -0,0 +1,224 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import Toast from 'react-native-toast-message';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { Platform, TouchableOpacity } from 'react-native';
+import WifiManager from 'react-native-wifi-reborn';
+import dgram from 'react-native-udp';
+import ConnectingWifiGuide from '../ConnectingWifiGuide';
+import InteractSmartphoneIcon from '../../../../assets/images/AddNewDevice/interact-smartphone-icon.svg';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+
+const mockedGoBack = jest.fn();
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+    useIsFocused: () => true,
+  };
+});
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectingWifiGuide route={route} />
+  </SCProvider>
+);
+
+const ConnectWifiActionButton = async (instance) => {
+  const buttonOnActionPress = instance.find(
+    (el) =>
+      el.props.accessibilityLabel ===
+        `${AccessibilityLabel.PREFIX.BUTTON_CONNECT_WIFI}${AccessibilityLabel.BOTTOM_VIEW_MAIN}` &&
+      el.type === TouchableOpacity
+  );
+  await act(async () => {
+    buttonOnActionPress.props.onPress();
+  });
+};
+
+describe('test share wifi password', () => {
+  let tree;
+
+  beforeEach(() => {
+    const socket = dgram.createSocket({});
+    socket.on.mockClear();
+    socket.bind.mockClear();
+    socket.send.mockClear();
+    socket.close.mockClear();
+  });
+
+  test('render connect wifi guide', async () => {
+    const route = { params: {} };
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+
+    const instance = tree.root;
+    const icon = instance.findByType(InteractSmartphoneIcon);
+    expect(icon).toBeTruthy();
+    const button = instance.findAllByType(TouchableOpacity);
+    expect(button).toHaveLength(2);
+  });
+
+  test('auto connect to wifi prefix on ios', async () => {
+    Platform.OS = 'ios';
+    const route = { params: { prefix: 'robot' } };
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+
+    await ConnectWifiActionButton(tree.root);
+
+    expect(WifiManager.connectToProtectedSSIDPrefix).toBeCalled();
+    expect(WifiManager.connectToProtectedSSIDPrefix.mock.calls[0][0]).toEqual(
+      'eoh.robot.'
+    );
+    const socket = dgram.createSocket();
+    expect(socket.bind).toBeCalled();
+  });
+
+  test('fail connect to wifi prefix on ios', async () => {
+    Platform.OS = 'ios';
+    const route = { params: { prefix: 'robot' } };
+    WifiManager.connectToProtectedSSIDPrefix.mockImplementationOnce(
+      async () => {
+        throw 'Cannot connect to protected prefix SSID';
+      }
+    );
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    await ConnectWifiActionButton(tree.root);
+    const socket = dgram.createSocket();
+    expect(socket.bind).not.toBeCalled();
+  });
+
+  test('auto connect to wifi android', async () => {
+    Platform.OS = 'android';
+    const route = { params: { prefix: 'robot' } };
+    WifiManager.loadWifiList.mockImplementationOnce(async () => [
+      { SSID: 'random-name' },
+      { SSID: 'eoh.lite.xxx' },
+      { SSID: 'eoh.robot.xxx' },
+    ]);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    await ConnectWifiActionButton(tree.root);
+
+    expect(WifiManager.connectToProtectedSSID).toBeCalled();
+    expect(WifiManager.connectToProtectedSSID.mock.calls[0][0]).toEqual(
+      'eoh.robot.xxx'
+    );
+    const socket = dgram.createSocket();
+    expect(socket.bind).toBeCalled();
+  });
+
+  test('fail connect to wifi android', async () => {
+    Platform.OS = 'android';
+    const route = { params: { prefix: 'robot' } };
+    WifiManager.reScanAndLoadWifiList.mockImplementationOnce(async () => [
+      { SSID: 'random-name' },
+      { SSID: 'eoh.lite.xxx' },
+      { SSID: 'eoh.robot.xxx' },
+    ]);
+    WifiManager.connectToProtectedSSID.mockImplementationOnce(async () => {
+      throw 'Cannot connect to wifi';
+    });
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    await ConnectWifiActionButton(tree.root);
+
+    const socket = dgram.createSocket();
+    expect(socket.bind).not.toBeCalled();
+  });
+
+  test('fail load wifi list android', async () => {
+    Platform.OS = 'android';
+    const route = { params: { prefix: 'robot' } };
+    WifiManager.reScanAndLoadWifiList.mockImplementationOnce(async () => {
+      throw 'Cannot load wifi list to wifi';
+    });
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    await ConnectWifiActionButton(tree.root);
+
+    const socket = dgram.createSocket();
+    expect(socket.bind).not.toBeCalled();
+  });
+
+  test('request wifi list from device', async () => {
+    jest.useFakeTimers();
+    Platform.OS = 'android';
+    const route = { params: { prefix: 'robot' } };
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    await ConnectWifiActionButton(tree.root);
+    jest.runOnlyPendingTimers();
+    const socket = dgram.createSocket({});
+    expect(socket.send).toBeCalled();
+    const data = JSON.parse(socket.send.mock.calls[0][0]);
+    expect(data.type).toEqual('scan');
+  });
+
+  test('got wifi list from device', async () => {
+    Platform.OS = 'android';
+    const route = {
+      params: { prefix: 'robot', qrData: 'abc123', unitId: 1, stationId: 1 },
+    };
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    await ConnectWifiActionButton(tree.root);
+
+    const socket = dgram.createSocket({});
+    expect(socket.on).toBeCalled();
+    expect(socket.on.mock.calls[0][0]).toEqual('message');
+
+    await act(async () => {
+      socket.on.mock.calls[0][1](
+        JSON.stringify({
+          wifi: [{ ssid: 'wifi 1' }, { ssid: 'wifi.2' }],
+        })
+      );
+    });
+    // todo Bang should test wifi display
+    expect(socket.close).toBeCalled();
+
+    expect(mockedNavigate).toBeCalledWith('ShareWifiPassword', {
+      unitId: 1,
+      stationId: 1,
+      wifiList: [{ ssid: 'wifi 1' }, { ssid: 'wifi.2' }],
+      qrData: 'abc123',
+    });
+
+    // expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.ShareWifiPassword);
+  });
+
+  test('got error while request wifi list from device', async () => {
+    Platform.OS = 'android';
+    const route = { params: { prefix: 'robot' } };
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    await ConnectWifiActionButton(tree.root);
+
+    const socket = dgram.createSocket({});
+    expect(socket.on).toBeCalledTimes(2);
+    expect(socket.on.mock.calls[1][0]).toEqual('error');
+
+    await act(async () => {
+      socket.on.mock.calls[1][1]();
+    });
+    expect(Toast.show).toBeCalled();
+  });
+});