Build a Finance SaaS Platform -12（Edit Sheet）

日常练习
Word count: 1.5k   |   Reading time≈ 9 min

Add get id API(Server)

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
...
.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: accounts.id,
          name: accounts.name,
        })
        .from(accounts)
        .where(
          and(
            eq(accounts.userId, auth.userId),
            eq(accounts.id, id)
        ),
      );

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

Add get id API(client)

Add features/accounts/api/use-get-account.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
import { useQuery } from "@tanstack/react-query";

import { client } from "@/lib/hono"

export const useGetAccount = (id?: string ) => {
  const query = useQuery({
    enabled: !!id,
    queryKey: ["accounts", { id }],
    queryFn: async () => {
      const res = await client.api.accounts[":id"].$get({
        param: { id }
      });
      
      if(!res.ok){
        throw new Error("Failed to fetch account");
      }

      const { data } = await res.json();
      return data;
    },
  });

  return query;
};

Add get id Hook

Add features/accounts/hooks/use-open-account.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { create } from "zustand";

type OpenAccountState = {
  id?: string;
  open: boolean;
  onOpen: (id: string) => void;
  onClose: () => void;
};

export const useOpenAccount = create<OpenAccountState>((set) => ({
  id: undefined,
  open: false,
  onOpen: (id: string) => set({ open: true, id }),
  onClose: () => set({ open: false, id:undefined }),
}));

Add Edit Sheet

Add features/accounts/components/edit-account-sheet.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { z } from "zod";
import { insertAccountSchema } from "@/db/schema";
import { Loader2 } from "lucide-react";

import { useGetAccount } from "@/features/accounts/api/use-get-account";
import { useEditAccount } from "@/features/accounts/api/use-edit-account";
import { useOpenAccount } from "@/features/accounts/hooks/use-open-account";
import { 
  Sheet, 
  SheetContent, 
  SheetDescription, 
  SheetHeader, 
  SheetTitle  } from "@/components/ui/sheet";

import { AccountForm } from "@/features/accounts/components/account-form"

const formSchema = insertAccountSchema.pick({
  name: true,
});

type FormValues = z.input<typeof formSchema>;

export  function EditAccountSheet() {
    const { open, onClose,id } = useOpenAccount();

    const accountQuery = useGetAccount(id);
    const editMutation = useEditAccount(id);

    const isPending = editMutation.isPending;
    const isLoading = accountQuery.isLoading;

    const onSubmit = (values: FormValues)=> {
      editMutation.mutate(values,{
        onSuccess: ()=>{
          onClose();
        }
      });
    };

    const defaultValues = accountQuery.data? {
      name: accountQuery.data.name,
    } : {
      name: "",
    };

    return (
      <Sheet open={open} onOpenChange={onClose}>
        <SheetContent className="space-y-4">
          <SheetHeader>
            <SheetTitle>Edit Account</SheetTitle>
            <SheetDescription>
              Edit an existing account.
            </SheetDescription>
          </SheetHeader>
          {isLoading ? (
            <div className="absolute inset-0 flex item-center justify-center">
              <Loader2 className="size-4 text-muted-foreground animate-spin" />
            </div>
          ):(
            <AccountForm
              id={id}
              onSubmit={onSubmit}
              disabled={isPending}
              defaultValues={defaultValues}
          />
          )}
        </SheetContent>
      </Sheet>
    );
  }

Add sheet to Provider

Modify providers/sheet-provider.tsx

1
2
3
4
5
6
7
8
9
10
11
"use client";
...
import { EditAccountSheet } from "@/features/accounts/components/edit-account-sheet";
...
    <>
...
      <EditAccountSheet />
    </>
  );
};

Install dropdown-menu

1
npx shadcn@latest add dropdown-menu

Add Action component

Add app/(dashboard)/accounts/actions.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
"use client"

import { Edit, MoreHorizontal } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useOpenAccount } from "@/features/accounts/hooks/use-open-account";

type Props = {
  id: string;
}

export const Actions = ({ id }: Props) => {
  const { onOpen } = useOpenAccount();

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="size-8 p-0">
            <MoreHorizontal className="size-4"/>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem 
            disabled={false}
            onClick={() => onOpen(id)}
          >
            <Edit className="size-4 mr-2"/>
            Edit
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  );
}

Modify Column

Modify app/(dashboard)/accounts/columns.tsx:

1
2
3
4
5
6
...
 {
    id: "actions",
    cell: ({ row }) => <Actions id={row.original.id} />
  }
...

Add Patch 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
...
.patch(
    "/:id",
    clerkMiddleware(),
    zValidator(
      "param",
      z.object({
        id: z.string().optional(),
      })
    ),
    zValidator(
      "json",
      insertAccountSchema.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(accounts)
        .set(values)
        .where(
          and(
            eq(accounts.userId, auth.userId),
            eq(accounts.id, id),
          )
        )
        .returning();

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

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

Add Client API

Add features/accounts/api/use-edit-account.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
import { InferRequestType,InferResponseType } from "hono";
import { toast } from "sonner";
import { useMutation, useQueryClient } from "@tanstack/react-query";

import { client } from "@/lib/hono";

type ResponseType = InferResponseType<typeof client.api.accounts[":id"]["$patch"]>;
type RequestType = InferRequestType<typeof client.api.accounts[":id"]["$patch"]>["json"];

export const useEditAccount = (id?:string) => {
  const queryClient = useQueryClient();

  const mutation = useMutation<
    ResponseType,
    Error,
    RequestType
  >({
    mutationFn: async (json) => {
      const response = await client.api.accounts[":id"]["$patch"]({
        json,
        param: { id },
      });
      return response.json();
    },
    onSuccess: () => {
      toast("Account updated!");
      queryClient.invalidateQueries({ queryKey:["accounts", { id }]});
      queryClient.invalidateQueries({ queryKey:["accounts"]});
      // TODO: Invalidate Summary and transactions
    },
    onError: () => {
      toast("Failed to edit account")
    },
  });

  return mutation;
}

Add Delete 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
...
.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(accounts)
        .where(
          and(
            eq(accounts.userId, auth.userId),
            eq(accounts.id, id),
          )
        )
        .returning({
          id: accounts.id,
        });

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

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

Add Client API

Add features/accounts/api/use-delete-account.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
import { InferRequestType,InferResponseType } from "hono";
import { toast } from "sonner";
import { useMutation, useQueryClient } from "@tanstack/react-query";

import { client } from "@/lib/hono";

type ResponseType = InferResponseType<typeof client.api.accounts[":id"]["$delete"]>;

export const useDeleteAccount = (id?:string) => {
  const queryClient = useQueryClient();

  const mutation = useMutation<
    ResponseType,
    Error
  >({
    mutationFn: async (json) => {
      const response = await client.api.accounts[":id"]["$delete"]({
        param: { id },
      });
      return response.json();
    },
    onSuccess: () => {
      toast("Account deleted!");
      queryClient.invalidateQueries({ queryKey:["accounts", { id }]});
      queryClient.invalidateQueries({ queryKey:["accounts"]});
      // TODO: Invalidate Summary and transactions
    },
    onError: () => {
      toast("Failed to delete account")
    },
  });

  return mutation;
}

Add Actions Item:

Modify app/(dashboard)/accounts/actions.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
...
import { useDeleteAccount } from "@/features/accounts/api/use-delete-account";
import { useConfirm } from "@/hooks/use-confirm";
...
  const [ConfirmDialog, confirm] = useConfirm(
    "Are you sure?",
    "You are about to delete this transaction"
  );

  const deleteMutation = useDeleteAccount(id);
  const { onOpen } = useOpenAccount();

  const handleDelete = async () => {
    const ok = await confirm();

    if (ok) {
      deleteMutation.mutate();
    }
  }
 ...
           <DropdownMenuItem 
            disabled={deleteMutation.isPending}
            onClick={handleDelete}
          >
            <Trash className="size-4 mr-2"/>
            Delete
          </DropdownMenuItem>
 ...

请我喝杯咖啡吧~

支付宝
微信