Migrated editTag and tagEdited actions to use payload

src/tags/reducers/tagEdit.ts

@@ -1,5 +1,6 @@
 import { pick } from 'ramda';
-import { Action, Dispatch } from 'redux';
+import { PayloadAction } from '@reduxjs/toolkit';
+import { Dispatch } from 'redux';
 import { buildReducer } from '../../utils/helpers/redux';
 import { GetState } from '../../container/types';
 import { ColorGenerator } from '../../utils/services/ColorGenerator';
@@ -22,12 +23,14 @@ export interface TagEdition {
   errorData?: ProblemDetailsError;
 }
 
-export interface EditTagAction extends Action<string> {
+interface EditTag {
   oldName: string;
   newName: string;
   color: string;
 }
 
+export type EditTagAction = PayloadAction<EditTag>;
+
 const initialState: TagEdition = {
   editing: false,
   edited: false,
@@ -37,8 +40,8 @@ const initialState: TagEdition = {
 export default buildReducer<TagEdition, EditTagAction & ApiErrorAction>({
   [EDIT_TAG_START]: () => ({ editing: true, edited: false, error: false }),
   [EDIT_TAG_ERROR]: (_, { errorData }) => ({ editing: false, edited: false, error: true, errorData }),
-  [EDIT_TAG]: (_, action) => ({
+  [EDIT_TAG]: (_, { payload }) => ({
-    ...pick(['oldName', 'newName'], action),
+    ...pick(['oldName', 'newName'], payload),
     editing: false,
     edited: true,
     error: false,
@@ -56,7 +59,10 @@ export const editTag = (buildShlinkApiClient: ShlinkApiClientBuilder, colorGener
   try {
     await shlinkEditTag(oldName, newName);
     colorGenerator.setColorForKey(newName, color);
-    dispatch({ type: EDIT_TAG, oldName, newName, color });
+    dispatch<EditTagAction>({
+      type: EDIT_TAG,
+      payload: { oldName, newName, color },
+    });
   } catch (e: any) {
     dispatch<ApiErrorAction>({ type: EDIT_TAG_ERROR, errorData: parseApiError(e) });
 
@@ -66,7 +72,9 @@ export const editTag = (buildShlinkApiClient: ShlinkApiClientBuilder, colorGener
 
 export const tagEdited = (oldName: string, newName: string, color: string): EditTagAction => ({
   type: TAG_EDITED,
-  oldName,
+  payload: {
-  newName,
+    oldName,
-  color,
+    newName,
+    color,
+  },
 });

src/tags/reducers/tagsList.ts

@@ -90,10 +90,10 @@ export default buildReducer<TagsList, TagsCombinedAction>({
     tags: rejectTag(state.tags, tag),
     filteredTags: rejectTag(state.filteredTags, tag),
   }),
-  [TAG_EDITED]: (state, { oldName, newName }) => ({
+  [TAG_EDITED]: (state, { payload }) => ({
     ...state,
-    tags: state.tags.map(renameTag(oldName, newName)).sort(),
+    tags: state.tags.map(renameTag(payload.oldName, payload.newName)).sort(),
-    filteredTags: state.filteredTags.map(renameTag(oldName, newName)).sort(),
+    filteredTags: state.filteredTags.map(renameTag(payload.oldName, payload.newName)).sort(),
   }),
   [FILTER_TAGS]: (state, { searchTerm }) => ({
     ...state,

test/tags/reducers/tagEdit.test.ts

@@ -35,7 +35,10 @@ describe('tagEditReducer', () => {
     });
 
     it('returns tag names on EDIT_TAG', () => {
-      expect(reducer(undefined, { type: EDIT_TAG, oldName, newName, color })).toEqual({
+      expect(reducer(undefined, {
+        type: EDIT_TAG,
+        payload: { oldName, newName, color },
+      })).toEqual({
         editing: false,
         edited: true,
         error: false,
@@ -49,9 +52,11 @@ describe('tagEditReducer', () => {
     it('returns action based on provided params', () =>
       expect(tagEdited('foo', 'bar', '#ff0000')).toEqual({
         type: TAG_EDITED,
-        oldName: 'foo',
+        payload: {
-        newName: 'bar',
+          oldName: 'foo',
-        color: '#ff0000',
+          newName: 'bar',
+          color: '#ff0000',
+        },
       }));
   });
 
@@ -81,7 +86,10 @@ describe('tagEditReducer', () => {
 
       expect(dispatch).toHaveBeenCalledTimes(2);
       expect(dispatch).toHaveBeenNthCalledWith(1, { type: EDIT_TAG_START });
-      expect(dispatch).toHaveBeenNthCalledWith(2, { type: EDIT_TAG, oldName, newName, color });
+      expect(dispatch).toHaveBeenNthCalledWith(2, {
+        type: EDIT_TAG,
+        payload: { oldName, newName, color },
+      });
     });
 
     it('throws on error', async () => {

test/tags/reducers/tagsList.test.ts

@@ -60,7 +60,13 @@ describe('tagsListReducer', () => {
       const newName = 'renamed';
       const expectedTags = ['foo', 'renamed', 'baz'].sort();
 
-      expect(reducer(state({ tags, filteredTags: tags }), { type: TAG_EDITED, oldName, newName } as any)).toEqual({
+      expect(reducer(
+        state({ tags, filteredTags: tags }),
+        {
+          type: TAG_EDITED,
+          payload: { oldName, newName },
+        } as any,
+      )).toEqual({
         tags: expectedTags,
         filteredTags: expectedTags,
       });