Fixed HistoryScreen where data not shown on flatlist, and pass type to scannedDataBox properly

screens/HistoryScreen.tsx

@@ -12,6 +12,7 @@ const HistoryScreen: React.FC = () => {
 
   const [selectedData, setSelectedData] = useState<string | null>(null);
   const [selectedScanResult, setSelectedScanResult] = useState<any | null>(null);
+  const [selectedType, setSelectedType] = useState<string | null>(null); // Add state for selectedType
   const [showBookmarks, setShowBookmarks] = useState<boolean>(false);
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
   const [indexToDelete, setIndexToDelete] = useState<number | null>(null);
@@ -21,6 +22,7 @@ const HistoryScreen: React.FC = () => {
       if (selectedData) {
         setSelectedData(null);
         setSelectedScanResult(null);
+        setSelectedType(null);
         return true;
       }
       return false;
@@ -39,6 +41,7 @@ const HistoryScreen: React.FC = () => {
       const originalIndex = prev.length - 1 - index; // Compute the original index
       const newQrCodes = [...prev];
       newQrCodes[originalIndex].bookmarked = !newQrCodes[originalIndex].bookmarked;
+      console.log('Toggled bookmark for QR code at index:', originalIndex);
       return newQrCodes;
     });
   };
@@ -47,6 +50,7 @@ const HistoryScreen: React.FC = () => {
     if (indexToDelete !== null) {
       setQrCodes((prev: QRCode[]) => {
         const originalIndex = prev.length - 1 - indexToDelete; // Compute the original index
+        console.log('Deleting QR code at index:', originalIndex);
         return prev.filter((_, i) => i !== originalIndex);
       });
       setIndexToDelete(null);
@@ -59,20 +63,26 @@ const HistoryScreen: React.FC = () => {
   const handleItemPress = (item: any) => {
     setSelectedData(item.data);
     setSelectedScanResult(item.scanResult);
+    setSelectedType(item.type); // Set the selected type
+    console.log('Selected QR code data:', item.data);
+    console.log('Selected QR code type:', item.type);
   };
 
   const confirmDelete = (index: number) => {
     setIndexToDelete(index);
     setIsModalVisible(true);
+    console.log('Confirm delete for QR code at index:', index);
   };
 
   const clearSelectedData = () => {
     setSelectedData(null);
     setSelectedScanResult(null);
+    setSelectedType(null); // Clear the selected type
   };
 
   return (
     <View style={styles.container}>
+      {/* Header for toggling between History and Bookmarks */}
       <View style={styles.headerContainer}>
         <TouchableOpacity onPress={() => setShowBookmarks(false)}>
           <Text style={!showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>History</Text>
@@ -81,16 +91,18 @@ const HistoryScreen: React.FC = () => {
           <Text style={showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>Bookmarks</Text>
         </TouchableOpacity>
       </View>
+      {/* Display scanned data details */}
       {selectedData && (
         <View style={styles.scannedDataBoxContainer}>
-          <ScannedDataBox data={selectedData} scanResult={selectedScanResult} dataType="URL" clearScanData={clearSelectedData} />
+          <ScannedDataBox data={selectedData} scanResult={selectedScanResult} dataType={selectedType} clearScanData={clearSelectedData} />
         </View>
       )}
+      {/* List of QR codes */}
       <FlatList
         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';
+          console.log('Rendering QR code item:', item);
+          const itemData = item.data;
           return (
             <View style={styles.itemContainer}>
               <View style={styles.itemLeft}>
@@ -116,6 +128,7 @@ const HistoryScreen: React.FC = () => {
         keyExtractor={(item, index) => index.toString()}
         contentContainerStyle={styles.flatListContent}
       />
+      {/* Modal for delete confirmation */}
       <Modal
         transparent={true}
         visible={isModalVisible}

screens/QRScannerScreen.tsx

@@ -8,6 +8,7 @@ import { useNavigation } from '@react-navigation/native';
 import * as ImagePicker from 'expo-image-picker';
 import ScannedDataBox from '../components/ScannedDataBox';
 
+// Main Function
 const QRScannerScreen: React.FC = () => {
   const navigation = useNavigation(); // call Navigation bar
   const [showSplash, setShowSplash] = useState<boolean>(true); // call splash screen
@@ -21,24 +22,30 @@ const QRScannerScreen: React.FC = () => {
   const [dataType, setDataType] = useState<string>(''); // State for data type
   const [enableTorch, setEnableTorch] = useState<boolean>(false); // State for torch
 
+  // Request Camera Permission and initialize the app
   useEffect(() => {
     const initializeApp = async () => {
       const { status } = await Camera.requestCameraPermissionsAsync();
       setHasPermission(status === 'granted');
       setShowSplash(false);
+      console.log("Camera permissions initialized");
     };
 
     initializeApp();
   }, []);
 
+  // Clear Scan Data
   const clearScanDataInternal = () => {
     setScannedData('');
     setScanned(false);
     setDataType('');
+    console.log("Scan data cleared");
   };
 
+  // Handle QR Code Payload
   const handlePayload = async (payload: string) => {
     setScanned(true);
+    console.log("Scanning Completed. Payload is:", payload);
     const type = await sendToAPIServer(payload);
 
     const qrCode = {
@@ -52,18 +59,20 @@ const QRScannerScreen: React.FC = () => {
     };
 
     setScannedData(payload);
-    console.log("handlePayload -> payload", payload);
-    console.log("handlePayload -> type", type);
+    console.log("Payload received:", payload);
+    console.log("Type received from server:", type);
     setDataType(type);
     setQrCodes([...qrCodes, qrCode]);
+    console.log("QR code data added to history");
   };
 
-  const sendToAPIServer = async (data: string): Promise<string> => {
-    console.log('Sending QR code data to backend:', data);
+  // Send QR Code Data to Backend Server
+  const sendToAPIServer = async (payload: string): Promise<string> => {
+    console.log('Sending QR code data to backend:', payload);
 
     try {
       const response = await axios.post('http://192.168.10.247:8080/v1/api/qrcodetypes/detect', {
-        data,
+        data: payload,
       }, {
         headers: {
           'Content-Type': 'application/json',
@@ -77,17 +86,23 @@ const QRScannerScreen: React.FC = () => {
     }
   };
 
+  // Toggle Torch (Flashlight)
   const toggleTorch = () => {
     setEnableTorch((prev) => !prev);
+    console.log("Torch toggled:", enableTorch ? "off" : "on");
   };
 
+  // Handle Test Scan
   const handleTestScan = () => {
     handlePayload('TEST123');
+    console.log("Test scan executed");
   };
 
+  // Read QR Code from Image
   const readQRFromImage = async () => {
     clearScanDataInternal();
-    console.log("readingQRFromImage");
+    console.log("Reading QR code from image");
+
     const result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ImagePicker.MediaTypeOptions.Images,
       allowsEditing: false, // Don't ask user to crop images
@@ -100,10 +115,11 @@ const QRScannerScreen: React.FC = () => {
         if (scannedResult && scannedResult[0] && scannedResult[0].data) {
           handlePayload(scannedResult[0].data);
           // Not sure why scannedResult.data is undefined but access as array work, KIV
-          console.log('readingQRFromImage -> scannedResult[0].data:', scannedResult[0].data);
+          console.log('QR code data from image:', scannedResult[0].data);
         } else {
           setScannedData("No QR Code Found");
           setTimeout(() => setScannedData(""), 4000);
+          console.log("No QR code found in the selected image");
         }
       } catch (error) {
         console.error('Error scanning QR code from image:', error);
@@ -112,9 +128,11 @@ const QRScannerScreen: React.FC = () => {
     }
   };
 
+  // Clear scan data when screen is focused
   useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
       clearScanDataInternal();
+      console.log("Screen focused, scan data cleared");
     });
     return unsubscribe;
   }, [navigation]);