isky/SafeQR_Front_End_Mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor QRScannerScreen and ScannedDataBox, alot of broken functions

Browse Source
This commit is contained in:
Isky
2024-06-30 01:32:39 +08:00
parent 7b396073f7
commit 0f9453ef45
3 changed files with 137 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
screens/QRScannerScreen.tsx
View File

@@ -1,107 +1,26 @@
import React, { useState, useEffect, useContext } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Image, BackHandler } from 'react-native';
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Image } from 'react-native';
import { Camera, CameraView, scanFromURLAsync } from 'expo-camera';
import { QRCodeContext } from '../types';
import axios from 'axios'; // For URL calls
import { Ionicons } from '@expo/vector-icons'; // For icons
import { useNavigation } from '@react-navigation/native';
import * as ImagePicker from 'expo-image-picker';
import QRCode from 'react-native-qrcode-svg';
import ScannedDataBox from '../components/ScannedDataBox';
//-----------------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 = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e';
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 = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e';
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 QRScannerScreen: React.FC = () => {
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 qrCodeContext = useContext(QRCodeContext); // From ./types.ts
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();
@@ -112,74 +31,59 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
initializeApp();
}, []);
// If loading this screen , reset the scanning data
const clearScanDataInternal = () => {
setScannedData('');
setScanResult(null);
setScanned(false);
setDataType('');
};
// The function 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}`;
let scanResult = {
secureConnection: false,
virusTotalCheck: false,
redirects: 0
};
try {
const scanId = await processWithVirusTotal(data);
const positive = await getVirusTotalResults(scanId);
newScannedData += `\nScore: ${positive}`;
scanResult = {
secureConnection: true, // Assume secure connection if we get here
virusTotalCheck: positive === 0, // Safe if no positive results
redirects: 2 // Arbitrary value, replace with real data if available
};
} catch (error) {
console.error('Error handling barcode scan:', error);
}
const handlePayload = async (payload: string) => {
setScanned(true);
const type = await sendToAPIServer(payload);
const qrCode = {
data: newScannedData,
bookmarked: false,
scanResult
data: payload,
type,
scanResult: {
secureConnection: true, // Placeholder, replace with actual logic
virusTotalCheck: true, // Placeholder, replace with actual logic
redirects: 0 // Placeholder, replace with actual logic
}
};
setScannedData(newScannedData);
setScannedData(payload);
setDataType(type);
setQrCodes([...qrCodes, qrCode]);
};
// If the focus is lost focus on this screen , when come reset the scan data
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
clearScanDataInternal();
});
return unsubscribe;
}, [navigation]);
const sendToAPIServer = async (data: string): Promise<string> => {
console.log('Sending QR code data to backend:', data);
try {
const response = await axios.post('http://192.168.10.247:8080/v1/api/qrcodetypes/detect', {
data,
}, {
headers: {
'Content-Type': 'application/json',
},
});
console.log('Response from backend:', response.data);
return response.data.type;
} catch (error) {
console.error('Error detecting QR code type:', error);
return 'UNKNOWN';
}
};
// This function is for toggling torch
const toggleTorch = () => {
setEnableTorch((prev) => !prev);
};
// This is hardcoded function for testing
const handleTestScan = () => {
handleQRCodeScanned({ type: 'TEST', data: 'TEST123' });
handlePayload('TEST123');
};
// https://medium.com/@funti009/create-a-mobile-qr-scanner-that-scans-via-camera-and-image-in-the-gallery-react-native-expo-ee7098a265d7
// Refactored to use Camera.scanFromURLAsync instead
// Function to handle QR code scanning from the image picker
const handleImagePicker = async () => {
const readQRFromImage = async () => {
clearScanDataInternal();
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
@@ -187,14 +91,11 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
quality: 1,
});
// if (result && result.assets[0].uri) { // KIV this....
if (result && result.assets && result.assets.length > 0 && result.assets[0].uri) { // this is to unsure the uri is not empty
if (result && result.assets && result.assets.length > 0 && result.assets[0].uri) { // Ensure the uri is not empty
try {
const scannedResult = await scanFromURLAsync(result.assets[0].uri);
if (!scannedResult.data) { // This will check if no QR was scanned
// Not sure why by passing the scannedResults.data is not working , only works when I use scannedResults[0].data..... KIV >.<
const dataNeeded = scannedResult[0].data;
handleQRCodeScanned({ type: 'QR_CODE', data: dataNeeded });
if (scannedResult && scannedResult[0] && scannedResult[0].data) {
handlePayload(scannedResult[0].data);
} else {
setScannedData("No QR Code Found");
setTimeout(() => setScannedData(""), 4000);
@@ -206,18 +107,13 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
}
};
// Add back button handler to clear scanned data
useEffect(() => {
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
const unsubscribe = navigation.addListener('focus', () => {
clearScanDataInternal();
return true;
});
return unsubscribe;
}, [navigation]);
return () => backHandler.remove();
}, []);
// For Splash, for some reason need to be near the end of the function...
// or else permission for camera is not asked
if (showSplash) {
return (
<View style={styles.splashContainer}>
@@ -226,55 +122,43 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
);
}
// While asking for permission 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>;
}
//---------------The UI part-----------------//
return (
<View style={styles.container}>
{/* Banner section */}
<View style={styles.banner}>
<Text style={styles.headerText}>SafeQR v0.89</Text>
</View>
{/* Welcome Text */}
<Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
{/* The cutout for the camera */}
<View style={styles.cameraContainer}>
<CameraView
onBarcodeScanned={scanned ? undefined : handleQRCodeScanned}
onBarcodeScanned={scanned ? undefined : ({ data }) => handlePayload(data)}
barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
style={styles.camera}
enableTorch={enableTorch}
/>
{/* the torch icon floating above the CameraView */}
<TouchableOpacity onPress={toggleTorch} style={styles.flashButton}>
<Ionicons name="flashlight" size={24} color="#fff" />
{enableTorch}
</TouchableOpacity>
<TouchableOpacity onPress={handleTestScan} style={styles.testButton}>
<Ionicons name="bug" size={24} color="#fff" />
</TouchableOpacity>
{/* the image icon for opening album/gallery */}
<TouchableOpacity onPress={handleImagePicker} style={styles.galleryButton}>
<TouchableOpacity onPress={readQRFromImage} style={styles.galleryButton}>
<Ionicons name="image" size={24} color="#fff" />
</TouchableOpacity>
</View>
{/* The CONTENT , the popup for the scanned data */}
{/* This is called from ../components/ScannedDataBox*/}
{scannedData !== '' && (
<View style={styles.scannedDataBox}>
<ScannedDataBox data={scannedData} scanResult={scanResult} dataType={dataType} clearScanData={clearScanDataInternal} />
<ScannedDataBox data={scannedData} dataType={dataType} clearScanData={clearScanDataInternal} />
</View>
)}
</View>
@@ -346,10 +230,8 @@ const styles = StyleSheet.create({
scannedDataBox: {
position: 'absolute',
top: '10%',
height: '100%',
left: '5%',
right: '5%',
zIndex: 2,
},
welcomeText: {