@eohjsc/react-native-smart-city 0.2.67 → 0.2.68

package/src/navigations/AddUnitStack.js

@@ -4,6 +4,7 @@ import React, { memo } from 'react';
 import AddLocationMaps from '../screens/AddLocationMaps'; //containers/AddLocationMaps
 import AddSubUnit from '../screens/SubUnit/AddSubUnit';
 import Route from '../utils/Route'; // utils/Route
+import { screenOptions } from './utils';
 
 const Stack = createStackNavigator();
 
@@ -11,6 +12,7 @@ export const AddUnitStack = memo(() => {
   return (
     <Stack.Navigator
       screenOptions={{
+        ...screenOptions,
         headerShown: false,
       }}
     >

package/src/navigations/EmergencyContactsStack.js

@@ -8,6 +8,7 @@ import { EmergencyContactsAddNew } from '../screens/EmergencyContacts/EmergencyC
 import { EmergencyContactsList } from '../screens/EmergencyContacts/EmergencyContactsList';
 import { EmergencyContactsSelectContacts } from '../screens/EmergencyContacts/EmergencyContactsSelectContacts';
 import Route from '../utils/Route';
+import { screenOptions } from './utils';
 
 const Stack = createStackNavigator();
 
@@ -15,6 +16,7 @@ export const EmergencyContactsStack = memo(() => {
   return (
     <Stack.Navigator
       screenOptions={{
+        ...screenOptions,
         headerTitleAlign: 'center',
         headerBackImage: () => (
           <IconOutline

package/src/navigations/SharedStack.js

@@ -8,6 +8,7 @@ import { useTranslations } from '../hooks/Common/useTranslations';
 import Shared from '../screens/SharedUnit';
 import { Colors } from '../configs';
 import Routes from '../utils/Route';
+import { screenOptions } from './utils';
 
 const Stack = createStackNavigator();
 const SharedStack = memo(() => {
@@ -20,6 +21,7 @@ const SharedStack = memo(() => {
         name={Routes.Shared}
         component={Shared}
         options={{
+          ...screenOptions,
           title: t('text_shared_with_me'),
           headerLeft: () => (
             <TouchableOpacity

package/src/navigations/UnitStack.js

@@ -9,6 +9,7 @@ import { useTranslations } from '../hooks/Common/useTranslations';
 import { Colors, Device } from '../configs';
 import Route from '../utils/Route';
 import ActivityLogScreen from '../screens/ActivityLog';
+import { screenOptions } from './utils';
 
 import AQIGuide from '../screens/AQIGuide';
 import DeviceDetail from '../screens/Device/detail';
@@ -52,6 +53,7 @@ export const UnitStack = memo((props) => {
   return (
     <Stack.Navigator
       screenOptions={{
+        ...screenOptions,
         headerTitleAlign: 'center',
         headerBackImage: () => (
           <IconOutline

package/src/screens/AddCommon/SelectSubUnit.js

@@ -78,6 +78,7 @@ const AddCommonSelectSubUnit = ({ route }) => {
           sensor_data: sensor_data,
           listSelectDevice: listSelectDevice,
           smart_account_id: smart_account_id,
+          unit_id: unit_id,
         });
         break;
       case 'AddVconnexDevice':
@@ -105,6 +106,7 @@ const AddCommonSelectSubUnit = ({ route }) => {
     sensor_data,
     listSelectDevice,
     smart_account_id,
+    unit_id,
   ]);
 
   const handleSelectIndex = (index) => {

package/src/screens/AddNewGateway/PlugAndPlay/ConnectWifiWarning.js

@@ -0,0 +1,190 @@
+import React, { memo, useEffect, useState, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  PermissionsAndroid,
+  Platform,
+  ActivityIndicator,
+} from 'react-native';
+import WifiManager from 'react-native-wifi-reborn';
+import { useNavigation } from '@react-navigation/native';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import dgram from 'react-native-udp';
+import { HeaderCustom } from '../../../commons/Header';
+import ScanQrGateway from '../../../../assets/images/scan-qr-gateway.svg';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { Colors, API } from '../../../configs';
+import { axiosPost } from '../../../utils/Apis/axios';
+import Routes from '../../../utils/Route';
+
+const socket = dgram.createSocket({ type: 'udp4' });
+
+socket.once('listening', function () {
+  socket.send(
+    JSON.stringify({ type: 'scan', data: { wifi: '' } }),
+    undefined,
+    undefined,
+    54321,
+    '192.168.27.1',
+    undefined
+  );
+});
+
+const ConnectWifiWarning = memo(({ route }) => {
+  const { wifi_ssid, wifi_pass, unit_id, chip_id } = route.params;
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const [isLoading, setIsLoading] = useState(false);
+
+  socket.on('message', function (msg, rinfo) {
+    const data = JSON.parse(msg.toString());
+    if (data.hasOwnProperty('wifi')) {
+      navigate(Routes.GatewayWifiList, {
+        list_wifi: data.wifi,
+        unit_id: unit_id,
+        chip_id: chip_id,
+        socket: socket,
+      });
+    }
+    if (data.hasOwnProperty('gateway')) {
+      navigate(Routes.Dashboard);
+      ToastBottomHelper.success(t('completed'));
+    }
+  });
+
+  socket.on('error', () => {
+    ToastBottomHelper.error(t('server_error'));
+  });
+
+  const getPermissionWifiAndroid = useCallback(async () => {
+    const granted = await PermissionsAndroid.request(
+      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+      {
+        title: t('location_permission_required_wifi_title'),
+        message: t('location_permission_required_wifi_message'),
+        buttonNegative: t('deny'),
+        buttonPositive: t('allow'),
+      }
+    );
+    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+      ToastBottomHelper.success('GRANTED');
+    } else {
+      ToastBottomHelper.error('DENIED');
+    }
+  }, [t]);
+
+  useEffect(() => {
+    Platform.OS === 'android' && getPermissionWifiAndroid();
+    socket.bind(54321);
+  }, [getPermissionWifiAndroid]);
+
+  const handleSend = async () => {
+    await socket.send(
+      JSON.stringify({ type: 'scan', data: { wifi: '' } }),
+      undefined,
+      undefined,
+      54321,
+      '192.168.27.1',
+      undefined
+    );
+  };
+
+  useEffect(() => {
+    if (isLoading) {
+      handleSend();
+    }
+  }, [isLoading]);
+
+  const handleConnectWifiGateway = async () => {
+    setIsLoading(true);
+    const { success } = await axiosPost(API.UNIT.ADD_GATEWAY(unit_id), {
+      chip: chip_id,
+    });
+    if (success) {
+      ToastBottomHelper.success(t('add_gateway_success'));
+    }
+    // eslint-disable-next-line promise/prefer-await-to-then
+    WifiManager.connectToProtectedSSID(wifi_ssid, wifi_pass, false).then(
+      () => {
+        handleSend();
+      },
+      (e) => {
+        ToastBottomHelper.error('Connection failed!');
+      }
+    );
+  };
+
+  return (
+    <View style={styles.screen}>
+      {!isLoading ? (
+        <>
+          <HeaderCustom title={t('scan_qr')} isShowSeparator />
+          <View style={styles.container}>
+            <ScanQrGateway />
+            <View style={styles.content}>
+              <Text style={styles.text}>
+                {t('connecting_gateway_warning_1')}
+              </Text>
+              <Text style={styles.text}>
+                {t('connecting_gateway_warning_2')}
+              </Text>
+            </View>
+          </View>
+          <BottomButtonView
+            style={styles.viewBottomFixed}
+            mainTitle={t('ok')}
+            onPressMain={handleConnectWifiGateway}
+            typeMain={'primary'}
+          />
+        </>
+      ) : (
+        <View style={styles.centerLoading}>
+          <ActivityIndicator color={Colors.Primary} size={'small'} />
+          <Text>{t('connecting')}</Text>
+        </View>
+      )}
+    </View>
+  );
+});
+
+export default ConnectWifiWarning;
+
+const styles = StyleSheet.create({
+  viewBottomFixed: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: getBottomSpace() > 0 ? getBottomSpace() : 32,
+    paddingTop: 24,
+    backgroundColor: Colors.Gray2,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+  screen: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: 50,
+  },
+  content: {
+    alignItems: 'center',
+    width: '80%',
+    marginTop: 50,
+  },
+  text: {
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+  centerLoading: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/screens/AddNewGateway/PlugAndPlay/FirstWarning.js

@@ -0,0 +1,73 @@
+import React, { memo, useCallback } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import { HeaderCustom } from '../../../commons/Header';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../../utils/Route';
+import WifiGateway from '../../../../assets/images/wifi-gateway.svg';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { ViewButtonBottom } from '../../../commons';
+import { Colors } from '../../../configs';
+
+const FirstWarning = memo(({ route }) => {
+  const { unit_id } = route.params;
+  const t = useTranslations();
+  const { goBack, navigate } = useNavigation();
+
+  const onRight = useCallback(() => {
+    navigate(Routes.ScanChipQR, {
+      unit_id: unit_id,
+    });
+  }, [navigate, unit_id]);
+
+  return (
+    <View style={styles.screen}>
+      <HeaderCustom title={t('add_new_device')} isShowSeparator />
+      <View style={styles.container}>
+        <Text style={styles.warningBetaTest}>
+          {t('warning_beta_test_feature')}
+        </Text>
+        <WifiGateway />
+        <View style={styles.content}>
+          <Text style={styles.text}>{t('gateway_warning_content_1')}</Text>
+          <Text style={styles.text}>{t('gateway_warning_content_2')}</Text>
+          <Text style={styles.text}>{t('gateway_warning_content_3')}</Text>
+          <Text style={styles.text}>{t('gateway_warning_content_4')}</Text>
+        </View>
+      </View>
+      <ViewButtonBottom
+        leftTitle={t('text_back')}
+        onLeftClick={goBack}
+        rightTitle={t('text_next')}
+        onRightClick={onRight}
+      />
+    </View>
+  );
+});
+
+export default FirstWarning;
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: 50,
+  },
+  content: {
+    alignItems: 'center',
+    width: '80%',
+    marginTop: 50,
+  },
+  text: {
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+  warningBetaTest: {
+    textAlign: 'center',
+    lineHeight: 24,
+    paddingBottom: 30,
+    color: Colors.Red,
+  },
+});

package/src/screens/AddNewGateway/PlugAndPlay/GatewayWifiList.js

@@ -0,0 +1,154 @@
+import React, { memo, useState, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  TextInput,
+} from 'react-native';
+import { HeaderCustom } from '../../../commons/Header';
+import { Colors } from '../../../configs';
+import Text from '../../../commons/Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import WifiIcon from '../../../../assets/images/wifi.svg';
+import ButtonPopup from '../../../commons/ButtonPopup';
+
+const GatewayWifiList = memo(({ route }) => {
+  const { list_wifi, socket } = route.params;
+  const t = useTranslations();
+
+  const [isShowPopupPassword, setIsShowPopupPassword] = useState(false);
+  const [password, setPassword] = useState('');
+  const [selectedWifi, setSelectedWifi] = useState('');
+
+  const showPopupPassword = (ssid) => {
+    setIsShowPopupPassword(true);
+    setSelectedWifi(ssid);
+  };
+
+  const onPasswordChange = useCallback(
+    (password) => {
+      setPassword(password.toString());
+    },
+    [setPassword]
+  );
+
+  const connectWifi = async () => {
+    await socket.send(
+      JSON.stringify({
+        type: 'connect',
+        data: { wifi: { ssid: selectedWifi, pass: password } },
+      }),
+      undefined,
+      undefined,
+      54321,
+      '192.168.27.1',
+      undefined
+    );
+  };
+
+  return (
+    <View style={styles.screen}>
+      <HeaderCustom title={t('connect_device')} isShowSeparator />
+      <View>
+        <Text style={styles.title} semibold type="H3">
+          {t('set_network')}
+        </Text>
+        <Text style={styles.subTitle} type="Body">
+          {t('select_wifi')}
+        </Text>
+
+        <ScrollView style={styles.listContainer}>
+          {!!list_wifi.length &&
+            list_wifi.map((item, index) => (
+              <TouchableOpacity
+                key={index}
+                style={styles.listItem}
+                onPress={() => showPopupPassword(item.ssid)}
+              >
+                <Text type="H4" style={styles.textItem}>
+                  {item.ssid}
+                </Text>
+                <View style={styles.wifiIcon}>
+                  <WifiIcon />
+                </View>
+              </TouchableOpacity>
+            ))}
+        </ScrollView>
+      </View>
+
+      <ButtonPopup
+        visible={isShowPopupPassword}
+        mainTitle={t('connect')}
+        onPressMain={() => connectWifi()}
+        secondaryTitle={t('cancel')}
+        onPressSecondary={() => setIsShowPopupPassword(false)}
+        hideClose={true}
+      >
+        <>
+          <Text>{t('enter_wifi_password')}</Text>
+          <TextInput
+            secureTextEntry={true}
+            style={styles.input}
+            onChangeText={onPasswordChange}
+            value={password}
+          />
+        </>
+      </ButtonPopup>
+    </View>
+  );
+});
+
+export default GatewayWifiList;
+
+const styles = 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,
+  },
+  firstItem: {
+    paddingTop: 32,
+    paddingBottom: 16,
+    paddingLeft: 16,
+  },
+  lastItem: {
+    paddingBottom: 32,
+    paddingTop: 16,
+    paddingLeft: 16,
+  },
+  wifiIcon: {
+    paddingRight: 16,
+  },
+  input: {
+    height: 40,
+    marginVertical: 12,
+    borderWidth: 1,
+    padding: 10,
+    borderColor: Colors.Gray5,
+  },
+});

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import renderer, { act, create } from 'react-test-renderer';
+
+import FirstWarning from '../FirstWarning';
+import { Text } from 'react-native';
+import { getTranslate } from '../../../../utils/I18n';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { ViewButtonBottom } from '../../../../commons';
+
+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: () => ({}),
+  };
+});
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <FirstWarning route={route} />
+  </SCProvider>
+);
+
+describe('Test FirstWarning', () => {
+  let tree;
+  let route = { params: { unit_id: 1 } };
+
+  test('create', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    expect(texts).toHaveLength(8);
+    expect(texts[1].props.children).toEqual(
+      getTranslate('en', 'warning_beta_test_feature')
+    );
+    expect(texts[2].props.children).toEqual(
+      getTranslate('en', 'gateway_warning_content_1')
+    );
+  });
+
+  test('test ViewButtonBottom onRightClick', async () => {
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    act(() => {
+      viewButtonBottom.props.onRightClick();
+    });
+    expect(mockedNavigate).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+
+import GatewayWifiList from '../GatewayWifiList';
+import { Text } from 'react-native';
+import { getTranslate } from '../../../../utils/I18n';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <GatewayWifiList route={route} />
+  </SCProvider>
+);
+
+describe('Test GatewayWifiList', () => {
+  let tree;
+  let route = {
+    params: {
+      list_wifi: [{ ssid: 'eoh@io' }, { ssid: 'eoh@ras.io' }],
+      socket: { send: jest.fn() },
+    },
+  };
+
+  test('create', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    expect(texts).toHaveLength(8);
+    expect(texts[1].props.children).toEqual(getTranslate('en', 'set_network'));
+    expect(texts[3].props.children).toEqual('eoh@io');
+  });
+});

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import axios from 'axios';
+
+import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import SetupGatewayWifi from '../SetupGatewayWifi';
+import DisplayChecking from '../../../commons/DisplayChecking';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SetupGatewayWifi route={route} />
+  </SCProvider>
+);
+
+jest.mock('axios');
+
+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,
+    }),
+    useIsFocused: () => ({}),
+  };
+});
+
+jest.mock('../../../iot/RemoteControl/Bluetooth', () => {
+  const device = {
+    name: '1234567',
+    cancelConnection: jest.fn(),
+    connect: async () => ({
+      discoverAllServicesAndCharacteristics: async () => ({
+        writeCharacteristicWithResponseForService: async () => ({}),
+        monitorCharacteristicForService: async (x) => x,
+      }),
+    }),
+    monitorCharacteristicForService: async (x) => x,
+  };
+  return {
+    ...jest.requireActual('../../../iot/RemoteControl/Bluetooth'),
+    getDeviceByName: (x) => device,
+  };
+});
+
+describe('Test SetupGatewayWifi', () => {
+  let tree;
+  let route;
+
+  afterEach(() => {
+    axios.get.mockClear();
+    mockedNavigate.mockClear();
+  });
+
+  beforeEach(() => {
+    route = {
+      params: {
+        unit_id: 1,
+      },
+    };
+  });
+
+  const getText = (instance, id) => {
+    return instance.find((el) => el.props.testID === id);
+  };
+  test('check displayLoadingConnect', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const rightButton = getText(
+      instance,
+      TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON
+    );
+    await act(async () => {
+      await rightButton.props.onPress();
+    });
+    const displayLoadingConnect = instance.findByType(DisplayChecking);
+    expect(displayLoadingConnect.props.visible).toBeTruthy();
+  });
+});