Cretate delete project confirm dialog

frontend/messages/en.json

@@ -72,8 +72,8 @@
     "update": "Update",
     "please_enter": "Please enter project name",
     "no_projects_found": "No projects found",
-    "you_need_signed_in": "You need signed in",
+    "are_you_sure": "Are you sure you want to delete the project?",
-    "sign_in": "Sign in"
+    "delete": "Delete"
   },
   "Project": {
     "home": "Home",

frontend/messages/ja.json

@@ -71,8 +71,8 @@
     "update": "更新",
     "please_enter": "プロジェクト名を入力してください",
     "no_projects_found": "プロジェクトがありません",
-    "you_need_signed_in": "サインインが必要です",
+    "are_you_sure": "プロジェクトを削除してもよろしいですか?",
-    "sign_in": "サインイン"
+    "delete": "削除"
   },
   "Project": {
     "home": "ホーム",

frontend/src/app/[locale]/projects/ProjectDeleteDialog.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
+import { ProjectsMessages } from '@/types/project';
+
+type Props = {
+  isOpen: boolean;
+  deleteProjectId: number | null;
+  onCancel: () => void;
+  onConfirm: (projectId: number | number) => {};
+  messages: ProjectsMessages;
+};
+
+export default function ProjectDialog({ isOpen, deleteProjectId, onCancel, onConfirm, messages }: Props) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={() => {
+        onCancel();
+      }}
+    >
+      <ModalContent>
+        <ModalHeader className="flex flex-col gap-1">{messages.delete}</ModalHeader>
+        <ModalBody>{messages.areYouSure}</ModalBody>
+        <ModalFooter>
+          <Button variant="light" onPress={onCancel}>
+            {messages.close}
+          </Button>
+          <Button color="danger" onPress={() => onConfirm(deleteProjectId)}>
+            {messages.delete}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

frontend/src/app/[locale]/projects/ProjectDialog.tsx

@@ -16,7 +16,7 @@ import { ProjectType, ProjectsMessages } from '@/types/project';
 
 type Props = {
   isOpen: boolean;
-  editingProject: ProjectType;
+  editingProject: ProjectType | null;
   onCancel: () => void;
   onSubmit: (name: string, detail: string, isPublic: boolean) => void;
   messages: ProjectsMessages;

frontend/src/app/[locale]/projects/ProjectsPage.tsx

@@ -7,6 +7,7 @@ import { ProjectType, ProjectsMessages } from '@/types/project';
 import ProjectsTable from './ProjectsTable';
 import ProjectDialog from './ProjectDialog';
 import { fetchProjects, createProject, updateProject, deleteProject } from './projectsControl';
+import ProjectDeleteDialog from './ProjectDeleteDialog';
 
 export type Props = {
   messages: ProjectsMessages;
@@ -33,7 +34,7 @@ export default function ProjectsPage({ messages, locale }: Props) {
     fetchDataEffect();
   }, [context]);
 
-  // dialog
+  // project dialog
   const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
   const [editingProject, setEditingProject] = useState<ProjectType | null>(null);
   const openDialogForCreate = () => {
@@ -46,6 +47,14 @@ export default function ProjectsPage({ messages, locale }: Props) {
     setEditingProject(null);
   };
 
+  // delete dialog
+  const [isDeleteProjectDialogOpen, setIsDeleteProjectDialogOpen] = useState(false);
+  const [deleteProjectId, setDeleteProjectId] = useState<number | null>(null);
+  const closeDeleteDialog = () => {
+    setIsDeleteProjectDialogOpen(false);
+    setDeleteProjectId(null);
+  };
+
   const onSubmit = async (name: string, detail: string, isPublic: boolean) => {
     if (editingProject) {
       const updatedProject = await updateProject(context.token.access_token, editingProject.id, name, detail, isPublic);
@@ -63,12 +72,15 @@ export default function ProjectsPage({ messages, locale }: Props) {
     setIsProjectDialogOpen(true);
   };
 
-  const onDeleteClick = async (projectId: number) => {
+  const onDeleteClick = (projectId: number) => {
-    // TODO cannot refer context
+    setDeleteProjectId(projectId);
-    console.log(context);
+    setIsDeleteProjectDialogOpen(true);
-    console.log(context.token.access_token);
+  };
+
+  const onConfirm = async (projectId: number) => {
     await deleteProject(context.token.access_token, projectId);
     setProjects(projects.filter((project) => project.id !== projectId));
+    closeDeleteDialog();
   };
 
   return (
@@ -97,6 +109,14 @@ export default function ProjectsPage({ messages, locale }: Props) {
         onSubmit={onSubmit}
         messages={messages}
       />
+
+      <ProjectDeleteDialog
+        isOpen={isDeleteProjectDialogOpen}
+        deleteProjectId={deleteProjectId}
+        onCancel={closeDeleteDialog}
+        onConfirm={onConfirm}
+        messages={messages}
+      />
     </div>
   );
 }

frontend/src/app/[locale]/projects/[projectId]/home/home.tsx

@@ -20,7 +20,7 @@ async function fetchProject(jwt: string, projectId: number) {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
-      Authorization: jwt,
+      Authorization: `Bearer ${jwt}`,
     },
   };
 

frontend/src/app/[locale]/projects/page.tsx

@@ -25,8 +25,8 @@ export default function Page(params: { locale: string }) {
     update: t('update'),
     pleaseEnter: t('please_enter'),
     noProjectsFound: t('no_projects_found'),
-    needSignedIn: t('you_need_signed_in'),
+    areYouSure: t('are_you_sure'),
-    signIn: t('sign_in'),
+    delete: t('delete'),
   };
   return (
     <>

frontend/src/app/[locale]/projects/projectsControl.ts

@@ -106,7 +106,6 @@ async function deleteProject(jwt: string, projectId: number) {
       Authorization: `Bearer ${jwt}`,
     },
   };
-  console.log(jwt);
 
   const url = `${apiServer}/projects/${projectId}`;
 

frontend/types/project.ts

@@ -34,8 +34,8 @@ export type ProjectsMessages = {
   update: string;
   pleaseEnter: string;
   noProjectsFound: string;
-  needSignedIn: string;
+  areYouSure: string;
-  signIn: string;
+  delete: string;
 };
 
 export type ProjectMessages = {