feat: implement error handling for QrCode generation

closes issue #4
master
Katja Lutz 2 years ago
parent 11739dc70c
commit 95784540c9

@ -2,10 +2,13 @@ import {
Component,
createEffect,
createResource,
createSignal,
JSX,
Show,
splitProps,
} from "solid-js";
import qrcode from "qrcode";
import WarningIcon from "~icons/carbon/warning-alt-filled";
const QrCode: Component<
{
@ -21,15 +24,26 @@ const QrCode: Component<
]);
let ref: HTMLDivElement = undefined!;
const [qrError, setQrError] = createSignal<string | undefined>();
const [svg] = createResource(
() => props.value,
(value) => {
return qrcode.toString(value, {
type: "svg",
margin: props.margin,
errorCorrectionLevel: props.errorCorrectionLevel as any,
});
async (value) => {
let svg;
try {
svg = await qrcode.toString(value, {
type: "svg",
margin: props.margin,
errorCorrectionLevel: props.errorCorrectionLevel as any,
});
setQrError();
} catch (err) {
console.error(err);
setQrError((err as Error).message);
}
return svg;
}
);
@ -40,7 +54,17 @@ const QrCode: Component<
});
});
return <div ref={ref} {...rest}></div>;
return (
<>
<Show when={qrError()}>
<div class="absolute h-full p-3 gap-2 rounded-sm flex items-start bg-error/80 backdrop-blur-sm ring-2 ring-error ring-offset-2 border border-error text-error-content overflow-y-auto">
<WarningIcon width="2em" height="2em" class="flex-shrink-0" /> Fehler:{" "}
{qrError()}
</div>
</Show>
<div ref={ref} {...rest}></div>
</>
);
};
export default QrCode;

Loading…
Cancel
Save