mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-03 23:07:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved handling of short URL deletion errors

Browse source
This commit is contained in:
Alejandro Celaya 2020-12-21 21:02:30 +01:00
parent 54b1ab12cd
commit f69f791790
2 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/short-urls/helpers/DeleteShortUrlModal.tsx
View file

@ -5,8 +5,7 @@ import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
import { ShortUrlModalProps } from '../data'; import { ShortUrlModalProps } from '../data';
import { handleEventPreventingDefault, OptionalString } from '../../utils/utils'; import { handleEventPreventingDefault, OptionalString } from '../../utils/utils';
import { Result } from '../../utils/Result'; import { Result } from '../../utils/Result';
import { isInvalidDeletionError } from '../../utils/services/types';
const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps { interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
shortUrlDeletion: ShortUrlDeletion; shortUrlDeletion: ShortUrlDeletion;
@ -22,9 +21,6 @@ const DeleteShortUrlModal = (
useEffect(() => resetDeleteShortUrl, []); useEffect(() => resetDeleteShortUrl, []);
const { error, errorData } = shortUrlDeletion; const { error, errorData } = shortUrlDeletion;
const errorCode = error && errorData?.type;
const hasThresholdError = errorCode === THRESHOLD_REACHED;
const hasErrorOtherThanThreshold = error && errorCode !== THRESHOLD_REACHED;
const close = pipe(resetDeleteShortUrl, toggle); const close = pipe(resetDeleteShortUrl, toggle);
const handleDeleteUrl = handleEventPreventingDefault(() => { const handleDeleteUrl = handleEventPreventingDefault(() => {
const { shortCode, domain } = shortUrl; const { shortCode, domain } = shortUrl;
@ -53,15 +49,15 @@ const DeleteShortUrlModal = (
onChange={(e) => setInputValue(e.target.value)} onChange={(e) => setInputValue(e.target.value)}
/> />
{hasThresholdError && ( {error && isInvalidDeletionError(errorData) && (
<Result type="warning" small className="mt-2"> <Result type="warning" small className="mt-2">
{errorData?.threshold && `This short URL has received more than ${errorData.threshold} visits, and therefore, it cannot be deleted.`} {errorData.threshold && `This short URL has received more than ${errorData.threshold} visits, and therefore, it cannot be deleted.`}
{!errorData?.threshold && 'This short URL has received too many visits, and therefore, it cannot be deleted.'} {!errorData.threshold && 'This short URL has received too many visits, and therefore, it cannot be deleted.'}
</Result> </Result>
)} )}
{hasErrorOtherThanThreshold && ( {error && !isInvalidDeletionError(errorData) && (
<Result type="error" small className="mt-2"> <Result type="error" small className="mt-2">
Something went wrong while deleting the URL :( {errorData?.detail ?? 'Something went wrong while deleting the URL :('}
</Result> </Result>
)} )}
</ModalBody> </ModalBody>

10
src/utils/services/types.ts
View file

@ -77,10 +77,18 @@ export interface ProblemDetailsError {
[extraProps: string]: any; [extraProps: string]: any;
} }
export interface InvalidArgumentError extends ProblemDetailsError { interface InvalidArgumentError extends ProblemDetailsError {
type: 'INVALID_ARGUMENT'; type: 'INVALID_ARGUMENT';
invalidElements: string[]; invalidElements: string[];
} }
interface InvalidShortUrlDeletion extends ProblemDetailsError {
type: 'INVALID_SHORTCODE_DELETION';
threshold?: number;
}
export const isInvalidArgumentError = (error?: ProblemDetailsError): error is InvalidArgumentError => export const isInvalidArgumentError = (error?: ProblemDetailsError): error is InvalidArgumentError =>
error?.type === 'INVALID_ARGUMENT'; error?.type === 'INVALID_ARGUMENT';
export const isInvalidDeletionError = (error?: ProblemDetailsError): error is InvalidShortUrlDeletion =>
error?.type === 'INVALID_SHORTCODE_DELETION';