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

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
Download Patch File Download Diff File Expand all files Collapse all files

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 {