Build a Finance SaaS Platform -10 (Data Table Action)

日常练习

Add Pagenation

Modify components/data-table.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
...
import {
...
  getPaginationRowModel,
...
} from "@tanstack/react-table"
...
...
const table = useReactTable({
...
    getPaginationRowModel: getPaginationRowModel(),
...
  })
...
return (
    <div>
      <div className="rounded-md border">
        ...
      </div>
      <div className="flex items-center justify-end space-x-2 py-4">
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          Previous
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          Next
        </Button>
      </div>
    </div>
  )
...
More...

Build a Finance SaaS Platform -9 (Accounts Page)

日常练习

Install Card

1
npx shadcn@latest add card

Add Accounts Page

Add app/(dashboard)/accounts/page.tsx：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
"use client";

import { Plus } from "lucide-react";
import { useNewAccount } from "@/features/accounts/hooks/use-new-account";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { Payment, columns } from "./columns";
import { DataTable } from "@/components/data-table";

const data: Payment[] = [
  { 
    id: "728ed52f",
    amount: 100,
    status: "pending",
    email: "[email protected]",
  },
];

const AccountsPage = ()=> {
  const newAccount = useNewAccount();

  return (
    <div className="max-w-screen-2xl mx-auto w-full pb-10 -mt-24">
      <Card className="border-none drop-shadow-sm">
        <CardHeader className="gap-y-2 lg:flex-row lg:items-center lg:justify-between">
          <CardTitle className="text-xl line-clamp-1">
            Account Page
          </CardTitle>
          <Button onClick={newAccount.onOpen} size="sm">
            <Plus className="size-4 mr-2" />
            Add New
          </Button>
        </CardHeader>
        <CardContent>
          <DataTable columns={columns} data={data} />
        </CardContent>
      </Card>
    </div>
  );
};

export default AccountsPage;
More...

Build a Finance SaaS Platform -7 （Post Method）

日常练习

Install drizzle-zod

1
2
npm i drizzle-zod
npm i @hono/zod-validator

Install cuid2

1
npm install --save @paralleldrive/cuid2

Add Post Method

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

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 {accounts, insertAccountSchema} from "@/db/schema";
import { eq } 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: accounts.id,
      name: accounts.name,
    }).from(accounts)
    .where(eq(accounts.userId, auth.userId));

    return c.json({ accounts: data });
  })
  .post(
    "/",
    clerkMiddleware(), 
    zValidator('json',insertAccountSchema.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(accounts).values({
        id: createId(),
        userId: auth.userId,
        ...values,
      }).returning();

      return c.json({ data });
    })

export default app;

移除盒子 - 区间DP算法练习

当日所学

题目

Leetcode 546. 移除盒子

给出一些不同颜色的盒子 boxes ，盒子的颜色由不同的正数表示。

你将经过若干轮操作去去掉盒子，直到所有的盒子都去掉为止。每一轮你可以移除具有相同颜色的连续 k 个盒子（k >= 1），这样一轮之后你将得到 k * k 个积分。

返回 你能获得的最大积分和 。

示例 1：

1
2
3
4
5
6
7
8
9
输入：boxes = [1,3,2,2,2,3,4,3,1]
输出：23
解释：
[1, 3, 2, 2, 2, 3, 4, 3, 1]
----> [1, 3, 3, 4, 3, 1] (3*3=9 分)
----> [1, 3, 3, 3, 1] (1*1=1 分)
----> [1, 1] (3*3=9 分)
----> [] (2*2=4 分)

示例 2：

1
2
3
输入：boxes = [1,1,1]
输出：9

示例 3：

1
2
输入：boxes = [1]
输出：1
More...

Build a Finance SaaS Platform -5 (Database Neon)

日常练习

Sign up Neon

Go to https://neon.tech/ ，Sign up，and get sql connetion string and add it to .env:

1
DATABASE_URL=postgresql://xxxx

Install drizzle-orm

1
2
npm i drizzle-orm @neondatabase/serverless
npm i -D drizzle-kit

Add Drizzle config

Add db/drizzle.ts

1
2
3
4
5
6
import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';

export const sql = neon(process.env.DATABASE_URL!);
export const db = drizzle(sql);

More...

Build a Finance SaaS Platform -3 (Header)

日常练习

Add Header

Add components/header.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react'
import HeaderLogo from './header-logo'
import Navigation from './navigation'

export default function Header() {
  return (
    <div className='bg-gradient-to-b from-blue-700 to-blue-500 px-4 py-8 lg:px-14 pb-36'>
      <div className='max-w-screen-2xl mx-auto'>
        <div className='w-full flex items-center justify-between mb-14'>
          <div className='flex items-center lg:gap-x-16'>
            <HeaderLogo />
            <Navigation />
          </div>
        </div>
      </div>
    </div>
  )
}

More...

请我喝杯咖啡吧~

支付宝
微信