@eohjsc/react-native-smart-city 0.3.29 → 0.3.32

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

@@ -4,7 +4,7 @@ import MockAdapter from 'axios-mock-adapter';
 
 import AddNewDevice from '../index';
 import GroupCheckBox from '../../../commons/GroupCheckBox';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import API from '../../../configs/API';
 import { ViewButtonBottom } from '../../../commons';
 import Routes from '../../../utils/Route';
@@ -57,7 +57,7 @@ describe('Test AddNewDevice', () => {
   });
 
   const getText = (instance, id) => {
-    return instance.find((el) => el.props.testID === id);
+    return instance.find((el) => el.props.accessibilityLabel === id);
   };
 
   test('create', async () => {
@@ -65,8 +65,11 @@ describe('Test AddNewDevice', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const textAdd = getText(instance, TESTID.ADD_NEW_DEVICE_ADD);
-    const textThen = getText(instance, TESTID.ADD_NEW_DEVICE_THEN_SELECT);
+    const textAdd = getText(instance, AccessibilityLabel.ADD_NEW_DEVICE_ADD);
+    const textThen = getText(
+      instance,
+      AccessibilityLabel.ADD_NEW_DEVICE_THEN_SELECT
+    );
     expect(textAdd.props.children).toEqual(
       getTranslate('en', 'add_new_device')
     );

package/src/screens/AddNewDevice/index.js

@@ -15,11 +15,11 @@ import Text from '../../commons/Text';
 import GroupCheckBox from '../../commons/GroupCheckBox';
 import { axiosGet } from '../../utils/Apis/axios';
 import Routes from '../../utils/Route';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const AddNewDevice = memo(({ route }) => {
   const t = useTranslations();
-  const { unit_id } = route.params;
+  const { unit_id } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [unit, setUnit] = useState({ stations: [] });
   const [stationId, setStationId] = useState(-1);
@@ -70,7 +70,7 @@ const AddNewDevice = memo(({ route }) => {
       }
     >
       <Text
-        testID={TESTID.ADD_NEW_DEVICE_ADD}
+        accessibilityLabel={AccessibilityLabel.ADD_NEW_DEVICE_ADD}
         semibold
         size={20}
         color={Colors.Black}
@@ -79,7 +79,7 @@ const AddNewDevice = memo(({ route }) => {
         {t('add_new_device')}
       </Text>
       <Text
-        testID={TESTID.ADD_NEW_DEVICE_THEN_SELECT}
+        accessibilityLabel={AccessibilityLabel.ADD_NEW_DEVICE_THEN_SELECT}
         size={14}
         color={Colors.Gray8}
         style={styles.txtNote}

package/src/screens/AddNewGateway/ConnectingDevice.js

@@ -0,0 +1,40 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback } from 'react';
+import Processing from '../../commons/Processing';
+import Routes from '../../utils/Route';
+
+const ConnectingDevice = ({
+  title,
+  fail,
+  initState,
+  onReady,
+  unitId,
+  stationId,
+  chipId,
+  sensorId,
+}) => {
+  const { navigate } = useNavigation();
+
+  const complete = useCallback(
+    (deviceInfo) => {
+      navigate(Routes.RenameNewDevices, {
+        unitId,
+        stationId,
+        chipId,
+        sensorId,
+      });
+    },
+    [chipId, navigate, sensorId, stationId, unitId]
+  );
+
+  return (
+    <Processing
+      title={title}
+      initState={initState}
+      fail={fail}
+      complete={complete}
+      onReady={onReady}
+    />
+  );
+};
+export default ConnectingDevice;

package/src/screens/AddNewGateway/ConnectingModbusDevice.js

@@ -0,0 +1,61 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useState } from 'react';
+import { Alert } from 'react-native';
+import API from '../../configs/API';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { axiosPost } from '../../utils/Apis/axios';
+import ConnectingDevice from './ConnectingDevice';
+
+const ConnectingModbusDevice = ({ route }) => {
+  const t = useTranslations();
+  const { unitId, stationId, chipId, qrData } = route?.params || {};
+  const [sensorId, setSensorId] = useState(null);
+  const { goBack } = useNavigation();
+
+  const addingModbusDeviceFail = useCallback(
+    (message) => {
+      Alert.alert(t('fail_add_modbus_device'), message, [
+        {
+          text: t('ok'),
+          onPress: goBack,
+        },
+      ]);
+    },
+    [goBack, t]
+  );
+
+  const onReady = useCallback(
+    async (channelName) => {
+      const { success, problem, data } = await axiosPost(
+        API.CHIP.SCAN_SENSOR(chipId),
+        {
+          imei: qrData.imei,
+          unit: unitId,
+          station: stationId,
+          channel_name: channelName,
+        }
+      );
+
+      if (!success) {
+        addingModbusDeviceFail(JSON.stringify(problem || data));
+        return;
+      }
+      setSensorId(data.id);
+    },
+    [chipId, addingModbusDeviceFail, qrData, stationId, unitId]
+  );
+
+  return (
+    <ConnectingDevice
+      title={t('connecting_modbus_device')}
+      initState={t('connecting_to_gateway')}
+      onReady={onReady}
+      fail={addingModbusDeviceFail}
+      unitId={unitId}
+      stationId={stationId}
+      chipId={chipId}
+      sensorId={sensorId}
+    />
+  );
+};
+export default ConnectingModbusDevice;

package/src/screens/AddNewGateway/ConnectingWifiDevice.js

@@ -0,0 +1,70 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useState } from 'react';
+import { Alert } from 'react-native';
+import API from '../../configs/API';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { axiosPost } from '../../utils/Apis/axios';
+import ConnectingDevice from './ConnectingDevice';
+
+const ConnectingWifiDevice = ({ route }) => {
+  const t = useTranslations();
+  const { unitId, stationId, gateway, selectedWifi } = route?.params || {};
+  const [chipId, setChipId] = useState(null);
+  const { goBack } = useNavigation();
+
+  const addingWifiDeviceFail = useCallback(
+    (message) => {
+      Alert.alert(t('fail_add_wifi_device'), message, [
+        {
+          text: t('ok'),
+          onPress: goBack,
+        },
+      ]);
+    },
+    [goBack, t]
+  );
+
+  const onReady = useCallback(
+    async (channelName) => {
+      const { success, problem, data } = await axiosPost(
+        API.UNIT.CHIP_SCAN(unitId),
+        {
+          imei: gateway?.imei,
+          qr_code: gateway?.imei, // Todo Bang remove after backend deploy
+          name: gateway?.model,
+          station: stationId,
+          wifi_ssid: selectedWifi.ssid, // for storing
+          wifi_pass: selectedWifi.password, // for storing
+          channel_name: channelName,
+        }
+      );
+
+      if (!success) {
+        addingWifiDeviceFail(JSON.stringify(problem || data));
+        return;
+      }
+      setChipId(data.id);
+    },
+    [
+      gateway,
+      addingWifiDeviceFail,
+      unitId,
+      stationId,
+      selectedWifi.ssid,
+      selectedWifi.password,
+    ]
+  );
+
+  return (
+    <ConnectingDevice
+      title={t('connecting_wifi_device')}
+      fail={addingWifiDeviceFail}
+      initState={t('connecting_to_device')}
+      onReady={onReady}
+      unitId={unitId}
+      stationId={stationId}
+      chipId={chipId}
+    />
+  );
+};
+export default ConnectingWifiDevice;

package/src/screens/AddNewGateway/ConnectingZigbeeDevice.js

@@ -0,0 +1,60 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useState } from 'react';
+import { Alert } from 'react-native';
+import API from '../../configs/API';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { axiosPost } from '../../utils/Apis/axios';
+import ConnectingDevice from './ConnectingDevice';
+
+const ConnectingZigbeeDevice = ({ route }) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  const { unitId, stationId, chipId } = route?.params || {};
+  const [sensorId, setSensorId] = useState(null);
+
+  const fail = useCallback(
+    (message) => {
+      Alert.alert(t('fail_add_zigbee_device'), message, [
+        {
+          text: t('ok'),
+          onPress: () => goBack(),
+        },
+      ]);
+    },
+    [goBack, t]
+  );
+
+  const onReady = useCallback(
+    async (channelName) => {
+      const { success, problem, data } = axiosPost(
+        API.CHIP.SEARCH_DEVICE(chipId),
+        {
+          channel_name: channelName,
+          station: stationId,
+          unit: unitId,
+        }
+      );
+      if (!success) {
+        fail(JSON.stringify(problem || data));
+        return;
+      }
+      setSensorId(data.id);
+    },
+    [chipId, fail, stationId, unitId]
+  );
+
+  return (
+    <ConnectingDevice
+      title={t('connecting_zigbee_device')}
+      fail={fail}
+      initState={t('connecting_to_gateway')}
+      onReady={onReady}
+      unitId={unitId}
+      stationId={stationId}
+      chipId={chipId}
+      sensorId={sensorId}
+    />
+  );
+};
+
+export default ConnectingZigbeeDevice;

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

@@ -7,19 +7,29 @@ import WifiGateway from '../../../../assets/images/wifi-gateway.svg';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { ViewButtonBottom } from '../../../commons';
 import { Colors } from '../../../configs';
+import accessibilityLabel from '../../../configs/AccessibilityLabel';
 
 const FirstWarning = memo(({ route }) => {
-  const { unit_id, unit_name } = route.params;
+  const { unitId, unitName, stationId } = route?.params || {};
   const t = useTranslations();
   const { goBack, navigate } = useNavigation();
 
   const onRight = useCallback(() => {
-    navigate(Routes.ScanChipQR, {
-      unit_id: unit_id,
-      unit_name: unit_name,
-      isNewFlow: true,
-    });
-  }, [navigate, unit_name, unit_id]);
+    if (!unitId) {
+      navigate(Routes.SelectDeviceUnit);
+    } else if (!stationId) {
+      navigate(Routes.SelectDeviceSubUnit, {
+        unitId,
+        unitName,
+      });
+    } else {
+      navigate(Routes.SelectDeviceType, {
+        unitId,
+        unitName,
+        stationId,
+      });
+    }
+  }, [unitId, stationId, navigate, unitName]);
 
   return (
     <View style={styles.screen}>
@@ -29,7 +39,10 @@ const FirstWarning = memo(({ route }) => {
           {t('warning_beta_test_feature')}
         </Text>
         <WifiGateway />
-        <View style={styles.content}>
+        <View
+          style={styles.content}
+          accessibilityLabel={accessibilityLabel.ADD_DEVICE_FIRST_WARNING}
+        >
           <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>

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

@@ -7,6 +7,7 @@ import { getTranslate } from '../../../../utils/I18n';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import { ViewButtonBottom } from '../../../../commons';
+import Routes from '../../../../utils/Route';
 
 const mockedGoBack = jest.fn();
 const mockedNavigate = jest.fn();
@@ -29,11 +30,14 @@ const wrapComponent = (route) => (
 
 describe('Test FirstWarning', () => {
   let tree;
-  let route = { params: { unit_id: 1 } };
+
+  beforeEach(async () => {
+    mockedNavigate.mockClear();
+  });
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(wrapComponent(route));
+      tree = await create(wrapComponent({ params: {} }));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
@@ -46,9 +50,9 @@ describe('Test FirstWarning', () => {
     );
   });
 
-  test('test ViewButtonBottom onRightClick', async () => {
+  const rightClick = async (params) => {
     await act(async () => {
-      tree = renderer.create(wrapComponent(route));
+      tree = renderer.create(wrapComponent({ params }));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -56,5 +60,20 @@ describe('Test FirstWarning', () => {
       viewButtonBottom.props.onRightClick();
     });
     expect(mockedNavigate).toHaveBeenCalled();
+  };
+
+  test('test ViewButtonBottom onRightClick from dashboard', async () => {
+    await rightClick({});
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectDeviceUnit);
+  });
+
+  test('test ViewButtonBottom onRightClick from unit', async () => {
+    await rightClick({ unitId: 1 });
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectDeviceSubUnit);
+  });
+
+  test('test ViewButtonBottom onRightClick from sub-unit', async () => {
+    await rightClick({ unitId: 1, stationId: 1 });
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectDeviceType);
   });
 });

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -0,0 +1,141 @@
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+import { Colors } from '../../configs';
+import Text from '../../commons/Text';
+import AddDeviceIcon from '../../../assets/images/Popover/Dashboard/AddDevice.svg';
+import _TextInput from '../../commons/Form/TextInput';
+import { useNavigation } from '@react-navigation/native';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import Routes from '../../utils/Route';
+import styles from './RenameNewDevicesStyles';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import API from '../../configs/API';
+
+const RenameNewDevices = memo(({ route }) => {
+  const t = useTranslations();
+  const navigation = useNavigation();
+
+  const { unitId, stationId, chipId, sensorId } = route?.params || {};
+
+  const [info, setInfo] = useState({});
+
+  const onPressDone = useCallback(async () => {
+    await axiosPost(API.CHIP.RENAME_DEVICES(info.id), info);
+    navigation.navigate(Routes.UnitStack, {
+      screen: Routes.UnitDetail,
+      params: {
+        unitId: unitId,
+        routeName: 'DashboardStack',
+        stationId: stationId,
+      },
+    });
+  }, [info, navigation, stationId, unitId]);
+
+  useEffect(() => {
+    (async () => {
+      const { success, data } = await axiosGet(API.CHIP.RENAME_DEVICES(chipId));
+      if (success) {
+        setInfo(data);
+      }
+    })();
+  }, [chipId, sensorId]);
+
+  const updateItemName = (type, sensor_index, end_device_index) => (value) => {
+    setInfo((currentInfo) => {
+      if (type === 'chip') {
+        return { ...currentInfo, name: value };
+      }
+      if (type === 'sensor') {
+        currentInfo.sensors[sensor_index] = {
+          ...currentInfo.sensors[sensor_index],
+          name: value,
+        };
+        return { ...currentInfo };
+      }
+      if (type === 'end_device') {
+        currentInfo.sensors[sensor_index].end_devices[end_device_index] = {
+          ...currentInfo.sensors[sensor_index].end_devices[end_device_index],
+          name: value,
+        };
+        currentInfo.sensors[sensor_index] = {
+          ...currentInfo.sensors[sensor_index],
+        };
+        return { ...currentInfo };
+      }
+    });
+  };
+
+  const renameLabel = AccessibilityLabel.CONNECTED_DEVICE_RENAME_DEVICE;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <IconOutline name="check-circle" size={28} color={Colors.Green6} />
+        <Text semibold color={Colors.Black} size={20} style={styles.textStatus}>
+          {t('successfully_connected')}
+        </Text>
+        {info.can_rename ? (
+          <_TextInput
+            accessibilityLabel={`${renameLabel}-chip`}
+            value={info.name}
+            textInputStyle={styles.textItem}
+            onChange={updateItemName('chip')}
+          />
+        ) : (
+          <Text
+            size={14}
+            color={Colors.Gray9}
+            style={styles.textStation}
+            accessibilityLabel={`${renameLabel}-chip-name`}
+          >
+            {info.name}
+          </Text>
+        )}
+        {info.sensors?.length &&
+          info.sensors.map((sensor, sensor_index) => (
+            <>
+              <View style={styles.device} key={`${sensor.id}`}>
+                <AddDeviceIcon width={43} height={43} />
+                <_TextInput
+                  accessibilityLabel={`${renameLabel}-sensor-${sensor.id}`}
+                  value={sensor.name}
+                  textInputStyle={styles.textItem}
+                  onChange={updateItemName('sensor', sensor_index)}
+                />
+              </View>
+              {sensor.end_devices?.length &&
+                sensor.end_devices.map((end_device, end_device_index) => (
+                  <View style={styles.device} key={`${end_device.id}`}>
+                    <AddDeviceIcon width={43} height={43} />
+                    <_TextInput
+                      accessibilityLabel={`${renameLabel}-end_device-${end_device.id}`}
+                      value={end_device.name}
+                      textInputStyle={styles.textItem}
+                      onChange={updateItemName(
+                        'end_device',
+                        sensor_index,
+                        end_device_index
+                      )}
+                    />
+                  </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 RenameNewDevices;

package/src/screens/AddNewGateway/RenameNewDevicesStyles.js

@@ -0,0 +1,75 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.Gray19,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  boxDevice: {
+    padding: 16,
+    borderWidth: 1,
+    borderRadius: 10,
+    borderColor: Colors.Gray4,
+    backgroundColor: Colors.White,
+    alignItems: 'center',
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 8,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 12,
+    elevation: 2,
+  },
+  device: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  content: {
+    flex: 1,
+    backgroundColor: Colors.Gray19,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnDone: {
+    height: 48,
+    width: '100%',
+    alignItems: 'center',
+  },
+  textStatus: {
+    lineHeight: 28,
+    marginTop: 8,
+    marginBottom: 16,
+  },
+  textStation: {
+    lineHeight: 22,
+    marginBottom: 8,
+  },
+  textDeviceName: {
+    marginLeft: 8,
+  },
+  textRename: {
+    marginTop: 16,
+  },
+  textInput: {
+    marginTop: 0,
+  },
+  roomName: {
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Primary,
+    paddingLeft: 0,
+    fontSize: 16,
+    lineHeight: 24,
+    margin: 0,
+    padding: 0,
+  },
+  wrapRename: {
+    marginHorizontal: 16,
+  },
+});
+
+export default styles;

package/src/screens/AddNewGateway/ScanGatewayQR.js

@@ -0,0 +1,57 @@
+import React, { memo, useCallback } from 'react';
+import { View, StyleSheet } from 'react-native';
+import QRScan from '../ScanChipQR/components/QRScan';
+import Routes from '../../utils/Route';
+import { ToastBottomHelper } from '../../utils/Utils';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useNavigation } from '@react-navigation/native';
+
+const ScanGatewayQR = memo(({ route }) => {
+  // same as Scan Wifi Device, not sure if we should separated it
+  const t = useTranslations();
+  const { unitId, stationId } = route?.params || {};
+  const navigation = useNavigation();
+
+  const onScan = useCallback(
+    (body, setLoading) => {
+      let data;
+      try {
+        data = JSON.parse(body);
+      } catch (e) {
+        ToastBottomHelper.error(t('wrong_qr_format'));
+        setLoading(false);
+        return;
+      }
+      const devicePrefixName = data?.imei?.split('-')[0];
+
+      // todo Bang change QR format
+      if (['LITE'].indexOf(devicePrefixName) === -1) {
+        ToastBottomHelper.error(t('wrong_qr_format'));
+        setLoading(false);
+        return;
+      }
+      navigation.navigate(Routes.ShareWifiPassword, {
+        unitId,
+        stationId,
+        prefix: devicePrefixName,
+        qrData: data,
+      });
+      setLoading(true);
+    },
+    [navigation, unitId, stationId, t]
+  );
+
+  return (
+    <View style={styles.container}>
+      <QRScan onScan={onScan} />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default ScanGatewayQR;