Next.js项目实践（四）– 问题更新

本文根据项目路线实现问题更新功能。

添加编辑按钮

在IssueDetailPage右侧添加编辑按钮，将页面分成两列。对于手机则仅显示单列。

使用Grid组件，响应式显示，初始1列，当屏幕宽度至md时，就显示2列。另外，我们添加的按钮放置一个图标，需要安装radix ui的图标库。

npm i @radix-ui/react-icons

页面显示。

提交Git，命名：Add the edit button.

应用单一责任原则

软件工程有个单一责任原则(Single Responsibility Principle)布局，意思每个模块只专注于一个事情。查看IssueDetailPage，它关注了布局，同时也实现了每个布局块的细节，我们应该将每个布局块的细节移到其他地方。

我们新建问题详细查看组件IssueDetails（左侧）和按钮组件EditIssueButton（右侧），并将页面的相关实现细节移到这两个组件，而页面本身只关注布局。

现在，我们IssueDetailPage就很清晰了。

提交Git，命名：Refactor:Apply the SRP.

构建编辑问题页面

编辑页面与新建页面是一样的，我们将NewIssuePage的内容全部剪切出来形成IssueForm。该组件放在哪里呢？根目录的components不合适，因为IssueForm只用于Issue, 我们在issues目录下新建_components目录，再新建IssueForm.tsx，然后NewIssuePage调用它。注意创建的_components目录是以下划线开头，这样就在路由系统之外，即便添加page.tsx也是无效路径。

在 /issues/[id]下新建edit目录，再新建page.tsx。编辑页面与新建不同的是，它通过id 参数获取数据库信息，并填充表单。

提交Git，命名：Build the edit issue page.

构建 API

api/issues/ 下新建目录 [id]，创建文件route.tsx，创建PATCH函数。验证请求体数据时用zod，将之前的createIssueSchema改成issueSchema. 其它都是常规做法。

// api/issues/[id]/route.tsx

import { issueSchema } from "@/app/validationSchems";
import prisma from "@/prisma/client";
import { NextRequest, NextResponse } from "next/server";

export async function PATCH(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  const body = await request.json();
  const validation = issueSchema.safeParse(body);
  if (!validation.success)
    return NextResponse.json(validation.error.format(), { status: 400 });
  const issue = await prisma.issue.findUnique({
    where: {
      id: parseInt(params.id),
    },
  });
  if (!issue)
    return NextResponse.json({ error: "Invalid issue" }, { status: 404 });
  const updatedIssue = await prisma.issue.update({
    where: { id: parseInt(params.id) },
    data: {
      title: body.title,
      description: body.description,
    },
  });
  return NextResponse.json(updatedIssue);
}

提交Git，命名：Build an API for updating issues.

更新问题

建好了更新API，下一步就来修改IssueForm，使之可以实现更新。

在Form的handleSubmit，判断 issue是否存在，存在就是更新，不存在就是新建，并修改提交按钮的显示。