Migrate front tRPC to api routes

apps/web/.eslintrc.cjs

@@ -6,11 +6,12 @@ const config = {
     project: true,
     tsconfigRootDir: __dirname,
   },
-  plugins: ["@typescript-eslint"],
+  plugins: ["@typescript-eslint", "drizzle"],
   extends: [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/strict-type-checked",
     "plugin:@typescript-eslint/stylistic-type-checked",
+    "plugin:drizzle/all",
     "plugin:prettier/recommended",
   ],
   rules: {

apps/web/package.json

@@ -13,9 +13,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "@auth/drizzle-adapter": "^0.8.0",
+    "@auth/drizzle-adapter": "^0.8.2",
     "@hookform/resolvers": "^3.3.4",
-    "@mux/mux-node": "^7.3.3",
+    "@mux/mux-node": "^7.3.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -26,55 +26,52 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toggle": "^1.0.3",
     "@t3-oss/env-nextjs": "^0.9.2",
-    "@tanstack/react-query": "^4.32.6",
-    "@tanstack/react-query-devtools": "^5.28.3",
-    "@trpc/client": "^10.37.1",
-    "@trpc/next": "^10.37.1",
-    "@trpc/react-query": "^10.37.1",
-    "@trpc/server": "^10.37.1",
-    "@vercel/postgres": "^0.7.2",
+    "@tanstack/react-query": "^5.29.2",
+    "@tanstack/react-query-devtools": "^5.29.2",
+    "@total-typescript/ts-reset": "^0.5.1",
+    "@vercel/postgres": "^0.8.0",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "drizzle-orm": "^0.30.1",
+    "clsx": "^2.1.0",
+    "drizzle-orm": "^0.30.8",
     "drizzle-zod": "^0.5.1",
-    "geist": "^1.0.0",
+    "geist": "^1.3.0",
     "lucide-react": "^0.290.0",
-    "next": "^14.0.0",
-    "next-auth": "^4.23.0",
+    "next": "^14.2.2",
+    "next-auth": "^4.24.7",
     "next-themes": "^0.2.1",
-    "pg": "^8.11.3",
+    "pg": "^8.11.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.51.0",
-    "superjson": "^1.13.1",
+    "react-hook-form": "^7.51.3",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.22.4"
+    "zod": "^3.22.5"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.2.2",
-    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
-    "@types/eslint": "^8.44.2",
+    "@testing-library/react": "^14.3.1",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/eslint": "^8.56.10",
     "@types/node": "20.8.9",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.14",
-    "dotenv-cli": "^7.3.0",
-    "drizzle-kit": "^0.20.14",
-    "eslint": "^8.52.0",
-    "eslint-config-next": "^14.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "autoprefixer": "^10.4.19",
+    "dotenv-cli": "^7.4.1",
+    "drizzle-kit": "^0.20.15",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-drizzle": "^0.2.3",
+    "eslint-plugin-prettier": "^5.1.3",
     "jsdom": "^24.0.0",
-    "postcss": "^8.4.27",
-    "prettier": "^3.0.0",
-    "prettier-plugin-tailwindcss": "^0.5.4",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6",
-    "vitest": "^1.4.0"
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "vitest": "^1.5.0"
   },
   "ct3aMetadata": {
     "initVersion": "7.20.2"

apps/web/src/app/dashboard/[name]/overview/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { SearchIcon } from "lucide-react";
 import { StretchHorizontal } from "lucide-react";
 import { usePathname } from "next/navigation";
@@ -11,12 +12,14 @@ import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Toggle } from "~/components/ui/toggle";
 import projectMockData from "~/lib/mock/organizationOverview";
-import { api } from "~/trpc/react";
+import { getOwnOrganizations } from "~/server/actions/organization";
 
 export default function Dashboard() {
   // TODO: replace mocks with db queries
-  const { data: _organizations } =
-    api.organization.getOwnOrganizations.useQuery();
+  const { data: _organizations } = useQuery({
+    queryKey: ["organizations"],
+    queryFn: () => getOwnOrganizations(),
+  });
 
   const organizationFromPathname = usePathname().split("/").at(2);
   const [listDisplay, setListDisplay] = useState(false);

apps/web/src/app/dashboard/[name]/route.ts

@@ -0,0 +1,8 @@
+"use client";
+
+import { redirect } from "next/navigation";
+import type { NextRequest } from "next/server";
+
+export async function GET(_request: NextRequest, { name }: { name: string }) {
+  redirect(`/dashboard/${name}/overview`);
+}

apps/web/src/app/dashboard/layout.tsx

@@ -1,21 +1,14 @@
-import { redirect } from "next/navigation";
 import { type PropsWithChildren } from "react";
 
 import Dashnav from "~/components/dashboard/dashnav";
 import Navbar from "~/components/navbar";
-import { getServerAuthSession } from "~/server/auth";
 
 export default async function DashboardLayout({ children }: PropsWithChildren) {
-  const session = await getServerAuthSession();
-
-  if (session === null) {
-    redirect("/");
-  }
-
   return (
     <div className="flex min-h-screen flex-col gap-4">
       <div className="flex flex-col items-center justify-between border-b border-slate-200 bg-slate-100 p-2">
         <Navbar />
+
         <Dashnav />
       </div>
 

apps/web/src/app/dashboard/page.tsx

@@ -1,11 +1,9 @@
 import { redirect } from "next/navigation";
 
-import { api } from "~/trpc/server";
-
-export const dynamic = "force-dynamic";
+import { getOwnOrganizations } from "~/server/actions/organization";
 
 export default async function Dashboard() {
-  const organizations = await api.organization.getOwnOrganizations.query();
+  const organizations = await getOwnOrganizations();
   const orgNames = organizations.map((org) => org.name!);
 
   redirect(`/dashboard/${orgNames[0]}/overview`);

apps/web/src/app/layout.tsx

@@ -1,12 +1,11 @@
 import { GeistSans } from "geist/font/sans";
-import { headers } from "next/headers";
 import type { PropsWithChildren } from "react";
 
-import { SessionProvider } from "~/context/session-provider";
-import { ThemeProvider } from "~/context/theme-provider";
+import { ReactQueryProvider } from "~/providers/react-query-provider";
+import { SessionProvider } from "~/providers/session-provider";
+import { ThemeProvider } from "~/providers/theme-provider";
 import { getServerAuthSession } from "~/server/auth";
 import "~/styles/globals.css";
-import { TRPCReactProvider } from "~/trpc/react";
 
 export const metadata = {
   title: "Editthing",
@@ -20,7 +19,7 @@ export default async function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en" className={GeistSans.className} suppressHydrationWarning>
       <body>
-        <TRPCReactProvider headers={headers()}>
+        <ReactQueryProvider>
           <SessionProvider session={session}>
             <ThemeProvider
               attribute="class"
@@ -31,7 +30,7 @@ export default async function RootLayout({ children }: PropsWithChildren) {
               {children}
             </ThemeProvider>
           </SessionProvider>
-        </TRPCReactProvider>
+        </ReactQueryProvider>
       </body>
     </html>
   );

apps/web/src/components/navbar.tsx

@@ -16,7 +16,8 @@ import {
 } from "./ui/dropdown-menu";
 
 export default function Navbar() {
-  const isOnDashboard = usePathname().includes("/dashboard");
+  const pathname = usePathname();
+  const isOnDashboard = pathname.includes("/dashboard");
 
   const session = useSession();
 

apps/web/src/components/organization-select.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { Plus } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { useState } from "react";
@@ -19,7 +20,10 @@ import {
   type InsertOrganization,
   insertOrganizationSchema,
 } from "~/lib/validators/organization";
-import { api } from "~/trpc/react";
+import {
+  createOrganization,
+  getOwnOrganizations,
+} from "~/server/actions/organization";
 
 import { Button } from "./ui/button";
 import {
@@ -42,17 +46,21 @@ import { Input } from "./ui/input";
 type OrganizationForm = Omit<InsertOrganization, "owner">;
 
 export default function OrganizationSelect() {
+  const pathname = usePathname();
+
   const organizationFromPathname = decodeURIComponent(
     // @ts-expect-error Since we are taking something from a pathname there has to be something
-    usePathname().split("/").at(2),
+    pathname.split("/").at(2),
   );
 
   const router = useRouter();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const { data: organizations } =
-    api.organization.getOwnOrganizations.useQuery();
+  const { data: organizations, refetch } = useQuery({
+    queryKey: ["organizations"],
+    queryFn: () => getOwnOrganizations(),
+  });
 
   function selectOrganization(orgId: string) {
     router.push(`/dashboard/${orgId}/`);
@@ -65,18 +73,24 @@ export default function OrganizationSelect() {
     },
   });
 
-  const { mutate: createOrganization } =
-    api.organization.createOrganization.useMutation({
-      onSuccess: (data) => {
-        if (!!data) {
-          router.push(`/dashboard/${data.name}/overview`);
-        }
-      },
-    });
+  const { mutate: createOrganizationMutation } = useMutation<
+    InsertOrganization | undefined,
+    Error,
+    InsertOrganization
+  >({
+    mutationKey: ["create", "organization"],
+    mutationFn: async (insertData) => createOrganization(insertData),
+    onSuccess: (data) => {
+      if (!!data) {
+        router.push(`/dashboard/${data.name}/overview`);
+        setIsModalOpen(false);
+        refetch();
+      }
+    },
+  });
 
   const onSubmit: SubmitHandler<OrganizationForm> = (data) => {
-    createOrganization({ name: data.name });
-    setIsModalOpen(false);
+    createOrganizationMutation({ name: data.name });
   };
 
   const onError: SubmitErrorHandler<OrganizationForm> = (error) => {

apps/web/src/lib/validators/organization.ts

@@ -1,4 +1,4 @@
-import { createInsertSchema } from "drizzle-zod";
+import { createInsertSchema, createSelectSchema } from "drizzle-zod";
 import { z } from "zod";
 
 import { organizations } from "~/server/db/schema";
@@ -12,9 +12,12 @@ export const insertOrganizationSchema = createInsertSchema(organizations)
       .string()
       .min(3, "Name must contain at least 3 characters")
       .refine((name) => orgNameRegex.test(name), {
-        message:
-          "Name can only contain alphanumeric characters and '-' sign",
+        message: "Name can only contain alphanumeric characters and '-' sign",
       }),
   });
 
 export type InsertOrganization = z.infer<typeof insertOrganizationSchema>;
+
+export const organizationSchema = createSelectSchema(organizations);
+
+export type Organization = z.infer<typeof organizationSchema>;

apps/web/src/lib/validators/project.ts

@@ -0,0 +1,12 @@
+import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import { z } from "zod";
+
+import { projects } from "~/server/db/schema";
+
+export const insertProjectSchema = createInsertSchema(projects);
+
+export type InsertProject = z.infer<typeof insertProjectSchema>;
+
+export const projectSchema = createSelectSchema(projects);
+
+export type Project = z.infer<typeof projectSchema>;