Improved handling of errors in several API interactions

src/short-urls/helpers/EditShortUrlModal.tsx

@@ -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>

src/short-urls/helpers/EditTagsModal.tsx

@@ -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}>
+        <button className="btn btn-primary" type="button" disabled={saving} onClick={saveTags}>
-          {shortUrlTags.saving ? 'Saving tags...' : 'Save tags'}
+          {saving ? 'Saving tags...' : 'Save tags'}
         </button>
       </ModalFooter>
     </Modal>

src/short-urls/reducers/shortUrlEdition.ts

@@ -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;
   }

src/short-urls/reducers/shortUrlTags.ts

@@ -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;
   }