Merge pull request #15 from RichardRNStudio/feat/add-advanced-example

feat(#14): finish the refactor
RichardRNStudio · Apr 14, 2024 · 773f82f · 773f82f
2 parents 4917a46 + 4188ebb
commit 773f82f
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 103 deletions.
diff --git a/README.md b/README.md
@@ -52,18 +52,18 @@ const scanner = new PortScanner({
     onDeviceFound: (device) => {
       console.log('Found device!', device);
     },
-    onResults: (devices) => {
-      console.log('Finished scanning', devices);
+    onFinish: (devices) => {
+      console.log('Finished , devices:', devices);
     },
     onCheck: (device) => {
       console.log('Checking IP: ', device.ipAddress);
     },
-    onFinished: () => {
-      console.log('Done!');
+    onNoDevices: () => {
+      console.log('Finished scanning, no results have been found!');
     },
-    onError: (device) => {
+    onError: (error) => {
       // Called when no service found
-      console.log('Nothing found', device);
+      console.log('Error', error);
     },
   });
 
@@ -80,11 +80,11 @@ const scanner = new PortScanner({
 | Name                         | Type     | Default value                         | Description                                                                                  |
 | ---------------------------- | -------- | ------------------------------------- | -------------------------------------------------------------------------------------------- |
 | `ports`                      | number[] | none, required                        | Array of port numbers.                                                                       |
-| `timeout`                    | number   | 40                                    | Timeout in milisecondum to skip a specific device when it does not respond.                  |
+| `timeout`                    | number   | 40                                    | Timeout in millisecond to skip a specific device when it does not respond.                  |
 | `onDeviceFound`              | function | none                                  | Callback function to handle moment when a new device has been found.                         |
-| `onResults`                  | function | none                                  | Callback function to get all of devices which have been found during the progress.           |
+| `onFinish`                   | function | none                                  | Callback function to get all of devices which have been found during the progress.                                   |
 | `onCheck`                    | function | none                                  | Callback function to responds the currently checked device's parameters.                     |
-| `onFinished`                 | function | none                                  | Callback function to notify, scanning has been finished.                                     |
+| `onNoDevices`                | function | none                                  | Callback function to notify, scanning has been finished, no results have been found.              |
 | `onError`                    | function | none                                  | Callback function to responds any errors during the scanning.                                |
 
 <h2>Contributing</h2>

diff --git a/android/src/main/java/com/reactnativefindlocaldevices/FindLocalDevicesModule.java b/android/src/main/java/com/reactnativefindlocaldevices/FindLocalDevicesModule.java
@@ -88,7 +88,7 @@ protected ArrayList<Device> doInBackground(Void... params) {
       WifiInfo mWifiInfo = mWifiManager.getConnectionInfo();
       String subnet = getSubnetAddress(mWifiManager.getDhcpInfo().gateway);
       for(int j=0; j<this.Ports.size(); j++) {
-        for (int i=1; i<255; i++) {
+        for (int i=1; i<=255; i++) {
           if(isCancelled()) break;
           String host = subnet + "." + i;
           Device device = new Device(host, this.Ports.getInt(j));

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Button, StyleSheet, View } from 'react-native';
-import PortScanner from 'react-native-find-local-devices';
+import React, { useEffect, useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import PortScanner, { type IDevice } from 'react-native-find-local-devices';
 
 const styles = StyleSheet.create({
   container: {
@@ -9,63 +9,113 @@ const styles = StyleSheet.create({
     height: '100%',
     maxHeight: '100%',
     minHeight: '100%',
+    marginTop: 10,
   },
-  actionContainer: {
-    marginTop: 20,
-    flex: 1,
-    justifyContent: 'center',
-    height: '30%',
-    minHeight: '30%',
-    maxHeight: '30%',
-  },
-  checkingContainer: {
+  wrapper: {
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'space-around',
+    marginTop: 10,
+    minHeight: 20,
+  },
+  warning: {
+    textAlign: 'center',
+    color: 'red',
+    fontSize: 20,
+    marginBottom: 20,
   },
 });
 
 export default function App() {
-  const scanner = new PortScanner({
-    timeout: 40,
-    ports: [50001],
-    onDeviceFound: (device) => {
-      console.log('Found device!', device);
-    },
-    onResults: (devices) => {
-      console.log('Finished scanning', devices);
-    },
-    onCheck: (device) => {
-      console.log('Checking IP: ', device.ipAddress, device.port);
-    },
-    onFinished: () => {
-      console.log('Done!');
-    },
-    onError: (device) => {
-      // Called when no service found
-      console.log('Nothing found', device);
-    },
-  });
+  const [deviceFound, setDeviceFound] = useState<IDevice[]>([]);
+  const [isFinished, setIsFinished] = useState<boolean>(false);
+  const [scanner, setScanner] = useState<PortScanner | null>(null);
+  const [checkedDevice, setCheckedDevice] = useState<IDevice | null>(null);
+
+  const init = () => {
+    setScanner(
+      new PortScanner({
+        timeout: 40,
+        ports: [50001],
+        onDeviceFound: (device) => {
+          console.log('Found device!', device);
+          setDeviceFound((prev) => [...prev, device]);
+        },
+        onFinish: (devices) => {
+          console.log('Finished scanning', devices);
+          setIsFinished(true);
+          setCheckedDevice(null);
+        },
+        onCheck: (device) => {
+          console.log('Checking IP: ', device.ipAddress, device.port);
+          setCheckedDevice(device);
+        },
+        onNoDevices: () => {
+          console.log('Done without results!');
+          setIsFinished(true);
+          setCheckedDevice(null);
+        },
+        onError: (error) => {
+          // Handle error messages for each socket connection
+          console.log('Error', error);
+        },
+      })
+    );
+  };
+
+  useEffect(() => {
+    init();
+  }, []);
 
   const start = () => {
-    scanner.start();
+    console.log('init');
+    scanner?.start();
   };
 
   const stop = () => {
-    scanner.stop();
+    scanner?.stop();
+    setCheckedDevice(null);
+    setIsFinished(false);
+    setDeviceFound([]);
+    setScanner(null);
+    init();
   };
 
   return (
     <View style={styles.container}>
-      <View style={styles.actionContainer}>
-        <View style={styles.checkingContainer}>
+      <Text style={styles.warning}>Wi-Fi connection is required!</Text>
+      {!checkedDevice && (
+        <View style={styles.wrapper}>
           <Button title="Discover devices" color="steelblue" onPress={start} />
         </View>
-        <View style={styles.checkingContainer}>
+      )}
+      {checkedDevice && (
+        <View style={styles.wrapper}>
+          <Text>
+            Under checking: {checkedDevice.ipAddress}:{checkedDevice.port}
+          </Text>
+        </View>
+      )}
+      {deviceFound.length > 0 && (
+        <View style={styles.wrapper}>
+          {deviceFound.map((device) => (
+            <Text key={device.ipAddress}>
+              New device found: {device.ipAddress}:{device.port}
+            </Text>
+          ))}
+        </View>
+      )}
+      {isFinished && (
+        <View style={styles.wrapper}>
+          <Text>Finished scanning!</Text>
+        </View>
+      )}
+      {checkedDevice && (
+        <View style={styles.wrapper}>
           <Button title="Cancel discovering" color="red" onPress={stop} />
         </View>
-      </View>
+      )}
     </View>
   );
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -7,17 +7,66 @@ class PortScanner {
   _listeners: Array<any> = [];
   readonly ports: number[] = [];
   readonly timeout: number = 40;
+  readonly onDeviceFound: (device: IDevice) => void;
+  readonly onFinish: (devices: IDevice[]) => void;
+  readonly onCheck: (device: IDevice) => void;
+  readonly onNoDevices: () => void;
+  readonly onError: (error: string) => void;
 
   static cancelDiscovering: () => void = FindLocalDevices.cancelDiscovering;
   static getLocalDevices: () => void = FindLocalDevices.getLocalDevices;
 
+  init = () => {
+    this._listeners.push(
+      DeviceEventEmitter.addListener(
+        'FLD_NEW_DEVICE_FOUND',
+        (device: IDevice) => {
+          // This listener will be activated at the moment when the device has been found.
+          // FORMAT: {ipAddress: "192.168.1.66", port: 70}
+          this.onDeviceFound(device);
+        }
+      )
+    );
+
+    this._listeners.push(
+      DeviceEventEmitter.addListener('FLD_RESULTS', (devices) => {
+        // ALL OF RESULTS when discovering has been finished.
+        // FORMAT: [{ipAddress: "192.168.1.66", port: 70}, {ipAddress: "192.168.1.69", port: 85}]
+        this.onFinish(devices);
+      })
+    );
+
+    this._listeners.push(
+      DeviceEventEmitter.addListener('FLD_CHECK', (device) => {
+        // This listener will be activated in that moment when package checking a device.
+        // FORMAT: {ipAddress: "192.168.1.65", port: 70}
+        this.onCheck(device);
+      })
+    );
+
+    this._listeners.push(
+      DeviceEventEmitter.addListener('FLD_NO_DEVICES', () => {
+        // This listener will be activated at the end of discovering.
+        this._listeners.forEach((l) => l.remove());
+        this.onNoDevices();
+      })
+    );
+
+    this._listeners.push(
+      DeviceEventEmitter.addListener('FLD_CONNECTION_ERROR', (error) => {
+        // Handle error messages for each socket connection
+        this.onError(error);
+      })
+    );
+  };
+
   constructor({
     ports = [],
     timeout = 40,
     onDeviceFound,
-    onResults,
+    onFinish,
     onCheck,
-    onFinished,
+    onNoDevices,
     onError,
   }: IPortScanner) {
     this._listeners = [];
@@ -28,59 +77,15 @@ class PortScanner {
 
     this.ports = ports;
     this.timeout = timeout;
-
-    if (onDeviceFound) {
-      this._listeners.push(
-        DeviceEventEmitter.addListener(
-          'FLD_NEW_DEVICE_FOUND',
-          (device: IDevice) => {
-            // This listener will be activated at the moment when the device has been found.
-            // FORMAT: {ipAddress: "192.168.1.66", port: 70}
-            onDeviceFound(device);
-          }
-        )
-      );
-    }
-
-    if (onResults) {
-      this._listeners.push(
-        DeviceEventEmitter.addListener('FLD_RESULTS', (devices) => {
-          // ALL OF RESULTS when discovering has been finished.
-          // FORMAT: [{ipAddress: "192.168.1.66", port: 70}, {ipAddress: "192.168.1.69", port: 85}]
-          onResults(devices);
-        })
-      );
-    }
-
-    if (onCheck) {
-      this._listeners.push(
-        DeviceEventEmitter.addListener('FLD_CHECK', (device) => {
-          // This listener will be activated in that moment when package checking a device.
-          // FORMAT: {ipAddress: "192.168.1.65", port: 70}
-          onCheck(device);
-        })
-      );
-    }
-
-    this._listeners.push(
-      DeviceEventEmitter.addListener('FLD_NO_DEVICES', () => {
-        // This listener will be activated at the end of discovering.
-        this._listeners.forEach((l) => l.remove());
-        if (onFinished) onFinished();
-      })
-    );
-
-    if (onError) {
-      this._listeners.push(
-        DeviceEventEmitter.addListener('FLD_CONNECTION_ERROR', (error) => {
-          // Handle error messages for each socket connection
-          onError(error);
-        })
-      );
-    }
+    this.onDeviceFound = onDeviceFound;
+    this.onFinish = onFinish;
+    this.onCheck = onCheck;
+    this.onNoDevices = onNoDevices;
+    this.onError = onError;
   }
 
   start = () => {
+    this.init();
     FindLocalDevices.getLocalDevices({
       ports: this.ports,
       timeout: this.timeout,

diff --git a/src/interfaces/IPortScanner.interface.tsx b/src/interfaces/IPortScanner.interface.tsx
@@ -6,8 +6,8 @@ export interface IPortScanner {
   ports: number[];
   timeout: number;
   onDeviceFound: DefaultPortScannerCallback;
-  onResults: (device: IDevice[]) => void;
+  onFinish: (device: IDevice[]) => void;
   onCheck: DefaultPortScannerCallback;
-  onFinished: () => void;
-  onError: DefaultPortScannerCallback;
+  onNoDevices: () => void;
+  onError: (error: string) => void;
 }