Cleared error messages and updated types.tsx to handle bookmarks, Hardcoded testdata for Demo

App.tsx

@@ -10,7 +10,7 @@ import CustomTabBar from './components/CustomTabBar';
 const Tab = createBottomTabNavigator();
 
 const App: React.FC = () => {
-  const [qrCodes, setQrCodes] = useState<string[]>([]);
+  const [qrCodes, setQrCodes] = useState<{ data: string, bookmarked: boolean, scanResult: { secureConnection: boolean, virusTotalCheck: boolean, redirects: number } }[]>([]);
   const [scannedData, setScannedData] = useState<string>('');
 
   const clearScanData = () => {
@@ -22,11 +22,13 @@ const App: React.FC = () => {
       <NavigationContainer>
         <Tab.Navigator
           initialRouteName="QRScanner"
-          tabBar={(props) => <CustomTabBar {...props} clearScanData={clearScanData} />}
+          tabBar={props => <CustomTabBar {...props} clearScanData={clearScanData} />}
         >
           <Tab.Screen name="History" component={HistoryScreen} />
           <Tab.Screen name="QRScanner">
-            {(props) => <QRScannerScreen {...props} clearScanData={clearScanData} />}
+            {(props) => <QRScannerScreen clearScanData={function (): void {
+              throw new Error('Function not implemented.');
+            } } {...props} />}
           </Tab.Screen>
           <Tab.Screen name="Settings" component={SettingsScreen} />
         </Tab.Navigator>

components/ScannedDataBox.tsx

@@ -11,6 +11,24 @@ interface ScannedDataBoxProps {
 
 const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, scanResult, dataType }) => {
   const extractedData = data.split('\n')[1]?.split('Data: ')[1] || '';
+  let resultText = 'SAFE';
+  let resultColor = styles.safeResult;
+
+  if (scanResult) {
+    if (!scanResult.secureConnection || !scanResult.virusTotalCheck) {
+      resultText = 'DANGEROUS';
+      resultColor = styles.dangerousResult;
+    } else if (scanResult.secureConnection && scanResult.virusTotalCheck) {
+      resultText = 'SAFE';
+      resultColor = styles.safeResult;
+    } else {
+      resultText = 'WARNING';
+      resultColor = styles.warningResult;
+    }
+  } else {
+    resultText = 'WARNING';
+    resultColor = styles.warningResult;
+  }
 
   return (
     <View style={styles.dataBox}>
@@ -22,17 +40,17 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, scanResult, dataT
       <Text style={styles.timestampText}>{new Date().toLocaleString()}</Text>
       <View style={styles.qrContainer}>
         <QRCode value={extractedData} size={100} backgroundColor="transparent" />
-        <Text style={styles.resultText}>
-          Result: {scanResult && scanResult.positive > 0 ? 'DANGEROUS' : 'SAFE'}
+        <Text style={[styles.resultText, resultColor]}>
+          Result: {resultText}
         </Text>
       </View>
       <View style={styles.divider} />
       <Text style={styles.typeText}>Type: {dataType}</Text>
       <Text style={styles.blankLine}>{'\n'}</Text>
       <Text style={styles.checksText}>Checks</Text>
-      <Text style={styles.checksText}>Secure Connection: ✘</Text>
-      <Text style={styles.checksText}>Virus Total Check: ✘</Text>
-      <Text style={styles.checksText}>Redirects: 2</Text>
+      <Text style={styles.checksText}>Secure Connection: {scanResult?.secureConnection ? '✔️' : '✘'}</Text>
+      <Text style={styles.checksText}>Virus Total Check: {scanResult?.virusTotalCheck ? '✔️' : '✘'}</Text>
+      <Text style={styles.checksText}>Redirects: {scanResult?.redirects ?? 'N/A'}</Text>
       <View style={styles.iconContainer}>
         <TouchableOpacity style={styles.iconButton}>
           <Ionicons name="share-social" size={24} color="#2196F3" />
@@ -93,10 +111,18 @@ const styles = StyleSheet.create({
   },
   resultText: {
     fontSize: 16,
-    color: '#ff0000',
     marginBottom: 10,
     textAlign: 'center',
   },
+  safeResult: {
+    color: 'green',
+  },
+  warningResult: {
+    color: 'orange',
+  },
+  dangerousResult: {
+    color: 'red',
+  },
   typeText: {
     fontSize: 16,
     color: '#000',

screens/QRCodeProvider.tsx

@@ -0,0 +1,59 @@
+import React, { useState, ReactNode } from 'react';
+import { QRCodeContext } from '../types';
+
+interface QRCodeProviderProps {
+  children: ReactNode;
+}
+
+const testData = [
+  {
+    data: 'Type: URL\nData: https://Safe_website.com',
+    bookmarked: false,
+    scanResult: {
+      secureConnection: true,
+      virusTotalCheck: true,
+      redirects: 0,
+    },
+  },
+  {
+    data: 'Type: URL\nData: https://unknown_website.com',
+    bookmarked: false,
+    scanResult: {
+      secureConnection: true,
+      virusTotalCheck: true,
+      redirects: 2,
+    },
+  },
+  {
+    data: 'Type: URL\nData: http://danger_website.com',
+    bookmarked: false,
+    scanResult: {
+      secureConnection: false,
+      virusTotalCheck: false,
+      redirects: 3,
+    },
+  },
+];
+
+export const QRCodeProvider: React.FC<QRCodeProviderProps> = ({ children }) => {
+  const [qrCodes, setQrCodes] = useState(testData);
+  const [currentScannedData, setCurrentScannedData] = useState<string>('');
+
+  const toggleBookmark = (index: number) => {
+    setQrCodes((prev) => {
+      const newQrCodes = [...prev];
+      newQrCodes[index].bookmarked = !newQrCodes[index].bookmarked;
+      return newQrCodes;
+    });
+  };
+
+  const deleteQRCode = (index: number) => {
+    setQrCodes((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  return (
+    <QRCodeContext.Provider value={{ qrCodes, setQrCodes, setCurrentScannedData, toggleBookmark, deleteQRCode }}>
+      {children}
+    </QRCodeContext.Provider>
+  );
+};

screens/QRScannerScreen.tsx

@@ -244,7 +244,6 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
         <TouchableOpacity onPress={handleImagePicker} style={styles.galleryButton}>
   <Ionicons name="image" size={24} color="#fff" />
 </TouchableOpacity>
-
       {/* The CONTENT , the popup for the scanned data */}
       {/* This is called from ../components/ScannedDataBox*/}
       </View>

types.ts

@@ -1,11 +1,21 @@
-import { createContext } from 'react';
+import { createContext } from "react";
+
+interface QRCode {
+  data: string;
+  bookmarked: boolean;
+  scanResult: {
+    secureConnection: boolean;
+    virusTotalCheck: boolean;
+    redirects: number;
+  };
+}
 
 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;
+  qrCodes: QRCode[];
+  setQrCodes: (codes: QRCode[]) => void;
+  setCurrentScannedData?: (data: string) => void;
+  toggleBookmark?: (index: number) => void;
+  deleteQRCode?: (index: number) => void;
 }
 
 export const QRCodeContext = createContext<QRCodeContextProps | null>(null);