From f38d193d50dfaa77f009ae8cce0d5f09b763d005 Mon Sep 17 00:00:00 2001
From: "cyril.tsui" <cyril.tsui@2fi-solutions.com.hk>
Date: Wed, 19 Mar 2025 16:44:28 +0800
Subject: [PATCH] testing qr code scanner

---
 .../QrCodeScanner/QrCodeScanner.tsx           | 99 +++++++++++++++++++
 .../QrCodeScanner/QrCodeScannerModal.tsx      | 49 +++++++++
 src/components/QrCodeScanner/index.ts         |  1 +
 3 files changed, 149 insertions(+)
 create mode 100644 src/components/QrCodeScanner/QrCodeScanner.tsx
 create mode 100644 src/components/QrCodeScanner/QrCodeScannerModal.tsx
 create mode 100644 src/components/QrCodeScanner/index.ts

diff --git a/src/components/QrCodeScanner/QrCodeScanner.tsx b/src/components/QrCodeScanner/QrCodeScanner.tsx
new file mode 100644
index 0000000..2675eeb
--- /dev/null
+++ b/src/components/QrCodeScanner/QrCodeScanner.tsx
@@ -0,0 +1,99 @@
+import { Button, Card, CardContent, Modal, ModalProps, SxProps } from "@mui/material";
+import { Html5QrcodeResult, Html5QrcodeScanner, QrcodeErrorCallback, QrcodeSuccessCallback } from "html5-qrcode";
+import { Html5QrcodeError } from "html5-qrcode/esm/core";
+import { Html5QrcodeScannerConfig } from "html5-qrcode/esm/html5-qrcode-scanner";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+const scannerSx: React.CSSProperties = {
+    position: "absolute",
+    // top: "50%",
+    // left: "50%",
+    // transform: "translate(-50%, -50%)",
+    width: "90%",
+    maxHeight: "10%",
+    maxWidth: 1400,
+};
+
+type QrCodeScannerProps = {
+    onScanSuccess: (result: string) => void,
+    onScanError?: (error: string) => void
+}
+
+const scannerConfig: Html5QrcodeScannerConfig = {
+    fps: 10,
+    qrbox: { width: 400, height: 400 },
+    aspectRatio: 2.5,
+}
+
+const QrCodeScanner: React.FC<QrCodeScannerProps> = ({
+    onScanSuccess,
+    onScanError
+}) => {
+
+    const [isScanned, setIsScanned] = useState<boolean>(false)
+    const [scanner, setScanner] = useState<Html5QrcodeScanner | null>(null)
+
+    useEffect(() => {
+        setScanner(new Html5QrcodeScanner(
+            "qr-reader",
+            scannerConfig,
+            false
+        ))
+    }, [])
+
+    const handleStartScan = useCallback(() => {
+        setIsScanned(false)
+        scanner?.resume();
+    }, [scanner])
+
+    useEffect(() => {
+        if (scanner) {
+            console.log("Scanner Instance:", scanner);
+            const success: QrcodeSuccessCallback = (decodedText, result) => {
+                console.log(`Decoded text: ${decodedText}`);
+                // Handle the decoded text as needed
+                setIsScanned(true)
+                scanner.pause();
+                onScanSuccess(decodedText)
+            };
+
+            const error: QrcodeErrorCallback = (errorMessage, error) => {
+                console.log(`Error: ${errorMessage}`);
+
+                if (onScanError) {
+                    onScanError(errorMessage)
+                }
+            };
+
+            try {
+                scanner.render(success, error);
+                console.log("Scanner render called");
+            } catch (err) {
+                console.error("Failed to render scanner:", err);
+            }
+            
+            return () => {
+                console.log("Cleaning up scanner...");
+                scanner.clear().catch((error) => {
+                    console.error("Failed to clear html5QrcodeScanner. ", error);
+                });
+            };
+        }
+    }, [scanner]);
+
+
+    return (
+        <>
+            <div id="qr-reader" hidden={isScanned} />
+            <Button
+                size="small"
+                onClick={handleStartScan}
+                variant="contained"
+            >
+                {isScanned ? "Re-Scan" : "Stop-Scanning"}
+            </Button>
+        </>
+    )
+}
+
+export default QrCodeScanner
\ No newline at end of file
diff --git a/src/components/QrCodeScanner/QrCodeScannerModal.tsx b/src/components/QrCodeScanner/QrCodeScannerModal.tsx
new file mode 100644
index 0000000..2aaa8a4
--- /dev/null
+++ b/src/components/QrCodeScanner/QrCodeScannerModal.tsx
@@ -0,0 +1,49 @@
+import { Button, CardContent, Card, Modal, SxProps, ModalProps } from "@mui/material";
+import QrCodeScanner from "./QrCodeScanner";
+import { useCallback } from "react";
+
+const modalSx: SxProps = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: { xs: "calc(100% - 2rem)", sm: "90%" },
+    maxHeight: "90%",
+    maxWidth: 1400,
+};
+
+type QrCodeScannerModalProps = {
+    isOpen: boolean,
+    onClose: () => void,
+    onScanSuccess: (result: string) => void,
+    onScanError?: (error: string) => void
+}
+
+const QrCodeScannerModal: React.FC<QrCodeScannerModalProps> = ({
+    isOpen,
+    onClose,
+    onScanSuccess,
+    onScanError,
+}) => {
+
+    const onModalClose = useCallback<NonNullable<ModalProps["onClose"]>>(
+        (_, reason) => {
+            if (reason !== "backdropClick") {
+                onClose();
+            }
+        },
+        [onClose],
+    );
+
+    return (
+        <Modal open={isOpen} onClose={onModalClose}>
+            <Card sx={modalSx}>
+                <CardContent>
+                    <QrCodeScanner onScanSuccess={onScanSuccess} onScanError={onScanError}/>
+                </CardContent>
+            </Card>
+        </Modal>
+    )
+}
+
+export default QrCodeScannerModal
\ No newline at end of file
diff --git a/src/components/QrCodeScanner/index.ts b/src/components/QrCodeScanner/index.ts
new file mode 100644
index 0000000..c856b00
--- /dev/null
+++ b/src/components/QrCodeScanner/index.ts
@@ -0,0 +1 @@
+export { default } from "./QrCodeScannerModal"
\ No newline at end of file