Added support for API v3 error types on different error handlers

src/api/ShlinkApiError.tsx

@@ -1,5 +1,5 @@
-import { ProblemDetailsError } from './types';
 import { isInvalidArgumentError } from './utils';
+import { ProblemDetailsError } from './types/errors';
 
 export interface ShlinkApiErrorProps {
   errorData?: ProblemDetailsError;

src/api/services/ShlinkApiClient.ts

@@ -17,10 +17,10 @@ import {
   ShlinkDomainRedirects,
   ShlinkShortUrlsListParams,
   ShlinkShortUrlsListNormalizedParams,
-  ProblemDetailsError,
 } from '../types';
 import { orderToString } from '../../utils/helpers/ordering';
-import { isRegularNotFound } from '../utils';
+import { isRegularNotFound, parseApiError } from '../utils';
+import { ProblemDetailsError } from '../types/errors';
 
 const buildShlinkBaseUrl = (url: string, version: 2 | 3) => `${url}/rest/v${version}`;
 const rejectNilProps = reject(isNil);
@@ -129,7 +129,7 @@ export class ShlinkApiClient {
       data: body,
       paramsSerializer: { indexes: false },
     }).catch((e: AxiosError<ProblemDetailsError>) => {
-      if (!isRegularNotFound(e.response?.data)) {
+      if (!isRegularNotFound(parseApiError(e))) {
         throw e;
       }
 

src/api/types/actions.ts

@@ -1,5 +1,5 @@
 import { Action } from 'redux';
-import { ProblemDetailsError } from './index';
+import { ProblemDetailsError } from './errors';
 
 export interface ApiErrorAction extends Action<string> {
   errorData?: ProblemDetailsError;

src/api/types/errors.ts

@@ -0,0 +1,54 @@
+export enum ErrorTypeV2 {
+  INVALID_ARGUMENT = 'INVALID_ARGUMENT',
+  INVALID_SHORT_URL_DELETION = 'INVALID_SHORT_URL_DELETION',
+  DOMAIN_NOT_FOUND = 'DOMAIN_NOT_FOUND',
+  FORBIDDEN_OPERATION = 'FORBIDDEN_OPERATION',
+  INVALID_URL = 'INVALID_URL',
+  INVALID_SLUG = 'INVALID_SLUG',
+  INVALID_SHORTCODE = 'INVALID_SHORTCODE',
+  TAG_CONFLICT = 'TAG_CONFLICT',
+  TAG_NOT_FOUND = 'TAG_NOT_FOUND',
+  MERCURE_NOT_CONFIGURED = 'MERCURE_NOT_CONFIGURED',
+  INVALID_AUTHORIZATION = 'INVALID_AUTHORIZATION',
+  INVALID_API_KEY = 'INVALID_API_KEY',
+  NOT_FOUND = 'NOT_FOUND',
+}
+
+export enum ErrorTypeV3 {
+  INVALID_ARGUMENT = 'https://shlink.io/api/error/invalid-data',
+  INVALID_SHORT_URL_DELETION = 'https://shlink.io/api/error/invalid-short-url-deletion',
+  DOMAIN_NOT_FOUND = 'https://shlink.io/api/error/domain-not-found',
+  FORBIDDEN_OPERATION = 'https://shlink.io/api/error/forbidden-tag-operation',
+  INVALID_URL = 'https://shlink.io/api/error/invalid-url',
+  INVALID_SLUG = 'https://shlink.io/api/error/non-unique-slug',
+  INVALID_SHORTCODE = 'https://shlink.io/api/error/short-url-not-found',
+  TAG_CONFLICT = 'https://shlink.io/api/error/tag-conflict',
+  TAG_NOT_FOUND = 'https://shlink.io/api/error/tag-not-found',
+  MERCURE_NOT_CONFIGURED = 'https://shlink.io/api/error/mercure-not-configured',
+  INVALID_AUTHORIZATION = 'https://shlink.io/api/error/missing-authentication',
+  INVALID_API_KEY = 'https://shlink.io/api/error/invalid-api-key',
+  NOT_FOUND = 'https://shlink.io/api/error/not-found',
+}
+
+export interface ProblemDetailsError {
+  type: string;
+  detail: string;
+  title: string;
+  status: number;
+  [extraProps: string]: any;
+}
+
+export interface InvalidArgumentError extends ProblemDetailsError {
+  type: ErrorTypeV2.INVALID_ARGUMENT | ErrorTypeV3.INVALID_ARGUMENT;
+  invalidElements: string[];
+}
+
+export interface InvalidShortUrlDeletion extends ProblemDetailsError {
+  type: 'INVALID_SHORTCODE_DELETION' | ErrorTypeV2.INVALID_SHORT_URL_DELETION | ErrorTypeV3.INVALID_SHORT_URL_DELETION;
+  threshold: number;
+}
+
+export interface RegularNotFound extends ProblemDetailsError {
+  type: ErrorTypeV2.NOT_FOUND | ErrorTypeV3.NOT_FOUND;
+  status: 404;
+}

src/api/types/index.ts

@@ -102,26 +102,3 @@ export interface ShlinkShortUrlsListParams {
 export interface ShlinkShortUrlsListNormalizedParams extends Omit<ShlinkShortUrlsListParams, 'orderBy'> {
   orderBy?: string;
 }
-
-export interface ProblemDetailsError {
-  type: string;
-  detail: string;
-  title: string;
-  status: number;
-  [extraProps: string]: any;
-}
-
-export interface InvalidArgumentError extends ProblemDetailsError {
-  type: 'INVALID_ARGUMENT';
-  invalidElements: string[];
-}
-
-export interface InvalidShortUrlDeletion extends ProblemDetailsError {
-  type: 'INVALID_SHORTCODE_DELETION' | 'INVALID_SHORT_URL_DELETION';
-  threshold: number;
-}
-
-export interface RegularNotFound extends ProblemDetailsError {
-  type: 'NOT_FOUND';
-  status: 404;
-}

src/api/utils/index.ts

@@ -1,13 +1,22 @@
 import { AxiosError } from 'axios';
-import { InvalidArgumentError, InvalidShortUrlDeletion, ProblemDetailsError, RegularNotFound } from '../types';
+import {
+  ErrorTypeV2,
+  ErrorTypeV3,
+  InvalidArgumentError,
+  InvalidShortUrlDeletion,
+  ProblemDetailsError,
+  RegularNotFound,
+} from '../types/errors';
 
 export const parseApiError = (e: AxiosError<ProblemDetailsError>) => e.response?.data;
 
 export const isInvalidArgumentError = (error?: ProblemDetailsError): error is InvalidArgumentError =>
-  error?.type === 'INVALID_ARGUMENT';
+  error?.type === ErrorTypeV2.INVALID_ARGUMENT || error?.type === ErrorTypeV3.INVALID_ARGUMENT;
 
 export const isInvalidDeletionError = (error?: ProblemDetailsError): error is InvalidShortUrlDeletion =>
-  error?.type === 'INVALID_SHORTCODE_DELETION' || error?.type === 'INVALID_SHORT_URL_DELETION';
+  error?.type === 'INVALID_SHORTCODE_DELETION'
+  || error?.type === ErrorTypeV2.INVALID_SHORT_URL_DELETION
+  || error?.type === ErrorTypeV3.INVALID_SHORT_URL_DELETION;
 
 export const isRegularNotFound = (error?: ProblemDetailsError): error is RegularNotFound =>
-  error?.type === 'NOT_FOUND' && error?.status === 404;
+  (error?.type === ErrorTypeV2.NOT_FOUND || error?.type === ErrorTypeV3.NOT_FOUND) && error?.status === 404;

src/domains/reducers/domainsList.ts

@@ -1,5 +1,5 @@
 import { Action, Dispatch } from 'redux';
-import { ProblemDetailsError, ShlinkDomainRedirects } from '../../api/types';
+import { ShlinkDomainRedirects } from '../../api/types';
 import { buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { GetState } from '../../container/types';
@@ -9,6 +9,7 @@ import { Domain, DomainStatus } from '../data';
 import { hasServerData } from '../../servers/data';
 import { replaceAuthorityFromUri } from '../../utils/helpers/uri';
 import { EDIT_DOMAIN_REDIRECTS, EditDomainRedirectsAction } from './domainRedirects';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const LIST_DOMAINS_START = 'shlink/domainsList/LIST_DOMAINS_START';
 export const LIST_DOMAINS_ERROR = 'shlink/domainsList/LIST_DOMAINS_ERROR';

src/short-urls/reducers/shortUrlCreation.ts

@@ -3,9 +3,9 @@ import { GetState } from '../../container/types';
 import { ShortUrl, ShortUrlData } from '../data';
 import { buildReducer, buildActionCreator } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const CREATE_SHORT_URL_START = 'shlink/createShortUrl/CREATE_SHORT_URL_START';
 export const CREATE_SHORT_URL_ERROR = 'shlink/createShortUrl/CREATE_SHORT_URL_ERROR';

src/short-urls/reducers/shortUrlDeletion.ts

@@ -1,10 +1,10 @@
 import { Action, Dispatch } from 'redux';
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-import { ProblemDetailsError } from '../../api/types';
 import { GetState } from '../../container/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const DELETE_SHORT_URL_START = 'shlink/deleteShortUrl/DELETE_SHORT_URL_START';
 export const DELETE_SHORT_URL_ERROR = 'shlink/deleteShortUrl/DELETE_SHORT_URL_ERROR';

src/short-urls/reducers/shortUrlDetail.ts

@@ -5,9 +5,9 @@ import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilde
 import { OptionalString } from '../../utils/utils';
 import { GetState } from '../../container/types';
 import { shortUrlMatches } from '../helpers';
-import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const GET_SHORT_URL_DETAIL_START = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_START';
 export const GET_SHORT_URL_DETAIL_ERROR = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_ERROR';

src/short-urls/reducers/shortUrlEdition.ts

@@ -4,9 +4,9 @@ import { GetState } from '../../container/types';
 import { OptionalString } from '../../utils/utils';
 import { EditShortUrlData, ShortUrl } from '../data';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const EDIT_SHORT_URL_START = 'shlink/shortUrlEdition/EDIT_SHORT_URL_START';
 export const EDIT_SHORT_URL_ERROR = 'shlink/shortUrlEdition/EDIT_SHORT_URL_ERROR';

src/tags/reducers/tagDelete.ts

@@ -2,9 +2,9 @@ import { Action, Dispatch } from 'redux';
 import { buildReducer } from '../../utils/helpers/redux';
 import { GetState } from '../../container/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const DELETE_TAG_START = 'shlink/deleteTag/DELETE_TAG_START';
 export const DELETE_TAG_ERROR = 'shlink/deleteTag/DELETE_TAG_ERROR';

src/tags/reducers/tagEdit.ts

@@ -4,9 +4,9 @@ import { buildReducer } from '../../utils/helpers/redux';
 import { GetState } from '../../container/types';
 import { ColorGenerator } from '../../utils/services/ColorGenerator';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const EDIT_TAG_START = 'shlink/editTag/EDIT_TAG_START';
 export const EDIT_TAG_ERROR = 'shlink/editTag/EDIT_TAG_ERROR';

src/tags/reducers/tagsList.ts

@@ -2,7 +2,7 @@ import { isEmpty, reject } from 'ramda';
 import { Action, Dispatch } from 'redux';
 import { CREATE_VISITS, CreateVisitsAction } from '../../visits/reducers/visitCreation';
 import { buildReducer } from '../../utils/helpers/redux';
-import { ProblemDetailsError, ShlinkTags } from '../../api/types';
+import { ShlinkTags } from '../../api/types';
 import { GetState } from '../../container/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { CreateVisit, Stats } from '../../visits/types';
@@ -12,6 +12,7 @@ import { ApiErrorAction } from '../../api/types/actions';
 import { CREATE_SHORT_URL, CreateShortUrlAction } from '../../short-urls/reducers/shortUrlCreation';
 import { DeleteTagAction, TAG_DELETED } from './tagDelete';
 import { EditTagAction, TAG_EDITED } from './tagEdit';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
 export const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';

src/visits/types/index.ts

@@ -1,7 +1,8 @@
 import { Action } from 'redux';
 import { ShortUrl } from '../../short-urls/data';
-import { ProblemDetailsError, ShlinkVisitsParams } from '../../api/types';
+import { ShlinkVisitsParams } from '../../api/types';
 import { DateInterval, DateRange } from '../../utils/dates/types';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export interface VisitsInfo {
   visits: Visit[];

test/api/ShlinkApiError.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { ShlinkApiError, ShlinkApiErrorProps } from '../../src/api/ShlinkApiError';
-import { InvalidArgumentError, ProblemDetailsError } from '../../src/api/types';
+import { ErrorTypeV2, ErrorTypeV3, InvalidArgumentError, ProblemDetailsError } from '../../src/api/types/errors';
 
 describe('<ShlinkApiError />', () => {
   const setUp = (props: ShlinkApiErrorProps) => render(<ShlinkApiError {...props} />);
@@ -20,7 +20,8 @@ describe('<ShlinkApiError />', () => {
   it.each([
     [undefined, 0],
     [Mock.all<ProblemDetailsError>(), 0],
-    [Mock.of<InvalidArgumentError>({ type: 'INVALID_ARGUMENT', invalidElements: [] }), 1],
+    [Mock.of<InvalidArgumentError>({ type: ErrorTypeV2.INVALID_ARGUMENT, invalidElements: [] }), 1],
+    [Mock.of<InvalidArgumentError>({ type: ErrorTypeV3.INVALID_ARGUMENT, invalidElements: [] }), 1],
   ])('renders list of invalid elements when provided error is an InvalidError', (errorData, expectedElementsCount) => {
     setUp({ errorData });
     expect(screen.queryAllByText(/^Invalid elements/)).toHaveLength(expectedElementsCount);

test/domains/ManageDomains.test.tsx

@@ -2,9 +2,10 @@ import { screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { DomainsList } from '../../src/domains/reducers/domainsList';
 import { ManageDomains } from '../../src/domains/ManageDomains';
-import { ProblemDetailsError, ShlinkDomain } from '../../src/api/types';
+import { ShlinkDomain } from '../../src/api/types';
 import { SelectedServer } from '../../src/servers/data';
 import { renderWithEvents } from '../__helpers__/setUpTest';
+import { ProblemDetailsError } from '../../src/api/types/errors';
 
 describe('<ManageDomains />', () => {
   const listDomains = jest.fn();

test/short-urls/helpers/DeleteShortUrlModal.test.tsx

@@ -3,8 +3,8 @@ import { Mock } from 'ts-mockery';
 import { DeleteShortUrlModal } from '../../../src/short-urls/helpers/DeleteShortUrlModal';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { ShortUrlDeletion } from '../../../src/short-urls/reducers/shortUrlDeletion';
-import { ProblemDetailsError } from '../../../src/api/types';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
+import { ProblemDetailsError } from '../../../src/api/types/errors';
 
 describe('<DeleteShortUrlModal />', () => {
   const shortUrl = Mock.of<ShortUrl>({

test/short-urls/reducers/shortUrlDeletion.test.ts

@@ -7,8 +7,8 @@ import reducer, {
   resetDeleteShortUrl,
   deleteShortUrl,
 } from '../../../src/short-urls/reducers/shortUrlDeletion';
-import { ProblemDetailsError } from '../../../src/api/types';
 import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
+import { ProblemDetailsError } from '../../../src/api/types/errors';
 
 describe('shortUrlDeletionReducer', () => {
   describe('reducer', () => {

test/tags/helpers/EditTagModal.test.tsx

@@ -3,8 +3,8 @@ import { Mock } from 'ts-mockery';
 import { TagEdition } from '../../../src/tags/reducers/tagEdit';
 import { EditTagModal as createEditTagModal } from '../../../src/tags/helpers/EditTagModal';
 import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
-import { ProblemDetailsError } from '../../../src/api/types';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
+import { ProblemDetailsError } from '../../../src/api/types/errors';
 
 describe('<EditTagModal />', () => {
   const EditTagModal = createEditTagModal(Mock.of<ColorGenerator>({ getColorForKey: jest.fn(() => 'green') }));