temp/src/Components/BarcodeScanner.jsx

import React, { useState, useEffect } from "react";
import { Html5QrcodeScanner } from "html5-qrcode";
import { Box } 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([]);

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

    const fetchBarcodeData = (result) => {
      setIsLoading(true);
      try {
        const payload = {
          qrcodeValue: result,
        };
        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);
            }
          });
      } catch (error) {
        setIsLoading(false);
        throw new Error(error);
      }
    };

    const success = (result) => {
      scanner.clear();
      setScanResult(result);
      fetchBarcodeData(result);
    };

    const error = (err) => {
      console.log("Error: ", err);
    };

    // Ensure the element is in the DOM before initializing the scanner
    if (document.getElementById("reader")) {
      scanner.render(success, error);
    }

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

  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-none d-md-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>
        )}
      </Box>
      <Box className="w-100 d-flex justify-content-center">
        {scanResult ? (marksData.length > 0 && barcodeInfo.length > 0 ? (
          <Box className="p-5 w-50 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 className="p-5 w-50 rounded shadow">
            <h5>Marks Data Not Found ..</h5>
          </Box>
        )):null}
      </Box>
      {isLoading && <LoadingContainer />}
    </Box>
  );
};

export default BarcodeScanner;