From b64e03d774e281736924da453aec00b79572e9a2 Mon Sep 17 00:00:00 2001 From: Isky Date: Wed, 19 Jun 2024 21:22:05 +0800 Subject: [PATCH] Updated HistoryScreen: changed UI and added toggleBookmark and deleteQRCode with BookMark Tab. Yet to solve setQrCodes updater function error message --- screens/HistoryScreen.tsx | 126 ++++++++++++++++++++++++++++-------- screens/QRScannerScreen.tsx | 20 +++++- types.ts | 2 +- 3 files changed, 119 insertions(+), 29 deletions(-) diff --git a/screens/HistoryScreen.tsx b/screens/HistoryScreen.tsx index 6604684..8d9c4d8 100644 --- a/screens/HistoryScreen.tsx +++ b/screens/HistoryScreen.tsx @@ -1,34 +1,84 @@ import React, { useContext, useState } from 'react'; import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native'; -import { QRCodeContext } from '../types'; +import { QRCodeContext, QRCode } from '../types'; // Import QRCode type import ScannedDataBox from '../components/ScannedDataBox'; +import { Ionicons } from '@expo/vector-icons'; const HistoryScreen: React.FC = () => { const qrCodeContext = useContext(QRCodeContext); - const { qrCodes, setCurrentScannedData } = qrCodeContext || { qrCodes: [], setCurrentScannedData: () => {} }; + const qrCodes = qrCodeContext?.qrCodes || []; + const setQrCodes = qrCodeContext?.setQrCodes || (() => {}); const [selectedData, setSelectedData] = useState(null); - const [scanResult, setScanResult] = useState(null); // KI for testing - const [dataType, setDataType] = useState(''); // KIV + const [selectedScanResult, setSelectedScanResult] = useState(null); + const [showBookmarks, setShowBookmarks] = useState(false); + + const toggleBookmark = (index: number) => { + setQrCodes((prev: QRCode[]) => { + const originalIndex = prev.length - 1 - index; // Compute the original index + const newQrCodes = [...prev]; + newQrCodes[originalIndex].bookmarked = !newQrCodes[originalIndex].bookmarked; + return newQrCodes; + }); + }; + + const deleteQRCode = (index: number) => { + setQrCodes((prev: QRCode[]) => { + const originalIndex = prev.length - 1 - index; // Compute the original index + return prev.filter((_, i) => i !== originalIndex); + }); + }; + + const filteredQrCodes = (showBookmarks ? qrCodes.filter(qr => qr.bookmarked) : qrCodes.slice().reverse()); + + const handleItemPress = (item: any) => { + setSelectedData(item.data); + setSelectedScanResult(item.scanResult); + }; return ( - History Screen + + setShowBookmarks(false)}> + History + + setShowBookmarks(true)}> + Bookmarks + + {selectedData && ( - + )} ( - setSelectedData(item)}> - - {item} + data={filteredQrCodes} + renderItem={({ item, index }) => { + console.log('item:', item); // Log the item data for debugging + const itemData = item.data ? item.data.split('\n')[1]?.split('Data: ')[1] : 'Invalid data'; + return ( + + + + handleItemPress(item)}> + {itemData} + + {new Date().toLocaleDateString('en-GB', { + day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' + })} + + + toggleBookmark(index)}> + + + deleteQRCode(index)}> + + + - - )} + ); + }} keyExtractor={(item, index) => index.toString()} - contentContainerStyle={styles.flatListContent} + contentContainerStyle={styles.flatListContent} /> ); @@ -40,26 +90,50 @@ const styles = StyleSheet.create({ backgroundColor: '#f8f0fc', padding: 20, }, - welcomeText: { - textAlign: 'center', - fontSize: 20, - marginVertical: 10, - color: 'black', + headerContainer: { + flexDirection: 'row', + justifyContent: 'space-around', + marginBottom: 20, }, - dataBox: { - marginVertical: 10, - padding: 10, - backgroundColor: '#fff', - borderRadius: 5, + headerTextActive: { + fontSize: 24, + fontWeight: 'bold', + color: '#ff69b4', + }, + headerTextInactive: { + fontSize: 24, + fontWeight: 'bold', + color: '#ccc', + }, + itemContainer: { + flexDirection: 'row', + justifyContent: 'space-between', alignItems: 'center', - justifyContent: 'center', + backgroundColor: '#ffe6f0', + padding: 10, + borderRadius: 10, + marginBottom: 10, + }, + itemLeft: { + flexDirection: 'column', + }, + itemRight: { + flexDirection: 'row', }, dataText: { fontSize: 16, color: '#000', + marginBottom: 5, + }, + dateText: { + fontSize: 12, + color: '#000', + }, + qrIcon: { + marginBottom: 5, }, flatListContent: { - paddingBottom: 100, // Add padding to the bottom so that it wont kenna hidden by nav bar + paddingBottom: 100, }, }); diff --git a/screens/QRScannerScreen.tsx b/screens/QRScannerScreen.tsx index 539a25c..1e61245 100644 --- a/screens/QRScannerScreen.tsx +++ b/screens/QRScannerScreen.tsx @@ -123,17 +123,33 @@ const QRScannerScreen: React.FC = ({ clearScanData }) => { 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}`; - setScanResult({ positive, scanId }); + 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 qrCode = { + data: newScannedData, + bookmarked: false, + scanResult + }; + setScannedData(newScannedData); - setQrCodes([...qrCodes, newScannedData]); + setQrCodes([...qrCodes, qrCode]); }; // If the focus is lost focus on this screen , when come reset the scan data diff --git a/types.ts b/types.ts index 8462059..e0dc258 100644 --- a/types.ts +++ b/types.ts @@ -1,6 +1,6 @@ import { createContext } from "react"; -interface QRCode { +export interface QRCode { data: string; bookmarked: boolean; scanResult: {