mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-24 01:48:18 +03:00
Code Issues Projects Releases Packages Wiki Activity

Ensured short URLs list is updated after editing the long URL of a short URL

Browse source
This commit is contained in:
Alejandro Celaya 2020-03-30 20:47:33 +02:00
parent 7949e224e0
commit 1219a16261
4 changed files with 10 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/short-urls/helpers/EditShortUrlModal.js
View file

@ -2,7 +2,6 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, Button } from 'reactstrap';
import { ExternalLink } from 'react-external-link';
import { pipe } from 'ramda';
import { shortUrlType } from '../reducers/shortUrlsList';
import { ShortUrlEditionType } from '../reducers/shortUrlEdition';
import { hasValue } from '../../utils/utils';
@ -13,20 +12,18 @@ const propTypes = {
shortUrl: shortUrlType.isRequired,
shortUrlEdition: ShortUrlEditionType,
editShortUrl: PropTypes.func,
resetShortUrlEdition: PropTypes.func,
};
const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShortUrl, resetShortUrlEdition }) => {
const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShortUrl }) => {
const { saving, error } = shortUrlEdition;
const url = shortUrl && (shortUrl.shortUrl || '');
const [ longUrl, setLongUrl ] = useState(shortUrl.longUrl);
const close = pipe(resetShortUrlEdition, toggle);
const doEdit = () => editShortUrl(shortUrl.shortCode, shortUrl.domain, longUrl).then(close);
const doEdit = () => editShortUrl(shortUrl.shortCode, shortUrl.domain, longUrl).then(toggle);
return (
<Modal isOpen={isOpen} toggle={close} centered>
<ModalHeader toggle={close}>
<Modal isOpen={isOpen} toggle={toggle} centered>
<ModalHeader toggle={toggle}>
Edit long URL for <ExternalLink href={url} />
</ModalHeader>
<form onSubmit={(e) => e.preventDefault() || doEdit()}>
@ -47,7 +44,7 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
)}
</ModalBody>
<ModalFooter>
<Button color="link" onClick={close}>Cancel</Button>
<Button color="link" onClick={toggle}>Cancel</Button>
<Button color="primary" disabled={saving || !hasValue(longUrl)}>{saving ? 'Saving...' : 'Save'}</Button>
</ModalFooter>
</form>

6
src/short-urls/reducers/shortUrlEdition.js
View file

@ -1,11 +1,10 @@
import { createAction, handleActions } from 'redux-actions';
import { handleActions } from 'redux-actions';
import PropTypes from 'prop-types';
/* eslint-disable padding-line-between-statements */
export const EDIT_SHORT_URL_START = 'shlink/shortUrlEdition/EDIT_SHORT_URL_START';
export const EDIT_SHORT_URL_ERROR = 'shlink/shortUrlEdition/EDIT_SHORT_URL_ERROR';
export const SHORT_URL_EDITED = 'shlink/shortUrlEdition/SHORT_URL_EDITED';
export const RESET_EDIT_SHORT_URL = 'shlink/shortUrlEdition/RESET_EDIT_SHORT_URL';
/* eslint-enable padding-line-between-statements */
export const ShortUrlEditionType = PropTypes.shape({
@ -26,7 +25,6 @@ export default handleActions({
[EDIT_SHORT_URL_START]: (state) => ({ ...state, saving: true, error: false }),
[EDIT_SHORT_URL_ERROR]: (state) => ({ ...state, saving: false, error: true }),
[SHORT_URL_EDITED]: (state, { shortCode, longUrl }) => ({ shortCode, longUrl, saving: false, error: false }),
[RESET_EDIT_SHORT_URL]: () => initialState,
}, initialState);
export const editShortUrl = (buildShlinkApiClient) => (shortCode, domain, longUrl) => async (dispatch, getState) => {
@ -42,5 +40,3 @@ export const editShortUrl = (buildShlinkApiClient) => (shortCode, domain, longUr
throw e;
}
};
export const resetShortUrlEdition = createAction(RESET_EDIT_SHORT_URL);

2
src/short-urls/reducers/shortUrlsList.js
View file

@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
import { SHORT_URL_DELETED } from './shortUrlDeletion';
import { SHORT_URL_META_EDITED, shortUrlMetaType } from './shortUrlMeta';
import { SHORT_URL_EDITED } from './shortUrlEdition';
/* eslint-disable padding-line-between-statements */
export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
@ -54,6 +55,7 @@ export default handleActions({
),
[SHORT_URL_TAGS_EDITED]: setPropFromActionOnMatchingShortUrl('tags'),
[SHORT_URL_META_EDITED]: setPropFromActionOnMatchingShortUrl('meta'),
[SHORT_URL_EDITED]: setPropFromActionOnMatchingShortUrl('longUrl'),
}, initialState);
export const listShortUrls = (buildShlinkApiClient) => (params = {}) => async (dispatch, getState) => {

5
src/short-urls/services/provideServices.js
View file

@ -17,7 +17,7 @@ import { deleteShortUrl, resetDeleteShortUrl } from '../reducers/shortUrlDeletio
import { editShortUrlTags, resetShortUrlsTags } from '../reducers/shortUrlTags';
import { editShortUrlMeta, resetShortUrlMeta } from '../reducers/shortUrlMeta';
import { resetShortUrlParams } from '../reducers/shortUrlsListParams';
import { editShortUrl, resetShortUrlEdition } from '../reducers/shortUrlEdition';
import { editShortUrl } from '../reducers/shortUrlEdition';
const provideServices = (bottle, connect) => {
// Components
@ -64,7 +64,7 @@ const provideServices = (bottle, connect) => {
bottle.decorator('EditMetaModal', connect([ 'shortUrlMeta' ], [ 'editShortUrlMeta', 'resetShortUrlMeta' ]));
bottle.serviceFactory('EditShortUrlModal', () => EditShortUrlModal);
bottle.decorator('EditShortUrlModal', connect([ 'shortUrlEdition' ], [ 'editShortUrl', 'resetShortUrlEdition' ]));
bottle.decorator('EditShortUrlModal', connect([ 'shortUrlEdition' ], [ 'editShortUrl' ]));
// Actions
bottle.serviceFactory('editShortUrlTags', editShortUrlTags, 'buildShlinkApiClient');
@ -83,7 +83,6 @@ const provideServices = (bottle, connect) => {
bottle.serviceFactory('resetShortUrlMeta', () => resetShortUrlMeta);
bottle.serviceFactory('editShortUrl', editShortUrl, 'buildShlinkApiClient');
bottle.serviceFactory('resetShortUrlEdition', () => resetShortUrlEdition);
};
export default provideServices;