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

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<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>

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<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,
+  { shortCode, domain }: DeleteShortUrl,
-  domain?: string | null,
 ) => 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) });
 

src/short-urls/reducers/shortUrlsList.ts

@@ -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) => {

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);
       }

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 },