David/JEISA-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[dyad] Fixed a bug preventing the QR code scanner from starting - wrote 1 file(s)

Browse source
This commit is contained in:
davidels1 2025-09-09 00:57:51 +02:00
parent f9a6bdc346
commit 248eec947b
1 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/stock/QRScannerDialog.tsx
View file

@ -10,18 +10,13 @@ import {
DialogDescription,
} from "@/components/ui/dialog"
interface QRScannerDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
onScanSuccess: (decodedText: string) => void
}
const SCANNER_ID = "html5-qrcode-reader";
const QRScannerDialog = ({ open, onOpenChange, onScanSuccess }: QRScannerDialogProps) => {
// This component is only mounted when the dialog is open, ensuring the div exists.
const Scanner = ({ onScanSuccess }: { onScanSuccess: (decodedText: string) => void }) => {
useEffect(() => {
if (!open) return;
const scanner = new Html5QrcodeScanner(
"reader", // The ID of the element to render the scanner in
SCANNER_ID,
{
qrbox: {
width: 250,
@ -33,12 +28,11 @@ const QRScannerDialog = ({ open, onOpenChange, onScanSuccess }: QRScannerDialogP
);
const handleSuccess = (decodedText: string) => {
scanner.clear();
// Let the cleanup function handle stopping the scanner when the component unmounts.
onScanSuccess(decodedText);
};
const handleError = (error: any) => {
// Don't log common errors like QR code not found
if (typeof error !== 'string' || !error.includes('No QR code found')) {
console.error("QR Scanner Error:", error);
}
@ -46,16 +40,26 @@ const QRScannerDialog = ({ open, onOpenChange, onScanSuccess }: QRScannerDialogP
scanner.render(handleSuccess, handleError);
// Cleanup function to stop the scanner when the component unmounts or dialog closes
// Cleanup function to stop the scanner when the component unmounts.
return () => {
if (scanner) {
scanner.clear().catch(error => {
console.error("Failed to clear scanner.", error);
});
}
scanner.clear().catch(error => {
// This can sometimes throw an error if the component is already gone.
// We can safely ignore it.
console.log("Scanner cleared or already gone.");
});
};
}, [open, onScanSuccess]);
}, [onScanSuccess]);
return <div id={SCANNER_ID} className="w-full"></div>;
};
interface QRScannerDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
onScanSuccess: (decodedText: string) => void
}
const QRScannerDialog = ({ open, onOpenChange, onScanSuccess }: QRScannerDialogProps) => {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
@ -65,7 +69,8 @@ const QRScannerDialog = ({ open, onOpenChange, onScanSuccess }: QRScannerDialogP
Point your camera at a QR code to scan it.
</DialogDescription>
</DialogHeader>
<div id="reader" className="w-full"></div>
{/* Conditionally render the Scanner component only when the dialog is open */}
{open && <Scanner onScanSuccess={onScanSuccess} />}
</DialogContent>
</Dialog>
);