latest

src/Components/BarcodeScanner.jsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Html5QrcodeScanner } from "html5-qrcode";
-import { Box } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import LoadingContainer from "./LoadingContainer";
 
 const BarcodeScanner = () => {
@@ -8,9 +8,10 @@ const BarcodeScanner = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [barcodeInfo, setBarcodeInfo] = useState([]);
   const [marksData, setMarksData] = useState([]);
+  const scannerRef = useRef(null); // Use ref to store the scanner instance
 
   useEffect(() => {
-    const scanner = new Html5QrcodeScanner("reader", {
+    scannerRef.current = new Html5QrcodeScanner("reader", {
       qrbox: {
         width: 250,
         height: 250,
@@ -51,26 +52,53 @@ const BarcodeScanner = () => {
     };
 
     const success = (result) => {
-      scanner.clear();
+      //   scannerRef.current.clear();
+      const readerEle = document.getElementById("reader");
+      if (readerEle) {
+        readerEle.style.visibility = "hidden";
+      }
       setScanResult(result);
       fetchBarcodeData(result);
     };
+    window.success = success
 
     const error = (err) => {
       console.log("Error: ", err);
     };
-
+    window.error = error
     // Ensure the element is in the DOM before initializing the scanner
     if (document.getElementById("reader")) {
-      scanner.render(success, error);
+      scannerRef.current.render(success, error);
     }
 
     // Cleanup the scanner on component unmount
     return () => {
-      scanner.clear();
+      scannerRef.current.clear();
     };
   }, []);
 
+  const reinitializeScanner = () => {
+    setScanResult(null);
+    setBarcodeInfo([]);
+    setMarksData([]);
+    // if (document.getElementById("reader")) {
+    //   console.log("Reinitializing scanner...");
+    //   scannerRef.current.render(success, error);
+    // }
+  };
+
+  useEffect(() => {
+    if (!scanResult) {
+      const readerEle = document.getElementById("reader");
+      console.log("Reader ELe ===== ", readerEle);
+      if (readerEle) {
+        console.log("Changing it to visible");
+        readerEle.style.visibility = "visible";
+        scannerRef.current.render(success, error);
+      }
+    }
+  }, [scanResult]);
+
   return (
     <Box className="App">
       <Box className="d-flex justify-content-center text-light bg-primary rounded py-3">
@@ -104,17 +132,31 @@ const BarcodeScanner = () => {
         )}
       </Box>
       <Box className="w-100 d-flex justify-content-center">
-        {scanResult ? (marksData.length > 0 && barcodeInfo.length > 0 ? (
+        {scanResult ? (
-          <Box className="p-5 w-50 rounded shadow">
+          marksData.length > 0 && barcodeInfo.length > 0 ? (
+            <>
+              <Box className="d-flex flex-column gap-4">
+                <Box className="p-5 rounded shadow">
                   <h5>Marks : {marksData[0]?.marks}</h5>
                   <h5>File Scanned Date : {marksData[0]?.file_scanned_date}</h5>
                   <h5>Cover QR code : {marksData[0]?.cover_barcode}</h5>
                 </Box>
+                <Box>
+                  <Button
+                    className="p-3 bg-primary text-light rounded"
+                    onClick={reinitializeScanner}
+                  >
+                    Scan Again
+                  </Button>
+                </Box>
+              </Box>
+            </>
           ) : (
             <Box className="p-5 w-50 rounded shadow">
               <h5>Marks Data Not Found ..</h5>
             </Box>
-        )):null}
+          )
+        ) : null}
       </Box>
       {isLoading && <LoadingContainer />}
     </Box>

src/Components/Home.jsx

@@ -33,7 +33,7 @@ const Home = () => {
       url:"/sqlPlayground"
     },
     {
-      title:"Barcode Scanner",
+      title:"QR Code Scanner",
       url:"/barcodeScanner"
     }
     // {