Updated behavior on tags modal so that the component handles all actions

src/short-urls/helpers/EditTagsModal.js

@@ -3,8 +3,9 @@ import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import TagsSelector from '../../utils/TagsSelector';
 import PropTypes from 'prop-types';
-import { editShortUrlTags, shortUrlTagsType } from '../reducers/shortUrlTags';
+import { editShortUrlTags, resetShortUrlsTags, shortUrlTagsType } from '../reducers/shortUrlTags';
 import { pick } from 'ramda';
+import { refreshShortUrls } from '../reducers/shortUrlsList';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,
@@ -19,8 +20,26 @@ const propTypes = {
 export class EditTagsModal extends React.Component {
   saveTags = () => {
     const { editShortUrlTags, shortUrl, toggle } = this.props;
-    editShortUrlTags(shortUrl.shortCode, this.state.tags).then(toggle);
+    editShortUrlTags(shortUrl.shortCode, this.state.tags)
+      .then(() => {
+        this.tagsSaved = true;
+        toggle();
+      })
+      .catch(() => {});
   };
+  refreshShortUrls = () => {
+    if (!this.tagsSaved) {
+      return;
+    }
+
+    this.props.refreshShortUrls();
+  };
+
+  componentDidMount() {
+    const { resetShortUrlsTags } = this.props;
+    resetShortUrlsTags();
+    this.tagsSaved = false;
+  }
 
   constructor(props) {
     super(props);
@@ -31,10 +50,15 @@ export class EditTagsModal extends React.Component {
     const { isOpen, toggle, url, shortUrlTags } = this.props;
 
     return (
-      <Modal isOpen={isOpen} toggle={toggle} centered>
+      <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.refreshShortUrls}>
         <ModalHeader toggle={toggle}>Edit tags for <a target="_blank" href={url}>{url}</a></ModalHeader>
         <ModalBody>
           <TagsSelector tags={this.state.tags} onChange={tags => this.setState({ tags })} />
+          {shortUrlTags.error && (
+            <div className="p-2 mt-2 bg-danger text-white text-center">
+              Something went wrong while saving the tags :(
+            </div>
+          )}
         </ModalBody>
         <ModalFooter>
           <button className="btn btn-link" onClick={toggle}>Cancel</button>
@@ -54,4 +78,7 @@ export class EditTagsModal extends React.Component {
 
 EditTagsModal.propTypes = propTypes;
 
-export default connect(pick(['shortUrlTags']), { editShortUrlTags })(EditTagsModal);
+export default connect(
+  pick(['shortUrlTags']),
+  { editShortUrlTags, resetShortUrlsTags, refreshShortUrls }
+)(EditTagsModal);

src/short-urls/reducers/shortUrlTags.js

@@ -1,11 +1,11 @@
 import ShlinkApiClient from '../../api/ShlinkApiClient';
 import { curry } from 'ramda';
 import PropTypes from 'prop-types';
-import { _listShortUrls } from './shortUrlsList';
 
 export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
 export const EDIT_SHORT_URL_TAGS_ERROR = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_ERROR';
 export const EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS';
+export const RESET_EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/RESET_EDIT_SHORT_URL_TAGS';
 
 export const shortUrlTagsType = PropTypes.shape({
   shortCode: PropTypes.string,
@@ -42,6 +42,8 @@ export default function reducer(state = defaultState, action) {
         saving: false,
         error: false,
       };
+    case RESET_EDIT_SHORT_URL_TAGS:
+      return defaultState;
     default:
       return state;
   }
@@ -51,13 +53,14 @@ export const _editShortUrlTags = (ShlinkApiClient, shortCode, tags) => async (di
   dispatch({ type: EDIT_SHORT_URL_TAGS_START });
 
   try {
+    // Update short URL tags
     await ShlinkApiClient.updateShortUrlTags(shortCode, tags);
     dispatch({ tags, shortCode, type: EDIT_SHORT_URL_TAGS });
-
-    const { shortUrlsListParams } = getState();
-    await _listShortUrls(ShlinkApiClient, shortUrlsListParams)(dispatch);
   } catch (e) {
     dispatch({ type: EDIT_SHORT_URL_TAGS_ERROR });
+    throw e;
   }
 };
 export const editShortUrlTags = curry(_editShortUrlTags)(ShlinkApiClient);
+
+export const resetShortUrlsTags = () => ({ type: RESET_EDIT_SHORT_URL_TAGS });

src/short-urls/reducers/shortUrlsList.js

@@ -41,3 +41,9 @@ export const _listShortUrls = (ShlinkApiClient, params = {}) => async dispatch =
   }
 };
 export const listShortUrls = (params = {}) => _listShortUrls(ShlinkApiClient, params);
+
+export const _refreshShortUrls = ShlinkApiClient => async (dispatch, getState) => {
+  const { shortUrlsListParams } = getState();
+  await _listShortUrls(ShlinkApiClient, shortUrlsListParams)(dispatch);
+};
+export const refreshShortUrls = () => _refreshShortUrls(ShlinkApiClient);