mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
Add Todo feature with UI and backend integration
This commit is contained in:
Aman Varshney
@@ -24,6 +24,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^3.10.0",
|
||||
"@radix-ui/react-checkbox": "^1.1.4",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.6",
|
||||
"@radix-ui/react-label": "^2.1.2",
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
|
||||
@@ -15,6 +15,15 @@ export default function Header() {
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
to="/todos"
|
||||
activeProps={{
|
||||
className: "font-bold",
|
||||
}}
|
||||
activeOptions={{ exact: true }}
|
||||
>
|
||||
Todos
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<ModeToggle />
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="flex items-center justify-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon className="size-3.5" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
128
apps/cli/template/base/packages/client/src/routes/todos.tsx
Normal file
128
apps/cli/template/base/packages/client/src/routes/todos.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { trpc } from "@/utils/trpc";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Loader2, Trash2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export const Route = createFileRoute("/todos")({
|
||||
component: TodosRoute,
|
||||
});
|
||||
|
||||
function TodosRoute() {
|
||||
const [newTodoText, setNewTodoText] = useState("");
|
||||
|
||||
const todos = trpc.todo.getAll.useQuery();
|
||||
const createMutation = trpc.todo.create.useMutation({
|
||||
onSuccess: () => {
|
||||
todos.refetch();
|
||||
setNewTodoText("");
|
||||
},
|
||||
});
|
||||
const toggleMutation = trpc.todo.toggle.useMutation({
|
||||
onSuccess: () => todos.refetch(),
|
||||
});
|
||||
const deleteMutation = trpc.todo.delete.useMutation({
|
||||
onSuccess: () => todos.refetch(),
|
||||
});
|
||||
|
||||
const handleAddTodo = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (newTodoText.trim()) {
|
||||
createMutation.mutate({ text: newTodoText });
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleTodo = (id: number, completed: boolean) => {
|
||||
toggleMutation.mutate({ id, completed: !completed });
|
||||
};
|
||||
|
||||
const handleDeleteTodo = (id: number) => {
|
||||
deleteMutation.mutate({ id });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-md py-10">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Todo List</CardTitle>
|
||||
<CardDescription>Manage your tasks efficiently</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={handleAddTodo}
|
||||
className="mb-6 flex items-center space-x-2"
|
||||
>
|
||||
<Input
|
||||
value={newTodoText}
|
||||
onChange={(e) => setNewTodoText(e.target.value)}
|
||||
placeholder="Add a new task..."
|
||||
disabled={createMutation.isPending}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending || !newTodoText.trim()}
|
||||
>
|
||||
{createMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
"Add"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{todos.isLoading ? (
|
||||
<div className="flex justify-center py-4">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : todos.data?.length === 0 ? (
|
||||
<p className="py-4 text-center text-muted-foreground">
|
||||
No todos yet. Add one above!
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{todos.data?.map((todo) => (
|
||||
<li
|
||||
key={todo.id}
|
||||
className="flex items-center justify-between rounded-md border p-2"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
checked={todo.completed}
|
||||
onCheckedChange={() =>
|
||||
handleToggleTodo(todo.id, todo.completed)
|
||||
}
|
||||
id={`todo-${todo.id}`}
|
||||
/>
|
||||
<label
|
||||
htmlFor={`todo-${todo.id}`}
|
||||
className={`${todo.completed ? "text-muted-foreground line-through" : ""}`}
|
||||
>
|
||||
{todo.text}
|
||||
</label>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteTodo(todo.id)}
|
||||
aria-label="Delete todo"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
import { router, publicProcedure } from "../lib/trpc";
|
||||
import { todoRouter } from "./todo";
|
||||
|
||||
export const appRouter = router({
|
||||
healthCheck: publicProcedure.query(() => {
|
||||
return "OK";
|
||||
}),
|
||||
todo: todoRouter,
|
||||
});
|
||||
|
||||
export type AppRouter = typeof appRouter;
|
||||
|
||||
@@ -16,6 +16,15 @@ export default function Header() {
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
to="/todos"
|
||||
activeProps={{
|
||||
className: "font-bold",
|
||||
}}
|
||||
activeOptions={{ exact: true }}
|
||||
>
|
||||
Todos
|
||||
</Link>
|
||||
<Link
|
||||
to="/dashboard"
|
||||
activeProps={{
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
|
||||
import { router, publicProcedure, protectedProcedure } from "../lib/trpc";
|
||||
import { todoRouter } from "./todo";
|
||||
|
||||
|
||||
export const appRouter = router({
|
||||
healthCheck: publicProcedure.query(() => {
|
||||
@@ -11,6 +13,7 @@ export const appRouter = router({
|
||||
user: ctx.session.user,
|
||||
};
|
||||
}),
|
||||
todo: todoRouter,
|
||||
});
|
||||
|
||||
export type AppRouter = typeof appRouter;
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { z } from "zod";
|
||||
import { router, publicProcedure } from "../lib/trpc";
|
||||
import { todo } from "../db/schema";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { db } from "../db";
|
||||
|
||||
export const todoRouter = router({
|
||||
getAll: publicProcedure.query(async () => {
|
||||
return await db.select().from(todo).all();
|
||||
}),
|
||||
|
||||
create: publicProcedure
|
||||
.input(z.object({ text: z.string().min(1) }))
|
||||
.mutation(async ({ input }) => {
|
||||
return await db
|
||||
.insert(todo)
|
||||
.values({
|
||||
text: input.text,
|
||||
})
|
||||
.returning()
|
||||
.get();
|
||||
}),
|
||||
|
||||
toggle: publicProcedure
|
||||
.input(z.object({ id: z.number(), completed: z.boolean() }))
|
||||
.mutation(async ({ input }) => {
|
||||
return await db
|
||||
.update(todo)
|
||||
.set({ completed: input.completed })
|
||||
.where(eq(todo.id, input.id))
|
||||
.returning()
|
||||
.get();
|
||||
}),
|
||||
|
||||
delete: publicProcedure
|
||||
.input(z.object({ id: z.number() }))
|
||||
.mutation(async ({ input }) => {
|
||||
return await db
|
||||
.delete(todo)
|
||||
.where(eq(todo.id, input.id))
|
||||
.returning()
|
||||
.get();
|
||||
}),
|
||||
});
|
||||
@@ -0,0 +1,44 @@
|
||||
import { z } from "zod";
|
||||
import { router, publicProcedure } from "../lib/trpc";
|
||||
import { todo } from "../db/schema";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { db } from "../db";
|
||||
|
||||
export const todoRouter = router({
|
||||
getAll: publicProcedure.query(async () => {
|
||||
return await db.select().from(todo).all();
|
||||
}),
|
||||
|
||||
create: publicProcedure
|
||||
.input(z.object({ text: z.string().min(1) }))
|
||||
.mutation(async ({ input }) => {
|
||||
return await db
|
||||
.insert(todo)
|
||||
.values({
|
||||
text: input.text,
|
||||
})
|
||||
.returning()
|
||||
.get();
|
||||
}),
|
||||
|
||||
toggle: publicProcedure
|
||||
.input(z.object({ id: z.number(), completed: z.boolean() }))
|
||||
.mutation(async ({ input }) => {
|
||||
return await db
|
||||
.update(todo)
|
||||
.set({ completed: input.completed })
|
||||
.where(eq(todo.id, input.id))
|
||||
.returning()
|
||||
.get();
|
||||
}),
|
||||
|
||||
delete: publicProcedure
|
||||
.input(z.object({ id: z.number() }))
|
||||
.mutation(async ({ input }) => {
|
||||
return await db
|
||||
.delete(todo)
|
||||
.where(eq(todo.id, input.id))
|
||||
.returning()
|
||||
.get();
|
||||
}),
|
||||
});
|
||||
@@ -14,63 +14,3 @@ model Todo {
|
||||
|
||||
@@map("todo")
|
||||
}
|
||||
|
||||
model User {
|
||||
id String @id @map("_id")
|
||||
name String
|
||||
email String
|
||||
emailVerified Boolean
|
||||
image String?
|
||||
createdAt DateTime
|
||||
updatedAt DateTime
|
||||
sessions Session[]
|
||||
accounts Account[]
|
||||
|
||||
@@unique([email])
|
||||
@@map("user")
|
||||
}
|
||||
|
||||
model Session {
|
||||
id String @id @map("_id")
|
||||
expiresAt DateTime
|
||||
token String
|
||||
createdAt DateTime
|
||||
updatedAt DateTime
|
||||
ipAddress String?
|
||||
userAgent String?
|
||||
userId String
|
||||
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||
|
||||
@@unique([token])
|
||||
@@map("session")
|
||||
}
|
||||
|
||||
model Account {
|
||||
id String @id @map("_id")
|
||||
accountId String
|
||||
providerId String
|
||||
userId String
|
||||
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||
accessToken String?
|
||||
refreshToken String?
|
||||
idToken String?
|
||||
accessTokenExpiresAt DateTime?
|
||||
refreshTokenExpiresAt DateTime?
|
||||
scope String?
|
||||
password String?
|
||||
createdAt DateTime
|
||||
updatedAt DateTime
|
||||
|
||||
@@map("account")
|
||||
}
|
||||
|
||||
model Verification {
|
||||
id String @id @map("_id")
|
||||
identifier String
|
||||
value String
|
||||
expiresAt DateTime
|
||||
createdAt DateTime?
|
||||
updatedAt DateTime?
|
||||
|
||||
@@map("verification")
|
||||
}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import { TRPCError } from "@trpc/server";
|
||||
import { z } from "zod";
|
||||
import prisma from "../../prisma";
|
||||
import { publicProcedure, router } from "../lib/trpc";
|
||||
|
||||
export const todoRouter = router({
|
||||
getAll: publicProcedure.query(async () => {
|
||||
return await prisma.todo.findMany({
|
||||
orderBy: {
|
||||
id: "asc"
|
||||
}
|
||||
});
|
||||
}),
|
||||
|
||||
create: publicProcedure
|
||||
.input(z.object({ text: z.string().min(1) }))
|
||||
.mutation(async ({ input }) => {
|
||||
return await prisma.todo.create({
|
||||
data: {
|
||||
text: input.text,
|
||||
},
|
||||
});
|
||||
}),
|
||||
|
||||
toggle: publicProcedure
|
||||
.input(z.object({ id: z.number(), completed: z.boolean() }))
|
||||
.mutation(async ({ input }) => {
|
||||
try {
|
||||
return await prisma.todo.update({
|
||||
where: { id: input.id },
|
||||
data: { completed: input.completed },
|
||||
});
|
||||
} catch (error) {
|
||||
throw new TRPCError({
|
||||
code: "NOT_FOUND",
|
||||
message: "Todo not found",
|
||||
});
|
||||
}
|
||||
}),
|
||||
|
||||
delete: publicProcedure
|
||||
.input(z.object({ id: z.number() }))
|
||||
.mutation(async ({ input }) => {
|
||||
try {
|
||||
return await prisma.todo.delete({
|
||||
where: { id: input.id },
|
||||
});
|
||||
} catch (error) {
|
||||
throw new TRPCError({
|
||||
code: "NOT_FOUND",
|
||||
message: "Todo not found",
|
||||
});
|
||||
}
|
||||
}),
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
import { TRPCError } from "@trpc/server";
|
||||
import { z } from "zod";
|
||||
import prisma from "../../prisma";
|
||||
import { publicProcedure, router } from "../lib/trpc";
|
||||
|
||||
export const todoRouter = router({
|
||||
getAll: publicProcedure.query(async () => {
|
||||
return await prisma.todo.findMany({
|
||||
orderBy: {
|
||||
id: "asc"
|
||||
}
|
||||
});
|
||||
}),
|
||||
|
||||
create: publicProcedure
|
||||
.input(z.object({ text: z.string().min(1) }))
|
||||
.mutation(async ({ input }) => {
|
||||
return await prisma.todo.create({
|
||||
data: {
|
||||
text: input.text,
|
||||
},
|
||||
});
|
||||
}),
|
||||
|
||||
toggle: publicProcedure
|
||||
.input(z.object({ id: z.number(), completed: z.boolean() }))
|
||||
.mutation(async ({ input }) => {
|
||||
try {
|
||||
return await prisma.todo.update({
|
||||
where: { id: input.id },
|
||||
data: { completed: input.completed },
|
||||
});
|
||||
} catch (error) {
|
||||
throw new TRPCError({
|
||||
code: "NOT_FOUND",
|
||||
message: "Todo not found",
|
||||
});
|
||||
}
|
||||
}),
|
||||
|
||||
delete: publicProcedure
|
||||
.input(z.object({ id: z.number() }))
|
||||
.mutation(async ({ input }) => {
|
||||
try {
|
||||
return await prisma.todo.delete({
|
||||
where: { id: input.id },
|
||||
});
|
||||
} catch (error) {
|
||||
throw new TRPCError({
|
||||
code: "NOT_FOUND",
|
||||
message: "Todo not found",
|
||||
});
|
||||
}
|
||||
}),
|
||||
});
|
||||
Reference in New Issue
Block a user