Improved QR code modal, to allow selecting size, format and copy URL

src/utils/CopyToClipboardIcon.scss

@@ -0,0 +1,4 @@
+.copy-to-clipboard-icon {
+  cursor: pointer;
+  font-size: 1.2rem;
+}

src/utils/CopyToClipboardIcon.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import './CopyToClipboardIcon.scss';
+
+interface CopyToClipboardIconProps {
+  text: string;
+  onCopy?: (text: string, result: boolean) => void;
+}
+
+export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ text, onCopy }) => (
+  <CopyToClipboard text={text} onCopy={onCopy}>
+    <FontAwesomeIcon icon={copyIcon} className="ml-2 copy-to-clipboard-icon" />
+  </CopyToClipboard>
+);

src/utils/helpers/qrCodes.ts

@@ -0,0 +1,19 @@
+export interface QrCodeCapabilities {
+  useSizeInPath: boolean;
+  svgIsSupported: boolean;
+}
+
+export type QrCodeFormat = 'svg' | 'png';
+
+export const buildQrCodeUrl = (
+  shortUrl: string,
+  size: number,
+  format: QrCodeFormat,
+  { useSizeInPath, svgIsSupported }: QrCodeCapabilities,
+): string => {
+  const sizeFragment = useSizeInPath ? `/${size}` : `?size=${size}`;
+  const formatFragment = !svgIsSupported ? '' : `format=${format}`;
+  const joinSymbol = useSizeInPath && svgIsSupported ? '?' : !useSizeInPath && svgIsSupported ? '&' : '';
+
+  return `${shortUrl}/qr-code${sizeFragment}${joinSymbol}${formatFragment}`;
+};