diff --git a/src/short-urls/helpers/DeleteShortUrlModal.tsx b/src/short-urls/helpers/DeleteShortUrlModal.tsx index 1bf7579f..4704d666 100644 --- a/src/short-urls/helpers/DeleteShortUrlModal.tsx +++ b/src/short-urls/helpers/DeleteShortUrlModal.tsx @@ -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; + deleteShortUrl: (shortUrl: DeleteShortUrl) => Promise; 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 = ( diff --git a/src/short-urls/reducers/shortUrlDeletion.ts b/src/short-urls/reducers/shortUrlDeletion.ts index 52edeed3..2e9cecc5 100644 --- a/src/short-urls/reducers/shortUrlDeletion.ts +++ b/src/short-urls/reducers/shortUrlDeletion.ts @@ -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 { +export interface DeleteShortUrl { shortCode: string; domain?: string | null; } +export type DeleteShortUrlAction = PayloadAction; + const initialState: ShortUrlDeletion = { shortCode: '', loading: false, @@ -32,20 +35,24 @@ const initialState: ShortUrlDeletion = { export default buildReducer({ [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({ type: SHORT_URL_DELETED, shortCode, domain }); + dispatch({ + type: SHORT_URL_DELETED, + payload: { shortCode, domain }, + }); } catch (e: any) { dispatch({ type: DELETE_SHORT_URL_ERROR, errorData: parseApiError(e) }); diff --git a/src/short-urls/reducers/shortUrlsList.ts b/src/short-urls/reducers/shortUrlsList.ts index e2246524..317cc523 100644 --- a/src/short-urls/reducers/shortUrlsList.ts +++ b/src/short-urls/reducers/shortUrlsList.ts @@ -44,10 +44,12 @@ export default buildReducer({ [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) => shortUrlMatches(shortUrl, shortCode, domain), state.shortUrls.data), + reject((shortUrl) => + shortUrlMatches(shortUrl, payload.shortCode, payload.domain), state.shortUrls.data), state, )), (state) => (!state.shortUrls ? state : assocPath( @@ -89,6 +91,7 @@ export default buildReducer({ 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) => { diff --git a/test/short-urls/reducers/shortUrlDeletion.test.ts b/test/short-urls/reducers/shortUrlDeletion.test.ts index 95500ee5..9346cc45 100644 --- a/test/short-urls/reducers/shortUrlDeletion.test.ts +++ b/test/short-urls/reducers/shortUrlDeletion.test.ts @@ -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); } diff --git a/test/short-urls/reducers/shortUrlsList.test.ts b/test/short-urls/reducers/shortUrlsList.test.ts index 38c4a24d..fd62a6a4 100644 --- a/test/short-urls/reducers/shortUrlsList.test.ts +++ b/test/short-urls/reducers/shortUrlsList.test.ts @@ -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 },