diff --git a/src/tags/helpers/EditTagModal.tsx b/src/tags/helpers/EditTagModal.tsx index 55b5ccb6..59297b6c 100644 --- a/src/tags/helpers/EditTagModal.tsx +++ b/src/tags/helpers/EditTagModal.tsx @@ -8,15 +8,15 @@ import { useToggle } from '../../utils/helpers/hooks'; import { handleEventPreventingDefault } from '../../utils/utils'; import { ColorGenerator } from '../../utils/services/ColorGenerator'; import { TagModalProps } from '../data'; -import { TagEdition } from '../reducers/tagEdit'; +import { EditTag, TagEdition } from '../reducers/tagEdit'; import { Result } from '../../utils/Result'; import { ShlinkApiError } from '../../api/ShlinkApiError'; import './EditTagModal.scss'; interface EditTagModalProps extends TagModalProps { tagEdit: TagEdition; - editTag: (oldName: string, newName: string, color: string) => Promise; - tagEdited: (oldName: string, newName: string, color: string) => void; + editTag: (editTag: EditTag) => Promise; + tagEdited: (tagEdited: EditTag) => void; } export const EditTagModal = ({ getColorForKey }: ColorGenerator) => ( @@ -27,11 +27,11 @@ export const EditTagModal = ({ getColorForKey }: ColorGenerator) => ( const [showColorPicker, toggleColorPicker, , hideColorPicker] = useToggle(); const { editing, error, edited, errorData } = tagEdit; const saveTag = handleEventPreventingDefault( - async () => editTag(tag, newTagName, color) + async () => editTag({ oldName: tag, newName: newTagName, color }) .then(toggle) .catch(() => {}), ); - const onClosed = pipe(hideColorPicker, () => edited && tagEdited(tag, newTagName, color)); + const onClosed = pipe(hideColorPicker, () => edited && tagEdited({ oldName: tag, newName: newTagName, color })); return ( diff --git a/src/tags/reducers/tagEdit.ts b/src/tags/reducers/tagEdit.ts index 177387e7..b8e9e6ea 100644 --- a/src/tags/reducers/tagEdit.ts +++ b/src/tags/reducers/tagEdit.ts @@ -1,5 +1,5 @@ import { pick } from 'ramda'; -import { PayloadAction } from '@reduxjs/toolkit'; +import { createAction, PayloadAction } from '@reduxjs/toolkit'; import { Dispatch } from 'redux'; import { buildReducer } from '../../utils/helpers/redux'; import { GetState } from '../../container/types'; @@ -23,7 +23,7 @@ export interface TagEdition { errorData?: ProblemDetailsError; } -interface EditTag { +export interface EditTag { oldName: string; newName: string; color: string; @@ -49,9 +49,7 @@ export default buildReducer({ }, initialState); export const editTag = (buildShlinkApiClient: ShlinkApiClientBuilder, colorGenerator: ColorGenerator) => ( - oldName: string, - newName: string, - color: string, + { oldName, newName, color }: EditTag, ) => async (dispatch: Dispatch, getState: GetState) => { dispatch({ type: EDIT_TAG_START }); const { editTag: shlinkEditTag } = buildShlinkApiClient(getState); @@ -70,11 +68,4 @@ export const editTag = (buildShlinkApiClient: ShlinkApiClientBuilder, colorGener } }; -export const tagEdited = (oldName: string, newName: string, color: string): EditTagAction => ({ - type: TAG_EDITED, - payload: { - oldName, - newName, - color, - }, -}); +export const tagEdited = createAction(TAG_EDITED); diff --git a/src/tags/reducers/tagsList.ts b/src/tags/reducers/tagsList.ts index 89e56f78..ae52954e 100644 --- a/src/tags/reducers/tagsList.ts +++ b/src/tags/reducers/tagsList.ts @@ -11,7 +11,7 @@ import { TagStats } from '../data'; import { ApiErrorAction } from '../../api/types/actions'; import { CREATE_SHORT_URL, CreateShortUrlAction } from '../../short-urls/reducers/shortUrlCreation'; import { DeleteTagAction, TAG_DELETED } from './tagDelete'; -import { EditTagAction, TAG_EDITED } from './tagEdit'; +import { EditTagAction, tagEdited } from './tagEdit'; import { ProblemDetailsError } from '../../api/types/errors'; export const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START'; @@ -90,7 +90,7 @@ export default buildReducer({ tags: rejectTag(state.tags, tag), filteredTags: rejectTag(state.filteredTags, tag), }), - [TAG_EDITED]: (state, { payload }) => ({ + [tagEdited.toString()]: (state, { payload }) => ({ ...state, tags: state.tags.map(renameTag(payload.oldName, payload.newName)).sort(), filteredTags: state.filteredTags.map(renameTag(payload.oldName, payload.newName)).sort(), diff --git a/test/tags/reducers/tagEdit.test.ts b/test/tags/reducers/tagEdit.test.ts index 5f168611..c7707480 100644 --- a/test/tags/reducers/tagEdit.test.ts +++ b/test/tags/reducers/tagEdit.test.ts @@ -50,7 +50,7 @@ describe('tagEditReducer', () => { describe('tagEdited', () => { it('returns action based on provided params', () => - expect(tagEdited('foo', 'bar', '#ff0000')).toEqual({ + expect(tagEdited({ oldName: 'foo', newName: 'bar', color: '#ff0000' })).toEqual({ type: TAG_EDITED, payload: { oldName: 'foo', @@ -74,7 +74,7 @@ describe('tagEditReducer', () => { it('calls API on success', async () => { const apiClientMock = createApiClientMock(Promise.resolve()); - const dispatchable = editTag(() => apiClientMock, colorGenerator)(oldName, newName, color); + const dispatchable = editTag(() => apiClientMock, colorGenerator)({ oldName, newName, color }); await dispatchable(dispatch, getState); @@ -95,7 +95,7 @@ describe('tagEditReducer', () => { it('throws on error', async () => { const error = 'Error'; const apiClientMock = createApiClientMock(Promise.reject(error)); - const dispatchable = editTag(() => apiClientMock, colorGenerator)(oldName, newName, color); + const dispatchable = editTag(() => apiClientMock, colorGenerator)({ oldName, newName, color }); try { await dispatchable(dispatch, getState);