Updated HistoryScreen: changed UI and added toggleBookmark and deleteQRCode with BookMark Tab. Yet to solve setQrCodes updater function error message

screens/HistoryScreen.tsx

@@ -1,32 +1,82 @@
 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<string | null>(null);
-  const [scanResult, setScanResult] = useState<any>(null); // KI for testing
-  const [dataType, setDataType] = useState<string>(''); // KIV
+  const [selectedScanResult, setSelectedScanResult] = useState<any | null>(null);
+  const [showBookmarks, setShowBookmarks] = useState<boolean>(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 (
     <View style={styles.container}>
-      <Text style={styles.welcomeText}>History Screen</Text>
+      <View style={styles.headerContainer}>
+        <TouchableOpacity onPress={() => setShowBookmarks(false)}>
+          <Text style={!showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>History</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => setShowBookmarks(true)}>
+          <Text style={showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>Bookmarks</Text>
+        </TouchableOpacity>
+      </View>
       {selectedData && (
-        <ScannedDataBox data={selectedData} scanResult={scanResult} dataType={dataType} />
+        <ScannedDataBox data={selectedData} scanResult={selectedScanResult} dataType="URL" />
       )}
       <FlatList
-        data={qrCodes}
-        renderItem={({ item }) => (
-          <TouchableOpacity onPress={() => setSelectedData(item)}>
-            <View style={styles.dataBox}>
-              <Text style={styles.dataText}>{item}</Text>
+        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 (
+            <View style={styles.itemContainer}>
+              <View style={styles.itemLeft}>
+                <Ionicons name="qr-code-outline" size={24} color="#ff69b4" style={styles.qrIcon} />
+                <TouchableOpacity onPress={() => handleItemPress(item)}>
+                  <Text style={styles.dataText}>{itemData}</Text>
+                </TouchableOpacity>
+                <Text style={styles.dateText}>{new Date().toLocaleDateString('en-GB', {
+                  day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'
+                })}</Text>
+              </View>
+              <View style={styles.itemRight}>
+                <TouchableOpacity onPress={() => toggleBookmark(index)}>
+                  <Ionicons name={item.bookmarked ? "bookmark" : "bookmark-outline"} size={24} color={item.bookmarked ? "#2196F3" : "#ff69b4"} />
+                </TouchableOpacity>
+                <TouchableOpacity onPress={() => deleteQRCode(index)}>
+                  <Ionicons name="close-circle-outline" size={24} color="#ff69b4" />
+                </TouchableOpacity>
+              </View>
             </View>
-          </TouchableOpacity>
-        )}
+          );
+        }}
         keyExtractor={(item, index) => index.toString()}
         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,
   },
 });
 

screens/QRScannerScreen.tsx

@@ -123,17 +123,33 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ 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

types.ts

@@ -1,6 +1,6 @@
 import { createContext } from "react";
 
-interface QRCode {
+export interface QRCode {
   data: string;
   bookmarked: boolean;
   scanResult: {