export default function QrCodePage()

in public/src/components/utilities/QrCodePage.tsx [91:169]
61 lines of code
2 McCabe index (conditional complexity)

export default function QrCodePage(): JSX.Element {
  const [searchParams] = useSearchParams();
  const [url, setUrl] = useState(decodeUrlFromParam(searchParams) ?? '');
  const [fileName, setFileName] = useState('');
  const [codeSize, setCodeSize] = useState(256);
  const classes = useStyles();

  function onSvgDownload() {
    const svg = document.querySelector<SVGElement>('#QRCode');
    if (svg && url) {
      const svgData = svg.outerHTML;
      const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
      const svgUrl = URL.createObjectURL(svgBlob);

      const downloadLink = document.createElement('a');
      downloadLink.href = svgUrl;
      downloadLink.download = `${fileName ?? 'qrCode'}.svg`;
      downloadLink.rel = 'noopener';
      downloadLink.click();

      URL.revokeObjectURL(url);
    }
  }

  return (
    <div className={classes.container}>
      <UserAdvice />
      <Paper className={classes.subContainer}>
        <Typography variant="h2" className={classes.heading}>
          Generate a QR code
        </Typography>
        <Box className={classes.form}>
          <FormControl>
            <TextField
              label="URL"
              name="url"
              fullWidth={true}
              onChange={e => setUrl(e.target.value)}
              type="text"
              required
              value={url}
            />
          </FormControl>
          <FormControl>
            <TextField
              label="Size (in px)"
              name="size"
              fullWidth={true}
              defaultValue={256}
              onChange={e => setCodeSize(parseInt(e.target.value))}
              type="text"
              inputMode="numeric"
              required
            />
          </FormControl>
        </Box>
        <Card className={classes.codeContainer} variant="outlined">
          {url && <QRCode id="QRCode" value={url} size={codeSize} />}
        </Card>
        <Box className={classes.form}>
          <FormControl>
            <TextField
              label="File name (optional)"
              name="fileName"
              fullWidth={true}
              onChange={e => setFileName(e.target.value)}
              type="text"
            />
          </FormControl>
          <FormControl>
            <Button variant="contained" onClick={onSvgDownload}>
              Download as SVG
            </Button>
          </FormControl>
        </Box>
      </Paper>
    </div>
  );
}