diff --git a/App.tsx b/App.tsx index 5b12b90..142a2bf 100644 --- a/App.tsx +++ b/App.tsx @@ -2,39 +2,41 @@ import React, { useState, useEffect, createContext, useContext } from 'react'; import { Text, View, StyleSheet, ActivityIndicator, TouchableOpacity, FlatList } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { CameraView, Camera } from 'expo-camera'; -import { Ionicons } from '@expo/vector-icons'; +import { CameraView, Camera } from 'expo-camera'; // The icons used in the navigation bar +import { Ionicons } from '@expo/vector-icons'; // Import Axios for HTTP requests for the VT API call import axios from 'axios'; - +// Create a Context for QR code data const QRCodeContext = createContext(null); const Tab = createBottomTabNavigator(); - +// Component for QR Scanner Screen const QRScannerScreen: React.FC = () => { - const { qrCodes, setQrCodes } = useContext(QRCodeContext); - const [hasPermission, setHasPermission] = useState(null); - const [scanned, setScanned] = useState(false); - const [showSplash, setShowSplash] = useState(true); - const [scannedData, setScannedData] = useState(''); - const [scanResult, setScanResult] = useState(null); + const { qrCodes, setQrCodes } = useContext(QRCodeContext); // Access context + const [hasPermission, setHasPermission] = useState(null); // State for camera permission + const [scanned, setScanned] = useState(false); // State for scanned status + const [showSplash, setShowSplash] = useState(true); // State for splash screen + const [scannedData, setScannedData] = useState(''); // State for scanned data + const [scanResult, setScanResult] = useState(null); // State for VirusTotal scan result useEffect(() => { const initializeApp = async () => { - const { status } = await Camera.requestCameraPermissionsAsync(); - setHasPermission(status === 'granted'); - setShowSplash(false); + const { status } = await Camera.requestCameraPermissionsAsync(); // Request camera permissions + setHasPermission(status === 'granted'); // Set permission status + setShowSplash(false); // Hide splash screen }; - initializeApp(); + initializeApp(); // Initialize app }, []); - + // Function to handle barcode scanned event const handleQRCodeSanned = async ({ type, data }: { type: string; data: string }) => { - setScanned(true); + setScanned(true);// Mark as scanned + + // Determine the type of data (URL, text, or just numbers) let dataType; if (/^(http|https):\/\//.test(data)) { dataType = 'URL'; @@ -44,37 +46,42 @@ const QRScannerScreen: React.FC = () => { dataType = 'Text'; } - let newScannedData = `Type: ${dataType}\nData: ${data}`; + // Construct the scanned data with the data type + let newScannedData = `Type: ${dataType}\nData: ${data}`; // Initialize with type and data try { - const scanId = await scanWithVirusTotal(data); - const positive = await getScanResult(scanId); - newScannedData += `\nScore: ${positive}`; + const scanId = await scanWithVirusTotal(data); // Send data to VirusTotal and get scan ID + const positive = await getScanResult(scanId); // Get scan result and extract positive score + newScannedData += `\nScore: ${positive}`; // Append positive score to newScannedData } catch (error) { - console.error('Error handling barcode scan:', error); + console.error('Error handling barcode scan:', error); // Handle error } - setScannedData(newScannedData); - setQrCodes([...qrCodes, newScannedData]); + setScannedData(newScannedData); // Save scanned data + setQrCodes([...qrCodes, newScannedData]); // Add scanned data to history }; + // Function to send data to VirusTotal and get the scan ID const scanWithVirusTotal = async (data: any) => { - const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; + const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; // 4/min , 500/day const url = 'https://www.virustotal.com/vtapi/v2/url/scan'; const params = { apikey: apiKey, url: data }; + // The axios to handle URL stuff try { const response = await axios.post(url, null, { params }); - return response.data.scan_id; + return response.data.scan_id; // Return scanID } catch (error) { console.error('Error scanning with VirusTotal:', error); throw error; } }; + // Get the full list of scanned result based on scanID from + // response above, Only want response.data.positive const getScanResult = async (scanId: Int32Array) => { const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; const url = 'https://www.virustotal.com/vtapi/v2/url/report'; @@ -83,9 +90,10 @@ const QRScannerScreen: React.FC = () => { resource: scanId }; + // The axios to handle URL stuff try { const response = await axios.get(url, { params }); - return response.data.positives; + return response.data.positives; // Reture the value of positive: } catch (error) { console.error('Error getting scan result:', error); throw error; @@ -110,10 +118,16 @@ const QRScannerScreen: React.FC = () => { return ( + + {/* Header banner */} SafeQR + + {/* Welcome message */} Welcome to SafeQR code Scanner + + {/* Camera view container */} { style={styles.camera} /> + + {/* Display scanned data */} {scannedData !== '' && ( {scannedData} @@ -131,6 +147,8 @@ const QRScannerScreen: React.FC = () => { ); }; + +// Component for History Screen function HistoryScreen() { const { qrCodes } = useContext(QRCodeContext); @@ -138,24 +156,24 @@ function HistoryScreen() { History Screen ( {item} )} - keyExtractor={(item, index) => index.toString()} + keyExtractor={(item, index) => index.toString()} // Key extractor for FlatList /> ); } -function SettingsScreen() { - const { setQrCodes } = useContext(QRCodeContext); - const clearHistory = () => { - setQrCodes([]); - }; +// Component for Settings Screen +function SettingsScreen() { + const { setQrCodes } = useContext(QRCodeContext); // Access context + + const clearHistory = () => {setQrCodes([]);}; // To clear History return ( @@ -167,6 +185,7 @@ function SettingsScreen() { ); } +// Component for Profile Screen function ProfileScreen() { return ( @@ -207,7 +226,10 @@ const CustomTabBar = ({ state, descriptors, navigation }) => { }); }; - const iconName = route.name === 'QR Scanner' ? 'camera' : route.name === 'History' ? 'time' : route.name === 'Settings' ? 'settings' : 'person'; + // Set different icons for each tab + const iconName = route.name === 'QR Scanner' ? 'camera' + : route.name === 'History' ? 'time' + : route.name === 'Settings' ? 'settings' : 'person'; return ( { ); }; + + + + + + + +// Main App component with bottom tab navigation export default function App() { - const [qrCodes, setQrCodes] = useState([]); + const [qrCodes, setQrCodes] = useState([]); // State to hold QR codes return (