diff --git a/src/tags/reducers/tagEdit.ts b/src/tags/reducers/tagEdit.ts index 19a8599f..177387e7 100644 --- a/src/tags/reducers/tagEdit.ts +++ b/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 { +interface EditTag { oldName: string; newName: string; color: string; } +export type EditTagAction = PayloadAction; + const initialState: TagEdition = { editing: false, edited: false, @@ -37,8 +40,8 @@ const initialState: TagEdition = { export default buildReducer({ [EDIT_TAG_START]: () => ({ editing: true, edited: false, error: false }), [EDIT_TAG_ERROR]: (_, { errorData }) => ({ editing: false, edited: false, error: true, errorData }), - [EDIT_TAG]: (_, action) => ({ - ...pick(['oldName', 'newName'], action), + [EDIT_TAG]: (_, { payload }) => ({ + ...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({ + type: EDIT_TAG, + payload: { oldName, newName, color }, + }); } catch (e: any) { dispatch({ 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, - newName, - color, + payload: { + oldName, + newName, + color, + }, }); diff --git a/src/tags/reducers/tagsList.ts b/src/tags/reducers/tagsList.ts index 485b55f4..89e56f78 100644 --- a/src/tags/reducers/tagsList.ts +++ b/src/tags/reducers/tagsList.ts @@ -90,10 +90,10 @@ export default buildReducer({ 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(), - filteredTags: state.filteredTags.map(renameTag(oldName, newName)).sort(), + tags: state.tags.map(renameTag(payload.oldName, payload.newName)).sort(), + filteredTags: state.filteredTags.map(renameTag(payload.oldName, payload.newName)).sort(), }), [FILTER_TAGS]: (state, { searchTerm }) => ({ ...state, diff --git a/test/tags/reducers/tagEdit.test.ts b/test/tags/reducers/tagEdit.test.ts index 994b5b3a..5f168611 100644 --- a/test/tags/reducers/tagEdit.test.ts +++ b/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', - newName: 'bar', - color: '#ff0000', + payload: { + oldName: 'foo', + 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 () => { diff --git a/test/tags/reducers/tagsList.test.ts b/test/tags/reducers/tagsList.test.ts index 277d3c28..5a40dd54 100644 --- a/test/tags/reducers/tagsList.test.ts +++ b/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, });