From 264ae9550e06898ab802b008d5f5badc12b92268 Mon Sep 17 00:00:00 2001 From: Isky Date: Wed, 19 Jun 2024 19:36:30 +0800 Subject: [PATCH] segregated the ScannedDataBox from the QRScannerScreen , so that Historyscreen can use the ScannedDataBox --- components/ScannedDataBox.tsx | 125 ++++++++++++++++++++++ screens/HistoryScreen.tsx | 28 +++-- screens/QRCodeProvider.tsx | 0 screens/QRScannerScreen.tsx | 195 ++++------------------------------ types.ts | 13 ++- 5 files changed, 177 insertions(+), 184 deletions(-) create mode 100644 components/ScannedDataBox.tsx create mode 100644 screens/QRCodeProvider.tsx diff --git a/components/ScannedDataBox.tsx b/components/ScannedDataBox.tsx new file mode 100644 index 0000000..2a61c61 --- /dev/null +++ b/components/ScannedDataBox.tsx @@ -0,0 +1,125 @@ +import React from 'react'; +import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'; +import QRCode from 'react-native-qrcode-svg'; +import { Ionicons } from '@expo/vector-icons'; + +interface ScannedDataBoxProps { + data: string; + scanResult: any; + dataType: string; +} + +const ScannedDataBox: React.FC = ({ data, scanResult, dataType }) => { + const extractedData = data.split('\n')[1]?.split('Data: ')[1] || ''; + + return ( + + + + {extractedData} + + + {new Date().toLocaleString()} + + + + Result: {scanResult && scanResult.positive > 0 ? 'DANGEROUS' : 'SAFE'} + + + + Type: {dataType} + {'\n'} + Checks + Secure Connection: ✘ + Virus Total Check: ✘ + Redirects: 2 + + + + Share + + + + Open + + + + ); +}; + +const styles = StyleSheet.create({ + row: { + flexDirection: 'row', + alignItems: 'center', + }, + scan_icon: { + width: 50, + height: 50, + marginRight: 8, + }, + payload: { + fontSize: 20, + color: '#000', + marginBottom: 1, + }, + dataBox: { + padding: 20, + backgroundColor: '#ffe6f0', + borderRadius: 10, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.2, + shadowRadius: 5, + elevation: 3, + zIndex: 1, + }, + qrContainer: { + alignItems: 'center', + marginVertical: 10, + }, + blankLine: { + height: 20, + }, + divider: { + height: 1, + backgroundColor: '#ddd', + marginVertical: 10, + alignSelf: 'stretch', + }, + timestampText: { + fontSize: 12, + color: '#000', + marginBottom: 10, + }, + resultText: { + fontSize: 16, + color: '#ff0000', + marginBottom: 10, + textAlign: 'center', + }, + typeText: { + fontSize: 16, + color: '#000', + marginBottom: 10, + }, + checksText: { + fontSize: 16, + color: '#000', + marginBottom: 5, + }, + iconContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + marginTop: 10, + }, + iconButton: { + flexDirection: 'column', + alignItems: 'center', + }, + iconText: { + color: '#2196F3', + marginTop: 5, + }, +}); + +export default ScannedDataBox; diff --git a/screens/HistoryScreen.tsx b/screens/HistoryScreen.tsx index 9b071e3..6604684 100644 --- a/screens/HistoryScreen.tsx +++ b/screens/HistoryScreen.tsx @@ -1,23 +1,34 @@ -import React, { useContext } from 'react'; -import { View, Text, StyleSheet, FlatList } from 'react-native'; +import React, { useContext, useState } from 'react'; +import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native'; import { QRCodeContext } from '../types'; +import ScannedDataBox from '../components/ScannedDataBox'; const HistoryScreen: React.FC = () => { const qrCodeContext = useContext(QRCodeContext); - // Safely access qrCodes and handle the case when the context is null - const qrCodes = qrCodeContext ? qrCodeContext.qrCodes : []; + const { qrCodes, setCurrentScannedData } = qrCodeContext || { qrCodes: [], setCurrentScannedData: () => {} }; + + const [selectedData, setSelectedData] = useState(null); + const [scanResult, setScanResult] = useState(null); // KI for testing + const [dataType, setDataType] = useState(''); // KIV + return ( History Screen + {selectedData && ( + + )} ( - - {item} - + setSelectedData(item)}> + + {item} + + )} keyExtractor={(item, index) => index.toString()} + contentContainerStyle={styles.flatListContent} /> ); @@ -47,6 +58,9 @@ const styles = StyleSheet.create({ fontSize: 16, color: '#000', }, + flatListContent: { + paddingBottom: 100, // Add padding to the bottom so that it wont kenna hidden by nav bar + }, }); export default HistoryScreen; diff --git a/screens/QRCodeProvider.tsx b/screens/QRCodeProvider.tsx new file mode 100644 index 0000000..e69de29 diff --git a/screens/QRScannerScreen.tsx b/screens/QRScannerScreen.tsx index b9ff88a..0707360 100644 --- a/screens/QRScannerScreen.tsx +++ b/screens/QRScannerScreen.tsx @@ -7,6 +7,7 @@ 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------------------// @@ -244,97 +245,39 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { - - {/* The CONTENT , the popup for the scanned data */} + {/* This is called from ../components/ScannedDataBox*/} + {scannedData !== '' && ( - - - - {extractedData} - - - {new Date().toLocaleString()} - - - - Result: {scanResult && scanResult.positive > 0 ? 'DANGEROUS' : 'SAFE'} - - - - Type: {dataType} - {'\n'} - Checks - Secure Connection: ✘ - Virus Total Check: ✘ - Redirects: 2 - - - - Share - - - - Open - - + + - )} - + )} ); }; const styles = StyleSheet.create({ - // Container for the main screen container: { flex: 1, backgroundColor: '#f8f0fc', padding: 20, }, - - // Row for aligning items horizontally - row: { - flexDirection: 'row', - alignItems: 'center', - }, - - // Icon for scanned data - scan_icon: { - width: 50, // Adjust the size as needed - height: 50, - marginRight: 8, // Space between icon and text - }, - - // Text for payload display - payload: { - fontSize: 20, - color: '#000', - marginBottom: 1, - }, - - // Banner container banner: { alignItems: 'center', marginBottom: 20, }, - - // Text for the header headerText: { fontSize: 24, fontWeight: 'bold', color: '#ff69b4', }, - - // Container for splash screen splashContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f8f0fc', }, - - // Container for camera view cameraContainer: { height: '60%', alignItems: 'center', @@ -342,124 +285,21 @@ const styles = StyleSheet.create({ borderRadius: 10, overflow: 'hidden', }, - - // Camera style camera: { width: '100%', height: '100%', }, - - // Button for flashlight flashButton: { position: 'absolute', bottom: 20, - left: 100, // Adjust this value to move it more or less to the left + left: 100, width: 50, height: 50, justifyContent: 'center', alignItems: 'center', backgroundColor: '#000', - borderRadius: 25, // Half of width and height to make it a circle + borderRadius: 25, }, - - // Box for displaying scanned data - dataBox: { - position: 'absolute', - top: '10%', - left: '5%', - right: '5%', - padding: 20, - backgroundColor: '#ffe6f0', - borderRadius: 10, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.2, - shadowRadius: 5, - elevation: 3, - zIndex: 1, // Ensure it appears above other elements - }, - - // Container for QR code - qrContainer: { - alignItems: 'center', - marginVertical: 10, - }, - - // Style for QR code image - qrCodeImage: { - marginVertical: 10, - }, - - // Blank line for spacing - blankLine: { - height: 20, // Adjust the height to control the space between lines - }, - - // Divider line - divider: { - height: 1, - backgroundColor: '#ddd', - marginVertical: 10, - alignSelf: 'stretch', - }, - - // Text for timestamp - timestampText: { - fontSize: 12, - color: '#000', - marginBottom: 10, - }, - - // Text for result - resultText: { - fontSize: 16, - color: '#ff0000', - marginBottom: 10, - textAlign: 'center', - }, - - // Text for data type - typeText: { - fontSize: 16, - color: '#000', - marginBottom: 10, - }, - - // Text for checks - checksText: { - fontSize: 16, - color: '#000', - marginBottom: 5, - }, - - // Container for icons - iconContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - marginTop: 10, - }, - - // Style for icon button - iconButton: { - flexDirection: 'column', - alignItems: 'center', - }, - - // Text for icon button - iconText: { - color: '#2196F3', - marginTop: 5, - }, - - // Text for welcome message - welcomeText: { - textAlign: 'center', - fontSize: 20, - marginVertical: 10, - color: 'black', - }, - - // Button for test scan testButton: { position: 'absolute', bottom: 1, @@ -468,18 +308,29 @@ const styles = StyleSheet.create({ padding: 10, borderRadius: 5, }, - - // Button for gallery galleryButton: { position: 'absolute', bottom: 20, - right: 100, // Adjust this value to move it more or less to the right + right: 100, width: 50, height: 50, justifyContent: 'center', alignItems: 'center', backgroundColor: '#000', - borderRadius: 25, // Half of width and height to make it a circle + borderRadius: 25, + }, + scannedDataBox: { + position: 'absolute', + top: '10%', + left: '5%', + right: '5%', + zIndex: 2, + }, + welcomeText: { + textAlign: 'center', + fontSize: 20, + marginVertical: 10, + color: 'black', }, }); diff --git a/types.ts b/types.ts index 381c77c..cfe0721 100644 --- a/types.ts +++ b/types.ts @@ -1,8 +1,11 @@ import { createContext } from 'react'; -export type QRCodeContextType = { - qrCodes: string[]; - setQrCodes: (codes: string[]) => void; -}; +interface QRCodeContextProps { + qrCodes: { data: string, bookmarked: boolean }[]; + setQrCodes: (codes: { data: string, bookmarked: boolean }[]) => void; + setCurrentScannedData: (data: string) => void; + toggleBookmark: (index: number) => void; + deleteQRCode: (index: number) => void; +} -export const QRCodeContext = createContext(null); +export const QRCodeContext = createContext(null);