【Next.js 项目实战系列】07-分配 Issue 给用户

原文链接

CSDN 的排版/样式可能有问题，去我的博客查看原文系列吧，觉得有用的话，给我的库点个star，关注一下吧 

上一篇【Next.js 项目实战系列】06-身份验证

分配 Issue 给用户

本节代码链接

Select Button​

# /app/issues/[id]/AssigneeSelect.tsx"use client";
import { Select } from "@radix-ui/themes";const AssigneeSelect = () => {return (<Select.Root><Select.Trigger placeholder="Assign..." /><Select.Content><Select.Group><Select.Label>Suggestions</Select.Label><Select.Item value="1">Castamere</Select.Item></Select.Group></Select.Content></Select.Root>);
};
export default AssigneeSelect;

效果如下

Select Button

获取所有用户​

本节代码链接

构建 API​

# /app/api/users.tsximport { NextRequest, NextResponse } from "next/server";
import prisma from "@/prisma/client";export async function GET(reques: NextRequest) {const users = await prisma.user.findMany({ orderBy: { name: "asc" } });return NextResponse.json(users);
}

客户端获取数据​

# /app/issues/[id]/AssigneeSelect.tsx"use client";
import { User } from "@prisma/client";
import { Select } from "@radix-ui/themes";
import axios from "axios";
import { useEffect, useState } from "react";const AssigneeSelect = () => {const [users, setUsers] = useState<User[]>([]);useEffect(() => {const getUsers = async () => {const { data } = await axios.get<User[]>("/api/users");setUsers(data);};getUsers();}, []);return (<Select.Root><Select.Trigger placeholder="Assign..." /><Select.Content><Select.Group><Select.Label>Suggestions</Select.Label>{users.map((user) => (<Select.Item value={user.id} key={user.id}>{user.name}</Select.Item>))}</Select.Group></Select.Content></Select.Root>);
};
export default AssigneeSelect;

React-Query​

配置 React-Query​

本节代码链接

使用如下命令安装 React-Query

npm i @tanstack/react-query

安装好后，在 /app 目录下创建 QueryClientProvider.tsx

# /app/QueryClientProvider.tsx"use client";
import {QueryClient,QueryClientProvider as ReactQueryClientProvider,
} from "@tanstack/react-query";
import { PropsWithChildren } from "react";const queryClient = new QueryClient();const QueryClientProvider = ({ children }: PropsWithChildren) => {return (<ReactQueryClientProvider client={queryClient}>{children}</ReactQueryClientProvider>);
};
export default QueryClientProvider;

然后在 layout 中将 body 内所有内容用 QueryClientProvider 包起来

# /app/layout.tsxexport default function RootLayout({children,
}: Readonly<{children: React.ReactNode;
}>) {return (<html lang="en"><body className={inter.className}><QueryClientProvider><AuthProvider><Theme appearance="light" accentColor="violet"><NavBar /><main className="p-5"><Container>{children}</Container></main></Theme></AuthProvider></QueryClientProvider></body></html>);
}

使用 React-Query​

本节代码链接

首先，在 "/app/issues/[id]/Assign" 中去掉之前的 useEffect 和 useState，之后参照下面修改

# /app/issues/[id]/AssigneeSelect.tsx...
+ import { useQuery } from "@tanstack/react-query";
+ import { Skeleton } from "@/app/components";const AssigneeSelect = () => {
+   const {
+     data: users,
+     error,
+     isLoading,
+   } = useQuery<User[]>({// 用于缓存的 key，在不同地方调用 useQuery 若 key 一样则不会重复获取
+     queryKey: ["users"],// 用于获取数据的函数
+     queryFn: () => axios.get<User[]>("/api/users").then((res) => res.data),// 数据缓存多久
+     staleTime: 60 * 1000,// 最多重复获取几次
+     retry: 3,
+   });
+   if (error) return null;
+   if (isLoading) return <Skeleton />;...};export default AssigneeSelect;

完整代码(非 git diff 版)

# /app/issues/[id]/AssigneeSelect.tsx"use client";
import { User } from "@prisma/client";
import { Select } from "@radix-ui/themes";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Skeleton } from "@/app/components";const AssigneeSelect = () => {const {data: users,error,isLoading,} = useQuery<User[]>({queryKey: ["users"], // 用于缓存的 key，在不同地方调用 useQuery 若 key 一样则不会重复获取queryFn: () => axios.get<User[]>("/api/users").then((res) => res.data), // 用于获取数据的函数staleTime: 60 * 1000, // 数据缓存多久retry: 3, // 最多重复获取几次});if (error) return null;if (isLoading) return <Skeleton />;return (<Select.Root><Select.Trigger placeholder="Assign..." /><Select.Content><Select.Group><Select.Label>Suggestions</Select.Label>{users?.map((user) => (<Select.Item value={user.id} key={user.id}>{user.name}</Select.Item>))}</Select.Group></Select.Content></Select.Root>);
};
export default AssigneeSelect;

Prisma Relation​

本节代码链接

我们需要在 Prisma 中的 Issue model 和 User model 创建一个 Relation

# schema.prismamodel Issue {id               Int      @id @default(autoincrement())title            String   @db.VarChar(255)description      String   @db.Textstatus           Status   @default(OPEN)createdAt        DateTime @default(now())updatedAt        DateTime @updatedAt()
+   assignedToUserId String?  @db.VarChar(255)
+   assignedToUser   User?    @relation(fields: [assignedToUserId], references: [id])}model User {id             String    @id @default(cuid())name           String?email          String?   @uniqueemailVerified  DateTime?image          String?accounts       Account[]sessions       Session[]
+   assignedIssues Issue[]}

更新修改 Issue API​

本节代码链接

首先，添加一个新的 zod schema，其中 title, description, assignedToUserId 都设置为了 optional

# validationSchema.tsimport { z } from "zod";export const issueSchema = z.object({title: z.string().min(1, "Title is required!").max(255),description: z.string().min(1, "Description is required!").max(65535),
});export const patchIssueSchema = z.object({title: z.string().min(1, "Title is required!").max(255).optional(),description: z.string().min(1, "Description is required!").optional(),assignedToUserId: z.string().min(1, "AssignedToUserId is required.").max(255).optional().nullable(),
});

然后修改 "/app/api/issues/[id]/route.tsx"

# /app/api/issues/[id]/route.tsx+ import { patchIssueSchema } from "@/app/validationSchema";...export async function PATCH(request: NextRequest,{ params }: { params: { id: string } }) {const session = await getServerSession(authOptions);if (!session) return NextResponse.json({}, { status: 401 });const body = await request.json();// 换成 patchIssueSchema
+   const validation = patchIssueSchema.safeParse(body);if (!validation.success)return NextResponse.json(validation.error.format(), { status: 400 });// 直接将 title, description, assignedToUserId 结构出来
+   const { title, description, assignedToUserId } = body;// 若 body 中有 assignedToUserId，则判断该用户是否存在
+   if (assignedToUserId) {
+     const user = await prisma.user.findUnique({
+       where: { id: assignedToUserId },
+     });
+     if (!user)
+       return NextResponse.json({ error: "Invalid user" }, { 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: issue.id },
+     data: {
+       title,
+       description,
+       assignedToUserId,
+     },});return NextResponse.json(updatedIssue, { status: 200 });}

分配 Issue​

本节代码链接

# /app/issues/[id]/AssigneeSelect.tsx...const AssigneeSelect = ({ issue }: { issue: Issue }) => {...return (<Select.Root// 设置初始显示值
+       defaultValue={issue.assignedToUserId || ""}// 当选择时，使用patch (不需要await)
+       onValueChange={(userId) => {
+         axios.patch("/api/issues/" + issue.id, {
+           assignedToUserId: userId === "Unassign" ? null : userId,
+         });
+       }}><Select.Trigger placeholder="Assign..." /><Select.Content><Select.Group><Select.Label>Suggestions</Select.Label>{/* 添加一个 unassign */}
+           <Select.Item value="Unassign">Unassign</Select.Item>{users?.map((user) => (<Select.Item value={user.id} key={user.id}>{user.name}</Select.Item>))}</Select.Group></Select.Content></Select.Root>);};export default AssigneeSelect;

显示 Toast​

本节代码链接

使用如下命令安装

npm i react-hot-toast

我们只需要在该组件任意地方添加 <Toaster /> 组件，然后在需要报错的地方调用 toast() 函数即可

# /app/issues/[id]/AssigneeSelect.tsx+ import toast, { Toaster } from "react-hot-toast";const AssigneeSelect = ({ issue }: { issue: Issue }) => {return (<><Select.RootdefaultValue={issue.assignedToUserId || ""}onValueChange={ (userId) => {
+           axios
+             .patch("/api/issues/" + issue.id, {
+               assignedToUserId: userId === "Unassign" ? null : userId,
+             })// 调用 toast.error()即可
+             .catch(() => toast.error("Changes could not be saved!"));}}>...</Select.Root>
+       <Toaster /></>);};export default AssigneeSelect;

效果如下

Toast

CSDN 的排版/样式可能有问题，去我的博客查看原文系列吧，觉得有用的话，给我的库点个star，关注一下吧 

下一篇讲数据处理

下一篇【Next.js 项目实战系列】08-数据处理

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/57421.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

c++的头文件到底应该怎么写？

c++的头文件到底应该怎么写？

总结一下头文件的编写规则和注意事项&#xff1a; 头文件的作用是供其他的 .cpp 文件包含&#xff0c;它们本身不直接参与编译&#xff0c;但其内容会在多个 .cpp 文件中被编译。 头文件中应该只放变量和函数的声明&#xff0c;而不能放它们的定义。因为头文件的内容会被多个 …
阅读更多...
几何算法系列：空间实体体积计算公式推导

几何算法系列：空间实体体积计算公式推导

1.前言 面积和体积的计算是常见和基础的几何算法话题&#xff0c;面积和体积通常作为面或构件的基本信息参与相关的建模、计算、分析等过程。 有关面积的计算&#xff0c;可以参考博主此前的文章&#xff0c; 一种误差较小的轮廓面积计算算法_轮廓面积计算原理-CSDN博客文章…
阅读更多...
设计模式——装饰者模式（8）

设计模式——装饰者模式（8）

一、定义 指在不改变现有对象结构的情况下&#xff0c;动态地给该对象增加一些职责&#xff08;即增加其额外功能&#xff09;的模式。我们先来看一个快餐店的例子。快餐店有炒面、炒饭这些快餐&#xff0c;可以额外附加鸡蛋、火腿、培根这些配菜&#xff0c;当然加配菜需要额…
阅读更多...
arp代答观察

arp代答观察

文章目录 代答和代理简述实验前提先不开启proxy代答的配置开启代答总结 代答和代理简述 ARP&#xff08;地址解析协议&#xff09;是在局域网中用于将IP地址映射到MAC地址的协议。在理解 ARP 代答和 ARP 代理之前&#xff0c;让我们先澄清一下 ARP 的基本工作原理。 ARP 代答&…
阅读更多...
鹏哥C语言81-82---指针和数组+二级指针+指针数组

鹏哥C语言81-82---指针和数组+二级指针+指针数组

#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <string.h> //--------------------------------------------------------------------------------------------------------5. 指针和数组 数组&#xff1a;一组相同类型元素的集合 指针变量&…
阅读更多...
在 VS Code 中轻松绘图：Draw.io Integration 插件详解

在 VS Code 中轻松绘图：Draw.io Integration 插件详解

文章目录 在 VS Code 中轻松绘图&#xff1a;Draw.io Integration 插件详解一、什么是 Draw.io Integration 插件&#xff1f;二、插件安装指南1. 安装步骤2. 配置插件 三、如何使用 Draw.io Integration 插件&#xff1f;1. 创建新绘图文件2. 编辑现有图表3. 常用功能与技巧 四…
阅读更多...
中小型医院网站：Spring Boot框架详解

中小型医院网站：Spring Boot框架详解

5 系统实现 5.1 用户功能模块的实现 用户进入本系统可查看系统信息&#xff0c;包括首页、门诊信息、药库信息以及系统公告信息等&#xff0c;系统前台主界面展示如图5-1所示。 图5-1系统前台主界面图 5.1.1用户登录界面 用户要想实现预约挂号功能&#xff0c;必须登录系统&a…
阅读更多...
QGraphics类型学习使用【Qt】【C++】

QGraphics类型学习使用【Qt】【C++】

QGraphics类型学习使用 需求过程全部完整代码 首先已知&#xff0c;QGraphicsView&#xff0c;QGraphicsScene, QGraphicsItem&#xff0c;分别称为&#xff1a;视图&#xff0c;场景&#xff0c;图元&#xff0c;图表就是各种各样的元素&#xff0c;图片元素&#xff0c;线条元…
阅读更多...
k8s部署Kafka集群超详细讲解

k8s部署Kafka集群超详细讲解

准备部署环境 Kubernetes集群信息 NAMEVERSIONk8s-masterv1.29.2k8s-node01v1.29.2k8s-node02v1.29.2 Kafka&#xff1a;3.7.1版本&#xff0c;apche版本 Zookeeper&#xff1a;3.6.3版本 准备StorageClass # kubectl get sc NAME PROVISIONER RECLA…
阅读更多...
股价创52周新高，云顶新耀成为“黑马”的启示录

股价创52周新高，云顶新耀成为“黑马”的启示录

踏入2024年以来&#xff0c;创新药产业持续释放积极信号。今年本土创新药出海交易额已超200亿美元&#xff0c;最近医保续约和谈判也有望促进国内创新药长期放量。 市场预期转好之下&#xff0c;生物医药板块在新一轮牛市中进入了估值修复的阶段。HSHKBIO&#xff08;恒生香港…
阅读更多...
【LVGL快速入门(二)】LVGL开源框架入门教程之框架使用(UI界面设计)

【LVGL快速入门(二)】LVGL开源框架入门教程之框架使用(UI界面设计)

零.前置篇章 本篇前置文章为【LVGL快速入门(一)】LVGL开源框架入门教程之框架移植 一.UI设计 介绍使用之前&#xff0c;我们要学习一款LVGL官方的UI设计工具SquareLine Studio&#xff0c;使用图形化设计方式设计出我们想要的界面&#xff0c;然后生成对应源文件导入工程使用…
阅读更多...
openssh openssl zlib 升级至最新版解决安全问题

openssh openssl zlib 升级至最新版解决安全问题

openssl依赖于zlib&#xff0c; openssh依赖于openssl和zlib&#xff0c; 所以我们要先安装zlib&#xff0c;然后是openssl&#xff0c;最后是openssh。 各软件下载地址&#xff1a; zlib 地址&#xff1a; zlib Home Site openssl 地址&#xff1a; Downloads | Library…
阅读更多...
C#从零开始学习(接口,强制转化和is)(7)

C#从零开始学习(接口,强制转化和is)(7)

有时根据对象能做什么来分组,而不是根据他们继承的类.这就引入了接口 让无关的类做相同的动作 接口定义一个类必须实现的方法和属性 一个类实现一个接口时,必须包含接口中列出的所有方法和属性 向下强制转化 Appliance是CoffeeMaker的基类 Appliance powerConsumer new Co…
阅读更多...
时空智友企业流程化管控系统uploadStudioFile接口存在任意文件上传漏洞

时空智友企业流程化管控系统uploadStudioFile接口存在任意文件上传漏洞

免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 1. 时空智友…
阅读更多...
【密码分析学 笔记】ch3 3.1 差分分析

【密码分析学 笔记】ch3 3.1 差分分析

ch3 分组密码的差分分析和相关分析方法 3.1 差分分析 评估分组密码安全性通用方法可用于杂凑函数和流密码安全性 预备知识&#xff1a; 迭代性分组密码&#xff08;分组密码一般结构&#xff09;简化版本 mini-AES CipherFour算法 3.1.1 差分分析原理 现象&#xff1a;密…
阅读更多...
JMeter使用不同方式传递接口参数

JMeter使用不同方式传递接口参数

1、使用 HTTP 请求中的参数&#xff1a; 在 JMeter 的测试计划中&#xff0c;添加一个 "HTTP 请求" 元件。 在 "HTTP 请求" 元件的参数化选项中&#xff0c;可以添加参数的名称和值。可以手动输入参数&#xff0c;也可以使用变量来传递参数值。 如果要使…
阅读更多...
汇川机器人与PLC通信-ModbusTCP超详细案例

汇川机器人与PLC通信-ModbusTCP超详细案例

#SCARA机器人与H5UPLC通过ModbusTCP通信，HMI界面手动操作# 应用背景： 本项目案例部分软件界面已被更新，如机器人示教软件旧版本S01.19R03。但通信的原理基本一致，废话少说，我们直接上图。 一、PLC端配置 1.添加ROB通讯表（自定义），变量表内容包括ROB系统变量，IN区和…
阅读更多...
【利用Seaborn进行高级数据可视化】创建美观且信息丰富的图表！

【利用Seaborn进行高级数据可视化】创建美观且信息丰富的图表！

利用Seaborn进行高级数据可视化&#xff1a;创建美观且信息丰富的图表 数据可视化是数据分析和科学研究中不可或缺的部分。通过有效的图表&#xff0c;我们可以迅速了解数据的分布、趋势和关系。在Python的数据科学生态系统中&#xff0c;Seaborn是一个基于Matplotlib的高级库…
阅读更多...
大厂面试真题-了解云原生吗，简单说一下docker和k8s

大厂面试真题-了解云原生吗，简单说一下docker和k8s

K8s&#xff08;Kubernetes&#xff09;和Docker都是容器化技术中的关键组件&#xff0c;但它们各自扮演着不同的角色。以下是对这两者的详细解析&#xff1a; 一、Docker Docker是一个开源的容器化平台&#xff0c;它允许开发人员将应用程序及其依赖项打包为一个独立的镜像&…
阅读更多...
条款8 优先考虑nullptr而非0和NULL

条款8 优先考虑nullptr而非0和NULL

目录 一、nullptr，0，NULL都是什么类型 二、正确调用函数指针版本的函数重载 三、模板推导时使用不能混用 一、nullptr，0，NULL都是什么类型 auto a = 0； -> int auto a = NULL; -> long auto a = nullptr; -> std::nullptr_t 二、正确调用函数…
阅读更多...
最新文章

Copyright @ 2022~2023