mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Fixed DeleteShortUrlModal being removed from the DOM before CSS transition finished
This commit is contained in:
parent
bc2c945fee
commit
d21758c410
6 changed files with 36 additions and 23 deletions
|
@ -10,23 +10,30 @@ import { ShlinkApiError } from '../../api/ShlinkApiError';
|
|||
|
||||
interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
|
||||
shortUrlDeletion: ShortUrlDeletion;
|
||||
deleteShortUrl: (shortUrl: ShortUrlIdentifier) => void;
|
||||
deleteShortUrl: (shortUrl: ShortUrlIdentifier) => Promise<void>;
|
||||
shortUrlDeleted: (shortUrl: ShortUrlIdentifier) => void;
|
||||
resetDeleteShortUrl: () => void;
|
||||
}
|
||||
|
||||
export const DeleteShortUrlModal = (
|
||||
{ shortUrl, toggle, isOpen, shortUrlDeletion, resetDeleteShortUrl, deleteShortUrl }: DeleteShortUrlModalConnectProps,
|
||||
) => {
|
||||
export const DeleteShortUrlModal = ({
|
||||
shortUrl,
|
||||
toggle,
|
||||
isOpen,
|
||||
shortUrlDeletion,
|
||||
resetDeleteShortUrl,
|
||||
deleteShortUrl,
|
||||
shortUrlDeleted,
|
||||
}: DeleteShortUrlModalConnectProps) => {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
useEffect(() => resetDeleteShortUrl, []);
|
||||
|
||||
const { loading, error, errorData } = shortUrlDeletion;
|
||||
const { loading, error, deleted, errorData } = shortUrlDeletion;
|
||||
const close = pipe(resetDeleteShortUrl, toggle);
|
||||
const handleDeleteUrl = handleEventPreventingDefault(() => deleteShortUrl(shortUrl));
|
||||
const handleDeleteUrl = handleEventPreventingDefault(() => deleteShortUrl(shortUrl).then(toggle));
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} toggle={close} centered>
|
||||
<Modal isOpen={isOpen} toggle={close} centered onClosed={() => deleted && shortUrlDeleted(shortUrl)}>
|
||||
<form onSubmit={handleDeleteUrl}>
|
||||
<ModalHeader toggle={close}>
|
||||
<span className="text-danger">Delete short URL</span>
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import { createSlice } from '@reduxjs/toolkit';
|
||||
import { createAction, createSlice } from '@reduxjs/toolkit';
|
||||
import { createAsyncThunk } from '../../utils/helpers/redux';
|
||||
import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
|
||||
import { parseApiError } from '../../api/utils';
|
||||
import { ProblemDetailsError } from '../../api/types/errors';
|
||||
import { ShortUrlIdentifier } from '../data';
|
||||
import { ShortUrl, ShortUrlIdentifier } from '../data';
|
||||
|
||||
const REDUCER_PREFIX = 'shlink/shortUrlDeletion';
|
||||
|
||||
|
@ -31,6 +31,8 @@ export const deleteShortUrl = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
|
|||
},
|
||||
);
|
||||
|
||||
export const shortUrlDeleted = createAction<ShortUrl>(`${REDUCER_PREFIX}/shortUrlDeleted`);
|
||||
|
||||
export const shortUrlDeletionReducerCreator = (deleteShortUrlThunk: ReturnType<typeof deleteShortUrl>) => {
|
||||
const { actions, reducer } = createSlice({
|
||||
name: REDUCER_PREFIX,
|
||||
|
|
|
@ -5,7 +5,7 @@ import { createNewVisits } from '../../visits/reducers/visitCreation';
|
|||
import { createAsyncThunk } from '../../utils/helpers/redux';
|
||||
import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
|
||||
import { ShlinkShortUrlsListParams, ShlinkShortUrlsResponse } from '../../api/types';
|
||||
import { deleteShortUrl } from './shortUrlDeletion';
|
||||
import { shortUrlDeleted } from './shortUrlDeletion';
|
||||
import { createShortUrl } from './shortUrlCreation';
|
||||
import { editShortUrl } from './shortUrlEdition';
|
||||
import { ShortUrl } from '../data';
|
||||
|
@ -36,7 +36,6 @@ export const shortUrlsListReducerCreator = (
|
|||
listShortUrlsThunk: ReturnType<typeof listShortUrls>,
|
||||
editShortUrlThunk: ReturnType<typeof editShortUrl>,
|
||||
createShortUrlThunk: ReturnType<typeof createShortUrl>,
|
||||
deleteShortUrlThunk: ReturnType<typeof deleteShortUrl>,
|
||||
) => createSlice({
|
||||
name: REDUCER_PREFIX,
|
||||
initialState,
|
||||
|
@ -81,7 +80,7 @@ export const shortUrlsListReducerCreator = (
|
|||
);
|
||||
|
||||
builder.addCase(
|
||||
deleteShortUrlThunk.fulfilled,
|
||||
shortUrlDeleted,
|
||||
pipe(
|
||||
(state, { payload }) => (!state.shortUrls ? state : assocPath(
|
||||
['shortUrls', 'data'],
|
||||
|
|
|
@ -9,7 +9,7 @@ import { DeleteShortUrlModal } from '../helpers/DeleteShortUrlModal';
|
|||
import { CreateShortUrlResult } from '../helpers/CreateShortUrlResult';
|
||||
import { listShortUrls, shortUrlsListReducerCreator } from '../reducers/shortUrlsList';
|
||||
import { shortUrlCreationReducerCreator, createShortUrl } from '../reducers/shortUrlCreation';
|
||||
import { shortUrlDeletionReducerCreator, deleteShortUrl } from '../reducers/shortUrlDeletion';
|
||||
import { shortUrlDeletionReducerCreator, deleteShortUrl, shortUrlDeleted } from '../reducers/shortUrlDeletion';
|
||||
import { editShortUrl, shortUrlEditionReducerCreator } from '../reducers/shortUrlEdition';
|
||||
import { shortUrlDetailReducerCreator } from '../reducers/shortUrlDetail';
|
||||
import { ConnectDecorator } from '../../container/types';
|
||||
|
@ -46,7 +46,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
|||
));
|
||||
|
||||
bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal);
|
||||
bottle.decorator('DeleteShortUrlModal', connect(['shortUrlDeletion'], ['deleteShortUrl', 'resetDeleteShortUrl']));
|
||||
bottle.decorator('DeleteShortUrlModal', connect(
|
||||
['shortUrlDeletion'],
|
||||
['deleteShortUrl', 'shortUrlDeleted', 'resetDeleteShortUrl'],
|
||||
));
|
||||
|
||||
bottle.serviceFactory('QrCodeModal', QrCodeModal, 'ImageDownloader');
|
||||
bottle.decorator('QrCodeModal', connect(['selectedServer']));
|
||||
|
@ -63,7 +66,6 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
|||
'listShortUrls',
|
||||
'editShortUrl',
|
||||
'createShortUrl',
|
||||
'deleteShortUrl',
|
||||
);
|
||||
bottle.serviceFactory('shortUrlsListReducer', prop('reducer'), 'shortUrlsListReducerCreator');
|
||||
|
||||
|
@ -87,6 +89,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
|||
|
||||
bottle.serviceFactory('deleteShortUrl', deleteShortUrl, 'buildShlinkApiClient');
|
||||
bottle.serviceFactory('resetDeleteShortUrl', prop('resetDeleteShortUrl'), 'shortUrlDeletionReducerCreator');
|
||||
bottle.serviceFactory('shortUrlDeleted', () => shortUrlDeleted);
|
||||
|
||||
bottle.serviceFactory('getShortUrlDetail', prop('getShortUrlDetail'), 'shortUrlDetailReducerCreator');
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { screen } from '@testing-library/react';
|
||||
import { screen, waitFor } from '@testing-library/react';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { DeleteShortUrlModal } from '../../../src/short-urls/helpers/DeleteShortUrlModal';
|
||||
import { ShortUrl } from '../../../src/short-urls/data';
|
||||
|
@ -12,15 +12,17 @@ describe('<DeleteShortUrlModal />', () => {
|
|||
shortCode: 'abc123',
|
||||
longUrl: 'https://long-domain.com/foo/bar',
|
||||
});
|
||||
const deleteShortUrl = jest.fn();
|
||||
const deleteShortUrl = jest.fn().mockResolvedValue(undefined);
|
||||
const toggle = jest.fn();
|
||||
const setUp = (shortUrlDeletion: Partial<ShortUrlDeletion>) => renderWithEvents(
|
||||
<DeleteShortUrlModal
|
||||
isOpen
|
||||
shortUrl={shortUrl}
|
||||
shortUrlDeletion={Mock.of<ShortUrlDeletion>(shortUrlDeletion)}
|
||||
deleteShortUrl={deleteShortUrl}
|
||||
toggle={() => {}}
|
||||
resetDeleteShortUrl={() => {}}
|
||||
shortUrlDeleted={jest.fn()}
|
||||
toggle={toggle}
|
||||
resetDeleteShortUrl={jest.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
|
@ -81,5 +83,6 @@ describe('<DeleteShortUrlModal />', () => {
|
|||
await user.type(screen.getByPlaceholderText(/^Insert the short code/), shortCode);
|
||||
await user.click(screen.getByRole('button', { name: 'Delete' }));
|
||||
expect(deleteShortUrl).toHaveBeenCalledTimes(1);
|
||||
await waitFor(() => expect(toggle).toHaveBeenCalledTimes(1));
|
||||
});
|
||||
});
|
||||
|
|
|
@ -3,7 +3,7 @@ import {
|
|||
listShortUrls as listShortUrlsCreator,
|
||||
shortUrlsListReducerCreator,
|
||||
} from '../../../src/short-urls/reducers/shortUrlsList';
|
||||
import { deleteShortUrl as deleteShortUrlCreator } from '../../../src/short-urls/reducers/shortUrlDeletion';
|
||||
import { shortUrlDeleted } from '../../../src/short-urls/reducers/shortUrlDeletion';
|
||||
import { ShlinkPaginator, ShlinkShortUrlsResponse } from '../../../src/api/types';
|
||||
import { createShortUrl as createShortUrlCreator } from '../../../src/short-urls/reducers/shortUrlCreation';
|
||||
import { editShortUrl as editShortUrlCreator } from '../../../src/short-urls/reducers/shortUrlEdition';
|
||||
|
@ -18,8 +18,7 @@ describe('shortUrlsListReducer', () => {
|
|||
const listShortUrls = listShortUrlsCreator(buildShlinkApiClient);
|
||||
const editShortUrl = editShortUrlCreator(buildShlinkApiClient);
|
||||
const createShortUrl = createShortUrlCreator(buildShlinkApiClient);
|
||||
const deleteShortUrl = deleteShortUrlCreator(buildShlinkApiClient);
|
||||
const { reducer } = shortUrlsListReducerCreator(listShortUrls, editShortUrl, createShortUrl, deleteShortUrl);
|
||||
const { reducer } = shortUrlsListReducerCreator(listShortUrls, editShortUrl, createShortUrl);
|
||||
|
||||
afterEach(jest.clearAllMocks);
|
||||
|
||||
|
@ -59,7 +58,7 @@ describe('shortUrlsListReducer', () => {
|
|||
error: false,
|
||||
};
|
||||
|
||||
expect(reducer(state, { type: deleteShortUrl.fulfilled.toString(), payload: { shortCode } })).toEqual({
|
||||
expect(reducer(state, { type: shortUrlDeleted.toString(), payload: { shortCode } })).toEqual({
|
||||
shortUrls: {
|
||||
data: [{ shortCode, domain: 'example.com' }, { shortCode: 'foo' }],
|
||||
pagination: { totalItems: 9 },
|
||||
|
|
Loading…
Reference in a new issue