temp/src/Components/BarcodeScanner.jsx

import React, { useState, useEffect, useRef } from "react";
import { Html5QrcodeScanner } from "html5-qrcode";
import { Box, Button } from "@mui/material";
import LoadingContainer from "./LoadingContainer";

const BarcodeScanner = () => {
  const [scanResult, setScanResult] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [barcodeInfo, setBarcodeInfo] = useState([]);
  const [marksData, setMarksData] = useState([]);
  const [partAData, setPartAData] = useState([]);
  const scannerRef = useRef(null); // Use ref to store the scanner instance

  useEffect(() => {
    scannerRef.current = new Html5QrcodeScanner("reader", {
      qrbox: {
        width: 250,
        height: 250,
      },
      fps: 5,
    });

    const fetchBarcodeData = () => {
      if (!scanResult) {
        return;
      }
      setIsLoading(true);
      setMarksData([])
      setBarcodeInfo([])
      setPartAData([])
      try {
        const payload = {
          qrcodeValue: scanResult,
        };
        fetch(
          `${
            import.meta.env.VITE_REACT_APP_BACKEND_URL
          }/fetchQrcodeScannedInfo`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(payload),
          }
        )
          .then((response) => response.json())
          .then((responseData) => {
            setIsLoading(false);
            if (responseData.status === "success") {
              setBarcodeInfo(responseData.results);
              setMarksData(responseData?.marks);
              setPartAData(responseData?.partAResults);
            }
          });
      } catch (error) {
        setIsLoading(false);
        throw new Error(error);
      }
    };
    window.fetchBarcodeData = fetchBarcodeData;

    const success = (result) => {
      //   scannerRef.current.clear();
      const readerEle = document.getElementById("reader");
      if (readerEle) {
        readerEle.style.visibility = "hidden";
      }
      setScanResult(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")) {
      scannerRef.current.render(success, error);
    }

    // Cleanup the scanner on component unmount
    return () => {
      scannerRef.current.clear();
    };
  }, []);

  const reinitializeScanner = () => {
    console.log("calling reinitialize scanner ......")
    setScanResult(null);
    setBarcodeInfo([]);
    setMarksData([]);
    // if (document.getElementById("reader")) {
    //   console.log("Reinitializing scanner...");
    //   scannerRef.current.render(success, error);
    // }
  };

useEffect(()=>{
   console.log("scan result ========== ",scanResult)
   console.log("barcode Info ======= ",barcodeInfo)
   console.log("marksData ========= ",marksData)
},[scanResult,barcodeInfo,marksData])


  useEffect(() => {
    console.log("Calling the use effect ..... scan result changed ...")
    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);
      }
    } else {
      fetchBarcodeData();
    }
  }, [scanResult]);

  return (
    <Box className="App">
      <Box className="d-flex justify-content-center text-light bg-primary rounded py-3">
        <h1>Welcome to exampaper.vidh.ai</h1>
      </Box>
      <Box className="my-3">
        <Box className="d-flex justify-content-center align-items-center w-100">
          {scanResult ? (
            <h5>QR : {scanResult}</h5>
          ) : (
            <div id="reader" style={{ width: "400px", height: "400px" }}></div>
          )}
        </Box>
        {/* <Box className="d-flex d-md-none justify-content-center align-items-center w-100">
          {scanResult ? (
            <h5>QR : {scanResult}</h5>
          ) : (
            <div id="reader" style={{ width: "400px", height: "400px" }}></div>
          )}
        </Box> */}
      </Box>
      <Box className="w-100 d-flex justify-content-center">
        {barcodeInfo.length > 0 && (
          <Box className="p-5 w-50 rounded shadow">
            <h5>Candidate Name: {barcodeInfo[0]?.candidate_name}</h5>
            <h5>Register Name : {barcodeInfo[0]?.register_number}</h5>
            <h5>Subject Code : {barcodeInfo[0]?.subject_code}</h5>
            <h5>Exam center code : {barcodeInfo[0]?.exam_centre_code}</h5>
            <h5>Exam center : {barcodeInfo[0]?.exam_center}</h5>
          </Box>
        )}
        {partAData.length > 0 && (
          <Box className="p-5 w-50 rounded shadow">
            <h5>Barcode : {partAData[0]?.barcode}</h5>
            <h5>QRcode : {partAData[0]?.qrcode}</h5>
            <h5>S.NO : {barcodeInfo[0]?.slno}</h5>
            <h5>Booklet No : {barcodeInfo[0]?.booklet_serial_no}</h5>
            <img src={`https://docs.exampaper.vidh.ai/${partAData?.s3_path}`} alt="PartA Image" width="50%" height="auto"/>
          </Box>
        )}
      </Box>
      <Box className="w-100 d-flex justify-content-center">
        {scanResult ? (
          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>
                  <img src={`https://docs.exampaper.vidh.ai/${marksData?.s3_path}`} alt="PartC Image" width="50%" height="auto"/>
                </Box>
                <Box>
                  <Button
                    className="p-3 bg-primary text-light rounded"
                    onClick={reinitializeScanner}
                  >
                    Scan Again
                  </Button>
                </Box>
              </Box>
            </>
          ) : (
            <Box className="w-50">
              <Box className="p-5 rounded shadow">
                <h5>Marks Data Not Found ..</h5>
              </Box>
              <Box className="my-3">
                <Button
                  className="p-3 bg-primary text-light rounded"
                  onClick={reinitializeScanner}
                >
                  Scan Again
                </Button>
              </Box>
            </Box>
          )
        ) : null}
      </Box>
      {isLoading && <LoadingContainer />}
    </Box>
  );
};

export default BarcodeScanner;