From 691684e9b70d60c77b3f8385d90efbc982e355df Mon Sep 17 00:00:00 2001 From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com> Date: Sun, 26 May 2024 13:11:06 +0900 Subject: [PATCH] Cretate delete project confirm dialog --- frontend/messages/en.json | 4 +-- frontend/messages/ja.json | 4 +-- .../[locale]/projects/ProjectDeleteDialog.tsx | 35 +++++++++++++++++++ .../app/[locale]/projects/ProjectDialog.tsx | 2 +- .../app/[locale]/projects/ProjectsPage.tsx | 30 +++++++++++++--- .../projects/[projectId]/home/home.tsx | 2 +- frontend/src/app/[locale]/projects/page.tsx | 4 +-- .../app/[locale]/projects/projectsControl.ts | 1 - frontend/types/project.ts | 4 +-- 9 files changed, 70 insertions(+), 16 deletions(-) create mode 100644 frontend/src/app/[locale]/projects/ProjectDeleteDialog.tsx diff --git a/frontend/messages/en.json b/frontend/messages/en.json index ca09646..4476fc7 100644 --- a/frontend/messages/en.json +++ b/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", - "sign_in": "Sign in" + "are_you_sure": "Are you sure you want to delete the project?", + "delete": "Delete" }, "Project": { "home": "Home", diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json index d869e25..2d580a7 100644 --- a/frontend/messages/ja.json +++ b/frontend/messages/ja.json @@ -71,8 +71,8 @@ "update": "更新", "please_enter": "プロジェクト名を入力してください", "no_projects_found": "プロジェクトがありません", - "you_need_signed_in": "サインインが必要です", - "sign_in": "サインイン" + "are_you_sure": "プロジェクトを削除してもよろしいですか?", + "delete": "削除" }, "Project": { "home": "ホーム", diff --git a/frontend/src/app/[locale]/projects/ProjectDeleteDialog.tsx b/frontend/src/app/[locale]/projects/ProjectDeleteDialog.tsx new file mode 100644 index 0000000..43dd5a5 --- /dev/null +++ b/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 ( + { + onCancel(); + }} + > + + {messages.delete} + {messages.areYouSure} + + + + + + + ); +} diff --git a/frontend/src/app/[locale]/projects/ProjectDialog.tsx b/frontend/src/app/[locale]/projects/ProjectDialog.tsx index b9e9dc0..3f71910 100644 --- a/frontend/src/app/[locale]/projects/ProjectDialog.tsx +++ b/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; diff --git a/frontend/src/app/[locale]/projects/ProjectsPage.tsx b/frontend/src/app/[locale]/projects/ProjectsPage.tsx index 4205c2f..0b281d4 100644 --- a/frontend/src/app/[locale]/projects/ProjectsPage.tsx +++ b/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(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(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) => { - // TODO cannot refer context - console.log(context); - console.log(context.token.access_token); + const onDeleteClick = (projectId: number) => { + setDeleteProjectId(projectId); + setIsDeleteProjectDialogOpen(true); + }; + + 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} /> + + ); } diff --git a/frontend/src/app/[locale]/projects/[projectId]/home/home.tsx b/frontend/src/app/[locale]/projects/[projectId]/home/home.tsx index 540c543..f494d2c 100644 --- a/frontend/src/app/[locale]/projects/[projectId]/home/home.tsx +++ b/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}`, }, }; diff --git a/frontend/src/app/[locale]/projects/page.tsx b/frontend/src/app/[locale]/projects/page.tsx index 4ce14ae..edf870f 100644 --- a/frontend/src/app/[locale]/projects/page.tsx +++ b/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'), - signIn: t('sign_in'), + areYouSure: t('are_you_sure'), + delete: t('delete'), }; return ( <> diff --git a/frontend/src/app/[locale]/projects/projectsControl.ts b/frontend/src/app/[locale]/projects/projectsControl.ts index 43764fd..c1f6100 100644 --- a/frontend/src/app/[locale]/projects/projectsControl.ts +++ b/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}`; diff --git a/frontend/types/project.ts b/frontend/types/project.ts index 1e93e30..24ff43c 100644 --- a/frontend/types/project.ts +++ b/frontend/types/project.ts @@ -34,8 +34,8 @@ export type ProjectsMessages = { update: string; pleaseEnter: string; noProjectsFound: string; - needSignedIn: string; - signIn: string; + areYouSure: string; + delete: string; }; export type ProjectMessages = {