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

Improved handling of errors in several API interactions

Browse source
This commit is contained in:
Alejandro Celaya 2020-12-21 21:26:45 +01:00
parent 51379eb2a0
commit ee95d5a1b7
4 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/short-urls/helpers/EditShortUrlModal.tsx
View file

@ -5,6 +5,7 @@ import { ShortUrlEdition } from '../reducers/shortUrlEdition';
import { handleEventPreventingDefault, hasValue, OptionalString } from '../../utils/utils';
import { ShortUrlModalProps } from '../data';
import { Result } from '../../utils/Result';
import { ShlinkApiError } from '../../api/ShlinkApiError';
interface EditShortUrlModalProps extends ShortUrlModalProps {
shortUrlEdition: ShortUrlEdition;
@ -12,7 +13,7 @@ interface EditShortUrlModalProps extends ShortUrlModalProps {
}
const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShortUrl }: EditShortUrlModalProps) => {
const { saving, error } = shortUrlEdition;
const { saving, error, errorData } = shortUrlEdition;
const url = shortUrl?.shortUrl ?? '';
const [ longUrl, setLongUrl ] = useState(shortUrl.longUrl);
@ -36,7 +37,10 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
</FormGroup>
{error && (
<Result type="error" small className="mt-2">
Something went wrong while saving the long URL :(
<ShlinkApiError
errorData={errorData}
fallbackMessage="Something went wrong while saving the long URL :("
/>
</Result>
)}
</ModalBody>

10
src/short-urls/helpers/EditTagsModal.tsx
View file

@ -6,6 +6,7 @@ import { ShortUrlModalProps } from '../data';
import { OptionalString } from '../../utils/utils';
import { TagsSelectorProps } from '../../tags/helpers/TagsSelector';
import { Result } from '../../utils/Result';
import { ShlinkApiError } from '../../api/ShlinkApiError';
interface EditTagsModalProps extends ShortUrlModalProps {
shortUrlTags: ShortUrlTags;
@ -20,6 +21,7 @@ const EditTagsModal = (TagsSelector: FC<TagsSelectorProps>) => (
useEffect(() => resetShortUrlsTags, []);
const { saving, error, errorData } = shortUrlTags;
const url = shortUrl?.shortUrl ?? '';
const saveTags = async () => editShortUrlTags(shortUrl.shortCode, shortUrl.domain, selectedTags)
.then(toggle)
@ -32,16 +34,16 @@ const EditTagsModal = (TagsSelector: FC<TagsSelectorProps>) => (
</ModalHeader>
<ModalBody>
<TagsSelector tags={selectedTags} onChange={setSelectedTags} />
{shortUrlTags.error && (
{error && (
<Result type="error" small className="mt-2">
Something went wrong while saving the tags :(
<ShlinkApiError errorData={errorData} fallbackMessage="Something went wrong while saving the tags :(" />
</Result>
)}
</ModalBody>
<ModalFooter>
<button className="btn btn-link" onClick={toggle}>Cancel</button>
<button className="btn btn-primary" type="button" disabled={shortUrlTags.saving} onClick={saveTags}>
{shortUrlTags.saving ? 'Saving tags...' : 'Save tags'}
<button className="btn btn-primary" type="button" disabled={saving} onClick={saveTags}>
{saving ? 'Saving tags...' : 'Save tags'}
</button>
</ModalFooter>
</Modal>

12
src/short-urls/reducers/shortUrlEdition.ts
View file

@ -4,6 +4,7 @@ import { GetState } from '../../container/types';
import { OptionalString } from '../../utils/utils';
import { ShortUrlIdentifier } from '../data';
import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
import { ProblemDetailsError } from '../../utils/services/types';
/* eslint-disable padding-line-between-statements */
export const EDIT_SHORT_URL_START = 'shlink/shortUrlEdition/EDIT_SHORT_URL_START';
@ -16,12 +17,17 @@ export interface ShortUrlEdition {
longUrl: string | null;
saving: boolean;
error: boolean;
errorData?: ProblemDetailsError;
}
export interface ShortUrlEditedAction extends Action<string>, ShortUrlIdentifier {
longUrl: string;
}
export interface ShortUrlEditionFailedAction extends Action<string> {
errorData?: ProblemDetailsError;
}
const initialState: ShortUrlEdition = {
shortCode: null,
longUrl: null,
@ -29,9 +35,9 @@ const initialState: ShortUrlEdition = {
error: false,
};
export default buildReducer<ShortUrlEdition, ShortUrlEditedAction>({
export default buildReducer<ShortUrlEdition, ShortUrlEditedAction & ShortUrlEditionFailedAction>({
[EDIT_SHORT_URL_START]: (state) => ({ ...state, saving: true, error: false }),
[EDIT_SHORT_URL_ERROR]: (state) => ({ ...state, saving: false, error: true }),
[EDIT_SHORT_URL_ERROR]: (state, { errorData }) => ({ ...state, saving: false, error: true, errorData }),
[SHORT_URL_EDITED]: (_, { shortCode, longUrl }) => ({ shortCode, longUrl, saving: false, error: false }),
}, initialState);
@ -47,7 +53,7 @@ export const editShortUrl = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
await updateShortUrlMeta(shortCode, domain, { longUrl });
dispatch<ShortUrlEditedAction>({ shortCode, longUrl, domain, type: SHORT_URL_EDITED });
} catch (e) {
dispatch({ type: EDIT_SHORT_URL_ERROR });
dispatch<ShortUrlEditionFailedAction>({ type: EDIT_SHORT_URL_ERROR, errorData: e.response?.data });
throw e;
}

12
src/short-urls/reducers/shortUrlTags.ts
View file

@ -4,6 +4,7 @@ import { GetState } from '../../container/types';
import { OptionalString } from '../../utils/utils';
import { ShortUrlIdentifier } from '../data';
import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
import { ProblemDetailsError } from '../../utils/services/types';
/* eslint-disable padding-line-between-statements */
export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
@ -17,12 +18,17 @@ export interface ShortUrlTags {
tags: string[];
saving: boolean;
error: boolean;
errorData?: ProblemDetailsError;
}
export interface EditShortUrlTagsAction extends Action<string>, ShortUrlIdentifier {
tags: string[];
}
export interface EditShortUrlTagsFailedAction extends Action<string> {
errorData?: ProblemDetailsError;
}
const initialState: ShortUrlTags = {
shortCode: null,
tags: [],
@ -30,9 +36,9 @@ const initialState: ShortUrlTags = {
error: false,
};
export default buildReducer<ShortUrlTags, EditShortUrlTagsAction>({
export default buildReducer<ShortUrlTags, EditShortUrlTagsAction & EditShortUrlTagsFailedAction>({
[EDIT_SHORT_URL_TAGS_START]: (state) => ({ ...state, saving: true, error: false }),
[EDIT_SHORT_URL_TAGS_ERROR]: (state) => ({ ...state, saving: false, error: true }),
[EDIT_SHORT_URL_TAGS_ERROR]: (state, { errorData }) => ({ ...state, saving: false, error: true, errorData }),
[SHORT_URL_TAGS_EDITED]: (_, { shortCode, tags }) => ({ shortCode, tags, saving: false, error: false }),
[RESET_EDIT_SHORT_URL_TAGS]: () => initialState,
}, initialState);
@ -50,7 +56,7 @@ export const editShortUrlTags = (buildShlinkApiClient: ShlinkApiClientBuilder) =
dispatch<EditShortUrlTagsAction>({ tags: normalizedTags, shortCode, domain, type: SHORT_URL_TAGS_EDITED });
} catch (e) {
dispatch({ type: EDIT_SHORT_URL_TAGS_ERROR });
dispatch<EditShortUrlTagsFailedAction>({ type: EDIT_SHORT_URL_TAGS_ERROR, errorData: e.response?.data });
throw e;
}