From fb2d8cd0924ef74e07264c0695e4c7e6b36492c3 Mon Sep 17 00:00:00 2001
From: minwoox <songmw725@gmail.com>
Date: Thu, 7 Nov 2024 16:51:43 +0900
Subject: [PATCH] DRY

---
 .../settings/DeleteConfirmationModal.tsx      | 54 +++++++++++++++++++
 .../settings/credentials/DeleteCredential.tsx | 43 ++++-----------
 .../project/settings/members/DeleteMember.tsx | 43 ++++-----------
 .../project/settings/mirrors/DeleteMirror.tsx | 43 ++++-----------
 .../project/settings/tokens/AppTokenList.tsx  | 10 ++--
 .../project/settings/tokens/DeleteToken.tsx   | 48 +++++++++++++++++
 6 files changed, 140 insertions(+), 101 deletions(-)
 create mode 100644 webapp/src/dogma/features/project/settings/DeleteConfirmationModal.tsx
 create mode 100644 webapp/src/dogma/features/project/settings/tokens/DeleteToken.tsx

diff --git a/webapp/src/dogma/features/project/settings/DeleteConfirmationModal.tsx b/webapp/src/dogma/features/project/settings/DeleteConfirmationModal.tsx
new file mode 100644
index 0000000000..32e25605d0
--- /dev/null
+++ b/webapp/src/dogma/features/project/settings/DeleteConfirmationModal.tsx
@@ -0,0 +1,54 @@
+import {
+  Button,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+interface DeleteConfirmationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  type: string;
+  id: string;
+  projectName: string;
+  handleDelete: () => void;
+  isLoading: boolean;
+}
+
+export const DeleteConfirmationModal = ({
+  isOpen,
+  onClose,
+  id,
+  type,
+  projectName,
+  handleDelete,
+  isLoading,
+}: DeleteConfirmationModalProps): JSX.Element => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Are you sure?</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          Delete {type} &apos;{id}&apos; from {projectName}?
+        </ModalBody>
+        <ModalFooter>
+          <HStack spacing={3}>
+            <Button colorScheme="red" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button colorScheme="red" onClick={handleDelete} isLoading={isLoading} loadingText="Deleting">
+              Delete
+            </Button>
+          </HStack>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/webapp/src/dogma/features/project/settings/credentials/DeleteCredential.tsx b/webapp/src/dogma/features/project/settings/credentials/DeleteCredential.tsx
index 21d93c0338..8f79ea7b77 100644
--- a/webapp/src/dogma/features/project/settings/credentials/DeleteCredential.tsx
+++ b/webapp/src/dogma/features/project/settings/credentials/DeleteCredential.tsx
@@ -1,19 +1,9 @@
-import {
-  Button,
-  HStack,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Button, useDisclosure } from '@chakra-ui/react';
 import { newNotification } from 'dogma/features/notification/notificationSlice';
 import ErrorMessageParser from 'dogma/features/services/ErrorMessageParser';
 import { useAppDispatch } from 'dogma/hooks';
 import { MdDelete } from 'react-icons/md';
+import { DeleteConfirmationModal } from 'dogma/features/project/settings/DeleteConfirmationModal';
 
 export const DeleteCredential = ({
   projectName,
@@ -42,26 +32,15 @@ export const DeleteCredential = ({
       <Button leftIcon={<MdDelete />} colorScheme="red" size="sm" variant="ghost" onClick={onToggle}>
         Delete
       </Button>
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Are you sure?</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            Delete credential &apos{id}&apos from {projectName}?
-          </ModalBody>
-          <ModalFooter>
-            <HStack spacing={3}>
-              <Button colorScheme="red" variant="outline" onClick={onClose}>
-                Cancel
-              </Button>
-              <Button colorScheme="red" onClick={handleDelete} isLoading={isLoading} loadingText="Deleting">
-                Delete
-              </Button>
-            </HStack>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+      <DeleteConfirmationModal
+        isOpen={isOpen}
+        onClose={onClose}
+        id={id}
+        type={'credential'}
+        projectName={projectName}
+        handleDelete={handleDelete}
+        isLoading={isLoading}
+      />
     </>
   );
 };
diff --git a/webapp/src/dogma/features/project/settings/members/DeleteMember.tsx b/webapp/src/dogma/features/project/settings/members/DeleteMember.tsx
index af1506f053..0464c967a6 100644
--- a/webapp/src/dogma/features/project/settings/members/DeleteMember.tsx
+++ b/webapp/src/dogma/features/project/settings/members/DeleteMember.tsx
@@ -1,19 +1,9 @@
-import {
-  Button,
-  HStack,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Button, useDisclosure } from '@chakra-ui/react';
 import { newNotification } from 'dogma/features/notification/notificationSlice';
 import ErrorMessageParser from 'dogma/features/services/ErrorMessageParser';
 import { useAppDispatch } from 'dogma/hooks';
 import { MdDelete } from 'react-icons/md';
+import { DeleteConfirmationModal } from '../DeleteConfirmationModal';
 
 export const DeleteMember = ({
   projectName,
@@ -44,26 +34,15 @@ export const DeleteMember = ({
       <Button leftIcon={<MdDelete />} colorScheme="red" size="sm" variant="ghost" onClick={onToggle}>
         Delete
       </Button>
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Are you sure?</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            Delete {id} from {projectName}?
-          </ModalBody>
-          <ModalFooter>
-            <HStack spacing={3}>
-              <Button colorScheme="red" variant="outline" onClick={onClose}>
-                Cancel
-              </Button>
-              <Button colorScheme="red" onClick={handleDelete} isLoading={isLoading} loadingText="Deleting">
-                Delete
-              </Button>
-            </HStack>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+      <DeleteConfirmationModal
+        isOpen={isOpen}
+        onClose={onClose}
+        id={id}
+        type={'member'}
+        projectName={projectName}
+        handleDelete={handleDelete}
+        isLoading={isLoading}
+      />
     </>
   );
 };
diff --git a/webapp/src/dogma/features/project/settings/mirrors/DeleteMirror.tsx b/webapp/src/dogma/features/project/settings/mirrors/DeleteMirror.tsx
index 4f165457ed..670048bc65 100644
--- a/webapp/src/dogma/features/project/settings/mirrors/DeleteMirror.tsx
+++ b/webapp/src/dogma/features/project/settings/mirrors/DeleteMirror.tsx
@@ -1,15 +1,5 @@
-import {
-  Button,
-  HStack,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Button, useDisclosure } from '@chakra-ui/react';
+import { DeleteConfirmationModal } from 'dogma/features/project/settings/DeleteConfirmationModal';
 import { newNotification } from 'dogma/features/notification/notificationSlice';
 import ErrorMessageParser from 'dogma/features/services/ErrorMessageParser';
 import { useAppDispatch } from 'dogma/hooks';
@@ -42,26 +32,15 @@ export const DeleteMirror = ({
       <Button leftIcon={<MdDelete />} colorScheme="red" size="sm" variant="ghost" onClick={onToggle}>
         Delete
       </Button>
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Are you sure?</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            Delete mirror &apos{id}&apos from {projectName}?
-          </ModalBody>
-          <ModalFooter>
-            <HStack spacing={3}>
-              <Button colorScheme="red" variant="outline" onClick={onClose}>
-                Cancel
-              </Button>
-              <Button colorScheme="red" onClick={handleDelete} isLoading={isLoading} loadingText="Deleting">
-                Delete
-              </Button>
-            </HStack>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+      <DeleteConfirmationModal
+        isOpen={isOpen}
+        onClose={onClose}
+        id={id}
+        type={'mirror'}
+        projectName={projectName}
+        handleDelete={handleDelete}
+        isLoading={isLoading}
+      />
     </>
   );
 };
diff --git a/webapp/src/dogma/features/project/settings/tokens/AppTokenList.tsx b/webapp/src/dogma/features/project/settings/tokens/AppTokenList.tsx
index 8421bce424..04ea0d1730 100644
--- a/webapp/src/dogma/features/project/settings/tokens/AppTokenList.tsx
+++ b/webapp/src/dogma/features/project/settings/tokens/AppTokenList.tsx
@@ -6,7 +6,7 @@ import { DataTableClientPagination } from 'dogma/common/components/table/DataTab
 import { useMemo } from 'react';
 import { useDeleteTokenMemberMutation } from 'dogma/features/api/apiSlice';
 import { AppTokenDetailDto } from 'dogma/features/project/settings/tokens/AppTokenDto';
-import { DeleteMember } from 'dogma/features/project/settings/members/DeleteMember';
+import { DeleteToken } from 'dogma/features/project/settings/tokens/DeleteToken';
 
 export type AppTokenListProps<Data extends object> = {
   data: Data[];
@@ -14,7 +14,7 @@ export type AppTokenListProps<Data extends object> = {
 };
 
 const AppTokenList = <Data extends object>({ data, projectName }: AppTokenListProps<Data>) => {
-  const [deleteMember, { isLoading }] = useDeleteTokenMemberMutation();
+  const [deleteToken, { isLoading }] = useDeleteTokenMemberMutation();
   const columnHelper = createColumnHelper<AppTokenDetailDto>();
   const columns = useMemo(
     () => [
@@ -39,10 +39,10 @@ const AppTokenList = <Data extends object>({ data, projectName }: AppTokenListPr
       }),
       columnHelper.accessor((row: AppTokenDetailDto) => row.appId, {
         cell: (info) => (
-          <DeleteMember
+          <DeleteToken
             projectName={projectName}
             id={info.getValue()}
-            deleteMember={(projectName, id) => deleteMember({ projectName, id }).unwrap()}
+            deleteToken={(projectName, id) => deleteToken({ projectName, id }).unwrap()}
             isLoading={isLoading}
           />
         ),
@@ -50,7 +50,7 @@ const AppTokenList = <Data extends object>({ data, projectName }: AppTokenListPr
         enableSorting: false,
       }),
     ],
-    [columnHelper, deleteMember, isLoading, projectName],
+    [columnHelper, deleteToken, isLoading, projectName],
   );
   return <DataTableClientPagination columns={columns as ColumnDef<Data>[]} data={data} />;
 };
diff --git a/webapp/src/dogma/features/project/settings/tokens/DeleteToken.tsx b/webapp/src/dogma/features/project/settings/tokens/DeleteToken.tsx
new file mode 100644
index 0000000000..5cbadabdcc
--- /dev/null
+++ b/webapp/src/dogma/features/project/settings/tokens/DeleteToken.tsx
@@ -0,0 +1,48 @@
+import { Button, useDisclosure } from '@chakra-ui/react';
+import { newNotification } from 'dogma/features/notification/notificationSlice';
+import ErrorMessageParser from 'dogma/features/services/ErrorMessageParser';
+import { useAppDispatch } from 'dogma/hooks';
+import { MdDelete } from 'react-icons/md';
+import { DeleteConfirmationModal } from '../DeleteConfirmationModal';
+
+export const DeleteToken = ({
+  projectName,
+  repoName,
+  id,
+  deleteToken,
+  isLoading,
+}: {
+  projectName: string;
+  repoName?: string;
+  id: string;
+  deleteToken: (projectName: string, id: string, repoName?: string) => Promise<void>;
+  isLoading: boolean;
+}): JSX.Element => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+  const dispatch = useAppDispatch();
+  const handleDelete = async () => {
+    try {
+      await deleteToken(projectName, id, repoName);
+      dispatch(newNotification('Token deleted.', `Successfully deleted ${id}`, 'success'));
+      onClose();
+    } catch (error) {
+      dispatch(newNotification(`Failed to delete ${id}`, ErrorMessageParser.parse(error), 'error'));
+    }
+  };
+  return (
+    <>
+      <Button leftIcon={<MdDelete />} colorScheme="red" size="sm" variant="ghost" onClick={onToggle}>
+        Delete
+      </Button>
+      <DeleteConfirmationModal
+        isOpen={isOpen}
+        onClose={onClose}
+        id={id}
+        type={'token'}
+        projectName={projectName}
+        handleDelete={handleDelete}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};