60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { FC, useEffect, useState } from "react";
|
|
// @ts-ignore - react-qr-code doesn't have React 19 compatible types yet
|
|
import QRCodeInternal from "react-qr-code";
|
|
import { Box } from "@mui/material";
|
|
import { colors } from "../styles/theme";
|
|
|
|
type QRCodeProps = {
|
|
name: string;
|
|
label: string;
|
|
token: string;
|
|
verified: boolean;
|
|
helperText?: string;
|
|
getValue?: (id: string) => Promise<Record<string, string>>;
|
|
refreshInterval?: number;
|
|
};
|
|
|
|
export const QRCode: FC<QRCodeProps> = ({
|
|
name,
|
|
label,
|
|
token,
|
|
verified,
|
|
helperText,
|
|
getValue,
|
|
refreshInterval,
|
|
}) => {
|
|
const [value, setValue] = useState("");
|
|
const [kind, setKind] = useState("data");
|
|
const { white } = colors;
|
|
|
|
useEffect(() => {
|
|
if (!verified && getValue && refreshInterval) {
|
|
// Fetch immediately on mount
|
|
const fetchQR = async () => {
|
|
const { qr, kind } = await getValue(token);
|
|
setValue(qr);
|
|
setKind(kind);
|
|
};
|
|
fetchQR();
|
|
|
|
// Then set up interval for refreshes
|
|
const interval = setInterval(fetchQR, refreshInterval * 1000);
|
|
return () => clearInterval(interval);
|
|
}
|
|
}, [getValue, refreshInterval, token, verified]);
|
|
|
|
return !verified ? (
|
|
<Box sx={{ backgroundColor: white, m: 2 }}>
|
|
{value ? (
|
|
kind === "data" ? (
|
|
<QRCodeInternal value={value} />
|
|
) : (
|
|
<img src={value} alt={name} />
|
|
)
|
|
) : (
|
|
<Box>Loading QR code...</Box>
|
|
)}
|
|
<Box>{helperText}</Box>
|
|
</Box>
|
|
) : null;
|
|
};
|