84 lines
2.3 KiB
JavaScript
84 lines
2.3 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { QrReader } from "react-qr-reader"; // Import QrReader as named import
|
|
import styles from "./GuestSideLogin.module.css"; // Import module CSS file for styles
|
|
|
|
import { getTableByCode } from "../helpers/tableHelper";
|
|
|
|
const GuestSideLogin = ({ socket }) => {
|
|
const navigate = useNavigate();
|
|
const [qrCode, setQRCode] = useState(""); // State to store QR code
|
|
|
|
socket.on("qrCode_readSuccess", (response) => {
|
|
const { shopId } = response;
|
|
console.log("qr has been read");
|
|
navigate("/" + shopId);
|
|
});
|
|
|
|
const setLoginGuestSide = async () => {
|
|
window.location.href = qrCode;
|
|
};
|
|
|
|
// Function to handle QR code scan
|
|
const handleScan = (data) => {
|
|
if (data) {
|
|
setQRCode(data.text); // Set scanned QR code to state
|
|
setLoginGuestSide(); // Send QR code to backend
|
|
}
|
|
};
|
|
|
|
// Function to handle QR scan error
|
|
const handleError = (err) => {
|
|
console.error(err);
|
|
};
|
|
|
|
// Function to handle manual input
|
|
const handleManualInput = (e) => {
|
|
setQRCode(e.target.value);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (qrCode.length === 40) {
|
|
const timer = setTimeout(() => {
|
|
setLoginGuestSide();
|
|
}, 1000); // Delay of 1 second (1000 milliseconds)
|
|
|
|
return () => clearTimeout(timer); // Cleanup the timer if qrCode changes before the delay completes
|
|
}
|
|
}, [qrCode]);
|
|
|
|
return (
|
|
<div className={styles.qrisReaderContainer}>
|
|
<div className={styles.qrScannerContainer}>
|
|
<QrReader
|
|
constraints={{ facingMode: "environment" }}
|
|
delay={500}
|
|
onResult={handleScan}
|
|
onError={handleError}
|
|
videoId="video"
|
|
className={styles.qrReader} // Apply the class
|
|
videoContainerStyle={{
|
|
width: "100vw",
|
|
height: "100vh",
|
|
paddingTop: "0px",
|
|
}}
|
|
videoStyle={{ width: "100%", height: "100%" }}
|
|
/>
|
|
|
|
<div className={styles.focusSquare}></div>
|
|
</div>
|
|
<div className={styles.inputContainer}>
|
|
{/* Manual input form */}
|
|
<input
|
|
type="text"
|
|
value={qrCode}
|
|
onChange={handleManualInput}
|
|
placeholder="Enter QRIS Code"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GuestSideLogin;
|