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

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]);