mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated deleteShortUrl action creator to use PayloadAction and have a single param

Browse source
This commit is contained in:
Alejandro Celaya 2022-11-06 12:46:29 +01:00
parent 2a268de2cb
commit d468fb1efe
5 changed files with 36 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/short-urls/helpers/DeleteShortUrlModal.tsx
View file

@ -1,16 +1,16 @@
import { useEffect, useState } from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { identity, pipe } from 'ramda';
import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
import { DeleteShortUrl, ShortUrlDeletion } from '../reducers/shortUrlDeletion';
import { ShortUrlModalProps } from '../data';
import { handleEventPreventingDefault, OptionalString } from '../../utils/utils';
import { handleEventPreventingDefault } from '../../utils/utils';
import { Result } from '../../utils/Result';
import { isInvalidDeletionError } from '../../api/utils';
import { ShlinkApiError } from '../../api/ShlinkApiError';
interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
shortUrlDeletion: ShortUrlDeletion;
deleteShortUrl: (shortCode: string, domain: OptionalString) => Promise<void>;
deleteShortUrl: (shortUrl: DeleteShortUrl) => Promise<void>;
resetDeleteShortUrl: () => void;
}
@ -21,12 +21,12 @@ export const DeleteShortUrlModal = (
useEffect(() => resetDeleteShortUrl, []);
const { error, errorData } = shortUrlDeletion;
const { loading, error, errorData } = shortUrlDeletion;
const close = pipe(resetDeleteShortUrl, toggle);
const handleDeleteUrl = handleEventPreventingDefault(() => {
const { shortCode, domain } = shortUrl;
deleteShortUrl(shortCode, domain)
deleteShortUrl({ shortCode, domain })
.then(toggle)
.catch(identity);
});
@ -61,9 +61,9 @@ export const DeleteShortUrlModal = (
<button
type="submit"
className="btn btn-danger"
disabled={inputValue !== shortUrl.shortCode || shortUrlDeletion.loading}
disabled={inputValue !== shortUrl.shortCode || loading}
>
{shortUrlDeletion.loading ? 'Deleting...' : 'Delete'}
{loading ? 'Deleting...' : 'Delete'}
</button>
</ModalFooter>
</form>

19
src/short-urls/reducers/shortUrlDeletion.ts
View file

@ -1,4 +1,5 @@
import { Action, Dispatch } from 'redux';
import { PayloadAction } from '@reduxjs/toolkit';
import { Dispatch } from 'redux';
import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
import { GetState } from '../../container/types';
import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
@ -18,11 +19,13 @@ export interface ShortUrlDeletion {
errorData?: ProblemDetailsError;
}
export interface DeleteShortUrlAction extends Action<string> {
export interface DeleteShortUrl {
shortCode: string;
domain?: string | null;
}
export type DeleteShortUrlAction = PayloadAction<DeleteShortUrl>;
const initialState: ShortUrlDeletion = {
shortCode: '',
loading: false,
@ -32,20 +35,24 @@ const initialState: ShortUrlDeletion = {
export default buildReducer<ShortUrlDeletion, DeleteShortUrlAction & ApiErrorAction>({
[DELETE_SHORT_URL_START]: (state) => ({ ...state, loading: true, error: false }),
[DELETE_SHORT_URL_ERROR]: (state, { errorData }) => ({ ...state, errorData, loading: false, error: true }),
[SHORT_URL_DELETED]: (state, { shortCode }) => ({ ...state, shortCode, loading: false, error: false }),
[SHORT_URL_DELETED]: (state, { payload }) => (
{ ...state, shortCode: payload.shortCode, loading: false, error: false }
),
[RESET_DELETE_SHORT_URL]: () => initialState,
}, initialState);
export const deleteShortUrl = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
shortCode: string,
domain?: string | null,
{ shortCode, domain }: DeleteShortUrl,
) => async (dispatch: Dispatch, getState: GetState) => {
dispatch({ type: DELETE_SHORT_URL_START });
const { deleteShortUrl: shlinkDeleteShortUrl } = buildShlinkApiClient(getState);
try {
await shlinkDeleteShortUrl(shortCode, domain);
dispatch<DeleteShortUrlAction>({ type: SHORT_URL_DELETED, shortCode, domain });
dispatch<DeleteShortUrlAction>({
type: SHORT_URL_DELETED,
payload: { shortCode, domain },
});
} catch (e: any) {
dispatch<ApiErrorAction>({ type: DELETE_SHORT_URL_ERROR, errorData: parseApiError(e) });

7
src/short-urls/reducers/shortUrlsList.ts
View file

@ -44,10 +44,12 @@ export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
[LIST_SHORT_URLS_START]: (state) => ({ ...state, loading: true, error: false }),
[LIST_SHORT_URLS_ERROR]: () => ({ loading: false, error: true }),
[LIST_SHORT_URLS]: (_, { shortUrls }) => ({ loading: false, error: false, shortUrls }),
// [`${SHORT_URL_DELETED}/fulfilled`]: pipe( // TODO Do not hardcode action type here
[SHORT_URL_DELETED]: pipe(
(state: ShortUrlsList, { shortCode, domain }: DeleteShortUrlAction) => (!state.shortUrls ? state : assocPath(
(state: ShortUrlsList, { payload }: DeleteShortUrlAction) => (!state.shortUrls ? state : assocPath(
['shortUrls', 'data'],
reject<ShortUrl, ShortUrl[]>((shortUrl) => shortUrlMatches(shortUrl, shortCode, domain), state.shortUrls.data),
reject<ShortUrl, ShortUrl[]>((shortUrl) =>
shortUrlMatches(shortUrl, payload.shortCode, payload.domain), state.shortUrls.data),
state,
)),
(state) => (!state.shortUrls ? state : assocPath(
@ -89,6 +91,7 @@ export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
state,
)),
),
// TODO Do not hardcode action type here
[`${SHORT_URL_EDITED}/fulfilled`]: (state, { payload: editedShortUrl }) => (!state.shortUrls ? state : assocPath(
['shortUrls', 'data'],
state.shortUrls.data.map((shortUrl) => {

14
test/short-urls/reducers/shortUrlDeletion.test.ts
View file

@ -27,7 +27,10 @@ describe('shortUrlDeletionReducer', () => {
}));
it('returns shortCode on SHORT_URL_DELETED', () =>
expect(reducer(undefined, { type: SHORT_URL_DELETED, shortCode: 'foo' } as any)).toEqual({
expect(reducer(undefined, {
type: SHORT_URL_DELETED,
payload: { shortCode: 'foo' },
} as any)).toEqual({
shortCode: 'foo',
loading: false,
error: false,
@ -67,11 +70,14 @@ describe('shortUrlDeletionReducer', () => {
});
const shortCode = 'abc123';
await deleteShortUrl(() => apiClientMock)(shortCode, domain)(dispatch, getState);
await deleteShortUrl(() => apiClientMock)({ shortCode, domain })(dispatch, getState);
expect(dispatch).toHaveBeenCalledTimes(2);
expect(dispatch).toHaveBeenNthCalledWith(1, { type: DELETE_SHORT_URL_START });
expect(dispatch).toHaveBeenNthCalledWith(2, { type: SHORT_URL_DELETED, shortCode, domain });
expect(dispatch).toHaveBeenNthCalledWith(2, {
type: SHORT_URL_DELETED,
payload: { shortCode, domain },
});
expect(apiClientMock.deleteShortUrl).toHaveBeenCalledTimes(1);
expect(apiClientMock.deleteShortUrl).toHaveBeenCalledWith(shortCode, domain);
@ -86,7 +92,7 @@ describe('shortUrlDeletionReducer', () => {
const shortCode = 'abc123';
try {
await deleteShortUrl(() => apiClientMock)(shortCode)(dispatch, getState);
await deleteShortUrl(() => apiClientMock)({ shortCode })(dispatch, getState);
} catch (e) {
expect(e).toEqual(error);
}

2
test/short-urls/reducers/shortUrlsList.test.ts
View file

@ -52,7 +52,7 @@ describe('shortUrlsListReducer', () => {
error: false,
};
expect(reducer(state, { type: SHORT_URL_DELETED, shortCode } as any)).toEqual({
expect(reducer(state, { type: SHORT_URL_DELETED, payload: { shortCode } } as any)).toEqual({
shortUrls: {
data: [{ shortCode, domain: 'example.com' }, { shortCode: 'foo' }],
pagination: { totalItems: 9 },