Added support for margin param in buildQrCodeUrl function

This commit is contained in:
Alejandro Celaya 2021-02-14 09:50:26 +01:00
parent be085f50e0
commit f9da22c5a1
3 changed files with 77 additions and 22 deletions

View file

@ -15,13 +15,15 @@ interface QrCodeModalConnectProps extends ShortUrlModalProps {
const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen, selectedServer }: QrCodeModalConnectProps) => {
const [ size, setSize ] = useState(300);
const [ margin ] = useState(0);
const [ format, setFormat ] = useState<QrCodeFormat>('png');
const capabilities: QrCodeCapabilities = useMemo(() => ({
useSizeInPath: !versionMatch(selectedServer.version, { minVersion: '2.5.0' }),
svgIsSupported: versionMatch(selectedServer.version, { minVersion: '2.4.0' }),
marginIsSupported: versionMatch(selectedServer.version, { minVersion: '2.6.0' }),
}), [ selectedServer ]);
const qrCodeUrl = useMemo(
() => buildQrCodeUrl(shortUrl, size, format, capabilities),
() => buildQrCodeUrl(shortUrl, { size, format, margin }, capabilities),
[ shortUrl, size, format, capabilities ],
);
const modalSize = useMemo(() => {

View file

@ -1,25 +1,31 @@
import { always, cond } from 'ramda';
import { isEmpty } from 'ramda';
import { stringifyQuery } from './query';
export interface QrCodeCapabilities {
useSizeInPath: boolean;
svgIsSupported: boolean;
marginIsSupported: boolean;
}
export type QrCodeFormat = 'svg' | 'png';
export interface QrCodeOptions {
size: number;
format: QrCodeFormat;
margin: number;
}
export const buildQrCodeUrl = (
shortUrl: string,
size: number,
format: QrCodeFormat,
{ useSizeInPath, svgIsSupported }: QrCodeCapabilities,
{ size, format, margin }: QrCodeOptions,
{ useSizeInPath, svgIsSupported, marginIsSupported }: QrCodeCapabilities,
): string => {
const sizeFragment = useSizeInPath ? `/${size}` : `?size=${size}`;
const formatFragment = !svgIsSupported ? '' : `format=${format}`;
const joinSymbolResolver = cond([
[ () => useSizeInPath && svgIsSupported, always('?') ],
[ () => !useSizeInPath && svgIsSupported, always('&') ],
]);
const joinSymbol = joinSymbolResolver() ?? '';
const baseUrl = `${shortUrl}/qr-code${useSizeInPath ? `/${size}` : ''}`;
const query = stringifyQuery({
size: useSizeInPath ? undefined : size,
format: svgIsSupported ? format : undefined,
margin: marginIsSupported ? margin : undefined,
});
return `${shortUrl}/qr-code${sizeFragment}${joinSymbol}${formatFragment}`;
return `${baseUrl}${isEmpty(query) ? '' : `?${query}`}`;
};

View file

@ -3,15 +3,62 @@ import { buildQrCodeUrl, QrCodeFormat } from '../../../src/utils/helpers/qrCodes
describe('qrCodes', () => {
describe('buildQrCodeUrl', () => {
test.each([
[ 'foo.com', 530, 'svg', { useSizeInPath: true, svgIsSupported: true }, 'foo.com/qr-code/530?format=svg' ],
[ 'foo.com', 530, 'png', { useSizeInPath: true, svgIsSupported: true }, 'foo.com/qr-code/530?format=png' ],
[ 'bar.io', 870, 'svg', { useSizeInPath: false, svgIsSupported: false }, 'bar.io/qr-code?size=870' ],
[ 'bar.io', 200, 'png', { useSizeInPath: false, svgIsSupported: true }, 'bar.io/qr-code?size=200&format=png' ],
[ 'bar.io', 200, 'svg', { useSizeInPath: false, svgIsSupported: true }, 'bar.io/qr-code?size=200&format=svg' ],
[ 'foo.net', 480, 'png', { useSizeInPath: true, svgIsSupported: false }, 'foo.net/qr-code/480' ],
[ 'foo.net', 480, 'svg', { useSizeInPath: true, svgIsSupported: false }, 'foo.net/qr-code/480' ],
])('builds expected URL based in params', (shortUrl, size, format, capabilities, expectedUrl) => {
expect(buildQrCodeUrl(shortUrl, size, format as QrCodeFormat, capabilities)).toEqual(expectedUrl);
[
'foo.com',
{ size: 530, format: 'svg' as QrCodeFormat, margin: 0 },
{ useSizeInPath: true, svgIsSupported: true, marginIsSupported: false },
'foo.com/qr-code/530?format=svg',
],
[
'foo.com',
{ size: 530, format: 'png' as QrCodeFormat, margin: 0 },
{ useSizeInPath: true, svgIsSupported: true, marginIsSupported: false },
'foo.com/qr-code/530?format=png',
],
[
'bar.io',
{ size: 870, format: 'svg' as QrCodeFormat, margin: 0 },
{ useSizeInPath: false, svgIsSupported: false, marginIsSupported: false },
'bar.io/qr-code?size=870',
],
[
'bar.io',
{ size: 200, format: 'png' as QrCodeFormat, margin: 0 },
{ useSizeInPath: false, svgIsSupported: true, marginIsSupported: false },
'bar.io/qr-code?size=200&format=png',
],
[
'bar.io',
{ size: 200, format: 'svg' as QrCodeFormat, margin: 0 },
{ useSizeInPath: false, svgIsSupported: true, marginIsSupported: false },
'bar.io/qr-code?size=200&format=svg',
],
[
'foo.net',
{ size: 480, format: 'png' as QrCodeFormat, margin: 0 },
{ useSizeInPath: true, svgIsSupported: false, marginIsSupported: false },
'foo.net/qr-code/480',
],
[
'foo.net',
{ size: 480, format: 'svg' as QrCodeFormat, margin: 0 },
{ useSizeInPath: true, svgIsSupported: false, marginIsSupported: false },
'foo.net/qr-code/480',
],
[
'shlink.io',
{ size: 123, format: 'svg' as QrCodeFormat, margin: 10 },
{ useSizeInPath: true, svgIsSupported: false, marginIsSupported: false },
'shlink.io/qr-code/123',
],
[
'shlink.io',
{ size: 456, format: 'png' as QrCodeFormat, margin: 10 },
{ useSizeInPath: true, svgIsSupported: true, marginIsSupported: true },
'shlink.io/qr-code/456?format=png&margin=10',
],
])('builds expected URL based in params', (shortUrl, options, capabilities, expectedUrl) => {
expect(buildQrCodeUrl(shortUrl, options, capabilities)).toEqual(expectedUrl);
});
});
});