Reorgainsed and cleaned code, Redid the comments

2024-06-11 23:43:36 +08:00
parent d4e285012b
commit cef50cec8e
4 changed files with 226 additions and 80 deletions
--- a/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver
+++ b/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver
@@ -0,0 +1 @@
+1217.2403.25012.1
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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-screens": "^3.31.1"
+    "react-native-safe-area-context": "^4.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
--- a/screens/QRScannerScreen.tsx
+++ b/screens/QRScannerScreen.tsx
@@ -2,23 +2,93 @@ 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 { Ionicons } from '@expo/vector-icons';
+import axios from 'axios'; // For URL calls
+import { Ionicons } from '@expo/vector-icons'; // For icons
 import { useNavigation } from '@react-navigation/native';

+
+
+//-----------------FUNCTIONS DECLARED HERE------------------//
+// Function to determine the type of data
+const determineDataType = (data: string): string => {
+  if (/^(http|https):\/\//.test(data)) {
+    return 'URL';
+  } else if (/^[0-9]+$/.test(data)) {
+    return 'Number';
+  } else if (/^mailto:/.test(data)) {
+    return 'Email';
+  } else if (/^tel:/.test(data)) {
+    return 'Phone Number';
+  } else if (/^smsto:/.test(data)) {
+    return 'SMS';
+  } else {
+    return 'Text';
+  }
+};
+
+// 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 = {
+    apikey: apiKey,
+    url: data,
+  };
+
+  try {
+    const response = await axios.post(url, null, { params });
+    return response.data.scan_id;
+  } catch (error) {
+    console.error('Error scanning with VirusTotal:', error);
+    throw error;
+  }
+};
+
+// 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 = {
+    apikey: apiKey,
+    resource: scanId,
+  };
+
+  try {
+    const response = await axios.get(url, { params });
+    return response.data.positives;
+  } catch (error) {
+    console.error('Error getting scan result:', error);
+    throw error;
+  }
+};
+
 // Define the props for QRScannerScreen
 interface QRScannerScreenProps {
  clearScanData: () => void;
 }

+
+//-----------------Main------------------//
 const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
-  const navigation = useNavigation();
-  const qrCodeContext = useContext(QRCodeContext);
+  
+  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 [showSplash, setShowSplash] = useState<boolean>(true);
-  const [scannedData, setScannedData] = useState<string>('');
+
+  
+  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
@@ -33,32 +103,30 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
    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';
-    } else if (/^[0-9]+$/.test(data)) {
-      dataType = 'Number';
-    } else if (/^mailto:/.test(data)) {
-      dataType = 'Email';
-    } else if (/^tel:/.test(data)) {
-      dataType = 'Phone Number';
-    } else if (/^smsto:/.test(data)) {
-      dataType = 'SMS';
-    } else {
-      dataType = 'Text';
-    }

-    setDataType(dataType); // Set the data type in state
+  // If loading this screen , reset the scanning data
+  const clearScanDataInternal = () => {
+    setScannedData('');
+    setScanResult(null);
+    setScanned(false);
+    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 scanWithVirusTotal(data);
-      const positive = await getScanResult(scanId);
+      const scanId = await processWithVirusTotal(data);
+      const positive = await getVirusTotalResults(scanId);
      newScannedData += `\nScore: ${positive}`;
      setScanResult({ positive, scanId });
    } catch (error) {
@@ -69,47 +137,9 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
    setQrCodes([...qrCodes, newScannedData]);
  };

-  const scanWithVirusTotal = async (data: any) => {
-    const apiKey = 'YOUR_VIRUSTOTAL_API_KEY';
-    const url = 'https://www.virustotal.com/vtapi/v2/url/scan';
-    const params = {
-      apikey: apiKey,
-      url: data,
-    };

-    try {
-      const response = await axios.post(url, null, { params });
-      return response.data.scan_id;
-    } catch (error) {
-      console.error('Error scanning with VirusTotal:', error);
-      throw error;
-    }
-  };
-
-  const getScanResult = async (scanId: string) => {
-    const apiKey = 'YOUR_VIRUSTOTAL_API_KEY';
-    const url = 'https://www.virustotal.com/vtapi/v2/url/report';
-    const params = {
-      apikey: apiKey,
-      resource: scanId,
-    };
-
-    try {
-      const response = await axios.get(url, { params });
-      return response.data.positives;
-    } catch (error) {
-      console.error('Error getting scan result:', error);
-      throw error;
-    }
-  };
-
-  const clearScanDataInternal = () => {
-    setScannedData('');
-    setScanResult(null);
-    setScanned(false);
-    setDataType('');
-  };

+  // 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 ? 'Turn Off' : 'Turn On'} Torch
-          </Text>
+            {enableTorch}
        </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: 5,
-  },
-  flashText: {
-    color: '#fff',
-    marginTop: 5,
+    borderRadius: 25, // Half of width and height to make it a circle
  },
  dataBox: {
    position: 'absolute',