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

overhaull of project sturcture, segregated screens and components

Browse Source
This commit is contained in:
Iskubee
2024-06-10 21:00:22 +08:00
parent e5f7f4a51d
commit 1cb2c24024
8 changed files with 468 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

378
App.tsx
View File

@@ -1,377 +1,15 @@
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 Axios for HTTP requests for the VT API call
import axios from 'axios';
// Create a Context for QR code data
const QRCodeContext = createContext(null);
import React, { useState } from 'react';
import AppNavigator from './navigation/AppNavigator';
import { QRCodeContext } from './types';
const Tab = createBottomTabNavigator();
// Component for QR Scanner Screen
const QRScannerScreen: React.FC = () => {
const { qrCodes, setQrCodes } = useContext(QRCodeContext); // Access context
const [hasPermission, setHasPermission] = useState<boolean | null>(null); // State for camera permission
const [scanned, setScanned] = useState<boolean>(false); // State for scanned status
const [showSplash, setShowSplash] = useState<boolean>(true); // State for splash screen
const [scannedData, setScannedData] = useState<string>(''); // State for scanned data
const [scanResult, setScanResult] = useState<any>(null); // State for VirusTotal scan result
useEffect(() => {
const initializeApp = async () => {
const { status } = await Camera.requestCameraPermissionsAsync(); // Request camera permissions
setHasPermission(status === 'granted'); // Set permission status
setShowSplash(false); // Hide splash screen
};
initializeApp(); // Initialize app
}, []);
// Function to handle barcode scanned event
const handleQRCodeSanned = async ({ type, data }: { type: string; data: string }) => {
setScanned(true);// Mark as scanned
// Determine the type of data (URL, text, or just numbers)
let dataType;
if (/^(http|https):\/\//.test(data)) {
dataType = 'URL';
} else if (/^[0-9]+$/.test(data)) {
dataType = 'Numbers';
} else {
dataType = 'Text';
}
// 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); // 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); // Handle error
}
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 = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251er'; // 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 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 = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251er';
const url = 'https://www.virustotal.com/vtapi/v2/url/report';
const params = {
apikey: apiKey,
resource: scanId
};
// The axios to handle URL stuff
try {
const response = await axios.get(url, { params });
return response.data.positives; // onlt
} catch (error) {
console.error('Error getting scan result:', error);
throw error;
}
};
if (showSplash) {
return (
<View style={styles.splashContainer}>
<ActivityIndicator size="large" color="#ff69b4" />
</View>
);
}
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<View style={styles.banner}>
<Text style={styles.headerText}>SafeQR</Text>
</View>
<Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
<View style={styles.cameraContainer}>
<CameraView
onBarcodeScanned={scanned ? undefined : handleQRCodeSanned}
barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
style={styles.camera}
/>
</View>
{scannedData !== '' && (
<View style={styles.dataBox}>
<Text style={styles.dataText}>{scannedData}</Text>
{scanResult && <Text style={styles.dataText}>{JSON.stringify(scanResult)}</Text>}
</View>
)}
</View>
);
};
function HistoryScreen() {
const { qrCodes } = useContext(QRCodeContext);
return (
<View style={styles.container}>
<Text style={styles.welcomeText}>History Screen</Text>
<FlatList
data={qrCodes}
renderItem={({ item }) => (
<View style={styles.dataBox}>
<Text style={styles.dataText}>{item}</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
function SettingsScreen() {
const { setQrCodes } = useContext(QRCodeContext);
const clearHistory = () => {
setQrCodes([]);
};
return (
<View style={styles.container}>
<Text style={styles.welcomeText}>Settings Screen</Text>
<TouchableOpacity style={styles.button} onPress={clearHistory}>
<Text style={styles.buttonText}>Clear History</Text>
</TouchableOpacity>
</View>
);
}
function ProfileScreen() {
return (
<View style={styles.container}>
<Text style={styles.welcomeText}>Profile Screen</Text>
</View>
);
}
// Custom Tab Bar Component
const CustomTabBar = ({ state, descriptors, navigation }) => {
return (
<View style={styles.tabBar}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label = options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
const iconName = route.name === 'QR Scanner' ? 'camera' : route.name === 'History' ? 'time' : route.name === 'Settings' ? 'settings' : 'person';
return (
<TouchableOpacity
key={index}
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={styles.tabButton}
>
<Ionicons name={iconName} size={24} color={isFocused ? '#673ab7' : '#222'} />
<Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
{label}
</Text>
</TouchableOpacity>
);
})}
<View style={styles.floatingButton}>
<TouchableOpacity onPress={() => {navigation.navigate('QR Scanner');}}>
<Ionicons name="camera" size={28} color="#fff" />
</TouchableOpacity>
</View>
</View>
);
};
export default function App() {
const [qrCodes, setQrCodes] = useState([]);
const App: React.FC = () => {
const [qrCodes, setQrCodes] = useState<string[]>([]);
return (
<QRCodeContext.Provider value={{ qrCodes, setQrCodes }}>
<NavigationContainer>
<Tab.Navigator initialRouteName="QR Scanner" tabBar={props => <CustomTabBar {...props} />}>
<Tab.Screen name="History" component={HistoryScreen} />
<Tab.Screen name="QR Scanner" component={QRScannerScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
<AppNavigator />
</QRCodeContext.Provider>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f0fc',
padding: 20,
},
banner:{},
headerText:{},
splashContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f8f0fc",
},
scanText: {
textAlign: "center",
fontSize: 24,
fontWeight: "bold",
color: "#ff69b4",
marginVertical: 10,
},
instructionText: {
textAlign: "center",
fontSize: 16,
color: "#000",
marginBottom: 20,
},
cameraContainer: {
height: '60%',
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
overflow: "hidden",
},
camera: {
width: '100%',
height: '100%',
},
button: {
backgroundColor: '#333',
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
marginVertical: 10,
},
buttonText: {
color: 'white',
fontSize: 16,
},
dataBox: {
marginVertical: 10,
padding: 10,
backgroundColor: "#fff",
borderRadius: 5,
alignItems: "center",
justifyContent: "center",
},
dataText: {
fontSize: 16,
color: "#000",
},
welcomeText: {
textAlign: "center",
fontSize: 20,
marginVertical: 10,
color: "black",
},
tabBar: {
position: 'absolute',
bottom: 20,
left: 20,
right: 20,
height: 70,
borderRadius: 35,
backgroundColor: '#fff',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
shadowColor: '#000',
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 10,
elevation: 5,
},
tabButton: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
floatingButton: {
position: 'absolute',
bottom: 30,
left: '50%', // Position from the left
marginLeft: -30, // Half of the button width to center it
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: '#673ab7',
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 5,
elevation: 3,
},
});
export default App;

23
components/CameraView.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import { Camera } from 'expo-camera';
import { View, StyleSheet } from 'react-native';
interface CameraViewProps {
onBarcodeScanned?: (data: any) => void;
barcodeScannerSettings?: any;
style?: any;
}
const CameraView: React.FC<CameraViewProps> = ({ onBarcodeScanned, barcodeScannerSettings, style }) => {
return (
<View style={style}>
<Camera
style={StyleSheet.absoluteFillObject}
onBarCodeScanned={onBarcodeScanned}
barCodeScannerSettings={barcodeScannerSettings}
/>
</View>
);
};
export default CameraView;

115
components/CustomTabBar.tsx Normal file
View File

@@ -0,0 +1,115 @@
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
// Custom tab bar component
const CustomTabBar = ({ state, descriptors, navigation }) => {
return (
<View style={styles.tabBar}>
{/* Iterate through each route in the state to render tab buttons */}
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label = options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
// Check if the current route is focused
const isFocused = state.index === index;
// Define the onPress behavior for each tab button
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
// Define the onLongPress behavior for each tab button
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
// Determine the icon name based on the route name
const iconName = route.name === 'QR Scanner' ? 'camera' : route.name === 'History' ? 'time' : route.name === 'Settings' ? 'settings' : 'person';
return (
<TouchableOpacity
key={index}
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={styles.tabButton}
>
{/* Render the icon and label for each tab */}
<Ionicons name={iconName} size={24} color={isFocused ? '#673ab7' : '#222'} />
<Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
{label}
</Text>
</TouchableOpacity>
);
})}
{/* Floating button to navigate directly to QR Scanner */}
<View style={styles.floatingButton}>
<TouchableOpacity onPress={() => { navigation.navigate('QR Scanner'); }}>
<Ionicons name="camera" size={28} color="#fff" />
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
tabBar: {
position: 'absolute',
bottom: 20,
left: 20,
right: 20,
height: 70,
borderRadius: 35,
backgroundColor: '#fff',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
shadowColor: '#000',
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 10,
elevation: 5,
},
tabButton: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
floatingButton: {
position: 'absolute',
bottom: 30,
left: '50%',
marginLeft: -30,
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: '#673ab7',
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 5,
elevation: 3,
},
});
export default CustomTabBar;

30
navigation/AppNavigator.tsx Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import QRScannerScreen from '../screens/QRScannerScreen';
import HistoryScreen from '../screens/HistoryScreen';
import SettingsScreen from '../screens/SettingsScreen';
import CustomTabBar from '../components/CustomTabBar';
// Create a bottom tab navigator
const Tab = createBottomTabNavigator();
// Main navigation component
const AppNavigator = () => {
return (
// Wrap the navigator in a NavigationContainer to manage the navigation tree
<NavigationContainer>
{/* Define the tab navigator with custom tab bar and initial route */}
<Tab.Navigator initialRouteName="QR Scanner" tabBar={props => <CustomTabBar {...props} />}>
{/* Define each tab with a name and corresponding component */}
<Tab.Screen name="History" component={HistoryScreen} />
<Tab.Screen name="QR Scanner" component={QRScannerScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
};
export default AppNavigator;

50
screens/HistoryScreen.tsx Normal file
View File

@@ -0,0 +1,50 @@
import React, { useContext } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
import { QRCodeContext } from '../types';
const HistoryScreen: React.FC = () => {
const { qrCodes } = useContext(QRCodeContext);
return (
<View style={styles.container}>
<Text style={styles.welcomeText}>History Screen</Text>
<FlatList
data={qrCodes}
renderItem={({ item }) => (
<View style={styles.dataBox}>
<Text style={styles.dataText}>{item}</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f0fc',
padding: 20,
},
welcomeText: {
textAlign: 'center',
fontSize: 20,
marginVertical: 10,
color: 'black',
},
dataBox: {
marginVertical: 10,
padding: 10,
backgroundColor: '#fff',
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
dataText: {
fontSize: 16,
color: '#000',
},
});
export default HistoryScreen;

185
screens/QRScannerScreen.tsx Normal file
View File

@@ -0,0 +1,185 @@
import React, { useState, useEffect, useContext } from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { CameraView , Camera } from 'expo-camera';
import { QRCodeContext } from '../types';
import axios from 'axios';
// QR Scanner screen component
const QRScannerScreen: React.FC = () => {
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>('');
// Request camera permissions when the component mounts
useEffect(() => {
const initializeApp = async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
setShowSplash(false);
};
initializeApp();
}, []);
// Handle the QR code scanned event
const handleQRCodeScanned = async ({ type, data }: { type: string; data: string }) => {
setScanned(true);
let dataType;
if (/^(http|https):\/\//.test(data)) {
dataType = 'URL';
} else if (/^[0-9]+$/.test(data)) {
dataType = 'Numbers';
} else {
dataType = 'Text';
}
let newScannedData = `Type: ${dataType}\nData: ${data}`;
try {
const scanId = await scanWithVirusTotal(data);
const positive = await getScanResult(scanId);
newScannedData += `\nScore: ${positive}`;
} catch (error) {
console.error('Error handling barcode scan:', error);
}
setScannedData(newScannedData);
setQrCodes([...qrCodes, newScannedData]);
};
// Send the scanned data to VirusTotal for scanning
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;
}
};
// Get the scan result from VirusTotal using the scan ID
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;
}
};
if (showSplash) {
return (
<View style={styles.splashContainer}>
<ActivityIndicator size="large" color="#ff69b4" />
</View>
);
}
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<View style={styles.banner}>
<Text style={styles.headerText}>SafeQR</Text>
</View>
<Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
<View style={styles.cameraContainer}>
{/* Render the CameraView component for QR scanning */}
<CameraView
onBarcodeScanned={scanned ? undefined : handleQRCodeScanned}
barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
style={styles.camera}
/>
</View>
{scannedData !== '' && (
<View style={styles.dataBox}>
<Text style={styles.dataText}>{scannedData}</Text>
</View>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f0fc',
padding: 20,
},
banner: {
alignItems: 'center',
marginBottom: 20,
},
headerText: {
fontSize: 24,
fontWeight: 'bold',
color: '#ff69b4',
},
splashContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f8f0fc',
},
cameraContainer: {
height: '60%',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 10,
overflow: 'hidden',
},
camera: {
width: '100%',
height: '100%',
},
dataBox: {
marginVertical: 10,
padding: 10,
backgroundColor: '#fff',
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
dataText: {
fontSize: 16,
color: '#000',
},
welcomeText: {
textAlign: 'center',
fontSize: 20,
marginVertical: 10,
color: 'black',
},
});
export default QRScannerScreen;

49
screens/SettingsScreen.tsx Normal file
View File

@@ -0,0 +1,49 @@
import React, { useContext } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { QRCodeContext } from '../types';
const SettingsScreen: React.FC = () => {
const { setQrCodes } = useContext(QRCodeContext);
const clearHistory = () => {
setQrCodes([]);
};
return (
<View style={styles.container}>
<Text style={styles.welcomeText}>Settings Screen</Text>
<TouchableOpacity style={styles.button} onPress={clearHistory}>
<Text style={styles.buttonText}>Clear History</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f0fc',
padding: 20,
},
welcomeText: {
textAlign: 'center',
fontSize: 20,
marginVertical: 10,
color: 'black',
},
button: {
backgroundColor: '#333',
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
marginVertical: 10,
},
buttonText: {
color: 'white',
fontSize: 16,
},
});
export default SettingsScreen;

8
types.ts Normal file
View File

@@ -0,0 +1,8 @@
import { createContext } from 'react';
export type QRCodeContextType = {
qrCodes: string[];
setQrCodes: (codes: string[]) => void;
};
export const QRCodeContext = createContext<QRCodeContextType | null>(null);