diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js index 2f413fa1..ea4a0c15 100644 --- a/src/short-urls/helpers/EditTagsModal.js +++ b/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 ( - + Edit tags for {url} this.setState({ tags })} /> + {shortUrlTags.error && ( +
+ Something went wrong while saving the tags :( +
+ )}
@@ -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); diff --git a/src/short-urls/reducers/shortUrlTags.js b/src/short-urls/reducers/shortUrlTags.js index c12d87af..d01eda25 100644 --- a/src/short-urls/reducers/shortUrlTags.js +++ b/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 }); diff --git a/src/short-urls/reducers/shortUrlsList.js b/src/short-urls/reducers/shortUrlsList.js index 9d76e44c..29eb99da 100644 --- a/src/short-urls/reducers/shortUrlsList.js +++ b/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);