From 4c936b1eb7c377c2dfc69c6fe1cbe196c47bd5b2 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Thu, 14 Mar 2024 21:56:29 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20create=20remov?=
 =?UTF-8?q?e=20member=20dialog=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projects/Dialog/RemoveMemberDialog.tsx    | 38 +++++++++++++++++++
 .../projects/project/settings/MemberCard.tsx  | 23 ++++-------
 2 files changed, 46 insertions(+), 15 deletions(-)
 create mode 100644 packages/frontend/src/components/projects/Dialog/RemoveMemberDialog.tsx

diff --git a/packages/frontend/src/components/projects/Dialog/RemoveMemberDialog.tsx b/packages/frontend/src/components/projects/Dialog/RemoveMemberDialog.tsx
new file mode 100644
index 00000000..6695ff8b
--- /dev/null
+++ b/packages/frontend/src/components/projects/Dialog/RemoveMemberDialog.tsx
@@ -0,0 +1,38 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+import React from 'react';
+import { formatAddress } from 'utils/format';
+
+interface RemoveMemberDialogProps extends ConfirmDialogProps {
+  memberName: string;
+  ethAddress: string;
+  emailDomain: string;
+}
+
+export const RemoveMemberDialog = ({
+  memberName,
+  ethAddress,
+  emailDomain,
+  open,
+  handleCancel,
+  handleConfirm,
+  ...props
+}: RemoveMemberDialogProps) => {
+  return (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Remove member?"
+      handleCancel={handleCancel}
+      open={open}
+      confirmButtonTitle="Yes, remove member"
+      handleConfirm={handleConfirm}
+      confirmButtonProps={{ variant: 'danger' }}
+    >
+      <p className="text-sm text-elements-high-em">
+        Once removed, {formatAddress(memberName)} ({formatAddress(ethAddress)}@
+        {emailDomain}) will not be able to access this project.
+      </p>
+    </ConfirmDialog>
+  );
+};
diff --git a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
index 715d8bf4..8dd8fd16 100644
--- a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
+++ b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
@@ -3,15 +3,14 @@ import { Permission, User } from 'gql-client';
 
 import {
   Select,
-  Typography,
   Option,
   Chip,
   IconButton,
   Tooltip,
 } from '@material-tailwind/react';
 
-import ConfirmDialog from '../../../shared/ConfirmDialog';
-import { formatAddress } from '../../../../utils/format';
+import { formatAddress } from 'utils/format';
+import { RemoveMemberDialog } from 'components/projects/Dialog/RemoveMemberDialog';
 
 const PERMISSION_OPTIONS = [
   {
@@ -141,25 +140,19 @@ const MemberCard = ({
           </div>
         )}
       </div>
-      <ConfirmDialog
-        dialogTitle="Remove member?"
-        handleOpen={() => setRemoveMemberDialogOpen((preVal) => !preVal)}
+      <RemoveMemberDialog
+        handleCancel={() => setRemoveMemberDialogOpen((preVal) => !preVal)}
         open={removeMemberDialogOpen}
-        confirmButtonTitle="Yes, Remove member"
         handleConfirm={() => {
           setRemoveMemberDialogOpen((preVal) => !preVal);
           if (onRemoveProjectMember) {
             onRemoveProjectMember();
           }
         }}
-        color="red"
-      >
-        <Typography variant="small" placeholder={''}>
-          Once removed, {formatAddress(member.name ?? '')} (
-          {formatAddress(ethAddress)}@{emailDomain}) will not be able to access
-          this project.
-        </Typography>
-      </ConfirmDialog>
+        memberName={member.name ?? ''}
+        ethAddress={ethAddress}
+        emailDomain={emailDomain}
+      />
     </div>
   );
 };