From 57544bb0b8b2008ebb46c3c92a7b90eadedccc16 Mon Sep 17 00:00:00 2001
From: Tejas Gajjar <gajjartejas26@gmail.com>
Date: Mon, 30 Oct 2023 22:52:07 +0530
Subject: [PATCH] feat: example updated (#22)

---
 example/App.tsx           | 78 +++++++++++++++------------------------
 example/package-lock.json | 11 +++---
 example/package.json      |  2 +-
 3 files changed, 35 insertions(+), 56 deletions(-)

diff --git a/example/App.tsx b/example/App.tsx
index 506d590..2e0468f 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -1,4 +1,4 @@
-import React, {useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {
   SafeAreaView,
   ScrollView,
@@ -6,14 +6,12 @@ import {
   StyleSheet,
   Text,
   TextInput,
-  useColorScheme,
   View,
   TouchableOpacity,
 } from 'react-native';
 
-import {Colors} from 'react-native/Libraries/NewAppScreen';
 import LanPortScanner, {
-  LSConfig,
+  LSScanConfig,
   LSSingleScanResult,
 } from 'react-native-lan-port-scanner';
 
@@ -21,60 +19,43 @@ const Section: React.FC<{
   title: string;
   children: any;
 }> = ({children, title}) => {
-  const isDarkMode = useColorScheme() === 'dark';
   return (
     <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
+      <Text style={[styles.sectionTitle]}>{title}</Text>
+      <Text style={[styles.sectionDescription]}>{children}</Text>
     </View>
   );
 };
 
+const validateIPAddresses = (ipaddress: string): boolean => {
+  return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+    ipaddress,
+  );
+};
+
+const backgroundStyle = {
+  backgroundColor: 'white',
+  flex: 1,
+};
+
 const App = () => {
-  const isDarkMode = useColorScheme() === 'dark';
   const resultsRef = useRef<LSSingleScanResult[]>([]);
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-    flex: 1,
-  };
-
   const [ipAddress, setIPAddress] = useState('');
   const [subnetMask, setSubnetMask] = useState('');
   const [ports, setPorts] = useState('80, 443, 21, 22, 110, 995, 143, 993');
   const [progress, setProgress] = useState('');
   const [resultItems, setResultItems] = useState<LSSingleScanResult[]>([]);
 
-  const validateIPAddresses = (ipaddress: string): boolean => {
-    return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
-      ipaddress,
-    );
-  };
-
-  const getInfo = async () => {
-    //Returns `LSNetworkInfo`
-    const networkInfo = await LanPortScanner.getNetworkInfo();
+  useEffect(() => {
+    (async () => {
+      const networkInfo = await LanPortScanner.getNetworkInfo();
 
-    //Set values
-    setIPAddress(networkInfo.ipAddress);
-    setSubnetMask(networkInfo.subnetMask);
-  };
+      //Set values
+      setIPAddress(networkInfo.ipAddress);
+      setSubnetMask(networkInfo.subnetMask);
+    })();
+  }, []);
 
   const resetScan = () => {
     resultsRef.current = [];
@@ -117,8 +98,10 @@ const App = () => {
       subnetMask: subnetMask,
     };
 
-    let config: LSConfig = {
+    //Either provide networkInfo or ipRange
+    let config: LSScanConfig = {
       networkInfo: networkInfo,
+      //ipRange: ['192.168.1.1'],
       ports: portArray, //Specify port here
       timeout: 1000, //Timeout for each thread in ms
       threads: 150, //Number of threads
@@ -138,14 +121,14 @@ const App = () => {
       },
       results => {
         console.log(results); // This will call after scan end.
-        setProgress('');
+        setProgress('Finished!');
       },
     );
   };
 
   return (
     <SafeAreaView style={backgroundStyle}>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+      <StatusBar barStyle={'dark-content'} />
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         style={backgroundStyle}>
@@ -170,16 +153,13 @@ const App = () => {
             value={ports}
             style={styles.textinput}
           />
-          <TouchableOpacity style={styles.button} onPress={getInfo}>
-            <Text style={styles.buttonText}>{'Get Info'}</Text>
-          </TouchableOpacity>
 
           <TouchableOpacity style={styles.button} onPress={startScan}>
             <Text style={styles.buttonText}>{'Start Scan'}</Text>
           </TouchableOpacity>
 
           {!!progress && (
-            <Text style={styles.progress}>{`Prgoress: ${progress}`}</Text>
+            <Text style={styles.progress}>{`Progress: ${progress}`}</Text>
           )}
 
           {resultItems.map(item => {
diff --git a/example/package-lock.json b/example/package-lock.json
index 2cb9b28..20bc3e2 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "react": "18.2.0",
         "react-native": "0.72.6",
-        "react-native-lan-port-scanner": "^1.2.0",
+        "react-native-lan-port-scanner": "github:gajjartejas/react-native-lan-port-scanner",
         "react-native-tcp": "github:gajjartejas/react-native-tcp"
       },
       "devDependencies": {
@@ -11756,8 +11756,8 @@
     },
     "node_modules/react-native-lan-port-scanner": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/react-native-lan-port-scanner/-/react-native-lan-port-scanner-1.2.0.tgz",
-      "integrity": "sha512-iawDPPKfRwb9q9rfkIMkDApL18cUgvuDcimbXfpTCLFwSa9VzrZN8ix9xRJX/Rcnfc8HOSy8l9cJrIDL7Y+C3A==",
+      "resolved": "git+ssh://git@github.com/gajjartejas/react-native-lan-port-scanner.git#420a3c8c6676623ff40eef61430421895f5a9161",
+      "license": "MIT",
       "dependencies": {
         "ipaddr.js": "^2.0.1",
         "shift8-ip-func": "^1.0.4",
@@ -22139,9 +22139,8 @@
       }
     },
     "react-native-lan-port-scanner": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/react-native-lan-port-scanner/-/react-native-lan-port-scanner-1.2.0.tgz",
-      "integrity": "sha512-iawDPPKfRwb9q9rfkIMkDApL18cUgvuDcimbXfpTCLFwSa9VzrZN8ix9xRJX/Rcnfc8HOSy8l9cJrIDL7Y+C3A==",
+      "version": "git+ssh://git@github.com/gajjartejas/react-native-lan-port-scanner.git#420a3c8c6676623ff40eef61430421895f5a9161",
+      "from": "react-native-lan-port-scanner@github:gajjartejas/react-native-lan-port-scanner",
       "requires": {
         "ipaddr.js": "^2.0.1",
         "shift8-ip-func": "^1.0.4",
diff --git a/example/package.json b/example/package.json
index 376a3ff..fae9a3c 100644
--- a/example/package.json
+++ b/example/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "18.2.0",
     "react-native": "0.72.6",
-    "react-native-lan-port-scanner": "^1.2.0",
+    "react-native-lan-port-scanner": "github:gajjartejas/react-native-lan-port-scanner",
     "react-native-tcp": "github:gajjartejas/react-native-tcp"
   },
   "devDependencies": {