mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Ensured state is reset on edit meta modal after closing it
This commit is contained in:
parent
caa6f7bcd8
commit
f52bcc5389
5 changed files with 33 additions and 12 deletions
|
@ -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>
|
||||
<ModalHeader toggle={toggle}>
|
||||
<Modal isOpen={isOpen} toggle={close} centered>
|
||||
<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>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -35,10 +35,7 @@ describe('<EditTagsModal />', () => {
|
|||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.unmount();
|
||||
editShortUrlTags.mockClear();
|
||||
shortUrlTagsEdited.mockReset();
|
||||
resetShortUrlsTags.mockReset();
|
||||
toggle.mockReset();
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('resets tags when component is mounted', () => {
|
||||
|
|
|
@ -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 }));
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue