From bf95b0015c734b6b34094a6c93c333ab9d9793df Mon Sep 17 00:00:00 2001
From: Michal Michalczuk <michalczukm@gmail.com>
Date: Wed, 30 Dec 2020 12:59:12 +0100
Subject: [PATCH 1/3] issue/657 remove letter instance from list

Co-authored-by: Bartosz Gryta <gtktsc@gmail.com>
---
 frontend-project/src/locales/en-US.ts         |  2 +-
 frontend-project/src/locales/pl-PL.ts         |  2 +-
 frontend-project/src/models/letters.ts        |  8 +++
 .../src/pages/cases/CasesDetailView.tsx       |  2 +-
 .../src/pages/letters/list/index.tsx          | 69 +++++++++++++++++--
 .../src/pages/letters/list/locales/en-US.ts   |  1 +
 .../src/pages/letters/list/locales/pl-PL.ts   |  1 +
 .../src/pages/tags/TagsDetailView.tsx         |  2 +-
 frontend-project/src/services/letters.ts      | 25 +++----
 frontend-project/src/utils/reduxModel.ts      |  4 +-
 10 files changed, 90 insertions(+), 26 deletions(-)
 create mode 100644 frontend-project/src/models/letters.ts

diff --git a/frontend-project/src/locales/en-US.ts b/frontend-project/src/locales/en-US.ts
index 0e948b58e..4920ebae2 100644
--- a/frontend-project/src/locales/en-US.ts
+++ b/frontend-project/src/locales/en-US.ts
@@ -1,3 +1,4 @@
+import { tagsLocale } from '@/pages/tags/locales/en-US';
 import component from './en-US/component';
 import globalHeader from './en-US/globalHeader';
 import { menuLocale } from './en-US/menu';
@@ -8,7 +9,6 @@ import BaseLocales from './pl-PL';
 import { structuredLocale } from '../utils/structedLocale';
 import { casesLocale } from '../pages/cases/locales/en-US';
 import { globalsLocale } from './en-US/globals';
-import { tagsLocale } from '@/pages/tags/locales/en-US';
 
 const [labels] = structuredLocale({
   ...menuLocale,
diff --git a/frontend-project/src/locales/pl-PL.ts b/frontend-project/src/locales/pl-PL.ts
index ec9e1b2a6..8644ce2d7 100644
--- a/frontend-project/src/locales/pl-PL.ts
+++ b/frontend-project/src/locales/pl-PL.ts
@@ -1,3 +1,4 @@
+import { tagsLocale } from '@/pages/tags/locales/pl-PL';
 import component from './pl-PL/component';
 import globalHeader from './pl-PL/globalHeader';
 import pwa from './pl-PL/pwa';
@@ -7,7 +8,6 @@ import { menuLocale } from './pl-PL/menu';
 import { structuredLocale } from '../utils/structedLocale';
 import { casesLocale } from '../pages/cases/locales/pl-PL';
 import { globalsLocale } from './pl-PL/globals';
-import { tagsLocale } from '@/pages/tags/locales/pl-PL';
 
 const [labels, keys] = structuredLocale({
   ...menuLocale,
diff --git a/frontend-project/src/models/letters.ts b/frontend-project/src/models/letters.ts
new file mode 100644
index 000000000..7ce85b8e0
--- /dev/null
+++ b/frontend-project/src/models/letters.ts
@@ -0,0 +1,8 @@
+import { Letter } from '@/services/definitions';
+import { LettersService } from '@/services/letters';
+import { ReadWriteReduxResource } from '@/utils/reduxModel';
+
+export default ReadWriteReduxResource<Letter>({
+  namespace: 'letters',
+  service: LettersService,
+});
diff --git a/frontend-project/src/pages/cases/CasesDetailView.tsx b/frontend-project/src/pages/cases/CasesDetailView.tsx
index d2b18d53a..2db41aab8 100644
--- a/frontend-project/src/pages/cases/CasesDetailView.tsx
+++ b/frontend-project/src/pages/cases/CasesDetailView.tsx
@@ -6,11 +6,11 @@ import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Institution, User, Tag, Case, Feature } from '@/services/definitions';
 import { ReduxResourceState } from '@/utils/reduxModel';
 import router from 'umi/router';
-import { localeKeys } from '../../locales/pl-PL';
 import { RouterTypes } from 'umi';
 import { ServiceResponse } from '@/services/service';
 import smallEodSDK from '@/utils/sdk';
 import { openNotificationWithIcon } from '@/models/global';
+import { localeKeys } from '../../locales/pl-PL';
 
 interface CasesDetailViewProps {
   cases: ReduxResourceState<Case>;
diff --git a/frontend-project/src/pages/letters/list/index.tsx b/frontend-project/src/pages/letters/list/index.tsx
index fa247a958..beb505918 100644
--- a/frontend-project/src/pages/letters/list/index.tsx
+++ b/frontend-project/src/pages/letters/list/index.tsx
@@ -1,16 +1,58 @@
-import { ProColumns } from '@ant-design/pro-table';
-import React, { FC } from 'react';
+import { ActionType, ProColumns } from '@ant-design/pro-table';
+import React, { FC, useRef } from 'react';
 import { formatMessage } from 'umi-plugin-react/locale';
 
-import { fetchLettersPage } from '@/services/letters';
 import { Letter } from '@/services/definitions';
 import Table from '@/components/Table';
 import ChannelName from '@/components/Table/ChannelName';
 import InstitutionName from '@/components/Table/InstitutionName';
 import CaseName from '@/components/Table/CaseName';
 import DocumentTypeName from '@/components/Table/DocumentTypeName';
+import { Button, Space, Tooltip } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import { useDispatch } from 'dva';
+import { openNotificationWithIcon } from '@/models/global';
+import { ServiceResponse } from '@/services/service';
+import { PaginationParams, PaginationResponse } from '@/services/common';
+import { LettersService } from '@/services/letters';
+import { localeKeys } from '@/locales/pl-PL';
 
 const TableList: FC<{}> = () => {
+  const dispatch = useDispatch();
+  const tableActionRef = useRef<ActionType>();
+
+  function onRemove(id: number) {
+    dispatch({
+      type: 'letters/remove',
+      payload: {
+        id,
+        onResponse: (response: ServiceResponse<number>) => {
+          if (response.status === 'failed') {
+            openNotificationWithIcon(
+              'error',
+              formatMessage({ id: localeKeys.error }),
+              `${formatMessage({ id: 'letters-list.table.notification.remove' })} ${id}`,
+            );
+          }
+          tableActionRef.current.reload();
+        },
+      },
+    });
+  }
+
+  async function fetchPage(props: PaginationParams): Promise<PaginationResponse<Letter>> {
+    const response = await LettersService.fetchPage(props);
+    if (response.status === 'failed') {
+      openNotificationWithIcon(
+        'error',
+        formatMessage({ id: localeKeys.error }),
+        formatMessage({ id: localeKeys.lists.failedDownload }),
+      );
+      return { data: [], total: 0 };
+    }
+    return response.data;
+  }
+
   const columns: ProColumns<Letter>[] = [
     {
       title: formatMessage({ id: 'letters-list.table.columns.documentType.title' }),
@@ -70,9 +112,28 @@ const TableList: FC<{}> = () => {
       dataIndex: 'attachments',
       render: (attachments: []) => attachments.length,
     },
+    {
+      title: formatMessage({ id: localeKeys.lists.actions }),
+      dataIndex: 'id',
+      render: (id: number) => (
+        <Space>
+          <Tooltip title={formatMessage({ id: localeKeys.lists.delete })}>
+            <Button
+              type="default"
+              danger
+              shape="circle"
+              icon={<DeleteOutlined />}
+              onClick={() => onRemove(id)}
+            />
+          </Tooltip>
+        </Space>
+      ),
+    },
   ];
 
-  return <Table type="letters" columns={columns} fetchData={fetchLettersPage} />;
+  return (
+    <Table type="letters" columns={columns} actionRef={tableActionRef} fetchData={fetchPage} />
+  );
 };
 
 export default TableList;
diff --git a/frontend-project/src/pages/letters/list/locales/en-US.ts b/frontend-project/src/pages/letters/list/locales/en-US.ts
index 58ffc8854..42834f04f 100644
--- a/frontend-project/src/pages/letters/list/locales/en-US.ts
+++ b/frontend-project/src/pages/letters/list/locales/en-US.ts
@@ -15,4 +15,5 @@ export default {
   'letters-list.table.total': 'Total',
   'letters-list.table.direction.in': 'received',
   'letters-list.table.direction.out': 'sent',
+  'letters-list.table.notification.remove': 'Cannot delete list',
 };
diff --git a/frontend-project/src/pages/letters/list/locales/pl-PL.ts b/frontend-project/src/pages/letters/list/locales/pl-PL.ts
index 77231764c..83ca0f151 100644
--- a/frontend-project/src/pages/letters/list/locales/pl-PL.ts
+++ b/frontend-project/src/pages/letters/list/locales/pl-PL.ts
@@ -15,4 +15,5 @@ export default {
   'letters-list.table.total': 'Łącznie',
   'letters-list.table.direction.in': 'odebrane',
   'letters-list.table.direction.out': 'wysłane',
+  'letters-list.table.notification.remove': 'Nie udało się usuąć listu',
 };
diff --git a/frontend-project/src/pages/tags/TagsDetailView.tsx b/frontend-project/src/pages/tags/TagsDetailView.tsx
index 9f0aa6168..e492a4db6 100644
--- a/frontend-project/src/pages/tags/TagsDetailView.tsx
+++ b/frontend-project/src/pages/tags/TagsDetailView.tsx
@@ -6,11 +6,11 @@ import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Tag } from '@/services/definitions';
 import { ReduxResourceState } from '@/utils/reduxModel';
 import router from 'umi/router';
-import { localeKeys } from '../../locales/pl-PL';
 import { RouterTypes } from 'umi';
 import { ServiceResponse } from '@/services/service';
 import smallEodSDK from '@/utils/sdk';
 import { openNotificationWithIcon } from '@/models/global';
+import { localeKeys } from '../../locales/pl-PL';
 
 interface TagsDetailViewProps {
   tags: ReduxResourceState<Tag>;
diff --git a/frontend-project/src/services/letters.ts b/frontend-project/src/services/letters.ts
index c38c742ab..ebdb73a93 100644
--- a/frontend-project/src/services/letters.ts
+++ b/frontend-project/src/services/letters.ts
@@ -1,20 +1,13 @@
-import { PaginationParams, PaginationResponse } from '@/services/common.d';
 import smallEodSDK from '@/utils/sdk';
 import { Letter } from './definitions';
+import { ReadWriteService } from './service';
 
-export async function fetchLettersPage({
-  current,
-  pageSize,
-}: PaginationParams): Promise<PaginationResponse<Letter>> {
-  smallEodSDK.LettersApi();
+const sdk = new smallEodSDK.LettersApi();
 
-  const sdkResponse = await smallEodSDK.lettersList({
-    limit: pageSize,
-    offset: pageSize * (current - 1),
-  });
-
-  return {
-    data: sdkResponse.results,
-    total: sdkResponse.count,
-  };
-}
+export const LettersService = ReadWriteService<Letter>({
+  readPage: props => sdk.lettersListWithHttpInfo(props),
+  readOne: id => sdk.lettersReadWithHttpInfo(id),
+  create: data => sdk.lettersCreateWithHttpInfo(data),
+  update: (id, data) => sdk.lettersUpdateWithHttpInfo(id, data),
+  remove: id => sdk.lettersDeleteWithHttpInfo(id),
+});
diff --git a/frontend-project/src/utils/reduxModel.ts b/frontend-project/src/utils/reduxModel.ts
index 47946c928..8dc2270b0 100644
--- a/frontend-project/src/utils/reduxModel.ts
+++ b/frontend-project/src/utils/reduxModel.ts
@@ -1,12 +1,12 @@
 import { PaginationParams, PaginationResponse } from '@/services/common';
+import { Effect, EffectsCommandMap } from 'dva';
+import { AnyAction, Reducer } from 'redux';
 import {
   PostData,
   ReadOnlyServiceType,
   ReadWriteServiceType,
   ServiceResponse,
 } from '../services/service';
-import { Effect, EffectsCommandMap } from 'dva';
-import { AnyAction, Reducer } from 'redux';
 
 interface Payload<T> extends AnyAction {
   payload: T;

From 68e0c442ce745d155774778f82b3ddd9f8a7e1ab Mon Sep 17 00:00:00 2001
From: Michal Michalczuk <michalczukm@gmail.com>
Date: Wed, 30 Dec 2020 14:34:40 +0100
Subject: [PATCH 2/3] issue/657 show modal before delete letter instance

Co-authored-by: Bartosz Gryta <gtktsc@gmail.com>
---
 .../components/Modals/Confirmation/index.tsx  | 103 ++++++++++++++++++
 frontend-project/src/locales/en-US/globals.ts |   7 +-
 frontend-project/src/locales/pl-PL/globals.ts |   5 +
 .../src/pages/letters/list/index.tsx          |  66 ++++++++---
 .../src/pages/letters/list/locales/en-US.ts   |   1 +
 .../src/pages/letters/list/locales/pl-PL.ts   |   1 +
 6 files changed, 164 insertions(+), 19 deletions(-)
 create mode 100644 frontend-project/src/components/Modals/Confirmation/index.tsx

diff --git a/frontend-project/src/components/Modals/Confirmation/index.tsx b/frontend-project/src/components/Modals/Confirmation/index.tsx
new file mode 100644
index 000000000..0b59c6ce7
--- /dev/null
+++ b/frontend-project/src/components/Modals/Confirmation/index.tsx
@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Button } from 'antd';
+import { localeKeys } from '@/locales/pl-PL';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+type ConfirmationProps = {
+  title?: string;
+  onSuccess?: () => void;
+  onFailure?: (error: Error) => void;
+};
+
+type ConfirmationModalProps = ConfirmationProps & {
+  title: string;
+  hideModal: () => void;
+  onSubmit: () => void;
+};
+
+const ConfirmationModal = ({
+  onSubmit,
+  title,
+  onSuccess,
+  onFailure,
+  hideModal,
+}: ConfirmationModalProps) => {
+  const [isModalVisible, setIsModalVisible] = useState(true);
+  const [isInProgress, setIsInProgress] = useState(false);
+
+  useEffect(() => {
+    if (!isModalVisible) {
+      hideModal();
+    }
+  }, [isModalVisible]);
+
+  const handleOk = async () => {
+    setIsInProgress(true);
+    try {
+      await onSubmit();
+      setIsModalVisible(false);
+      onSuccess();
+    } catch (error) {
+      if (onFailure) {
+        onFailure(error);
+      }
+    } finally {
+      setIsInProgress(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  return (
+    <>
+      <Modal
+        title={title}
+        visible={isModalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        footer={[
+          <Button key="confirmation-button-cancel" disabled={isInProgress} onClick={handleCancel}>
+            {formatMessage({ id: localeKeys.modal.cancel })}
+          </Button>,
+          <Button
+            key="confirmation-button-confirm"
+            type="primary"
+            disabled={isInProgress}
+            loading={isInProgress}
+            onClick={handleOk}
+          >
+            {formatMessage({ id: localeKeys.modal.confirm })}
+          </Button>,
+        ]}
+      >
+        <p>{formatMessage({ id: localeKeys.modal.description })}</p>
+      </Modal>
+    </>
+  );
+};
+
+export const useConfirmationModal = <T extends {}>(
+  props: ConfirmationProps,
+  onSubmit: (args: T) => void,
+) => {
+  const [modal, setModal] = useState(null);
+
+  const hideModal = () => setModal(null);
+
+  const showModal = (args: T, title?: string) => {
+    setModal(
+      <ConfirmationModal
+        {...props}
+        {...(title ? { title } : undefined)}
+        onSubmit={() => onSubmit(args)}
+        hideModal={hideModal}
+      />,
+    );
+  };
+
+  return [modal, showModal];
+};
+
+export default ConfirmationModal;
diff --git a/frontend-project/src/locales/en-US/globals.ts b/frontend-project/src/locales/en-US/globals.ts
index 1310a53b8..fe0d8a104 100644
--- a/frontend-project/src/locales/en-US/globals.ts
+++ b/frontend-project/src/locales/en-US/globals.ts
@@ -1,5 +1,5 @@
 export const globalsLocale = {
-  error: 'Błąd',
+  error: 'Error',
   lists: {
     edit: 'Edit',
     delete: 'Delete',
@@ -12,4 +12,9 @@ export const globalsLocale = {
     save: 'Save',
     reset: 'Reset',
   },
+  modal: {
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    description: 'Are you sure you want to proceed?',
+  },
 };
diff --git a/frontend-project/src/locales/pl-PL/globals.ts b/frontend-project/src/locales/pl-PL/globals.ts
index 0f0e22d11..ec16dc771 100644
--- a/frontend-project/src/locales/pl-PL/globals.ts
+++ b/frontend-project/src/locales/pl-PL/globals.ts
@@ -12,4 +12,9 @@ export const globalsLocale = {
     save: 'Zapisz',
     reset: 'Wyczyść',
   },
+  modal: {
+    confirm: 'Potwierdź',
+    cancel: 'Anuluj',
+    description: 'Czy chcesz kontynuować?',
+  },
 };
diff --git a/frontend-project/src/pages/letters/list/index.tsx b/frontend-project/src/pages/letters/list/index.tsx
index beb505918..aad8d011f 100644
--- a/frontend-project/src/pages/letters/list/index.tsx
+++ b/frontend-project/src/pages/letters/list/index.tsx
@@ -16,30 +16,45 @@ import { ServiceResponse } from '@/services/service';
 import { PaginationParams, PaginationResponse } from '@/services/common';
 import { LettersService } from '@/services/letters';
 import { localeKeys } from '@/locales/pl-PL';
+import { useConfirmationModal } from '@/components/Modals/Confirmation';
 
 const TableList: FC<{}> = () => {
   const dispatch = useDispatch();
   const tableActionRef = useRef<ActionType>();
 
-  function onRemove(id: number) {
-    dispatch({
-      type: 'letters/remove',
-      payload: {
-        id,
-        onResponse: (response: ServiceResponse<number>) => {
-          if (response.status === 'failed') {
-            openNotificationWithIcon(
-              'error',
-              formatMessage({ id: localeKeys.error }),
-              `${formatMessage({ id: 'letters-list.table.notification.remove' })} ${id}`,
-            );
-          }
-          tableActionRef.current.reload();
+  function onRemove(id: number): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const onResponse = (response: ServiceResponse<number>) => {
+        if (response.status === 'failed') {
+          openNotificationWithIcon(
+            'error',
+            formatMessage({ id: localeKeys.error }),
+            `${formatMessage({ id: 'letters-list.table.notification.remove' })} ${id}`,
+          );
+
+          reject();
+        } else {
+          resolve();
+        }
+      };
+
+      dispatch({
+        type: 'letters/remove',
+        payload: {
+          id,
+          onResponse,
         },
-      },
+      });
     });
   }
 
+  const [modal, showModal] = useConfirmationModal(
+    {
+      onSuccess: () => tableActionRef.current.reload(),
+    },
+    onRemove,
+  );
+
   async function fetchPage(props: PaginationParams): Promise<PaginationResponse<Letter>> {
     const response = await LettersService.fetchPage(props);
     if (response.status === 'failed') {
@@ -115,7 +130,7 @@ const TableList: FC<{}> = () => {
     {
       title: formatMessage({ id: localeKeys.lists.actions }),
       dataIndex: 'id',
-      render: (id: number) => (
+      render: (_, { id, referenceNumber }: Letter) => (
         <Space>
           <Tooltip title={formatMessage({ id: localeKeys.lists.delete })}>
             <Button
@@ -123,7 +138,19 @@ const TableList: FC<{}> = () => {
               danger
               shape="circle"
               icon={<DeleteOutlined />}
-              onClick={() => onRemove(id)}
+              onClick={() =>
+                showModal(
+                  id,
+                  formatMessage(
+                    {
+                      id: 'letters-list.table.modal.remove.title',
+                    },
+                    {
+                      referenceNumber: referenceNumber || '',
+                    },
+                  ),
+                )
+              }
             />
           </Tooltip>
         </Space>
@@ -132,7 +159,10 @@ const TableList: FC<{}> = () => {
   ];
 
   return (
-    <Table type="letters" columns={columns} actionRef={tableActionRef} fetchData={fetchPage} />
+    <>
+      <Table type="letters" columns={columns} actionRef={tableActionRef} fetchData={fetchPage} />
+      {modal}
+    </>
   );
 };
 
diff --git a/frontend-project/src/pages/letters/list/locales/en-US.ts b/frontend-project/src/pages/letters/list/locales/en-US.ts
index 42834f04f..19a4a3b7c 100644
--- a/frontend-project/src/pages/letters/list/locales/en-US.ts
+++ b/frontend-project/src/pages/letters/list/locales/en-US.ts
@@ -16,4 +16,5 @@ export default {
   'letters-list.table.direction.in': 'received',
   'letters-list.table.direction.out': 'sent',
   'letters-list.table.notification.remove': 'Cannot delete list',
+  'letters-list.table.modal.remove.title': 'Do you want to delete {referenceNumber} letter?',
 };
diff --git a/frontend-project/src/pages/letters/list/locales/pl-PL.ts b/frontend-project/src/pages/letters/list/locales/pl-PL.ts
index 83ca0f151..22602246d 100644
--- a/frontend-project/src/pages/letters/list/locales/pl-PL.ts
+++ b/frontend-project/src/pages/letters/list/locales/pl-PL.ts
@@ -16,4 +16,5 @@ export default {
   'letters-list.table.direction.in': 'odebrane',
   'letters-list.table.direction.out': 'wysłane',
   'letters-list.table.notification.remove': 'Nie udało się usuąć listu',
+  'letters-list.table.modal.remove.title': 'Czy chcesz usunąć list {referenceNumber}?',
 };

From 4cff789c29411e87a96fbe43bba42de78c1ff01a Mon Sep 17 00:00:00 2001
From: Michal Michalczuk <michalczukm@gmail.com>
Date: Wed, 30 Dec 2020 16:07:09 +0100
Subject: [PATCH 3/3] issue/657 added confirmation modal to tags delete
 operation

Co-authored-by: Bartosz Gryta <gtktsc@gmail.com>
---
 .../components/Modals/Confirmation/index.tsx  | 17 +++--
 .../src/pages/letters/list/index.tsx          | 23 +++---
 .../src/pages/tags/TagsListView.tsx           | 71 ++++++++++++-------
 .../src/pages/tags/locales/en-US.ts           |  1 +
 .../src/pages/tags/locales/pl-PL.ts           |  1 +
 5 files changed, 67 insertions(+), 46 deletions(-)

diff --git a/frontend-project/src/components/Modals/Confirmation/index.tsx b/frontend-project/src/components/Modals/Confirmation/index.tsx
index 0b59c6ce7..cfe038ce4 100644
--- a/frontend-project/src/components/Modals/Confirmation/index.tsx
+++ b/frontend-project/src/components/Modals/Confirmation/index.tsx
@@ -3,25 +3,27 @@ import { Modal, Button } from 'antd';
 import { localeKeys } from '@/locales/pl-PL';
 import { formatMessage } from 'umi-plugin-react/locale';
 
-type ConfirmationProps = {
+type ConfirmationProps<T> = {
   title?: string;
   onSuccess?: () => void;
-  onFailure?: (error: Error) => void;
+  onFailure?: (args: T) => void;
 };
 
-type ConfirmationModalProps = ConfirmationProps & {
+type ConfirmationModalProps<T> = ConfirmationProps<T> & {
   title: string;
+  submitArgs: T;
   hideModal: () => void;
   onSubmit: () => void;
 };
 
-const ConfirmationModal = ({
+const ConfirmationModal = <T extends {}>({
   onSubmit,
   title,
   onSuccess,
   onFailure,
   hideModal,
-}: ConfirmationModalProps) => {
+  submitArgs,
+}: ConfirmationModalProps<T>) => {
   const [isModalVisible, setIsModalVisible] = useState(true);
   const [isInProgress, setIsInProgress] = useState(false);
 
@@ -39,7 +41,7 @@ const ConfirmationModal = ({
       onSuccess();
     } catch (error) {
       if (onFailure) {
-        onFailure(error);
+        onFailure(submitArgs);
       }
     } finally {
       setIsInProgress(false);
@@ -79,7 +81,7 @@ const ConfirmationModal = ({
 };
 
 export const useConfirmationModal = <T extends {}>(
-  props: ConfirmationProps,
+  props: ConfirmationProps<T>,
   onSubmit: (args: T) => void,
 ) => {
   const [modal, setModal] = useState(null);
@@ -91,6 +93,7 @@ export const useConfirmationModal = <T extends {}>(
       <ConfirmationModal
         {...props}
         {...(title ? { title } : undefined)}
+        submitArgs={args}
         onSubmit={() => onSubmit(args)}
         hideModal={hideModal}
       />,
diff --git a/frontend-project/src/pages/letters/list/index.tsx b/frontend-project/src/pages/letters/list/index.tsx
index aad8d011f..c1925c60c 100644
--- a/frontend-project/src/pages/letters/list/index.tsx
+++ b/frontend-project/src/pages/letters/list/index.tsx
@@ -24,25 +24,12 @@ const TableList: FC<{}> = () => {
 
   function onRemove(id: number): Promise<void> {
     return new Promise((resolve, reject) => {
-      const onResponse = (response: ServiceResponse<number>) => {
-        if (response.status === 'failed') {
-          openNotificationWithIcon(
-            'error',
-            formatMessage({ id: localeKeys.error }),
-            `${formatMessage({ id: 'letters-list.table.notification.remove' })} ${id}`,
-          );
-
-          reject();
-        } else {
-          resolve();
-        }
-      };
-
       dispatch({
         type: 'letters/remove',
         payload: {
           id,
-          onResponse,
+          onResponse: (response: ServiceResponse<number>) =>
+            response.status === 'failed' ? reject() : resolve(),
         },
       });
     });
@@ -51,6 +38,12 @@ const TableList: FC<{}> = () => {
   const [modal, showModal] = useConfirmationModal(
     {
       onSuccess: () => tableActionRef.current.reload(),
+      onFailure: id =>
+        openNotificationWithIcon(
+          'error',
+          formatMessage({ id: localeKeys.error }),
+          `${formatMessage({ id: 'letters-list.table.notification.remove' })} ${id}`,
+        ),
     },
     onRemove,
   );
diff --git a/frontend-project/src/pages/tags/TagsListView.tsx b/frontend-project/src/pages/tags/TagsListView.tsx
index e6e91dd8c..7c41beacd 100644
--- a/frontend-project/src/pages/tags/TagsListView.tsx
+++ b/frontend-project/src/pages/tags/TagsListView.tsx
@@ -14,6 +14,7 @@ import { PaginationParams, PaginationResponse } from '@/services/common';
 import { openNotificationWithIcon } from '@/models/global';
 import { ServiceResponse } from '@/services/service';
 import { localeKeys } from '@/locales/pl-PL';
+import { useConfirmationModal } from '@/components/Modals/Confirmation';
 
 function TagsListView() {
   const dispatch = useDispatch();
@@ -24,24 +25,31 @@ function TagsListView() {
   }
 
   function onRemove(id: number) {
-    dispatch({
-      type: 'tags/remove',
-      payload: {
-        id,
-        onResponse: (response: ServiceResponse<number>) => {
-          if (response.status === 'failed') {
-            openNotificationWithIcon(
-              'error',
-              formatMessage({ id: localeKeys.error }),
-              `${formatMessage({ id: localeKeys.tags.list.failedRemove })} ${id}`,
-            );
-          }
-          tableActionRef.current.reload();
+    return new Promise<void>((resolve, reject) => {
+      dispatch({
+        type: 'tags/remove',
+        payload: {
+          id,
+          onResponse: (response: ServiceResponse<number>) =>
+            response.status === 'failed' ? reject() : resolve(),
         },
-      },
+      });
     });
   }
 
+  const [modal, showModal] = useConfirmationModal(
+    {
+      onSuccess: () => tableActionRef.current.reload(),
+      onFailure: id =>
+        openNotificationWithIcon(
+          'error',
+          formatMessage({ id: localeKeys.error }),
+          `${formatMessage({ id: localeKeys.tags.list.failedRemove })} ${id}`,
+        ),
+    },
+    onRemove,
+  );
+
   async function fetchPage(props: PaginationParams): Promise<PaginationResponse<Tag>> {
     const response = await TagsService.fetchPage(props);
     if (response.status === 'failed') {
@@ -64,7 +72,7 @@ function TagsListView() {
     {
       title: formatMessage({ id: localeKeys.lists.actions }),
       dataIndex: 'id',
-      render: (id: number) => (
+      render: (_, { id, name }: Tag) => (
         <Space>
           <Tooltip title={formatMessage({ id: localeKeys.lists.edit })}>
             <Button
@@ -80,7 +88,19 @@ function TagsListView() {
               danger
               shape="circle"
               icon={<DeleteOutlined />}
-              onClick={() => onRemove(id)}
+              onClick={() =>
+                showModal(
+                  id,
+                  formatMessage(
+                    {
+                      id: localeKeys.tags.modal.remove.title,
+                    },
+                    {
+                      name: name || '',
+                    },
+                  ),
+                )
+              }
             />
           </Tooltip>
         </Space>
@@ -88,14 +108,17 @@ function TagsListView() {
     },
   ];
   return (
-    <Table
-      type="cases"
-      columns={columns}
-      fetchData={fetchPage}
-      pageHeader={localeKeys.tags.list.pageHeaderContent}
-      tableHeader={localeKeys.tags.list.table.header}
-      actionRef={tableActionRef}
-    />
+    <>
+      <Table
+        type="cases"
+        columns={columns}
+        fetchData={fetchPage}
+        pageHeader={localeKeys.tags.list.pageHeaderContent}
+        tableHeader={localeKeys.tags.list.table.header}
+        actionRef={tableActionRef}
+      />
+      {modal}
+    </>
   );
 }
 
diff --git a/frontend-project/src/pages/tags/locales/en-US.ts b/frontend-project/src/pages/tags/locales/en-US.ts
index b0db7efc8..47db88af7 100644
--- a/frontend-project/src/pages/tags/locales/en-US.ts
+++ b/frontend-project/src/pages/tags/locales/en-US.ts
@@ -3,6 +3,7 @@ export const tagsLocale = {
     fields: {
       name: 'Name',
     },
+    modal: { remove: { title: 'Do you want to delete {name} tag?' } },
     list: {
       pageHeaderContent: 'Tags list',
       failedRemove: 'Cannot delete tag.',
diff --git a/frontend-project/src/pages/tags/locales/pl-PL.ts b/frontend-project/src/pages/tags/locales/pl-PL.ts
index c175843e2..a51aa5554 100644
--- a/frontend-project/src/pages/tags/locales/pl-PL.ts
+++ b/frontend-project/src/pages/tags/locales/pl-PL.ts
@@ -3,6 +3,7 @@ export const tagsLocale = {
     fields: {
       name: 'Nazwa',
     },
+    modal: { remove: { title: 'Czy chcesz usunąć tag {name}?' } },
     list: {
       pageHeaderContent: 'Lista tagów',
       failedRemove: 'Nie udało się usunąć tagu.',