From 31c74ae769aed0599f35b4596e3c714688a41109 Mon Sep 17 00:00:00 2001 From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com> Date: Sun, 18 Feb 2024 18:44:32 +0900 Subject: [PATCH] update project --- backend/index.js | 2 + backend/routes/projects/delete.js | 6 +-- backend/routes/projects/edit.js | 29 ++++++++++ frontend/app/projects/page.tsx | 67 +++++++++++++++++++++--- frontend/app/projects/project-card.tsx | 13 ++--- frontend/app/projects/project-dialog.tsx | 26 ++++++++- 6 files changed, 121 insertions(+), 22 deletions(-) create mode 100644 backend/routes/projects/edit.js diff --git a/backend/index.js b/backend/index.js index c8ecab6..efa523d 100644 --- a/backend/index.js +++ b/backend/index.js @@ -26,9 +26,11 @@ app.use("/", indexRoute); // "/projects" const projectsIndexRoute = require('./routes/projects/index')(sequelize); const projectsNewRoute = require('./routes/projects/new')(sequelize); +const projectsEditRoute = require('./routes/projects/edit')(sequelize); const projectsDeleteRoute = require('./routes/projects/delete')(sequelize); app.use('/projects', projectsIndexRoute); app.use('/projects', projectsNewRoute); +app.use('/projects', projectsEditRoute); app.use('/projects', projectsDeleteRoute); // "/folders" diff --git a/backend/routes/projects/delete.js b/backend/routes/projects/delete.js index 69e62eb..8241ca8 100644 --- a/backend/routes/projects/delete.js +++ b/backend/routes/projects/delete.js @@ -9,11 +9,7 @@ module.exports = function (sequelize) { router.delete("/:projectId", async (req, res) => { const projectId = req.params.projectId; try { - const project = await Project.findOne({ - where: { - id: projectId, - }, - }); + const project = await Project.findByPk(projectId); if (!project) { return res.status(404).send("Project not found"); } diff --git a/backend/routes/projects/edit.js b/backend/routes/projects/edit.js new file mode 100644 index 0000000..0edc38d --- /dev/null +++ b/backend/routes/projects/edit.js @@ -0,0 +1,29 @@ +const express = require("express"); +const router = express.Router(); +const defineProject = require("../../models/projects"); +const { DataTypes } = require("sequelize"); + +module.exports = function (sequelize) { + const Project = defineProject(sequelize, DataTypes); + + router.put("/:projectId", async (req, res) => { + const projectId = req.params.projectId; + const { name, detail } = req.body; + try { + const project = await Project.findByPk(projectId); + if (!project) { + return res.status(404).send("Project not found"); + } + await project.update({ + name, + detail, + }); + res.json(project); + } catch (error) { + console.error(error); + res.status(500).send("Internal Server Error"); + } + }); + + return router; +}; diff --git a/frontend/app/projects/page.tsx b/frontend/app/projects/page.tsx index 7fa499e..52c6e05 100644 --- a/frontend/app/projects/page.tsx +++ b/frontend/app/projects/page.tsx @@ -45,10 +45,6 @@ async function fetchProjects(url: string) { /** * Create project - * - * @async - * @function - * @throws {Error} */ async function createProject(name: string, detail: string) { const newProjectData = { @@ -79,6 +75,41 @@ async function createProject(name: string, detail: string) { } } +/** + * Update project + */ +async function updateProject(projectId: number, name: string, detail: string) { + const updatedProjectData = { + name: name, + detail: detail, + }; + + const fetchOptions = { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(updatedProjectData), + }; + + const url = `${apiServer}/projects/${projectId}`; + + try { + const response = await fetch(url, fetchOptions); + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + const data = await response.json(); + return data; + } catch (error) { + console.error("Error updating project:", error); + throw error; + } +} + +/** + * Delete project + */ async function deleteProject(projectId: number) { const fetchOptions = { method: "DELETE", @@ -120,7 +151,9 @@ export default function ProjectsPage() { // dialog const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false); - const [editingProject, setEditingProject] = useState(null); + const [editingProject, setEditingProject] = useState( + null + ); const openDialogForCreate = () => { setIsProjectDialogOpen(true); setEditingProject(null); @@ -132,11 +165,28 @@ export default function ProjectsPage() { }; const onSubmit = async (name: string, detail: string) => { - const newProject = await createProject(name, detail); - setProjects([...projects, newProject]); + if (editingProject) { + const updatedProject = await updateProject( + editingProject.id, + name, + detail + ); + const updatedProjects = projects.map((project) => + project.id === updatedProject.id ? updatedProject : project + ); + setProjects(updatedProjects); + } else { + const newProject = await createProject(name, detail); + setProjects([...projects, newProject]); + } closeDialog(); }; + const onEditClicked = (project: ProjectType) => { + setEditingProject(project); + setIsProjectDialogOpen(true); + }; + const onDeleteClicked = async (projectId: number) => { try { await deleteProject(projectId); @@ -164,6 +214,7 @@ export default function ProjectsPage() { ))} @@ -171,7 +222,7 @@ export default function ProjectsPage() { diff --git a/frontend/app/projects/project-card.tsx b/frontend/app/projects/project-card.tsx index cfca99c..ecb3c00 100644 --- a/frontend/app/projects/project-card.tsx +++ b/frontend/app/projects/project-card.tsx @@ -13,7 +13,7 @@ import { } from "@nextui-org/react"; import { DotsIcon } from "@/components/icons"; -export function ProjectCard({ project, onDeleteClicked }) { +export function ProjectCard({ project, onEditClicked, onDeleteClicked }) { return ( @@ -24,17 +24,14 @@ export function ProjectCard({ project, onDeleteClicked }) { - - Edit project + onEditClicked(project)}> + Edit project + { + if (editingProject) { + setProjectName({ + ...projectName, + text: editingProject.name, + }); + + setProjectDetail({ + ...projectDetail, + text: editingProject.detail ? editingProject.detail : "", + }); + } else { + setProjectName({ + ...projectName, + text: "", + }); + + setProjectDetail({ + ...projectDetail, + text: "", + }); + } + }, [editingProject]); + const clear = () => { setProjectName({ isValid: false,