diff --git a/apps/web/src/app/api/trpc/[trpc]/route.ts b/apps/web/src/app/api/trpc/[trpc]/route.ts new file mode 100644 index 00000000..cf65a41b --- /dev/null +++ b/apps/web/src/app/api/trpc/[trpc]/route.ts @@ -0,0 +1,32 @@ +import { fetchRequestHandler } from "@trpc/server/adapters/fetch"; +import { type NextRequest } from "next/server"; + +import { env } from "@/env.mjs"; +import { appRouter } from "@/server/api/root"; +import { createTRPCContext } from "@/server/api/trpc"; + +/** + * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when + * handling a HTTP request (e.g. when you make requests from Client Components). + */ +const createContext = async (req: NextRequest) => { + return createTRPCContext({ + headers: req.headers, + }); +}; + +const handler = (req: NextRequest) => + fetchRequestHandler({ + endpoint: "/api/trpc", + req, + router: appRouter, + createContext: () => createContext(req), + onError: + env.NODE_ENV === "development" + ? ({ path, error }) => { + console.error(`❌ tRPC failed on ${path ?? ""}: ${error.message}`); + } + : undefined, + }); + +export { handler as GET, handler as POST }; diff --git a/apps/web/src/app/dash/layout.tsx b/apps/web/src/app/dash/layout.tsx index f5d1ece7..769bb27e 100644 --- a/apps/web/src/app/dash/layout.tsx +++ b/apps/web/src/app/dash/layout.tsx @@ -77,4 +77,4 @@ export default async function DashLayout({ children }: DashLayoutProps) { ); } -export const runtime = "edge"; +export const runtime = "edge"; \ No newline at end of file diff --git a/apps/web/src/app/dash/tickets/new/page.tsx b/apps/web/src/app/dash/tickets/new/page.tsx index e69de29b..25b66377 100644 --- a/apps/web/src/app/dash/tickets/new/page.tsx +++ b/apps/web/src/app/dash/tickets/new/page.tsx @@ -0,0 +1,51 @@ +"use client"; +import { useState } from "react"; +import { Input } from "@/components/shadcn/ui/input"; +import { Label } from "@/components/shadcn/ui/label"; +import { Textarea } from "@/components/shadcn/ui/textarea"; +import { Button } from "@/components/shadcn/ui/button"; +import { api } from "@/trpc/react"; +import { toast } from "sonner"; + +export default function Page() { + const [title, setTitle] = useState(""); + const [description, setDescription] = useState(""); + + const createTicket = api.tickets.create.useMutation(); + + async function runCreateTicket() { + if (title.length > 3 && description.length > 10) { + const result = await createTicket.mutateAsync({ title, description }); + if (result.success) { + toast.success("Ticket created successfully!"); + console.log( + "created ticket with ID " + + result.ticketID + + " and chat with ID " + + result.chatID + ); + } + } else { + toast.error("Your title or description is too short! Please try again."); + } + } + + return ( +
+
+

New Ticket

+
+
+ + setTitle(e.target.value)} /> +
+
+ +