From cb0aa20aa24a253aeab09b3706609b7299f46ae4 Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sat, 8 Jun 2024 18:11:25 +0900
Subject: [PATCH] fix: show delete confirm dialog when delete project member

---
 frontend/messages/en.json                     |  3 +-
 frontend/messages/ja.json                     |  3 +-
 .../[projectId]/members/MembersPage.tsx       | 36 ++++++++++++++++---
 .../[projectId]/members/MembersTable.tsx      |  4 +--
 .../projects/[projectId]/members/page.tsx     |  1 +
 frontend/types/member.ts                      |  1 +
 6 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index dd053f1..d7ad3cc 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -285,7 +285,8 @@
     "add_member": "Add member",
     "user_name_or_email": "User name or email",
     "close": "Close",
-    "add": "Add"
+    "add": "Add",
+    "are_you_sure": "Are you sure you want to delete member?"
   },
   "Settings": {
     "project_management": "Project Management",
diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json
index 237fa98..37d01e4 100644
--- a/frontend/messages/ja.json
+++ b/frontend/messages/ja.json
@@ -284,7 +284,8 @@
     "add_member": "メンバーの追加",
     "user_name_or_email": "ユーザー名またはメールアドレス",
     "close": "閉じる",
-    "add": "追加"
+    "add": "追加",
+    "are_you_sure": "メンバーを削除してもよろしいですか?"
   },
   "Settings": {
     "project_management": "プロジェクト管理",
diff --git a/frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx b/frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx
index 8b27df0..53f9eb5 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx
@@ -4,11 +4,12 @@ import { useState, useEffect, useContext } from 'react';
 import { Button } from '@nextui-org/react';
 import { Plus } from 'lucide-react';
 import { MemberType, UserType } from '@/types/user';
-import { MembersMessages } from '@/types/members';
+import { MembersMessages } from '@/types/member';
 import { TokenContext } from '@/utils/TokenProvider';
 import MembersTable from './MembersTable';
 import AddMemberDialog from './AddMemberDialog';
 import { fetchProjectMembers, addMember, deleteMember, updateMember } from './membersControl';
+import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 
 type Props = {
   projectId: string;
@@ -48,9 +49,25 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
     setIsDialogOpen(false);
   };
 
-  const handleDeleteMember = async (userDeleted: UserType) => {
-    await deleteMember(context.token.access_token, userDeleted.id, projectId);
-    setMembers(members.filter((member) => member.User.id !== userDeleted.id));
+  // delete confirm dialog
+  const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] = useState(false);
+  const [deleteMemberId, setDeleteMemberId] = useState<number | null>(null);
+  const closeDeleteConfirmDialog = () => {
+    setIsDeleteConfirmDialogOpen(false);
+    setDeleteMemberId(null);
+  };
+
+  const onDeleteClick = (memberId: number) => {
+    setDeleteMemberId(memberId);
+    setIsDeleteConfirmDialogOpen(true);
+  };
+
+  const onConfirm = async () => {
+    if (deleteMemberId) {
+      await deleteMember(context.token.access_token, deleteMemberId, projectId);
+      setMembers(members.filter((member) => member.User.id !== deleteMemberId));
+      closeDeleteConfirmDialog();
+    }
   };
 
   const handleChangeRole = async (userEdit: UserType, role: number) => {
@@ -84,7 +101,7 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
         members={members}
         isDisabled={!context.isProjectManager(Number(projectId))}
         onChangeRole={handleChangeRole}
-        onDeleteMember={handleDeleteMember}
+        onDeleteMember={onDeleteClick}
         messages={messages}
       />
 
@@ -95,6 +112,15 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
         onAddMember={handleAddMember}
         messages={messages}
       />
+
+      <DeleteConfirmDialog
+        isOpen={isDeleteConfirmDialogOpen}
+        onCancel={closeDeleteConfirmDialog}
+        onConfirm={onConfirm}
+        closeText={messages.close}
+        confirmText={messages.areYouSure}
+        deleteText={messages.delete}
+      />
     </div>
   );
 }
diff --git a/frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx b/frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx
index acc69cb..3e1922d 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx
@@ -23,7 +23,7 @@ type Props = {
   members: MemberType[];
   isDisabled: boolean;
   onChangeRole: (userEdit: UserType, role: number) => void;
-  onDeleteMember: (userDeleted: UserType) => void;
+  onDeleteMember: (deletedUserId: number) => void;
   messages: SettingsMessages;
 };
 
@@ -92,7 +92,7 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
             isDisabled={isDisabled}
             color="danger"
             variant="light"
-            onClick={() => onDeleteMember(member.User)}
+            onClick={() => onDeleteMember(member.User.id)}
           >
             {messages.deleteMember}
           </Button>
diff --git a/frontend/src/app/[locale]/projects/[projectId]/members/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/members/page.tsx
index 6933085..620f001 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/members/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/page.tsx
@@ -19,6 +19,7 @@ export default function Page({ params }: { params: { projectId: string; locale:
     userNameOrEmail: t('user_name_or_email'),
     close: t('close'),
     add: t('add'),
+    areYouSure: t('are_you_sure'),
   };
 
   return (
diff --git a/frontend/types/member.ts b/frontend/types/member.ts
index fd90c2e..470330b 100644
--- a/frontend/types/member.ts
+++ b/frontend/types/member.ts
@@ -14,4 +14,5 @@ export type MembersMessages = {
   userNameOrEmail: string;
   close: string;
   add: string;
+  areYouSure: string;
 };