'use client';
import {Html5Qrcode} from "html5-qrcode";
import {useEffect, useState} from "react";
import LoadingSpinner from "@/components/loading-spinner";
import fetchWithCheck from "@/api-queries/utils/fetch-with-check";
export default function Scanner() {
const [qrCodeScanner, setQrCodeScanner] = useState(null);
const [isVerifying, setIsVerifying] = useState(false);
const [result, setResult] = useState(null);
const [error, setError] = useState(null);
const [rescanTimer, setRescanTimer] = useState(null);
const qrCodeSuccessCallback = async (decodedText: string) => {
stopScanner();
setIsVerifying(true);
try {
const response = await fetchWithCheck(`/api/scan`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
code: decodedText
})
});
const newRescanTimer = setTimeout(() => {
startScanner();
clearTimeout(newRescanTimer);
}, 3000);
setRescanTimer(newRescanTimer as unknown as number);
setResult(response ? true : null);
} catch (e: unknown) {
setError((e as Error).message);
}
setIsVerifying(false);
};
const qrCodeErrorCallback = (errorMessage: string) => {
console.log(errorMessage);
};
const startScanner = () => {
if (rescanTimer) {
setRescanTimer(null);
clearTimeout(rescanTimer);
}
setResult(null);
setError(null);
qrCodeScanner?.start(
{
facingMode: "environment"
},
{
fps: 1,
aspectRatio: 1,
qrbox: (width: number, height: number) => {
return {
width: 0.7 * width,
height: 0.7 * height
};
}
},
qrCodeSuccessCallback,
qrCodeErrorCallback
);
};
const stopScanner = () => {
qrCodeScanner?.stop();
};
useEffect(() => {
const qrCodeReader = new Html5Qrcode("qr-code-reader");
setQrCodeScanner(qrCodeReader);
return () => {
try {
qrCodeReader.stop();
qrCodeReader.clear();
} catch (e) {
console.error(e);
}
};
}, []);
useEffect(() => {
if (!qrCodeScanner) {
return;
}
startScanner();
}, [qrCodeScanner]);
return
{isVerifying &&
}
{result &&
}
{error &&
}
{(result || error) &&
}
;
}