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

When handling API errors, use the type prop and fallback to error if not found

Browse source
This commit is contained in:
Alejandro Celaya 2020-01-11 12:24:45 +01:00
parent dbefae5a01
commit ba8cade6fc
6 changed files with 43 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc
View file

@ -28,6 +28,7 @@
"no-warning-comments": "off",
"no-magic-numbers": "off",
"no-undefined": "off",
"no-inline-comments": "off",
"indent": ["error", 2, {
"SwitchCase": 1
}

1
src/common/ErrorHandler.js
View file

@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types';
import './ErrorHandler.scss';
import { Button } from 'reactstrap';
// FIXME Replace with typescript: (window, console)
const ErrorHandler = ({ location }, { error }) => class ErrorHandler extends React.Component {
static propTypes = {
children: PropTypes.node.isRequired,

12
src/short-urls/helpers/DeleteShortUrlModal.js
View file

@ -5,6 +5,8 @@ import { identity } from 'ramda';
import { shortUrlType } from '../reducers/shortUrlsList';
import { shortUrlDeletionType } from '../reducers/shortUrlDeletion';
const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
export default class DeleteShortUrlModal extends React.Component {
static propTypes = {
shortUrl: shortUrlType,
@ -39,9 +41,10 @@ export default class DeleteShortUrlModal extends React.Component {
render() {
const { shortUrl, toggle, isOpen, shortUrlDeletion } = this.props;
const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
const hasThresholdError = shortUrlDeletion.error && shortUrlDeletion.errorData.error === THRESHOLD_REACHED;
const hasErrorOtherThanThreshold = shortUrlDeletion.error && shortUrlDeletion.errorData.error !== THRESHOLD_REACHED;
const { error, errorData } = shortUrlDeletion;
const errorCode = error && (errorData.type || errorData.error);
const hasThresholdError = errorCode === THRESHOLD_REACHED;
const hasErrorOtherThanThreshold = error && errorCode !== THRESHOLD_REACHED;
return (
<Modal isOpen={isOpen} toggle={toggle} centered>
@ -63,7 +66,8 @@ export default class DeleteShortUrlModal extends React.Component {
{hasThresholdError && (
<div className="p-2 mt-2 bg-warning text-center">
This short URL has received too many 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.'}
</div>
)}
{hasErrorOtherThanThreshold && (

6
src/short-urls/reducers/shortUrlDeletion.js
View file

@ -1,5 +1,6 @@
import { createAction, handleActions } from 'redux-actions';
import PropTypes from 'prop-types';
import { apiErrorType } from '../../utils/services/ShlinkApiClient';
/* eslint-disable padding-line-between-statements */
export const DELETE_SHORT_URL_START = 'shlink/deleteShortUrl/DELETE_SHORT_URL_START';
@ -13,10 +14,7 @@ export const shortUrlDeletionType = PropTypes.shape({
shortCode: PropTypes.string.isRequired,
loading: PropTypes.bool.isRequired,
error: PropTypes.bool.isRequired,
errorData: PropTypes.shape({
error: PropTypes.string,
message: PropTypes.string,
}).isRequired,
errorData: apiErrorType.isRequired,
});
const initialState = {

10
src/utils/services/ShlinkApiClient.js
View file

@ -1,8 +1,18 @@
import qs from 'qs';
import { isEmpty, isNil, reject } from 'ramda';
import PropTypes from 'prop-types';
const API_VERSION = '1';
export const apiErrorType = PropTypes.shape({
type: PropTypes.string,
detail: PropTypes.string,
title: PropTypes.string,
status: PropTypes.number,
error: PropTypes.string, // Deprecated
message: PropTypes.string, // Deprecated
});
export const buildShlinkBaseUrl = (url) => url ? `${url}/rest/v${API_VERSION}` : '';
export default class ShlinkApiClient {

24
test/short-urls/helpers/DeleteShortUrlModal.test.js
View file

@ -1,6 +1,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import { identity } from 'ramda';
import each from 'jest-each';
import DeleteShortUrlModal from '../../../src/short-urls/helpers/DeleteShortUrlModal';
describe('<DeleteShortUrlModal />', () => {
@ -32,17 +33,34 @@ describe('<DeleteShortUrlModal />', () => {
deleteShortUrl.mockClear();
});
it('shows threshold error message when threshold error occurs', () => {
each([
[
{ error: 'INVALID_SHORTCODE_DELETION' },
'This short URL has received too many visits, and therefore, it cannot be deleted.',
],
[
{ type: 'INVALID_SHORTCODE_DELETION' },
'This short URL has received too many visits, and therefore, it cannot be deleted.',
],
[
{ error: 'INVALID_SHORTCODE_DELETION', threshold: 35 },
'This short URL has received more than 35 visits, and therefore, it cannot be deleted.',
],
[
{ type: 'INVALID_SHORTCODE_DELETION', threshold: 8 },
'This short URL has received more than 8 visits, and therefore, it cannot be deleted.',
],
]).it('shows threshold error message when threshold error occurs', (errorData, expectedMessage) => {
const wrapper = createWrapper({
loading: false,
error: true,
shortCode: 'abc123',
errorData: { error: 'INVALID_SHORTCODE_DELETION' },
errorData,
});
const warning = wrapper.find('.bg-warning');
expect(warning).toHaveLength(1);
expect(warning.html()).toContain('This short URL has received too many visits and therefore, it cannot be deleted');
expect(warning.html()).toContain(expectedMessage);
});
it('shows generic error when non-threshold error occurs', () => {