Build a Finance SaaS Platform -13 (Category Page)

Modify DB Schema

Modify db/schema.ts

...
export const categories = pgTable("categories", {
  id: text("id").primaryKey(),
  plaidId: text("plaid_id"),
  name: text("name").notNull(),
  userId: text("user_id").notNull(),
})

export const insertCategoriesSchema = createInsertSchema(categories);
...

run script:

npm run db:generate
npm run db:migrate
npm run db:studio  

Add Server API

Add app/api/[[...route]]/categories.ts

import { z } from "zod"
import { Hono } from "hono";
import { zValidator } from "@hono/zod-validator";
import { createId } from "@paralleldrive/cuid2";
import { clerkMiddleware, getAuth } from "@hono/clerk-auth";

import { db } from "@/db/drizzle";
import { categories, insertCategoriesSchema} from "@/db/schema";
import { and, eq, inArray } from "drizzle-orm";

const app = new Hono()
  .get("/", clerkMiddleware(), async (c) => {
    const auth = getAuth(c);
    
    if( !auth?.userId ) {
      return c.json({ error:"Unauthorized!"}, 401);
    }

    const data = await db.select({
      id: categories.id,
      name: categories.name,
    }).from(categories)
    .where(eq(categories.userId, auth.userId));

    return c.json({ data });
  })
  .get(
    "/:id",
    zValidator("param",z.object({ 
      id: z.string().optional(),
    })),
    clerkMiddleware(),
    async (c) => {
      const auth = getAuth(c);
      const { id } = c.req.valid("param");

      if (!id) {
        return c.json({ error: "Missing id!" }, 400);
      }

      if (!auth?.userId) {
        return c.json({ error: "Unauthorized!" }, 401);
      }

      const [data] = await db
        .select({
          id: categories.id,
          name: categories.name,
        })
        .from(categories)
        .where(
          and(
            eq(categories.userId, auth.userId),
            eq(categories.id, id)
        ),
      );

      if (!data) {
        return c.json({ error: "Not Found!"}, 404);
      };
  
      return c.json({ data });
    }
  )
  .post(
    "/",
    clerkMiddleware(), 
    zValidator('json',insertCategoriesSchema.pick({
      name:true,
    })),
    async(c) => {
      const auth = getAuth(c);
      const values = c.req.valid("json");

      if(!auth?.userId){
        return c.json({ error:"Unauthorized!"}, 401);
      }

      const data = await db.insert(categories).values({
        id: createId(),
        userId: auth.userId,
        ...values,
      }).returning();

      return c.json({ data });
    })
  .post(
    "/bulk-delete",
    clerkMiddleware(),
    zValidator(
      "json",
      z.object({
        ids: z.array(z.string())
      }),
    ),
    async (c) =>{
      const auth = getAuth(c);
      const values = c.req.valid("json");

      if (!auth?.userId) {
        return c.json({ error: "Unauthorized"}, 401 );
      }

      const data = await db
        .delete(categories)
        .where(
          and(
            eq(categories.userId, auth.userId),
            inArray(categories.id, values.ids)
          )
        )
        .returning({
          id: categories.id,
        });
      
      return c.json({ data });
    },
  )
  .patch(
    "/:id",
    clerkMiddleware(),
    zValidator(
      "param",
      z.object({
        id: z.string().optional(),
      })
    ),
    zValidator(
      "json",
      insertCategoriesSchema.pick({
        name: true,
      })
    ),
    async (c) => {
      const auth = getAuth(c);
      const { id } = c.req.valid("param");
      const values = c.req.valid("json");

      if (!id){
        return c.json({ error: "Missing id"}, 401);
      }

      if (!auth?.userId) {
        return c.json({ error: "Unauthorized"},401);
      }

      const [data] = await db
        .update(categories)
        .set(values)
        .where(
          and(
            eq(categories.userId, auth.userId),
            eq(categories.id, id),
          )
        )
        .returning();

      if (!data) {
        return c.json({ error: "Not Found"}, 404);
      }

      return c.json({ data });
    }
  )
  .delete(
    "/:id",
    clerkMiddleware(),
    zValidator(
      "param",
      z.object({
        id: z.string().optional(),
      })
    ),
    async (c) => {
      const auth = getAuth(c);
      const { id } = c.req.valid("param");

      if (!id){
        return c.json({ error: "Missing id"}, 401);
      }

      if (!auth?.userId) {
        return c.json({ error: "Unauthorized"},401);
      }

      const [data] = await db
        .delete(categories)
        .where(
          and(
            eq(categories.userId, auth.userId),
            eq(categories.id, id),
          )
        )
        .returning({
          id: categories.id,
        });

      if (!data) {
        return c.json({ error: "Not Found"}, 404);
      }

      return c.json({ data });
    }
  );
export default app;

Modify app/api/[[...route]]/route.ts

import { Hono } from 'hono';
import { handle } from 'hono/vercel';

import accounts from "./accounts";
import categories from "./categories";

export const runtime = 'edge'

const app = new Hono().basePath('/api')

const routes = app
  .route("/accounts", accounts)
  .route("/categories", categories);

export const GET = handle(app);
export const POST = handle(app);
export const PATCH = handle(app);
export const DELETE = handle(app);

export type AppType = typeof routes;

Other New Files:

app/(dashboard)/categories/actions.tsx
app/(dashboard)/categories/columns.tsx
app/(dashboard)/categories/page.tsx
app/api/[[...route]]/categories.ts
features/categories/api/use-bulk-delete-categories.ts
features/categories/api/use-create-category.ts
features/categories/api/use-delete-category.ts
features/categories/api/use-edit-categorty.ts
features/categories/api/use-get-categories.ts
features/categories/api/use-get-category.ts
features/categories/components/category-form.tsx
features/categories/components/edit-category-sheet.tsx
features/categories/components/new-category-sheet.tsx
features/categories/hooks/use-new-category.ts
features/categories/hooks/use-open-category.ts