Reorgainsed and cleaned code, Redid the comments

%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver

@@ -0,0 +1 @@
+1217.2403.25012.1

package-lock.json

@@ -8,6 +8,7 @@
       "name": "safeqr",
       "version": "1.0.0",
       "dependencies": {
+        "@expo/metro-runtime": "~3.2.1",
         "@expo/vector-icons": "^14.0.2",
         "@react-navigation/bottom-tabs": "^6.5.20",
         "@react-navigation/native": "^6.1.17",
@@ -16,10 +17,13 @@
         "expo-camera": "~15.0.10",
         "expo-image-picker": "~15.0.5",
         "expo-status-bar": "~1.12.1",
+        "jsqr": "^1.4.0",
         "react": "18.2.0",
+        "react-dom": "18.2.0",
         "react-native": "0.74.2",
         "react-native-safe-area-context": "^4.10.4",
-        "react-native-screens": "^3.31.1"
+        "react-native-screens": "^3.31.1",
+        "react-native-web": "~0.19.10"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
@@ -2891,6 +2895,14 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@expo/metro-runtime": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@expo/metro-runtime/-/metro-runtime-3.2.1.tgz",
+      "integrity": "sha512-L7xNo5SmK+rcuXDm/+VBBImpA7FZsVB+m/rNr3fNl5or+1+yrZe99ViF7LZ8DOoVqAqcb4aCAXvGrP2JNYo1/Q==",
+      "peerDependencies": {
+        "react-native": "*"
+      }
+    },
     "node_modules/@expo/osascript": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@expo/osascript/-/osascript-2.1.3.tgz",
@@ -6834,6 +6846,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -7730,6 +7750,11 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+    },
     "node_modules/fast-xml-parser": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.0.tgz",
@@ -8415,6 +8440,11 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.5.tgz",
+      "integrity": "sha512-fedL7PRwmeVkgyhu9hLeTBaI6wcGk7JGJswdaRsa5aUbkXI1kr1xZwTPBtaYPpwf56878iDek6VbVnuWMebJmw=="
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -8512,6 +8542,15 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz",
+      "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0",
+        "fast-loops": "^1.1.3"
+      }
+    },
     "node_modules/internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -9560,6 +9599,11 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -11452,6 +11496,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -11757,6 +11806,26 @@
         }
       }
     },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/react-dom/node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/react-freeze": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
@@ -11854,6 +11923,30 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-web": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.12.tgz",
+      "integrity": "sha512-o2T0oztoVDQjztt4YksO9S1XRjoH/AqcSvifgWLrPJgGVbMWsfhILgl6lfUdEamVZzZSVV/2gqDVMAk/qq7mZw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.6",
+        "@react-native/normalize-colors": "^0.74.1",
+        "fbjs": "^3.0.4",
+        "inline-style-prefixer": "^6.0.1",
+        "memoize-one": "^6.0.0",
+        "nullthrows": "^1.1.1",
+        "postcss-value-parser": "^4.2.0",
+        "styleq": "^0.1.3"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/react-native-web/node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/react-native/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -12883,6 +12976,11 @@
       "resolved": "https://registry.npmjs.org/structured-headers/-/structured-headers-0.4.1.tgz",
       "integrity": "sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg=="
     },
+    "node_modules/styleq": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/styleq/-/styleq-0.1.3.tgz",
+      "integrity": "sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA=="
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",

package.json

@@ -19,8 +19,7 @@
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-native": "0.74.2",
-    "react-native-safe-area-context": "^4.10.4",
+    "react-native-safe-area-context": "^4.10.4"
-    "react-native-screens": "^3.31.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

screens/QRScannerScreen.tsx

@@ -2,74 +2,32 @@ import React, { useState, useEffect, useContext } from 'react';
 import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { Camera, CameraView } from 'expo-camera';
 import { QRCodeContext } from '../types';
-import axios from 'axios';
+import axios from 'axios'; // For URL calls
-import { Ionicons } from '@expo/vector-icons';
+import { Ionicons } from '@expo/vector-icons'; // For icons
 import { useNavigation } from '@react-navigation/native';
 
-// Define the props for QRScannerScreen
-interface QRScannerScreenProps {
-  clearScanData: () => void;
-}
 
-const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
-  const navigation = useNavigation();
-  const qrCodeContext = useContext(QRCodeContext);
-  const { qrCodes, setQrCodes } = qrCodeContext || { qrCodes: [], setQrCodes: () => {} };
-  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
-  const [scanned, setScanned] = useState<boolean>(false);
-  const [showSplash, setShowSplash] = useState<boolean>(true);
-  const [scannedData, setScannedData] = useState<string>('');
-  const [scanResult, setScanResult] = useState<any>(null); // State for VirusTotal scan result
-  const [dataType, setDataType] = useState<string>(''); // State for data type
-  const [enableTorch, setEnableTorch] = useState<boolean>(false); // State for torch
 
-  useEffect(() => {
+//-----------------FUNCTIONS DECLARED HERE------------------//
-    const initializeApp = async () => {
+// Function to determine the type of data
-      const { status } = await Camera.requestCameraPermissionsAsync();
+const determineDataType = (data: string): string => {
-      setHasPermission(status === 'granted');
-      setShowSplash(false);
-    };
-
-    initializeApp();
-  }, []);
-
-  const handleQRCodeScanned = async ({ type, data }: { type: string; data: string }) => {
-    setScanned(true);
-
-    // Parse the URI to determine its type
-    let dataType;
   if (/^(http|https):\/\//.test(data)) {
-      dataType = 'URL';
+    return 'URL';
   } else if (/^[0-9]+$/.test(data)) {
-      dataType = 'Number';
+    return 'Number';
   } else if (/^mailto:/.test(data)) {
-      dataType = 'Email';
+    return 'Email';
   } else if (/^tel:/.test(data)) {
-      dataType = 'Phone Number';
+    return 'Phone Number';
   } else if (/^smsto:/.test(data)) {
-      dataType = 'SMS';
+    return 'SMS';
   } else {
-      dataType = 'Text';
+    return 'Text';
   }
-
-    setDataType(dataType); // Set the data type in state
-
-    let newScannedData = `Type: ${dataType}\nData: ${data}`;
-
-    try {
-      const scanId = await scanWithVirusTotal(data);
-      const positive = await getScanResult(scanId);
-      newScannedData += `\nScore: ${positive}`;
-      setScanResult({ positive, scanId });
-    } catch (error) {
-      console.error('Error handling barcode scan:', error);
-    }
-
-    setScannedData(newScannedData);
-    setQrCodes([...qrCodes, newScannedData]);
 };
 
-  const scanWithVirusTotal = async (data: any) => {
+// Function to handle VirusTotal scanning
+const processWithVirusTotal = async (data: string) => {
   const apiKey = 'YOUR_VIRUSTOTAL_API_KEY';
   const url = 'https://www.virustotal.com/vtapi/v2/url/scan';
   const params = {
@@ -86,7 +44,8 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
   }
 };
 
-  const getScanResult = async (scanId: string) => {
+// Function to get VirusTotal scan results
+const getVirusTotalResults = async (scanId: string) => {
   const apiKey = 'YOUR_VIRUSTOTAL_API_KEY';
   const url = 'https://www.virustotal.com/vtapi/v2/url/report';
   const params = {
@@ -103,6 +62,50 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
   }
 };
 
+// Define the props for QRScannerScreen
+interface QRScannerScreenProps {
+  clearScanData: () => void;
+}
+
+
+//-----------------Main------------------//
+const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
+  
+  const navigation = useNavigation(); // call Navigation bar
+  const [showSplash, setShowSplash] = useState<boolean>(true); // call splash screen
+
+  // These are for .....
+  const qrCodeContext = useContext(QRCodeContext); // From ./tpes.ts
+
+  // this function stores the scanned data for the history page
+  const { qrCodes, setQrCodes } = qrCodeContext || { qrCodes: [], setQrCodes: () => {} };
+
+  // Camera permission and scan state
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const [scanned, setScanned] = useState<boolean>(false);
+
+  
+  const [scannedData, setScannedData] = useState<string>(''); // State for QR scanned Data
+  const extractedData = scannedData.split('\n')[1]?.split('Data: ')[1] || ''; // Split
+
+
+  const [scanResult, setScanResult] = useState<any>(null); // State for VirusTotal scan result
+  const [dataType, setDataType] = useState<string>(''); // State for data type
+  const [enableTorch, setEnableTorch] = useState<boolean>(false); // State for torch
+
+  useEffect(() => {
+    const initializeApp = async () => {
+      const { status } = await Camera.requestCameraPermissionsAsync();
+      setHasPermission(status === 'granted');
+      setShowSplash(false);
+    };
+
+    initializeApp();
+  }, []);
+
+
+
+  // If loading this screen , reset the scanning data
   const clearScanDataInternal = () => {
     setScannedData('');
     setScanResult(null);
@@ -110,6 +113,33 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
     setDataType('');
   };
 
+
+
+  // The function that takes data from <Cameraview onBarcodeScanned
+  const handleQRCodeScanned = async ({ data }: { type: string; data: string }) => {
+    setScanned(true); //Flag is QR code already scanned
+
+    const dataType = determineDataType(data);
+    setDataType(dataType);
+
+    let newScannedData = `Type: ${dataType}\nData: ${data}`;
+
+    try {
+      const scanId = await processWithVirusTotal(data);
+      const positive = await getVirusTotalResults(scanId);
+      newScannedData += `\nScore: ${positive}`;
+      setScanResult({ positive, scanId });
+    } catch (error) {
+      console.error('Error handling barcode scan:', error);
+    }
+
+    setScannedData(newScannedData);
+    setQrCodes([...qrCodes, newScannedData]);
+  };
+
+
+
+  // If the focus is lost focus on this screen , when come reset the scan data
   useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
       clearScanDataInternal();
@@ -117,10 +147,15 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
     return unsubscribe;
   }, [navigation]);
 
+
+  // This function is for toggling torch
   const toggleTorch = () => {
     setEnableTorch((prev) => !prev);
   };
 
+
+  // For Splash, for some reason nedd to be near the end of the function...
+  // or else permission for camera is not asked
   if (showSplash) {
     return (
       <View style={styles.splashContainer}>
@@ -129,22 +164,31 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
     );
   }
 
+  // While asking for permision the page behind will render this only
   if (hasPermission === null) {
     return <Text>Requesting for camera permission</Text>;
   }
 
+
+  // this will thrown on the screen and nothing else will load if no permission
   if (hasPermission === false) {
     return <Text>No access to camera</Text>;
   }
 
-  const extractedData = scannedData.split('\n')[1]?.split('Data: ')[1] || '';
 
+  //---------------The UI part-----------------//
   return (
+    
     <View style={styles.container}>
+        {/* Banner section */}
       <View style={styles.banner}>
-        <Text style={styles.headerText}>SafeQR v0.55</Text>
+
+        <Text style={styles.headerText}>SafeQR v0.66</Text>
       </View>
+      {/* Welcome Text */}
       <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
+
+      {/* The cutour for the camera */}
       <View style={styles.cameraContainer}>
         <CameraView
           onBarcodeScanned={scanned ? undefined : handleQRCodeScanned}
@@ -152,13 +196,15 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
           style={styles.camera}
           enableTorch={enableTorch}
         />
+
+        {/* the torch icon inside the CameraView */}
         <TouchableOpacity onPress={toggleTorch} style={styles.flashButton}>
           <Ionicons name="flashlight" size={24} color="#fff" />
-          <Text style={styles.flashText}>
+            {enableTorch}
-            {enableTorch ? 'Turn Off' : 'Turn On'} Torch
-          </Text>
         </TouchableOpacity>
       </View>
+
+      {/* The CONTENT , the popup for the scanned data */}
       {scannedData !== '' && (
         <View style={styles.dataBox}>
           <Text style={styles.dataUrl}>{extractedData}</Text>
@@ -187,6 +233,10 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
   );
 };
 
+
+
+
+//--------------------The CSS----------------//
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -222,15 +272,13 @@ const styles = StyleSheet.create({
   flashButton: {
     position: 'absolute',
     bottom: 20,
-    alignSelf: 'center',
+    left: 100, // Adjust this value to move it more or less to the left
+    width: 50,
+    height: 50,
+    justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#000',
-    padding: 10,
+    borderRadius: 25, // Half of width and height to make it a circle
-    borderRadius: 5,
-  },
-  flashText: {
-    color: '#fff',
-    marginTop: 5,
   },
   dataBox: {
     position: 'absolute',