Ensured tags deleted are not removed from list until modal has been hidden

src/tags/helpers/DeleteTagConfirmModal.tsx

@@ -13,15 +13,14 @@ interface DeleteTagConfirmModalProps extends TagModalProps {
 export const DeleteTagConfirmModal = (
   { tag, toggle, isOpen, deleteTag, tagDelete, tagDeleted }: DeleteTagConfirmModalProps,
 ) => {
-  const { deleting, error, errorData } = tagDelete;
+  const { deleting, error, deleted, errorData } = tagDelete;
   const doDelete = async () => {
     await deleteTag(tag);
-    tagDeleted(tag);
     toggle();
   };
 
   return (
-    <Modal toggle={toggle} isOpen={isOpen} centered>
+    <Modal toggle={toggle} isOpen={isOpen} centered onClosed={() => deleted && tagDeleted(tag)}>
       <ModalHeader toggle={toggle} className="text-danger">Delete tag</ModalHeader>
       <ModalBody>
         Are you sure you want to delete tag <b>{tag}</b>?

src/tags/reducers/tagDelete.ts

@@ -13,6 +13,7 @@ export const TAG_DELETED = 'shlink/deleteTag/TAG_DELETED';
 
 export interface TagDeletion {
   deleting: boolean;
+  deleted: boolean;
   error: boolean;
   errorData?: ProblemDetailsError;
 }
@@ -23,13 +24,14 @@ export interface DeleteTagAction extends Action<string> {
 
 const initialState: TagDeletion = {
   deleting: false,
+  deleted: false,
   error: false,
 };
 
 export default buildReducer<TagDeletion, ApiErrorAction>({
-  [DELETE_TAG_START]: () => ({ deleting: true, error: false }),
+  [DELETE_TAG_START]: () => ({ deleting: true, deleted: false, error: false }),
-  [DELETE_TAG_ERROR]: (_, { errorData }) => ({ deleting: false, error: true, errorData }),
+  [DELETE_TAG_ERROR]: (_, { errorData }) => ({ deleting: false, deleted: false, error: true, errorData }),
-  [DELETE_TAG]: () => ({ deleting: false, error: false }),
+  [DELETE_TAG]: () => ({ deleting: false, deleted: true, error: false }),
 }, initialState);
 
 export const deleteTag = (buildShlinkApiClient: ShlinkApiClientBuilder) => (tag: string) => async (

test/tags/helpers/DeleteTagConfirmModal.test.tsx

@@ -6,14 +6,14 @@ import { renderWithEvents } from '../../__helpers__/setUpTest';
 describe('<DeleteTagConfirmModal />', () => {
   const tag = 'nodejs';
   const deleteTag = jest.fn();
-  const tagDeleted = jest.fn();
+  const toggle = jest.fn();
   const setUp = (tagDelete: TagDeletion) => renderWithEvents(
     <DeleteTagConfirmModal
       tag={tag}
-      toggle={() => ''}
+      toggle={toggle}
       isOpen
       deleteTag={deleteTag}
-      tagDeleted={tagDeleted}
+      tagDeleted={jest.fn()}
       tagDelete={tagDelete}
     />,
   );
@@ -21,7 +21,7 @@ describe('<DeleteTagConfirmModal />', () => {
   afterEach(jest.resetAllMocks);
 
   it('asks confirmation for provided tag to be deleted', () => {
-    setUp({ error: false, deleting: false });
+    setUp({ error: false, deleted: false, deleting: false });
 
     const delBtn = screen.getByRole('button', { name: 'Delete tag' });
 
@@ -33,12 +33,12 @@ describe('<DeleteTagConfirmModal />', () => {
   });
 
   it('shows error message when deletion failed', () => {
-    setUp({ error: true, deleting: false });
+    setUp({ error: true, deleted: false, deleting: false });
     expect(screen.getByText('Something went wrong while deleting the tag :(')).toBeInTheDocument();
   });
 
   it('shows loading status while deleting', () => {
-    setUp({ error: false, deleting: true });
+    setUp({ error: false, deleted: false, deleting: true });
 
     const delBtn = screen.getByRole('button', { name: 'Deleting tag...' });
 
@@ -48,22 +48,21 @@ describe('<DeleteTagConfirmModal />', () => {
   });
 
   it('hides tag modal when btn is clicked', async () => {
-    const { user } = setUp({ error: false, deleting: false });
+    const { user } = setUp({ error: false, deleted: true, deleting: false });
 
     await user.click(screen.getByRole('button', { name: 'Delete tag' }));
 
     expect(deleteTag).toHaveBeenCalledTimes(1);
     expect(deleteTag).toHaveBeenCalledWith(tag);
-    expect(tagDeleted).toHaveBeenCalledTimes(1);
+    expect(toggle).toHaveBeenCalledTimes(1);
-    expect(tagDeleted).toHaveBeenCalledWith(tag);
   });
 
   it('does no further actions when modal is closed without deleting tag', async () => {
-    const { user } = setUp({ error: false, deleting: false });
+    const { user } = setUp({ error: false, deleted: true, deleting: false });
 
     await user.click(screen.getByLabelText('Close'));
 
     expect(deleteTag).not.toHaveBeenCalled();
-    expect(tagDeleted).not.toHaveBeenCalled();
+    expect(toggle).toHaveBeenCalled();
   });
 });

test/tags/reducers/tagDelete.test.ts

@@ -15,6 +15,7 @@ describe('tagDeleteReducer', () => {
     it('returns loading on DELETE_TAG_START', () => {
       expect(reducer(undefined, { type: DELETE_TAG_START })).toEqual({
         deleting: true,
+        deleted: false,
         error: false,
       });
     });
@@ -22,6 +23,7 @@ describe('tagDeleteReducer', () => {
     it('returns error on DELETE_TAG_ERROR', () => {
       expect(reducer(undefined, { type: DELETE_TAG_ERROR })).toEqual({
         deleting: false,
+        deleted: false,
         error: true,
       });
     });
@@ -29,6 +31,7 @@ describe('tagDeleteReducer', () => {
     it('returns tag names on DELETE_TAG', () => {
       expect(reducer(undefined, { type: DELETE_TAG })).toEqual({
         deleting: false,
+        deleted: true,
         error: false,
       });
     });