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

package/src/screens/AddNewGateway/ScanDeviceLocal.js

@@ -0,0 +1,267 @@
+import { useNavigation } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  FlatList,
+  TouchableOpacity,
+  ActivityIndicator,
+  View,
+} from 'react-native';
+import Zeroconf from 'react-native-zeroconf';
+import { v4 as uuidv4 } from 'uuid';
+
+import LanIcon from '../../../assets/images/lan.svg';
+import {
+  FullLoading,
+  RadioCircle,
+  ViewButtonBottom,
+  HeaderCustom,
+  Text,
+} from '../../commons';
+import { DEVICE_TYPE } from '../../configs/Constants';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import LoadingCircle from '../../Images/Common/loading-circle.json';
+import Routes from '../../utils/Route';
+import { ToastBottomHelper } from '../../utils/Utils';
+import { useConnectDevice } from './hooks/useConnectDevice';
+import { useGateway } from '../AllGateway/hooks/useGateway';
+import styles from './ScanDeviceLocalStyles';
+
+let zeroconf;
+
+const DeviceItem = ({ item, setSelectedDevice, selectedDevice }) => {
+  const handleSelectDevice = useCallback(
+    (device) => {
+      setSelectedDevice(device);
+    },
+    [setSelectedDevice]
+  );
+
+  return (
+    <TouchableOpacity
+      onPress={() => handleSelectDevice(item)}
+      accessibilityLabel={`${AccessibilityLabel.SELECT_DEVICE}-${item.host}`}
+    >
+      <View style={styles.listItem}>
+        <RadioCircle
+          active={selectedDevice?.host === item.host}
+          accessibilityLabel={`${AccessibilityLabel.SELECT_RADIO_DEVICE}-${item.host}`}
+        />
+        <View style={styles.textItem}>
+          <Text type="H4">{item.name}</Text>
+        </View>
+        <View style={styles.lanIcon}>
+          <LanIcon />
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const ScanDeviceLocal = ({ route }) => {
+  const { unit, subUnit } = route?.params || {};
+  const t = useTranslations();
+  const { navigate, goBack } = useNavigation();
+  const { detailChipQr, fetchChipQrDetail } = useGateway();
+
+  const [deviceList, setDeviceList] = useState([]);
+  const [selectedDevice, setSelectedDevice] = useState();
+  const [isShowLoading, setIsShowLoading] = useState(false);
+
+  const { deviceInfo, fetchDeviceInfo, sendConfigToDevice } = useConnectDevice(
+    selectedDevice?.host
+  );
+
+  const code = useMemo(() => {
+    return uuidv4();
+  }, []);
+
+  const rightDisabled = useMemo(() => {
+    if (!deviceInfo?.secret) {
+      return true;
+    }
+    return deviceInfo.secret !== detailChipQr?.secret;
+  }, [deviceInfo?.secret, detailChipQr?.secret]);
+
+  const goToConnectingDevice = useCallback(() => {
+    navigate(Routes.ConnectingWifiDevice, {
+      unit,
+      subUnit: subUnit,
+      addDeviceType: deviceInfo?.type,
+      qrData: detailChipQr,
+      gateway: deviceInfo,
+      code,
+    });
+  }, [deviceInfo, detailChipQr, code, navigate, subUnit, unit]);
+
+  const goToSelectSubUnit = useCallback(() => {
+    navigate(Routes.SelectDeviceSubUnit, {
+      unit,
+      deviceType: DEVICE_TYPE.SCAN_DEVICE,
+      qrData: detailChipQr,
+      gateway: deviceInfo,
+      code,
+    });
+  }, [deviceInfo, detailChipQr, code, navigate, unit]);
+
+  const onConnectingDevice = useCallback(async () => {
+    setIsShowLoading(true);
+    const success = await sendConfigToDevice({
+      token: code,
+      host: detailChipQr?.host,
+      port: detailChipQr?.port,
+    });
+    setIsShowLoading(false);
+    if (!success) {
+      ToastBottomHelper.error(t('error_sending_data_to_wifi_device'));
+      return;
+    }
+    if (!subUnit && deviceInfo?.type !== 'gateway') {
+      goToSelectSubUnit();
+      return;
+    }
+    goToConnectingDevice();
+  }, [
+    code,
+    subUnit,
+    deviceInfo?.type,
+    detailChipQr,
+    t,
+    sendConfigToDevice,
+    goToSelectSubUnit,
+    goToConnectingDevice,
+  ]);
+
+  const renderItem = useCallback(
+    ({ item }) => {
+      return (
+        <DeviceItem
+          item={item}
+          setSelectedDevice={setSelectedDevice}
+          selectedDevice={selectedDevice}
+        />
+      );
+    },
+    [selectedDevice, setSelectedDevice]
+  );
+
+  const handleGoBack = useCallback(() => {
+    if (zeroconf) {
+      zeroconf.stop();
+      zeroconf = null;
+    }
+    goBack();
+  }, [goBack]);
+
+  useEffect(() => {
+    try {
+      if (!zeroconf) {
+        zeroconf = new Zeroconf();
+      }
+
+      setDeviceList([]);
+
+      zeroconf.on('resolved', (service) => {
+        setDeviceList((prev) => {
+          const newList = [...prev];
+          const index = newList.findIndex(
+            (item) => item.host === service?.host
+          );
+          if (index === -1) {
+            newList.push(service);
+          }
+          return newList;
+        });
+      });
+
+      zeroconf.on('remove', (name) => {
+        setDeviceList((prev) => {
+          const newList = [...prev];
+          const index = newList.findIndex((item) => item.name === name);
+          if (index !== -1) {
+            newList.splice(index, 1);
+          }
+          return newList;
+        });
+      });
+
+      zeroconf.on('error', () => {
+        zeroconf.stop();
+        zeroconf.scan('plugandplay', 'tcp');
+      });
+
+      zeroconf.scan('plugandplay', 'tcp');
+      // eslint-disable-next-line no-empty
+    } catch (error) {}
+    return () => {
+      if (zeroconf) {
+        zeroconf.stop();
+        zeroconf = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (selectedDevice) {
+      fetchDeviceInfo();
+    }
+  }, [selectedDevice, fetchDeviceInfo]);
+
+  useEffect(() => {
+    if (deviceInfo) {
+      fetchChipQrDetail(deviceInfo?.secret);
+    }
+  }, [deviceInfo, fetchChipQrDetail]);
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom
+        onGoBack={handleGoBack}
+        title={t('device_scaned')}
+        isShowSeparator
+      />
+      {!deviceList.length ? (
+        <ActivityIndicator style={styles.containerLoading} />
+      ) : (
+        <>
+          <Text style={styles.subTitle} type="Body">
+            {t('select_device_and_connect')}
+          </Text>
+          <FlatList
+            style={styles.listContainer}
+            keyExtractor={(item) => item?.host}
+            data={deviceList}
+            renderItem={renderItem}
+            extraData={deviceList}
+            numColumns={1}
+          />
+        </>
+      )}
+
+      <ViewButtonBottom
+        leftTitle={t('cancel')}
+        onLeftClick={handleGoBack}
+        rightTitle={t('connect')}
+        rightDisabled={rightDisabled}
+        onRightClick={onConnectingDevice}
+        accessibilityLabelPrefix={AccessibilityLabel.PREFIX.SELECT_DEVICE}
+      />
+      {isShowLoading && (
+        <FullLoading
+          styleBackground={styles.backgroundLoading}
+          customIcon={
+            <LottieView
+              source={LoadingCircle}
+              autoPlay
+              loop
+              style={styles.loading}
+            />
+          }
+        />
+      )}
+    </View>
+  );
+};
+
+export default ScanDeviceLocal;

package/src/screens/AddNewGateway/ScanDeviceLocalStyles.js

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+  },
+  title: {
+    marginVertical: 16,
+    marginLeft: 16,
+  },
+  subTitle: {
+    fontSize: 14,
+    lineHeight: 22,
+    marginTop: 16,
+    marginLeft: 16,
+    marginBottom: 16,
+  },
+  listContainer: {
+    flex: 1,
+    borderWidth: 1,
+    backgroundColor: Colors.White,
+    borderRadius: 20,
+    borderColor: Colors.Gray4,
+  },
+  listItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 1,
+    paddingVertical: 16,
+    marginRight: 24,
+    marginLeft: 16,
+  },
+  textItem: {
+    flex: 1,
+    height: 'auto',
+    paddingLeft: 16,
+  },
+  lanIcon: {
+    paddingRight: 16,
+  },
+  loading: {
+    width: 40,
+    height: 40,
+  },
+  backgroundLoading: {
+    backgroundColor: Colors.Gray21,
+  },
+  containerLoading: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/screens/AddNewGateway/SelectDeviceSubUnit.js

@@ -6,7 +6,7 @@ import Routes from '../../utils/Route';
 import { DEVICE_TYPE } from '../../configs/Constants';
 
 const SelectDeviceSubUnit = ({ route }) => {
-  const { unit, deviceType } = route?.params || {};
+  const { unit, deviceType, ...rest } = route?.params || {};
   const t = useTranslations();
   const navigation = useNavigation();
   const onPressNext = useCallback(
@@ -30,9 +30,17 @@ const SelectDeviceSubUnit = ({ route }) => {
             subUnit: chosenSubUnit,
           });
           break;
+        case DEVICE_TYPE.SCAN_DEVICE:
+          navigation.navigate(Routes.ConnectingWifiDevice, {
+            unit,
+            subUnit: chosenSubUnit,
+            deviceType,
+            ...rest,
+          });
+          break;
       }
     },
-    [deviceType, navigation, unit]
+    [deviceType, navigation, unit, rest]
   );
   return (
     <SelectSubUnit

package/src/screens/AddNewGateway/SelectDeviceType.js

@@ -11,6 +11,7 @@ import AddGatewayIcon from '../../../assets/images/AddNewDevice/add-gateway-icon
 import AddWifiDeviceIcon from '../../../assets/images/AddNewDevice/add-wifi-device-icon.svg';
 import AddModbusDeviceIcon from '../../../assets/images/AddNewDevice/add-modbus-device-icon.svg';
 import AddZigbeeDeviceIcon from '../../../assets/images/AddNewDevice/add-zigbee-device-icon.svg';
+import AddScanDeviceIcon from '../../../assets/images/AddNewDevice/add-scan-device-icon.svg';
 import styles from './SelectDeviceTypeStyles';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import { DEVICE_TYPE } from '../../configs/Constants';
@@ -62,6 +63,7 @@ const getPermissionCode = (deviceType) => {
     case 'gateway_qr':
       return 'plug_and_play_gateway';
     case 'wifi_device_qr':
+    case 'scan_device':
       return 'plug_and_play_wifi';
     case 'modbus_device_qr':
       return 'plug_and_play_modbus';
@@ -132,6 +134,17 @@ const SelectDeviceType = ({ route }) => {
         title: t('zigbee'),
         subtitle: t('device_connect_remotely_to_the_gateway'),
       },
+      {
+        id: 'scan_device',
+        image: <AddScanDeviceIcon width={60} height={60} />,
+        route: Routes.ScanDeviceLocal,
+        data: {
+          unit,
+          subUnit,
+        },
+        title: t('scan'),
+        subtitle: t('device_connected_to_local_network'),
+      },
     ];
     if (subUnit?.id) {
       list.shift();
@@ -154,7 +167,7 @@ const SelectDeviceType = ({ route }) => {
       return false;
     }
 
-    if (['gateway_qr', 'wifi_device_qr'].includes(itemSelect)) {
+    if (['gateway_qr', 'wifi_device_qr', 'scan_device'].includes(itemSelect)) {
       if (permissions?.max_chips_per_unit <= unitCountSummary?.total_chips) {
         ToastBottomHelper.error(
           t('reach_max_chips_per_unit', {
@@ -167,7 +180,11 @@ const SelectDeviceType = ({ route }) => {
       }
     }
 
-    if (['wifi_device_qr', 'modbus_device_qr', 'zigbee'].includes(itemSelect)) {
+    if (
+      ['wifi_device_qr', 'scan_device', 'modbus_device_qr', 'zigbee'].includes(
+        itemSelect
+      )
+    ) {
       if (
         permissions?.max_configs_per_unit <= unitCountSummary?.total_configs
       ) {