forked from imbytecat/fullstack-starter
refactor: 重构待办事项模块,统一路由与数据操作逻辑
- 将客户端导出改为私有常量,避免外部直接访问。 - 添加待办事项的完整 CRUD 操作,包括列表查询、创建、更新和删除功能,并使用 Zod 进行输入输出验证和 Drizzle ORM 操作数据库。 - 导出客户端和路由器模块的公共接口 - 添加路由配置,将 todo 处理程序注册到路由系统中。 - 删除已废弃的路由定义文件 - 删除待办事项相关路由和接口定义 - 删除未使用的 TodoSchema 模式定义以清理代码库。 - 将 Todo 路由重命名为复数形式并迁移数据获取与操作逻辑至 Orpc 客户端调用 - 将路由名称和路径从 `/todo` 更新为 `/todos`,并同步更新相关类型定义和引用。
This commit is contained in:
@@ -1,97 +1,21 @@
|
||||
import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { createServerFn } from '@tanstack/react-start'
|
||||
import { eq } from 'drizzle-orm'
|
||||
import type { ChangeEvent, FormEvent } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { z } from 'zod'
|
||||
import { db } from '@/db'
|
||||
import { todoTable } from '@/db/schema'
|
||||
import { orpc } from '@/orpc'
|
||||
|
||||
const createTodoSchema = z.object({
|
||||
title: z.string().min(1, '标题不能为空'),
|
||||
})
|
||||
|
||||
const updateTodoSchema = z.object({
|
||||
id: z.uuid(),
|
||||
completed: z.boolean(),
|
||||
})
|
||||
|
||||
const deleteTodoSchema = z.object({
|
||||
id: z.uuid(),
|
||||
})
|
||||
|
||||
const getTodos = createServerFn({ method: 'GET' }).handler(async () => {
|
||||
const todos = await db.query.todoTable.findMany({
|
||||
orderBy: (todos, { desc }) => [desc(todos.createdAt)],
|
||||
})
|
||||
return todos
|
||||
})
|
||||
|
||||
const createTodo = createServerFn({ method: 'POST' })
|
||||
.inputValidator(createTodoSchema)
|
||||
.handler(async ({ data }) => {
|
||||
const [newTodo] = await db
|
||||
.insert(todoTable)
|
||||
.values({ title: data.title })
|
||||
.returning()
|
||||
return newTodo
|
||||
})
|
||||
|
||||
const updateTodo = createServerFn({ method: 'POST' })
|
||||
.inputValidator(updateTodoSchema)
|
||||
.handler(async ({ data }) => {
|
||||
const [updatedTodo] = await db
|
||||
.update(todoTable)
|
||||
.set({ completed: data.completed })
|
||||
.where(eq(todoTable.id, data.id))
|
||||
.returning()
|
||||
return updatedTodo
|
||||
})
|
||||
|
||||
const deleteTodo = createServerFn({ method: 'POST' })
|
||||
.inputValidator(deleteTodoSchema)
|
||||
.handler(async ({ data }) => {
|
||||
await db.delete(todoTable).where(eq(todoTable.id, data.id))
|
||||
return { success: true }
|
||||
})
|
||||
|
||||
export const Route = createFileRoute('/todo')({
|
||||
export const Route = createFileRoute('/todos')({
|
||||
component: Todo,
|
||||
})
|
||||
|
||||
function Todo() {
|
||||
const [newTodoTitle, setNewTodoTitle] = useState('')
|
||||
const { data: todos, refetch } = useSuspenseQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: () => getTodos(),
|
||||
})
|
||||
|
||||
// Mutations
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (title: string) => createTodo({ data: { title } }),
|
||||
onSuccess: () => {
|
||||
setNewTodoTitle('')
|
||||
refetch()
|
||||
},
|
||||
})
|
||||
const listQuery = useSuspenseQuery(orpc.todo.list.queryOptions())
|
||||
const createMutation = useMutation(orpc.todo.create.mutationOptions())
|
||||
const updateMutation = useMutation(orpc.todo.update.mutationOptions())
|
||||
const deleteMutation = useMutation(orpc.todo.remove.mutationOptions())
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, completed }: { id: string; completed: boolean }) =>
|
||||
updateTodo({ data: { id, completed } }),
|
||||
onSuccess: () => {
|
||||
refetch()
|
||||
},
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => deleteTodo({ data: { id } }),
|
||||
onSuccess: () => {
|
||||
refetch()
|
||||
},
|
||||
})
|
||||
|
||||
// Handlers
|
||||
const handleCreateTodo = (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
if (newTodoTitle.trim()) {
|
||||
Reference in New Issue
Block a user