forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-19 21:16:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Removed checks for QR code features that were not supported on versions older than 2.6

Browse Source
This commit is contained in:
Alejandro Celaya
2022-05-01 10:44:12 +02:00
parent 9518ad9bb4
commit a949ec9e8e
4 changed files with 32 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/short-urls/helpers/QrCodeModal.tsx
View File

@@ -7,11 +7,7 @@ import { ShortUrlModalProps } from '../data';
import { SelectedServer } from '../../servers/data';
import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
import { buildQrCodeUrl, QrCodeCapabilities, QrCodeFormat, QrErrorCorrection } from '../../utils/helpers/qrCodes';
import {
supportsQrCodeSizeInQuery,
supportsQrCodeMargin,
supportsQrErrorCorrection,
} from '../../utils/helpers/features';
import { supportsQrErrorCorrection } from '../../utils/helpers/features';
import { ImageDownloader } from '../../common/services/ImageDownloader';
import { ForServerVersionProps } from '../../servers/helpers/ForServerVersion';
import { QrFormatDropdown } from './qr-codes/QrFormatDropdown';
@@ -30,11 +26,9 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<ForS
const [format, setFormat] = useState<QrCodeFormat>('png');
const [errorCorrection, setErrorCorrection] = useState<QrErrorCorrection>('L');
const capabilities: QrCodeCapabilities = useMemo(() => ({
useSizeInPath: !supportsQrCodeSizeInQuery(selectedServer),
marginIsSupported: supportsQrCodeMargin(selectedServer),
errorCorrectionIsSupported: supportsQrErrorCorrection(selectedServer),
}), [selectedServer]);
const willRenderThreeControls = capabilities.marginIsSupported !== capabilities.errorCorrectionIsSupported;
const willRenderThreeControls = !capabilities.errorCorrectionIsSupported;
const qrCodeUrl = useMemo(
() => buildQrCodeUrl(shortUrl, { size, format, margin, errorCorrection }, capabilities),
[shortUrl, size, format, margin, errorCorrection, capabilities],
@@ -67,21 +61,19 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<ForS
onChange={(e) => setSize(Number(e.target.value))}
/>
</FormGroup>
{capabilities.marginIsSupported && (
<FormGroup className={`d-grid ${willRenderThreeControls ? 'col-md-4' : 'col-md-6'}`}>
<label htmlFor="marginControl">Margin: {margin}px</label>
<input
id="marginControl"
type="range"
className="form-control-range"
value={margin}
step={1}
min={0}
max={100}
onChange={(e) => setMargin(Number(e.target.value))}
/>
</FormGroup>
)}
<FormGroup className={`d-grid ${willRenderThreeControls ? 'col-md-4' : 'col-md-6'}`}>
<label htmlFor="marginControl">Margin: {margin}px</label>
<input
id="marginControl"
type="range"
className="form-control-range"
value={margin}
step={1}
min={0}
max={100}
onChange={(e) => setMargin(Number(e.target.value))}
/>
</FormGroup>
<FormGroup className={willRenderThreeControls ? 'col-md-4' : 'col-md-6'}>
<QrFormatDropdown format={format} setFormat={setFormat} />
</FormGroup>

2
src/utils/helpers/features.ts
View File

@@ -4,10 +4,8 @@ import { versionMatch, Versions } from './version';
const serverMatchesVersions = (versions: Versions) => (selectedServer: SelectedServer): boolean =>
isReachableServer(selectedServer) && versionMatch(selectedServer.version, versions);
export const supportsQrCodeSizeInQuery = serverMatchesVersions({ minVersion: '2.5.0' });
export const supportsShortUrlTitle = serverMatchesVersions({ minVersion: '2.6.0' });
export const supportsOrphanVisits = supportsShortUrlTitle;
export const supportsQrCodeMargin = supportsShortUrlTitle;
export const supportsBotVisits = serverMatchesVersions({ minVersion: '2.7.0' });
export const supportsCrawlableVisits = supportsBotVisits;
export const supportsQrErrorCorrection = serverMatchesVersions({ minVersion: '2.8.0' });

10
src/utils/helpers/qrCodes.ts
View File

@@ -2,8 +2,6 @@ import { isEmpty } from 'ramda';
import { stringifyQuery } from './query';
export interface QrCodeCapabilities {
useSizeInPath: boolean;
marginIsSupported: boolean;
errorCorrectionIsSupported: boolean;
}
@@ -21,13 +19,13 @@ export interface QrCodeOptions {
export const buildQrCodeUrl = (
shortUrl: string,
{ size, format, margin, errorCorrection }: QrCodeOptions,
{ useSizeInPath, marginIsSupported, errorCorrectionIsSupported }: QrCodeCapabilities,
{ errorCorrectionIsSupported }: QrCodeCapabilities,
): string => {
const baseUrl = `${shortUrl}/qr-code${useSizeInPath ? `/${size}` : ''}`;
const baseUrl = `${shortUrl}/qr-code`;
const query = stringifyQuery({
size: useSizeInPath ? undefined : size,
size,
format,
margin: marginIsSupported && margin > 0 ? margin : undefined,
margin: margin > 0 ? margin : undefined,
errorCorrection: errorCorrectionIsSupported ? errorCorrection : undefined,
});