Ensured state is reset on edit meta modal after closing it

src/short-urls/helpers/EditMetaModal.js

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { ExternalLink } from 'react-external-link';
 import moment from 'moment';
+import { pipe } from 'ramda';
 import { shortUrlType } from '../reducers/shortUrlsList';
 import { shortUrlEditMetaType } from '../reducers/shortUrlMeta';
 import DateInput from '../../utils/DateInput';
@@ -16,6 +17,7 @@ const propTypes = {
   shortUrl: shortUrlType.isRequired,
   shortUrlMeta: shortUrlEditMetaType,
   editShortUrlMeta: PropTypes.func,
+  resetShortUrlMeta: PropTypes.func,
 };
 
 const dateOrUndefined = (shortUrl, dateName) => {
@@ -25,22 +27,24 @@ const dateOrUndefined = (shortUrl, dateName) => {
 };
 
 const EditMetaModal = (
-  { isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMeta }
+  { isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMeta, resetShortUrlMeta }
 ) => {
   const { saving, error } = shortUrlMeta;
   const url = shortUrl && (shortUrl.shortUrl || '');
   const [ validSince, setValidSince ] = useState(dateOrUndefined(shortUrl, 'validSince'));
   const [ validUntil, setValidUntil ] = useState(dateOrUndefined(shortUrl, 'validUntil'));
   const [ maxVisits, setMaxVisits ] = useState(shortUrl && shortUrl.meta && shortUrl.meta.maxVisits);
+
+  const close = pipe(resetShortUrlMeta, toggle);
   const doEdit = () => editShortUrlMeta(shortUrl.shortCode, {
     maxVisits: maxVisits && parseInt(maxVisits),
     validSince: validSince && formatIsoDate(validSince),
     validUntil: validUntil && formatIsoDate(validUntil),
-  }).then(toggle);
+  }).then(close);
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered>
+    <Modal isOpen={isOpen} toggle={close} centered>
-      <ModalHeader toggle={toggle}>
+      <ModalHeader toggle={close}>
         <FontAwesomeIcon icon={infoIcon} id="metaTitleInfo" /> Edit metadata for <ExternalLink href={url} />
         <UncontrolledTooltip target="metaTitleInfo" placement="bottom">
           <p>Using these metadata properties, you can limit when and how many times your short URL can be visited.</p>
@@ -83,7 +87,7 @@ const EditMetaModal = (
           )}
         </ModalBody>
         <ModalFooter>
-          <button className="btn btn-link" type="button" onClick={toggle}>Cancel</button>
+          <button className="btn btn-link" type="button" onClick={close}>Cancel</button>
           <button className="btn btn-primary" type="submit" disabled={saving}>{saving ? 'Saving...' : 'Save'}</button>
         </ModalFooter>
       </form>

src/short-urls/reducers/shortUrlMeta.js

@@ -1,10 +1,11 @@
-import { handleActions } from 'redux-actions';
+import { createAction, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 
 /* eslint-disable padding-line-between-statements */
 export const EDIT_SHORT_URL_META_START = 'shlink/shortUrlMeta/EDIT_SHORT_URL_META_START';
 export const EDIT_SHORT_URL_META_ERROR = 'shlink/shortUrlMeta/EDIT_SHORT_URL_META_ERROR';
 export const SHORT_URL_META_EDITED = 'shlink/shortUrlMeta/SHORT_URL_META_EDITED';
+export const RESET_EDIT_SHORT_URL_META = 'shlink/shortUrlMeta/RESET_EDIT_SHORT_URL_META';
 /* eslint-enable padding-line-between-statements */
 
 export const shortUrlMetaType = PropTypes.shape({
@@ -31,6 +32,7 @@ export default handleActions({
   [EDIT_SHORT_URL_META_START]: (state) => ({ ...state, saving: true, error: false }),
   [EDIT_SHORT_URL_META_ERROR]: (state) => ({ ...state, saving: false, error: true }),
   [SHORT_URL_META_EDITED]: (state, { shortCode, meta }) => ({ shortCode, meta, saving: false, error: false }),
+  [RESET_EDIT_SHORT_URL_META]: () => initialState,
 }, initialState);
 
 export const editShortUrlMeta = (buildShlinkApiClient) => (shortCode, meta) => async (dispatch, getState) => {
@@ -46,3 +48,5 @@ export const editShortUrlMeta = (buildShlinkApiClient) => (shortCode, meta) => a
     throw e;
   }
 };
+
+export const resetShortUrlMeta = createAction(RESET_EDIT_SHORT_URL_META);

src/short-urls/services/provideServices.js

@@ -14,7 +14,7 @@ import { listShortUrls } from '../reducers/shortUrlsList';
 import { createShortUrl, resetCreateShortUrl } from '../reducers/shortUrlCreation';
 import { deleteShortUrl, resetDeleteShortUrl, shortUrlDeleted } from '../reducers/shortUrlDeletion';
 import { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited } from '../reducers/shortUrlTags';
-import { editShortUrlMeta } from '../reducers/shortUrlMeta';
+import { editShortUrlMeta, resetShortUrlMeta } from '../reducers/shortUrlMeta';
 import { resetShortUrlParams } from '../reducers/shortUrlsListParams';
 
 const provideServices = (bottle, connect) => {
@@ -57,7 +57,7 @@ const provideServices = (bottle, connect) => {
   ));
 
   bottle.serviceFactory('EditMetaModal', () => EditMetaModal);
-  bottle.decorator('EditMetaModal', connect([ 'shortUrlMeta' ], [ 'editShortUrlMeta' ]));
+  bottle.decorator('EditMetaModal', connect([ 'shortUrlMeta' ], [ 'editShortUrlMeta', 'resetShortUrlMeta' ]));
 
   // Actions
   bottle.serviceFactory('editShortUrlTags', editShortUrlTags, 'buildShlinkApiClient');
@@ -75,6 +75,7 @@ const provideServices = (bottle, connect) => {
   bottle.serviceFactory('shortUrlDeleted', () => shortUrlDeleted);
 
   bottle.serviceFactory('editShortUrlMeta', editShortUrlMeta, 'buildShlinkApiClient');
+  bottle.serviceFactory('resetShortUrlMeta', () => resetShortUrlMeta);
 };
 
 export default provideServices;

test/short-urls/helpers/EditTagsModal.test.js

@@ -35,10 +35,7 @@ describe('<EditTagsModal />', () => {
 
   afterEach(() => {
     wrapper && wrapper.unmount();
-    editShortUrlTags.mockClear();
+    jest.clearAllMocks();
-    shortUrlTagsEdited.mockReset();
-    resetShortUrlsTags.mockReset();
-    toggle.mockReset();
   });
 
   it('resets tags when component is mounted', () => {

test/short-urls/reducers/shortUrlMeta.test.js

@@ -3,7 +3,9 @@ import reducer, {
   EDIT_SHORT_URL_META_START,
   EDIT_SHORT_URL_META_ERROR,
   SHORT_URL_META_EDITED,
+  RESET_EDIT_SHORT_URL_META,
   editShortUrlMeta,
+  resetShortUrlMeta,
 } from '../../../src/short-urls/reducers/shortUrlMeta';
 
 describe('shortUrlMetaReducer', () => {
@@ -36,6 +38,15 @@ describe('shortUrlMetaReducer', () => {
         error: false,
       });
     });
+
+    it('goes back to initial state on RESET_EDIT_SHORT_URL_META', () => {
+      expect(reducer({}, { type: RESET_EDIT_SHORT_URL_META })).toEqual({
+        meta: {},
+        shortCode: null,
+        saving: false,
+        error: false,
+      });
+    });
   });
 
   describe('editShortUrlMeta', () => {
@@ -75,4 +86,8 @@ describe('shortUrlMetaReducer', () => {
       expect(dispatch).toHaveBeenNthCalledWith(2, { type: EDIT_SHORT_URL_META_ERROR });
     });
   });
+
+  describe('resetShortUrlMeta', () => {
+    it('creates expected action', () => expect(resetShortUrlMeta()).toEqual({ type: RESET_EDIT_SHORT_URL_META }));
+  });
 });