Integrate Redux for state management, replace useState with Redux store

screens/QRScannerScreen.tsx

@@ -1,20 +1,18 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Image } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert } from 'react-native';
 import { Camera, CameraView, scanFromURLAsync } from 'expo-camera';
-import { QRCodeContext } from '../types';
 import axios from 'axios'; // For URL calls
 import { Ionicons } from '@expo/vector-icons'; // For icons
 import { useNavigation } from '@react-navigation/native';
 import * as ImagePicker from 'expo-image-picker';
 import ScannedDataBox from '../components/ScannedDataBox';
+import { useDispatch } from 'react-redux';
+import { addQRCode } from '../actions/qrCodeActions';
 
-// Main Function
 const QRScannerScreen: React.FC = () => {
   const navigation = useNavigation(); // call Navigation bar
   const [showSplash, setShowSplash] = useState<boolean>(true); // call splash screen
-
-  const qrCodeContext = useContext(QRCodeContext); // From ./types.ts
-  const { qrCodes, setQrCodes } = qrCodeContext || { qrCodes: [], setQrCodes: () => {} };
+  const dispatch = useDispatch();
 
   const [hasPermission, setHasPermission] = useState<boolean | null>(null);
   const [scanned, setScanned] = useState<boolean>(false);
@@ -22,35 +20,31 @@ 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);
+    console.log("Scanning Competed payload is :", payload);
     const type = await sendToAPIServer(payload);
 
     const qrCode = {
       data: payload,
       type,
+      bookmarked: false,
       scanResult: {
         secureConnection: true, // Placeholder, replace with actual logic
         virusTotalCheck: true,  // Placeholder, replace with actual logic
@@ -59,14 +53,12 @@ const QRScannerScreen: React.FC = () => {
     };
 
     setScannedData(payload);
-    console.log("Payload received:", payload);
-    console.log("Type received from server:", type);
+    console.log("handlePayload -> payload", payload);
+    console.log("handlePayload -> type", type);
     setDataType(type);
-    setQrCodes([...qrCodes, qrCode]);
-    console.log("QR code data added to history");
+    dispatch(addQRCode(qrCode));
   };
 
-  // Send QR Code Data to Backend Server
   const sendToAPIServer = async (payload: string): Promise<string> => {
     console.log('Sending QR code data to backend:', payload);
 
@@ -86,23 +78,17 @@ 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("Reading QR code from image");
-
+    console.log("readingQRFromImage");
     const result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ImagePicker.MediaTypeOptions.Images,
       allowsEditing: false, // Don't ask user to crop images
@@ -115,11 +101,10 @@ 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('QR code data from image:', scannedResult[0].data);
+          console.log('readingQRFromImage -> scannedResult[0].data:', 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);
@@ -128,11 +113,9 @@ 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]);